PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 30/09/2016 16:33:42

bg62
Membre
Inscription : 18/05/2007
Messages : 1 782
Site Web

Comment optimiser JS et CSS dans PluXml.

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 !!!
wink
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/pag … hts/?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 ?
smile
@+
bg

Dernière modification par bg62 (11/10/2016 11:48:27)


le 'www' est fait pour communiquer et échanger, non ?
fonds d'écran   | référencement efficace | Portfolio | Fonds d'écran automobile | outils SEO | échange de liens en dur

Hors ligne

#2 10/10/2016 08:31:32

cfdev
Membre
Lieu : Provence
Inscription : 22/07/2011
Messages : 273
Site Web

Re : Comment optimiser JS et CSS dans PluXml.

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 :

  • É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


Vous voulez créer votre plugin pour pluXml? -> spxdatas est fait pour vous !
mcercle - Logiciel de gestion devis/factures/stock !

Hors ligne

#3 10/10/2016 10:13:46

bg62
Membre
Inscription : 18/05/2007
Messages : 1 782
Site Web

Re : Comment optimiser JS et CSS dans PluXml.

@cfdev : alors on est 2 à s'y intéresser ... smile
Car cela ne semble pas attirer les foules, ce genre de problèmes et c'est fort dommage ...
@+


le 'www' est fait pour communiquer et échanger, non ?
fonds d'écran   | référencement efficace | Portfolio | Fonds d'écran automobile | outils SEO | échange de liens en dur

Hors ligne

#4 10/10/2016 11:04:01

bankai
Pluxml Forever :)
Lieu : Saint-Pierre-la-cour
Inscription : 06/02/2011
Messages : 611
Site Web

Re : Comment optimiser JS et CSS dans PluXml.

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

  • 91 / 100 Vitesse

  • 100 / 100 Expérience utilisateur

Ordinateur

  • 95 / 100

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/


Mon site web : Mon blog tout simplement avec sa version de pluXml : version dev Github
Un soucis, une angoisse, une question ? le Wiki est là pour tous ici, pour le reste, on est là pour ça :-)
Suivre PluXml sur les réseaux sociaux : Google+ Twitter

Hors ligne

#5 10/10/2016 11:50:54

bg62
Membre
Inscription : 18/05/2007
Messages : 1 782
Site Web

Re : Comment optimiser JS et CSS dans PluXml.

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 ... smile
- rien que la fonction ' defer ' pour les 'JS" par exemple  ...
et autres  ...
@+


le 'www' est fait pour communiquer et échanger, non ?
fonds d'écran   | référencement efficace | Portfolio | Fonds d'écran automobile | outils SEO | échange de liens en dur

Hors ligne

#6 11/10/2016 09:19:48

cfdev
Membre
Lieu : Provence
Inscription : 22/07/2011
Messages : 273
Site Web

Re : Comment optimiser JS et CSS dans PluXml.

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;  ?>">

Vous voulez créer votre plugin pour pluXml? -> spxdatas est fait pour vous !
mcercle - Logiciel de gestion devis/factures/stock !

Hors ligne

#7 11/10/2016 09:25:51

bankai
Pluxml Forever :)
Lieu : Saint-Pierre-la-cour
Inscription : 06/02/2011
Messages : 611
Site Web

Re : Comment optimiser JS et CSS dans PluXml.

Ha ha   tongue

Par le .htaccess  angel

Voici pour optimiser tout ça  wink

[== 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

Mon site web : Mon blog tout simplement avec sa version de pluXml : version dev Github
Un soucis, une angoisse, une question ? le Wiki est là pour tous ici, pour le reste, on est là pour ça :-)
Suivre PluXml sur les réseaux sociaux : Google+ Twitter

Hors ligne

#8 11/10/2016 11:28:20

cfdev
Membre
Lieu : Provence
Inscription : 22/07/2011
Messages : 273
Site Web

Re : Comment optimiser JS et CSS dans PluXml.

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


Vous voulez créer votre plugin pour pluXml? -> spxdatas est fait pour vous !
mcercle - Logiciel de gestion devis/factures/stock !

Hors ligne

#9 11/10/2016 11:51:17

bg62
Membre
Inscription : 18/05/2007
Messages : 1 782
Site Web

Re : Comment optimiser JS et CSS dans PluXml.

@banjai : merci l'ami ... smile
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 ? "
@+

Dernière modification par bg62 (11/10/2016 12:06:52)


le 'www' est fait pour communiquer et échanger, non ?
fonds d'écran   | référencement efficace | Portfolio | Fonds d'écran automobile | outils SEO | échange de liens en dur

Hors ligne

#10 11/10/2016 17:52:49

bg62
Membre
Inscription : 18/05/2007
Messages : 1 782
Site Web

Re : Comment optimiser JS et CSS dans PluXml.

re ... je viens de me faire 'mon' petit .htaccess perso et j'ai donc gagné ... un peu, mais pas plus smile
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 ! )
@+

Dernière modification par bg62 (11/10/2016 18:11:42)


le 'www' est fait pour communiquer et échanger, non ?
fonds d'écran   | référencement efficace | Portfolio | Fonds d'écran automobile | outils SEO | échange de liens en dur

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés