[Résolu]Comment asynchroniser un CSS

Toulibre · juillet 2022

Bonjour, quel est le code pour asynchroniser un css et plus particulièrement site.css ?

Toulibre · juillet 2022

Par exemple dans header.php je fais comme ceci :

<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/plucss.css?v=1.3.1" media="none" onload="if(media!='all')media='all'">
<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/theme.css?v=<?php echo PLX_VERSION ?>"media="none" onload="if(media!='all')media='all'">

mais je n'y arrive pas pour site.css
Merci d'avance si quelqu'un connaît le moyen d'y parvenir.

gcyrillus-nomade · juillet 2022

Bonjour,

Il existe un HOOK sur la fonction plugnsCSS , via un plugin, on pourrait faire quelque chose comme ceci en reprenant ta methode : https://github.com/gcyrillus/delaySiteCSS/tree/main

<?php
class delaySiteCSS extends plxPlugin {   
    const BEGIN_CODE = '<?php' . PHP_EOL;
    const END_CODE = PHP_EOL . '?>';

    public function __construct($default_lang) {

        # appel du constructeur de la classe plxPlugin (obligatoire)
        parent::__construct($default_lang);

        # déclaration des hooks
        $this->addHook('plxShowPluginsCss', 'plxShowPluginsCss');


    }   
    public function plxShowPluginsCss(){ 
    echo '<link rel="stylesheet" type="text/css" href="data/site.css" media="none" onload="if(media!=\'all\')media=\'all\'"  />';
                echo self::BEGIN_CODE;
?>
    return true;
<?php
        echo self::END_CODE;        
       }
}
?>

Est ce efficace ?

Cdt

Edit : autre solution possible à laquelle j'aurais du penser en premier lieu , retirer de header.php

<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/plucss.css?v=1.3.1" media="screen,print"/>
    <link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/theme.css?v=<?php echo PLX_VERSION ?>" media="screen"/>
<?php
    $plxShow->templateCss();
    $plxShow->pluginsCss();
?>

et les remettre dans footer.php .

Cordialement

Toulibre · juillet 2022

Bonjour, ton plugin fonctionne à merveille pour site.css, merci beaucoup !

<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/plucss.css?v=1.3.1" media="none" onload="if(media!='all')media='all'">
<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/theme.css?v=<?php echo PLX_VERSION ?>"media="none" onload="if(media!='all')media='all'">

ces 2 lignes de code fonctionnent très bien dans header.php ou dans footer.php avec tes 2 lignes de code de ton Edit.
J'ai une question:
Pourrais-tu faire de ton plugin qu'il prenne en charge également plucss et theme.css ?
je teste sur ce site les résultats
https://www.webpagetest.org/

gcyrillus-nomade · juillet 2022

Bonjour,

Pourrais-tu faire de ton plugin qu'il prenne en charge également plucss et theme.css ?

Je ne suis pas certain que cela soit une bonne idée, le fichier site.css est commun à tous les thèmes, alors que ces deux autres sont particulier au thème par défaut. La logique voudrais que cette modif soit faite directement dans le thème concerné comme tu le fait.

Charger les feuille de style en fin de document ne se suffirait-il pas ?

L’édit de mon post précédent voulais dire de modifier (sans plugin)
le fichier header.php

<?php if (!defined('PLX_ROOT')) exit; ?>
<!DOCTYPE html>
<html lang="<?php $plxShow->defaultLang() ?>">
<head>
    <meta charset="<?php $plxShow->charset('min'); ?>">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
    <title><?php $plxShow->pageTitle(); ?></title>
<?php
    $plxShow->meta('description');
    $plxShow->meta('keywords');
    $plxShow->meta('author');
?>

    <link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS') ?>" href="<?php $plxShow->urlPostsRssFeed($plxShow->plxMotor->mode) ?>" />
    <link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires') ?>" />
</head>

<body id="top" class="page mode-<?php $plxShow->mode(true) ?>">

    <header class="header">

        <div class="container">

            <div class="grid">

                <div class="col sml-6 med-5 lrg-4">

                    <div class="logo">
                        <h1 class="no-margin heading-small"><?php if (eval($plxMotor->plxPlugins->callHook('spanMainLinkTitle'))) return; ?></h1>
                        <h2 class="h5 no-margin"><?php $plxShow->subTitle(); ?></h2>
                    </div>

                </div>

                <div class="col sml-6 med-7 lrg-8">

                    <nav class="nav">

                        <div class="responsive-menu">
                            <label for="menu"></label>
                            <input type="checkbox" id="menu">
                            <ul class="menu">
                                <?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="#static_class #static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
                                <?php $plxShow->pageBlog('<li class="#page_class #page_status" id="#page_id"><a href="#page_url" title="#page_name">#page_name</a></li>'); ?>
                            </ul>
                        </div>

                    </nav>

                </div>

            </div>

        </div>

    </header>

    <div class="bg"></div>

