Il existe plusieurs techniques pour rendre le code WordPress plus rapide \u00e0 charger, plus efficace et moins lourd.<\/p>\n\n\n\n
Avec ce guide, vous allez voir ce que nous entendons par optimisation du code WordPress. Nous verrons aussi certaines techniques d\u2019optimisation populaires : la minification, la concat\u00e9nation, et la compression GZIP.<\/p>\n\n\n\n
Que veut dire l\u2019optimisation du code pour WordPress ?<\/h2>\n\n\n\n
L\u2019un des principaux avantages d\u2019administrer un site WordPress, c\u2019est la possibilit\u00e9 d\u2019installer des th\u00e8mes et plugins de haute qualit\u00e9 pour personnaliser le contenu de votre site. <\/p>\n\n\n\n
N\u00e9anmoins, vous devez faire attention \u00e0 qualit\u00e9 des produits que vous installez sur votre site web. Ils doivent non seulement provenir de sources fiables, mais \u00e9galement suivre les directives de WordPress<\/a>.<\/p>\n\n\n\n Installer de nouveaux plugins sur votre site est une t\u00e2che qu\u2019il ne faut pas prendre \u00e0 la l\u00e9g\u00e8re car leur code peut grandement impacter les performances de votre site. <\/p>\n\n\n\n Un th\u00e8me WordPress l\u00e9ger se charge plus rapidement et est propice \u00e0 produire de meilleures performances qu\u2019un th\u00e8me charg\u00e9 en widgets graphiques et autres effets sp\u00e9ciaux. <\/p>\n\n\n\n Dans le m\u00eame esprit, il est important de ne garder que les plugins essentiels au bon fonctionnement de votre site afin de maintenir des performances optimales. <\/p>\n\n\n\n D\u00e9sinstallez et supprimez tous les plugins qui ne vous semblent pas efficaces ou dont vous n\u2019avez plus besoin. <\/p>\n\n\n\n Apr\u00e8s avoir bien r\u00e9fl\u00e9chi \u00e0 combien de plugins vous avez besoin pour votre site<\/a>, vous pouvez passer \u00e0 l\u2019\u00e9tape suivante : faire en sorte que le code \u00e0 la base de votre site WordPress soit optimis\u00e9. <\/p>\n\n\n\n Votre objectif est d\u2019\u00e9liminer tous les chargements de ressources qui ne sont pas n\u00e9cessaires, minimiser le poids des chargements restants, et optimiser et compresser vos fichiers essentiels (HTML, CSS et JavaScript pour commencer). <\/p>\n\n\n\n Pour suffit, il suffit de : <\/p>\n\n\n\n Pour y arriver, vous pouvez appliquer ces trois techniques :<\/p>\n\n\n\n La minification est la technique d\u2019optimisation qui r\u00e9duit la taille de vos fichiers. Cette technique s\u2019applique aux fichiers JavaScript, CSS, and HTML.<\/p>\n\n\n\n Lorsqu\u2019un fichier est minifi\u00e9, tous les espaces non n\u00e9cessaires, les commentaires, les retours \u00e0 la ligne ou les caract\u00e8res superflus sont retir\u00e9s du code source, r\u00e9duisant ainsi sa taille. <\/p>\n\n\n\n Si vous y r\u00e9fl\u00e9chissez, les espaces et les commentaires sont pratiques pour les d\u00e9veloppeurs, mais ils ne sont pas utiles pour l\u2019utilisateur final. En vous en d\u00e9barrassant, vous rendez le fichier certes difficile \u00e0 lire, mais aussi beaucoup plus l\u00e9ger. <\/p>\n\n\n\n Comme les fichiers minifi\u00e9s sont plus compacts, le navigateurs peut les servir \u00e0 l\u2019utilisateur final plus rapidement. <\/p>\n\n\n\n De plus, une fois que le contenu minifi\u00e9 est g\u00e9n\u00e9r\u00e9, il peut \u00eatre utilis\u00e9 pour un nombre infini de requ\u00eates. <\/p>\n\n\n\n Pour la plupart des sites WordPress, la minification n\u2019est pas la solution ultime pour un site plus rapide car la r\u00e9duction de la taille des fichiers est en g\u00e9n\u00e9ral de quelques kilooctets <\/em>par site. N\u00e9anmoins, cela d\u00e9pend du th\u00e8me et des plugins que vous utilisez. Si leur code est riche en fichiers JavaScript et CSS, vous noterez une claire am\u00e9lioration apr\u00e8s la minification. <\/p>\n\n\n\n La minification JavaScript retire tous les commentaires JavaScript (\/\/ \u2026) et tous les espaces inutiles du code source. <\/p>\n\n\n\n En g\u00e9n\u00e9ral, le code source d\u2019un fichier JavaScript ressemble l\u2019exemple ci-dessous : <\/p>\n\n\n\n Mais apr\u00e8s avoir appliqu\u00e9 la minification, le code ressemblera plus \u00e0 celui-ci : <\/p>\n\n\n\n La minification CSS retire les espaces inutiles et les commentaires de fichiers CSS (\/* \u2026 *\/).<\/p>\n\n\n\n Voici \u00e0 quoi ressemble un fichier CSS en g\u00e9n\u00e9ral :<\/p>\n\n\n\n Voici le r\u00e9sultat apr\u00e8s la minification CSS : <\/p>\n\n\n\n Les fichiers HTML peuvent aussi \u00eatre minifi\u00e9s. La minification retire les commentaires (<!– \u2026 –>), les espaces inutiles, les retours \u00e0 la ligne et le contenu similaire. <\/p>\n\n\n\n Si vous minifiez ce fichier, voici un exemple de ce \u00e0 quoi il pourra ressembler : <\/p>\n\n\n\n Il est \u00e9videmment moins lisible, mais clairement plus l\u00e9ger. <\/p>\n\n\n\n Vous pourrez trouver plus de d\u00e9tails dans notre guide : la minification expliqu\u00e9e simplement<\/a>.<\/p>\n\n\n\n D\u2019apr\u00e8s des tests de Google<\/a>, la minification peut r\u00e9duire la taille de votre page gr\u00e2ce \u00e0 une \u00e9conomie de compression de 63%.<\/p>\n\n\n\n Il y a de nombreux avantages \u00e0 l\u2019envoi de contenu minifi\u00e9 aux utilisateurs finaux. <\/p>\n\n\n\n Voici les plus importants :<\/p>\n\n\n\n En plus de la minification de fichier, vous pouvez concat\u00e9ner les fichiers CSS et JavaScript en un.<\/p>\n\n\n\n En simple, cette technique copie tout le texte des fichiers CSS (ou JavaScript), et le colle pour former un seul gros fichier<\/strong>. <\/p>\n\n\n\n Le but est d\u2019avoir un seul fichier par type (CSS ou JavaScript), m\u00eame si parfois, pour des raisons de compatibilit\u00e9, il est pr\u00e9f\u00e9rable de cr\u00e9er plusieurs gros fichiers, plut\u00f4t qu\u2019un seul gros fichier. <\/p>\n\n\n\n Avant l\u2019arriv\u00e9e du protocole HTTP\/2, la concat\u00e9nation \u00e9tait consid\u00e9r\u00e9e comme \u00e9tant la meilleure pratique, tr\u00e8s utile pour r\u00e9duire le nombre de requ\u00eates de fichiers. <\/p>\n\n\n\n D\u2019exp\u00e9rience, chez WP Rocket, nous pensons que la concat\u00e9nation n\u2019apportera pas plus que ce qu\u2019apporte le HTTP\/2.<\/p>\n\n\n\n Par exemple, lorsque vous utilisez WP Rocket, vous verrez un rappel qui recommande de ne pas activer la concat\u00e9nation des fichiers si votre site utilise HTTP\/2<\/strong>, comme dans l\u2019image qui suit. <\/p>\n\n\n\n HTTP\/2 est le protocole qui modifie la mani\u00e8re dont les donn\u00e9es sont format\u00e9es et transf\u00e9r\u00e9es entre le client et le serveur. Il se base sur une couche de trames binaires.<\/p>\n\n\n\n Cela signifie que les messages HTTP sont divis\u00e9s en trames ind\u00e9pendantes, intercal\u00e9es, puis r\u00e9assembl\u00e9s de l\u2019autre c\u00f4t\u00e9. Cela permet au client de traiter plusieurs flux de donn\u00e9es au sein de la m\u00eame requ\u00eate. <\/p>\n\n\n\n Dans ce contexte, la concat\u00e9nation devient obsol\u00e8te. <\/p>\n\n\n\n Aujourd\u2019hui, les navigateurs modernes peuvent lire les fichiers HTML, CSS et JavaScript compress\u00e9s. Pour ce faire, le meilleur moyen est la compression GZIP. <\/p>\n\n\n\n Avec la compression GZIP, vos fichiers sont \u201czipp\u00e9s\u201d et envoy\u00e9 \u00e0 travers internet en paquets bien plus petits. Cela r\u00e9duit automatiquement le temps n\u00e9cessaire pour charger ces ressources pour l\u2019utilisateur final. <\/p>\n\n\n\n Lisez notre guide complet pour comprendre la compression GZIP pour WordPress, et comment elle fonctionne.<\/a><\/p>\n\n\n\n Il existe plusieurs outils pour minifier et et compresser les fichiers. Pour une revue compl\u00e8te des outils de minification, vous pouvez aller voir notre tutoriel sur les meilleurs outils gratuits de minification CSS et JavaScript<\/a>.<\/p>\n\n\n\n Mais si vous pr\u00e9f\u00e9rez opter pour une solution compl\u00e8te, WP Rocket serait une addition formidable pour votre site.<\/a><\/p>\n\n\n\n Notre plugin d\u2019optimisation et de mise en cache applique automatiquement la compression GZIP \u00e0 vos fichiers, et offre \u00e9galement certaines fonctionnalit\u00e9s pour minifier, combiner et optimiser vos fichiers CSS et JavaScript. <\/p>\n\n\n\n D\u00e8s que WP Rocket est activ\u00e9, la compression GZIP s\u2019applique automatiquement sur vos fichiers.<\/p>\n\n\n\n La compression GZIP ne fonctionne que si elle est activ\u00e9e c\u00f4t\u00e9 serveur. Les r\u00e8gles de compression n\u00e9cessaires doivent \u00eatre ajout\u00e9es \u00e0 votre fichier .htaccess<\/em>, qui se situe \u00e0 la racine de votre site.<\/p>\n\n\n\n Lorsque WP Rocket est activ\u00e9, WP Rocket ajoute les r\u00e8gles de compression GZIP \u00e0 votre fichier .htaccess<\/em>, gr\u00e2ce au module mod_deflate<\/strong>. Ce processus se fait automatiquement sur les serveurs Apache, donc si vous utilisez un serveur Apache, vous n\u2019avez rien \u00e0 faire ! WP Rocket s\u2019occupe de tout automatiquement. <\/p>\n\n\n\n En revanche, si vous utilisez un serveur NGINX, l\u2019acc\u00e8s au fichier .htaccess<\/em> ne sera pas possible, et WP Rocket ne sera pas capable d\u2019appliquer automatiquement la r\u00e8gle de compression GZIP. <\/p>\n\n\n\n Si vous \u00eates dans ce cas, vous pouvez suivre ce guide<\/a>, ou vous pouvez utiliser cette configuration alternative de NGINX<\/a> fournie par l\u2019un de nos utilisateurs. <\/p>\n\n\n\n Pour de plus amples d\u00e9tails sur la compression GZIP et sur WP Rocket, allez voir notre documentation<\/a>.<\/p>\n\n\n\nQu\u2019est ce que la minification ?<\/h2>\n\n\n\n
La minification JavaScript <\/h3>\n\n\n\n
![\"JS](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/JS-file-not-minified.png\")
<\/figure>\n\n\n\n![\"Minified](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/JS-file-minified.jpg\")
<\/figure>\n\n\n\nLa minification CSS <\/h3>\n\n\n\n
![\"CSS](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/CSS-file-not-minified-1024x455.png\")
<\/figure>\n\n\n\n![\"CSS](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/CSS-file-minified.jpg\")
<\/figure>\n\n\n\nLa minification HTML <\/h3>\n\n\n\n
![\"Not](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/HTML-file-not-minified.jpg\")
<\/figure>\n\n\n\n![\"Minified](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/HTML-minified.jpg\")
<\/figure>\n\n\n\nPourquoi la minification aide-t-elle les performances de votre site ? <\/h3>\n\n\n\n
Qu\u2019est ce que la concat\u00e9nation de fichiers ?<\/h2>\n\n\n\n
La concat\u00e9nation est-elle quand m\u00eame un atout pour votre site ? <\/h3>\n\n\n\n
![\"CSS](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/CSS-Concatenation-WP-Rocket-and-HTTP2.png\")
<\/figure>\n\n\n\nCompresser vos fichier avec la compression GZIP <\/h2>\n\n\n\n
Comment WP Rocket peut vous aider \u00e0 optimiser votre code <\/h2>\n\n\n\n
La compression GZIP avec WP Rocket<\/h3>\n\n\n\n
Activer la minification et la concat\u00e9nation de fichiers avec WP Rocket<\/h3>\n\n\n\n
![\"WP](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/WP-Rocket-File-Optimization-Tab.png\")
<\/figure>\n\n\n\n![\"CSS](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/CSS-and-JS-minification-WP-Rocket-1.png\")
<\/figure>\n\n\n\n![\"\"\/](\"https:\/\/lh5.googleusercontent.com\/cy94-JGMfpmZ4KocLsLdRsEXzy5eaZw7Sa9-YLuGkrH-aJfWf-slH4yFTvOGFVxF_BG5GQQSNFyOUTvjpb8HYs5EXsW_DP-uEd10YzLMq6tu5aeAEFghFejXVcTmBgJvQmLLEjXI\")
<\/figure>\n\n\n\n