Optimiser la gestion des fichiers CSS et Javascript de votre site

Pour opti­mi­ser les temps de char­ge­ment de votre site, il y a de nombreuses mani­pu­la­tions à faire et certains plugins sont incon­tour­nables. Si je suis toujours réser­vé sur l’uti­li­sa­tion d’un plugin de cache pour un site moyen­ne­ment fréquen­té, gérer effi­ca­ce­ment les fichiers Javas­cript et CSS intro­duits par les nombreux plugins que vous utili­sez sûre­ment néces­site une exten­sion adaptée.

JS CSS Script Opti­mi­zer va combi­ner entre eux fichiers Javas­cript et CSS pour que le navi­ga­teur du visi­teur n’ait à char­ger que deux fichiers plutôt qu’une multi­tude et en queue de char­ge­ment tant qu’à faire – je résume, vous pour­rez trou­ver des choses plus précises sur la Toile. Vous pouvez rajou­ter des fichiers « hors » instal­la­tion Word­Press ou en reti­rer en cas d’incompatibilité.

BWP Mini­fy fait peu ou prou la même chose en « mini­fiant » en plus les fichiers pour les servir compac­tés, le navi­ga­teur les décom­pac­tant à la volée. L’extension gère aussi un cache pour les fichiers qu’il compacte. J’ai une préfé­rence pour celui-ci, les outils d’ana­lyse de vitesse de char­ge­ment de site deman­dant la mini­fi­ca­tion des fichiers.

Options

JS CSS Script Optimizer

bwp-minify

BWP Mini­fy

Remarques

Les plugins et thèmes doivent suivre des règles très strictes quant à la gestion de fichiers Javas­cript pour une opti­mi­sa­tion opti­male par Word­Press. Mais ce n’est pas toujours le cas. Il se peut qu’a­près l’ins­tal­la­tion d’une des deux exten­sions présen­tées, une des autres exten­sionss utili­sant Javas­cript ne fonc­tionne plus. Pensez alors à la mettre en liste « noire » dans les options.
Vous pouvez tester « avant/​après » sur un site comme GMetrix​.com.

Autres solutions

De nombreuses exten­sions de cache proposent une mini­fi­ca­tion des fichiers concernés.


site de l’extension : https://​word​press​.org/​e​x​t​e​n​d​/​p​l​u​g​i​n​s​/​j​s​-​c​s​s​-​s​c​r​i​p​t​-​o​p​t​i​m​i​z​er/ – version testée : 0.2.3

site de l’extension : https://​word​press​.org/​e​x​t​e​n​d​/​p​l​u​g​i​n​s​/​b​w​p​-​m​i​n​i​fy/ – version testée : 1.2.2

Autoptimize

Mise à jour du 10/​02/​2017 : au final, Autop­ti­mize est deve­nue l’extension de réfé­rence dans le genre. C’est celle que j’utilise en général.


site de l’extension : https://​word​press​.org/​p​l​u​g​i​n​s​/​a​u​t​o​p​t​i​m​i​ze/ – version testée : 2.1.0

Dernière modification: 26 avril 2020

Commentaires

Aurélien Debord
Aurélien Debord 

Bonjour ! Chez moi bwp mini­fy fait sauter les css… Je vais tester l’autre. Merci pour l’info.

Li-An

L’uti­li­sa­tion de ces plugins se révèle toujours frus­trante. J’es­père que vous trou­ve­rez votre bonheur :-)

noaneo

Bonjour, avez vous testé ce plugin Depen­den­cy Mini­fi­ca­tion ? http://​word​press​.org/​p​l​u​g​i​n​s​/​d​e​p​e​n​d​e​n​c​y​-​m​i​n​i​f​i​c​a​t​i​on/ Si oui qu’en pensez vous ? Merci

    Li-An

    J’ai dû le tester mais visi­ble­ment, il devait donner des résul­tats moins inté­res­sants que ceux que j’uti­lise ou être incom­pa­tibles avec un de mes plugins. Je refe­rai un test. Je vais le rajou­ter dans la liste, tiens.

      noaneo

      mieux JS CSS Script Optimizer ?

        Li-An

        Il faut tester :-) Il n’y a pas de mystère.

          noaneo

          je suis d’ac­cord mais n’ayant peu de connais­sance, dans mini­fy, je lis les commen­taires des autres utili­sa­teurs via Google pour me faire une idée avant d’ins­tal­ler 2 ou 3 plugins de ce style pour tester Merci.

noaneo

Bonjour, j’ai déci­dé d’uti­li­ser Autop­ti­mize, mais Google via pages­peed insights me dit « Élimi­ner les codes JavaS­cript et CSS qui bloquent l’af­fi­chage du conte­nu au-dessus de la ligne de flot­tai­son » Peut être que je dois utili­ser ceci qui est expli­qué dans la faq du plugin What is the use of « inline and defer CSS » ? CSS in gene­ral should go in the head of the docu­ment. Recent­ly a.o. Google star­ted promo­ting defer­ring non-essen­tial CSS, while inli­ning those styles needed to build the page above the fold. This is espe­cial­ly impor­tant to render pages as quick­ly as possible on mobile devices. As from Autop­ti­mize 1.9.0 this is easy ; select « inline and defer CSS », paste the block of « above the fold CSS » in the input field (text area) and you’re good to go ! Mais même avec un traduc­teur ( Bing ) je ne comprends pas, connais­sez vous un site qui explique la procé­dure en fran­çais ? Merci

    Li-An
    Auteur

    Je n’ai pas de réponse à ça : posez toujours la ques­tion dans le forum officiel.

      noaneo

      je ne poses pas dans le forum offi­ciel, vu que la réponse sera en anglais, c’est ça qui bloque ma compré­hen­sion. du problème. Merci, je vais cher­cher, j’ai déjà trou­vé ça https://​www​.wpfas​ter​.org/​b​l​o​g​/​h​o​w​-​t​o​-​u​s​e​-​a​u​t​o​p​t​i​m​i​z​e​-​i​n​l​i​n​e​-​a​n​d​-​d​e​f​e​r​-​c​s​s​-​o​p​t​ion

        Li-An
        Auteur

        Ah d’ac­cord, l’op­tion existe mais c’est un truc super lour­dingue à mettre en place ! Je suppose que c’est pour cela que ce n’est pas déve­lop­pé dans la page du plugin.

          noaneo

          oui, j’ai essayé mais je trouve plusieurs balises text/​css alors je ne sais pas si je dois tout mettre. c’est en testant mon site là, je viens de le faire pour votre site https://​www​.google​.com/​w​e​b​m​a​s​t​e​r​s​/​t​o​o​l​s​/​m​o​b​i​l​e​-​f​r​i​e​n​d​l​y​/​?​u​r​l​=​h​t​t​p​w​w​w​.​e​c​h​o​d​e​s​p​l​u​g​i​n​s​.​l​i​-​a​n​.fr

Li-An
Auteur

Ça ne marche­ra pas pour mon site parce qu’il faudrait que je désac­tive mon plugin de cache et vide le cache d’Au­top­ti­mize si j’ai bien tout compris.

noaneo

Moi j’ai le plugin WP Fastest Cache donc pareil

Écrire une réponse ou un commentaire

Votre adresse email ne sera pas publiée.

Notifiez-moi les commentaires à venir via email. Vous pouvez aussi vous abonner sans commenter.