et le fichier footer.php

<?php if (!defined('PLX_ROOT')) exit; ?>

    <footer class="footer">
        <div class="container">
            <p>
                <?php $plxShow->mainTitle('link'); ?> - <?php $plxShow->subTitle(); ?> &copy; 2018
            </p>
            <p>
                <?php $plxShow->lang('POWERED_BY') ?>&nbsp;<a href="<?= PLX_URL_REPO?>" title="<?php $plxShow->lang('PLUXML_DESCRIPTION') ?>">PluXml</a>
                <?php $plxShow->lang('IN') ?>&nbsp;<?php $plxShow->chrono(); ?>&nbsp;
                <?php $plxShow->httpEncoding() ?>&nbsp;-
                <a rel="nofollow" href="<?php $plxShow->urlRewrite('core/admin/'); ?>" title="<?php $plxShow->lang('ADMINISTRATION') ?>"><?php $plxShow->lang('ADMINISTRATION') ?></a>
            </p>
            <ul class="menu">
                <?php  if($plxShow->plxMotor->aConf['enable_rss']) { ?>
                <li><a href="<?php $plxShow->urlRewrite('feed.php?rss') ?>" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS'); ?>"><?php $plxShow->lang('ARTICLES'); ?></a></li>
                <?php } ?>
                <?php if($plxShow->plxMotor->aConf['enable_rss_comment']) { ?>
                    <li><a href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires'); ?>" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>"><?php $plxShow->lang('COMMENTS'); ?></a></li>
                <?php  } ?>
                <li><a href="<?php $plxShow->urlRewrite('#top') ?>" title="<?php $plxShow->lang('GOTO_TOP') ?>"><?php $plxShow->lang('TOP') ?></a></li>
            </ul>
        </div>
    </footer>

</body>
    <link rel="icon" href="<?php $plxShow->template(); ?>/img/favicon.png" />
    <link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/plucss.css?v=1.3.1" media="screen,print"/>
    <link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/theme.css?v=<?php echo PLX_VERSION ?>" media="screen"/>
<?php
    $plxShow->templateCss();
    $plxShow->pluginsCss();
?>
</html>

Ce qui correspond à peu prés à charger/afficher le contenu du document avant les feuilles de styles.

Cdt

Edit, pour faire quelque chose de plus flexible, tu peut éventuellement modifier le plugin pour qu'il recherche tous les attributs media="screen" pour les remplacer par ton astuce .

possible autre version du plugin :

<?php
class delaySiteCSS extends plxPlugin {   

    public function __construct($default_lang) {

        # appel du constructeur de la classe plxPlugin (obligatoire)
        parent::__construct($default_lang);

        # déclaration des hooks
        $this->addHook('IndexEnd','IndexEnd');
    }   

        public function IndexEnd() {
            $find = 'media="screen"';   
            echo '<?php ';?>
                ob_start();
                echo 'media="none" onload="if(media!=\'all\')media=\'all\'"'; 
                $output = str_replace('<?php echo $find; ?>', ob_get_clean(), $output);
         ?>
          <?php 
        }     
}
?>

kowalsky · juillet 2022

Salut @Toulibre,
Une question que je me pose : pourquoi souhaites-tu faire cela ? PluXml est tellement léger qu'en général le site se génère très vite sur une connexion internet normale. Cette fonctionnalité est plutôt utilisée pour les sites hyper lourds qui chargent des tonnes de choses inutiles. Ce qui peut ralentir le chargement d'un site est souvent la présence de nombreuses polices à télécharger sur des sites externes ou des images non optimisées, rarement le css (sauf s'il y en a trop)

Toulibre · juillet 2022

@gcyrillus-nomade oui j'avais bien compris au sujet de supprimer du header.php et de le mettre dans footer.php, dans les deux cas cela fonctionne (ta méthode ou la mienne).
Je testerais ce soir la variante du plugin et je t'en ferais le retour, merci

@kowalsky
je le fais pour le fun et pour supprimer les erreurs lors de tests, cela me permets également de finaliser les optimisations déjà effectuées

Toulibre · juillet 2022

@gcyrillus-nomade Bonsoir, j'ai testé toutes les possibilités évoquées ci-dessus et elles fonctionnent.
Excepté lorsque j'ai voulu utiliser ta variante, j'ai remis les attributs media="screen" dans header.php puis copié-remplacé le code du plugin variant donné. La page de mon site a alors affiché un message "erreur de code" ou un message qui y ressemble. Me suis-je mal pris dans la manipulation ? Si celui-ci parvenait à fonctionner tu atteindrais la perfectitude

gcyrillus-nomade · juillet 2022

@Toulibre je viens de te mettre sur une autre branche la variante qui fonctionne chez moi https://github.com/gcyrillus/delaySiteCSS/tree/str_replace (tester en php 8.15)
cdt,

probablement qu'une version en preg_replace serait plus appropriée , j'y jetterait un œil après le diner ou demain aprés midi.
Cdt

Toulibre · juillet 2022

@gcyrillus-nomade juste après avoir lu ton message j'ai téléchargé la variante directement sur ton dépôt et activé le plugin (après avoir supprimé la 1ère version).
testé avec les attributs media="screen" une fois dans header.php et une autre dans footer.php, rien à faire cela ne fonctionne pas de mon côté. PluXml 5.8.7, Version de PHP : 7.3.33 et Apache (infos de mon hébergeur).
le message dit : "erreur d'encodage de contenu, une erreur est survenue pendant une connexion à monsite.fr veuillez contacter les propriétaires du site web pour les informer de ce problème"

J'ai donc réinstallé la 1ère version du plugin qui fonctionne très bien et inclus dans footer.php plucss.css et theme.css
Quoiqu'il en soit tu m'as vraiment aidé et je suis satisfait ainsi, je t'en remercie

gcyrillus-nomade · juillet 2022

@Toulibre Cela à probablement à voir avec : https://forum.pluxml.org/discussion/7164/resolu-gzip-et-erreur-dencodage-de-contenu-avec-certains-plugin#latest

<?php
class delaySiteCSS extends plxPlugin {   

    public function __construct($default_lang) {

        # appel du constructeur de la classe plxPlugin (obligatoire)
        parent::__construct($default_lang);

        # déclaration des hooks
        $this->addHook('IndexBegin','IndexBegin');
        $this->addHook('IndexEnd','IndexEnd');
    }   
        // désactive de force la compression gzip si activée pour une compatibilité des plugins usant du hook indexEnd() ou hook perso similaire dans les templates
        public function  IndexBegin() {
            echo '<?php ';
?>
        $plxMotor->aConf['gzip'] ='0';
            ?>
<?php           
        }  
        public function IndexEnd() {
            $find = 'media="screen"';   
            echo '<?php ';?>
                ob_start();
                echo 'media="none" onload="if(media!=\'all\')media=\'all\'"'; 
                $output = str_replace('<?php echo $find; ?>', ob_get_clean(), $output);
         ?>
          <?php 
        }       
}
?>

Cdt

Edit, voici une version avec preg_replace . https://github.com/gcyrillus/delaySiteCSS/tree/preg_replace
elle prend aussi du coup media="screen,print" ou toutes autres valeurs sur toutes les balises <link />.

Toulibre · juillet 2022

@gcyrillus-nomade parfait, r.a.s., nickel, cela fonctionne bien maintenant.
Merci d'avoir pris le temps

Toulibre · juillet 2022

Question: le mode gzip est-il désactivé en permanence ?
Supposition: supprimer le mod_deflate detection pour que cela fonctionne correctement, s'il est présent.
cdlt

gcyrillus-nomade · juillet 2022

Question: le mode gzip est-il désactivé en permanence ?

Oui, pour l'instant je ne sais pas faire autrement.

Supposition: supprimer le mod_deflate detection pour que cela fonctionne correctement, s'il est présent.

Si tu utilises le Plugin ponctuellement à des fins de test ce n'est peut-être pas un réel soucis , si ? ( mod_deflate = htaccess si je comprend bien ton interrogation)

cdlt

Idem

Toulibre · juillet 2022

@gcyrillus-nomade j'ai adopté définitivement ton plugin, dans mon administration il y a activer gzip "oui" ou "non" alors je suppose qu'il est intégré quelque part dans le code de PluXml et qu'il est possible de tenter l'expérience de désactiver le mod_deflate, je ne sais pas où il se trouve (pas dans mon htaccess).
Ce n'est qu'une piste probable et cela permettrait éventuellement à d'autres plugins de refonctionner normalement.
cdlt

gcyrillus-nomade · juillet 2022

oki, il faut seulement se servir d'un autre point d'insertion , par exemple ThemeEndHead https://github.com/gcyrillus/delaySiteCSS/tree/preg_replace-head mais ne seront traitée que les balises link situées entre <head> et </head>

Cdt

Toulibre · juillet 2022

ces lignes:
template(); ?>/css/plucss.css?v=1.3.1" media="screen,print"/>
template(); ?>/css/theme.css?v=<?php echo PLX_VERSION ?>" media="screen"/>
<?php $plxShow->templateCss(); $plxShow->pluginsCss(); ?>

replacées comme à l'origine dans header.php.
Tout fonctionne à merveille, si cela intéresse quelqu'un au moins il n'y a aucune modification complémentaire à effectuer après avoir installé ton plugin (le dernier). Idem à la désinstallation.
Chapeau bas, merci beaucoup

[Résolu]Comment asynchroniser un CSS

Réponses