Comment optimiser JS et CSS dans PluXml.

bg62bg62 Member
octobre 2016 modifié dans Discussions générales
Quelques petits problèmes qui me 'turlupinent' depuis quelques temps.
PluXml se révèle de plus en plus performant et complet, très bonne chose donc et grands BRAVOS !!!
;)
Il est cependant fort difficile de se passer de certains plugins et, par là même, des fichiers .js ou .css qui vont avec.
Si l'on fait des tests sur:
PageSpeed Insignts : https://developers.google.com/speed/pagespeed/insights/?hl=fr
GTMetrix : https://gtmetrix.com/
et autres ...
on ne peut pas éviter les remarques du genre " Éliminer les codes JavaScript et CSS qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison " ( ... et autres ... ), " The following external resources have small response bodies. Inlining the response in HTML can reduce blocking of page rendering ", ou autres ...
Sans vouloir aller plus loin, pour l'instant serait-il possible de :
- compiler tous les appels aux feuilles de style d'un seul et même site ?
- de compiler tous les appels aux scripts JS dus aux plugins installés ?
- d'avoir, soit des mises à jour, soit un tuto, pour réussir à mettre tous les .js en ' version defer ' ?
Cela ferait gagner beaucoup de temps " serveur " notamment, et constituerait un sérieux bonus pour notre CMS préféré.
Mais comment faire, au moins pour ces deux catégories de fichiers ?
:)
@+
bg

mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -

Réponses

  • cfdevcfdev Member
    Salut @bg62 je trouve le sujet intéressant, effectivement pour une entraide maximale, je propose d'épingler un sujet du style SEO, tools et compagnie pour que l'on ait un sujet de référence? qu'en pensez vous ?

    Je suis intéressé notamment pour ces 2 messages :

    [list=*]
    [*]Éliminer les codes JavaScript et CSS qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison[/*]
    [*]Exploiter la mise en cache du navigateur[/*]
    [/list]
  • bg62bg62 Member
    @cfdev : alors on est 2 à s'y intéresser ... :)
    Car cela ne semble pas attirer les foules, ce genre de problèmes et c'est fort dommage ...
    @+

    mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -

  • bankaibankai Member
    bg62 car ce sont des points à traités à la main ^^

    Il en existe plein sous Wordpress, mais aucun n'est exceptionnels.

    J'ai optimisé mon site au fur et à mesure.
    Mobile
    [list=*]
    [*]91 / 100 Vitesse[/*]
    [*]100 / 100 Expérience utilisateur[/*]
    [/list]
    Ordinateur
    [list=*]
    [*]95 / 100[/*]
    [/list]

    Il me reste encore un peu de taf ^^
    Voici quelques outils de plus pour vous aider à travailler votre optimisation.
    http://www.yakaferci.com/
    https://www.dareboost.com/fr/home
    http://yellowlab.tools/
    http://www.brokenlinkcheck.com/
    http://contrast-finder.tanaguru.com/
  • bg62bg62 Member
    ok, vais regarder tout cela, MAIS juste pour ces deux points:
    "
    - compiler tous les appels aux feuilles de style d'un seul et même site ?
    - de compiler tous les appels aux scripts JS dus aux plugins installés ?
    "
    je pense que quand même cela devrait sefaire via PluXml et non avec des manips qui ne sont pas forcément à la portée de tous ... :)
    - rien que la fonction ' defer ' pour les 'JS" par exemple ...
    et autres ...
    @+

    mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -

  • cfdevcfdev Member
    Comment fait vous pour résoudre le Exploiter la mise en cache du navigateur ?
    j'ai essayé ces bouts de code mais ça ne fait rien visiblement:
    <?php
// fonction pour 1 semaine de cache via header
 Header("Cache-Control: must-revalidate");
 $offset = 60 * 60 * 24 * 7;
 $dateExpire = gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
 $ExpStr = "Expires: " .$dateExpire ;
 Header($ExpStr);
?>

  <!--Ajout dun meta expire -->
  <meta http-equiv="Expires" content="<?php echo $dateExpire;  ?>">
  • bankaibankai Member
    Ha ha :P

    Par le .htaccess O:)

    Voici pour optimiser tout ça ;)
    [== Indéfini ==]
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault                              "access plus 1 month"
ExpiresByType text/cache-manifest           "access plus 0 seconds"
ExpiresByType text/html                     "access plus 0 seconds"
ExpiresByType text/xml                      "access plus 0 seconds"
ExpiresByType application/xml               "access plus 0 seconds"
ExpiresByType application/json              "access plus 0 seconds"
ExpiresByType application/rss+xml           "access plus 1 hour"
ExpiresByType application/atom+xml          "access plus 1 hour"
ExpiresByType image/gif                     "access plus 1 month"
ExpiresByType image/png                     "access plus 1 month"
ExpiresByType image/jpg                     "access plus 1 month"
ExpiresByType image/jpeg                    "access plus 1 month"
ExpiresByType image/x-icon                  "access plus 1 month"
ExpiresByType video/ogg                     "access plus 1 month"
ExpiresByType audio/ogg                     "access plus 1 month"
ExpiresByType video/mp4                     "access plus 1 month"
ExpiresByType video/webm                    "access plus 1 month"
ExpiresByType text/x-component              "access plus 1 month"
ExpiresByType application/x-font-ttf        "access plus 1 month"
ExpiresByType font/opentype                 "access plus 1 month"
ExpiresByType application/x-font-woff       "access plus 1 month"
ExpiresByType application/x-font-woff2      "access plus 1 month"
ExpiresByType image/svg+xml                 "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType text/css                      "access plus 1 year"
ExpiresByType application/javascript        "access plus 1 year"
ExpiresByType text/x-javascript             "access plus 1 month"
</IfModule>
# KILL THEM ETAGS
Header unset ETag
FileETag none
#PROTECTION
<IfModule mod_headers.c>
Header unset X-Powered-By
Header add X-Powered-By "blogaddict.fr"
</IfModule>
Header set X-Permitted-Cross-Domain-Policies "none"
# ANTI CLICKJACKING
Header set X-Frame-Options "DENY"
<FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|vcf|vtt|webapp|web[mp]|woff|woff2|xml|xpi)$">
Header unset X-Frame-Options
</FilesMatch>
# PROTECTION XSS SCRIPTS IE8/9
Header set X-XSS-Protection "1; mode=block"
<FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|vcf|vtt|webapp|web[mp]|woff|woff2|xml|xpi)$">
Header unset X-XSS-Protection
</FilesMatch>
# PREVENT SNIFFING MIME IE
Header set X-Content-Type-Options "nosniff"
<IfModule mod_headers.c>
Header always set X-Content-Type-Options "nosniff"
</IfModule>
# Only allow JavaScript from the same domain to be run.
# Don't allow inline JavaScript to run.
Header set X-Content-Security-Policy "allow 'self';"
# Masquer les informations du serveur
ServerSignature Off
#Strict Transport Security
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains"
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
  • cfdevcfdev Member
    Super merci @bankai !! Dommage que c'est par le htaccess...mais le boulo est fait !
    Après s'attaquer au Éliminer les codes JavaScript et CSS qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison
  • bg62bg62 Member
    octobre 2016 modifié
    @banjai : merci l'ami ... :)
    Je vais tester tout cela !
    et ici: 
    [== Indéfini ==]
Header add X-Powered-By "blogaddict.fr"
    on laisse tel quel ??? sans rien modifier ...
    j'avais aussi vu ceci : 
    [== Indéfini ==]
ExpiresByType application/pdf               "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon                  "access plus 1 month"
    à ajouter, non ?
    Mais reste également à voir pour réussir, dans PluXml à " compiler " les appels aux divers scripts en JS, voire également aux .CSS que l'on utilise.
    Et je me pose toujours également la question : " comment implémenter la fonction ' defer ' pour le javascript ? "
    @+

    mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -

  • bg62bg62 Member
    octobre 2016 modifié
    re ... je viens de me faire 'mon' petit .htaccess perso et j'ai donc gagné ... un peu, mais pas plus :)
    Il reste toujours ces fameuses remarques notamment :
    PageSpeed Insights a écrit:
    - Éliminer les codes JavaScript et CSS qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison
    - Réduire le temps de réponse du serveur
    - En compressant votre code HTML (y compris le code JavaScript et CSS intégré), vous pouvez libérer de nombreux octets de données et réduire les délais de téléchargement et d'analyse.
    C'est là véritablement que cela semble coincer ...

    je m'étais déjà fait un p'tit délire en solo il y a quelques temps :
    http://forum.pluxml.org/viewtopic.php?id=5181
    ( je le ferme et donc = si possible, on continue ici ! )
    @+

    mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -

Connectez-vous ou Inscrivez-vous pour répondre.