Indice de vitesse < 1000 avec Nginx, ngx_pagespeed, PHP, W3TC

Logo Nginx
Logo Nginx
Rien n'est plus ennuyeux que les sites web qui se chargent lentement - mais ceux qui hébergent WordPress eux-mêmes (dans mon cas sur un serveur en nuage chez JiffyBox) ont beaucoup de place pour l'optimisation. J'en présente ici quelques-unes.
Le résultat final avant : pour la page d'accueil du blog à www.tech-blogger.net déterminé Webpagetest.org le 09 novembre 2013 un indice de vitesse de 601 (plus petit, c'est mieux, plus d'informations sur la Indice de vitesse) pour la "première vue" et 401 pour la "vue répétée". Le tout pour un site de blog WordPress normal (lightbox pour les images, 10 articles sur la page d'accueil, images pour les articles, Google Analytics) avec un thème basé sur TwentyTwelve (légèrement adapté par moi pour SEO).

Le logiciel

Afin de ne pas être ralenti par des versions logicielles obsolètes, j'ai décidé d'utiliser un serveur virtuel avec Debian 7.1 "Wheezy" pour ce projet. Malheureusement, tous les paquets dont j'ai besoin ne sont pas disponibles dans les versions pour la Debian 6.0.8 que j'ai utilisée jusqu'à présent. En détail, les pierres angulaires de mon dispositif sont les suivantes :

  • 3 cœurs de processeur, 2 Go de RAM, 75 Go de disque dur
  • Debian 7.2 "Wheezy
  • Linux version 3.10.13-x86_64
  • nginx 1.4.3 avec ngx_pagespeed et SPDY de dotdeb.org
  • PHP 5.5.5 avec Xcache 3.1.0 de dotdeb.org

MYSQL fonctionne toujours sur un autre vServer de mon fournisseur actuel - l'accès à la base de données doit donc se faire par internet, mais ce n'est pas un problème grâce à la mise en cache. À l'avenir, la base de données sera également déplacée, mais cela demandera un peu de temps et de préparation.

Les paramètres

Avec nginx, gzip et Pagespeed J'ai déjà abordé ce sujet dans le passé - mais avec le temps, je n'aimais plus l'utilisation du service Pagespeed de Google et la redirection associée de toutes les demandes via les serveurs du géant de l'Internet. En outre, vous perdez la géolocalisation de l'adresse IP du serveur en Allemagne (et une Support SPDY ne devient pas plus facile). Après avoir installé le logiciel mentionné, il était donc temps de procéder aux bons réglages. Je pars du principe qu'il y a déjà un blog WordPress en cours d'exécution, que PHP et Mysql sont installés correctement, et je ne présente que des suggestions de modifications.

Activer ngx_pagespeed

L'avantage du paquet Nginx de dotdeb.org est que le module pagespeed est déjà présent et qu'il suffit de l'activer. Ajoutez-le dans le fichier nginx.conf (dans Debian sous /etc/nginx/nginx.conf) dans la section "http" :

pagespeed on ;
pagespeed FileCachePath "/var/www/pagespeed_cache/" ; #an personnaliser son propre système.
pagespeed EnableFilters combine_css,combine_javascript ; #Two sample filters

Cela active Pagespeed pour tous les vHosts existants, dans lesquels il peut maintenant être désactivé (s'il ne s'harmonise pas du tout avec un site web) ou adapté en conséquence - ce dernier point est mon objectif. D'abord les paramètres généraux qui doivent être utilisés pour chaque vHost qui doit utiliser nix_pagespeed. Ajoutez-les aux blocs "serveur" des vHosts respectifs :

#pagespeed
location ~ "\.pagespeed.([a-z]\.) ?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" " ; }
location ~ "^/ngx_pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }
location /ngx_pagespeed_statistics { allow 127.0.0.1 ; deny all ; }
location /ngx_pagespeed_global_statistics { allow 127.0.0.1 ; deny all ; }
location /ngx_pagespeed_message { allow 127.0.0.1 ; deny all ; }
location /pagespeed_console { allow 127.0.0.1 ; deny all ; }

Passons maintenant aux réglages spécifiques à l'aide des filtres. Il faut essayer un peu, tous les filtres ne fonctionnent pas avec tous les Javascript/CSS. Dans mon cas, par exemple, "defer_javascript" signifiait que la lightbox ne fonctionnait plus et que les images étaient simplement chargées sur une nouvelle page - peu attrayant. Au final, je me suis retrouvé avec le jeu de filtres suivant :

Filtre #pagespeed
pagespeed XHeaderValue "Pagespeed sur kadder.de powered by Nginx" ;
pagespeed EnableFilters insert_dns_prefetch ;
pagespeed EnableFilters lazyload_images,recompress_images,rewrite_images,convert_jpeg_to_progressive ;
pagespeed EnableFilters move_css_to_head ;

W3TC - Installer WordPress Total Cache

En conjonction avec XCache, il est possible de W3TC vraiment très bien. Mais là aussi, il faut veiller à ce que les fonctions ne se chevauchent pas ou ne soient pas exécutées deux fois. Par exemple, il est fatal que le CSS qui a été minifié par W3TC soit traité à nouveau par Pagespeed - il faut choisir un outil. Ce à quoi W3TC sert, cependant, c'est à augmenter la mise en cache du navigateur, à supprimer les cookies pour les fichiers statiques et à stocker les demandes de base de données, les objets et les pages dans le XCache (qui devrait être d'au moins 128 Mo, sinon même un simple blog comme celui-ci peut constituer un goulot d'étranglement). W3TC peut être facilement installé via la gestion des plugins WordPress, après quoi quelques paramètres doivent être copiés dans la configuration respective de vHosts pour que tout fonctionne.

Compatibilité WordPress nginx

La plupart des instructions de WordPress font référence à Apache. Cependant, j'ai décidé d'utiliser Nginx car ce serveur est plus "léger" qu'Apache et a une vitesse vraiment élevée. Pour faciliter les choses pour WordPress, il est recommandé d'installer le plugin "nginx Compatibility". Cela peut être fait via la recherche de plugins ; vous ne devriez pas être irrité par le fait que la page du plugin est en russe.

WordPress SEO by Yoast

Ce n'est pas un problème direct pour les performances, mais vous n'essayez pas d'obtenir un blog particulièrement rapide et vous ne voulez pas briller auprès des moteurs de recherche. Un outil qui fonctionne également sans problème avec les mesures mentionnées ici : WordPress SEO by Yoast. Les fonctions de ce plugin dépasseraient certainement le cadre ici 🙂 .

Conclusion et perspectives

Grâce à des mesures relativement simples, j'ai pu augmenter considérablement la vitesse d'affichage de mon blog. Le plus gros obstacle est probablement d'avoir mon propre serveur ou le bon logiciel sur un espace web loué. Comme mentionné au début, je vois encore une "étape d'expansion" essentielle, à savoir l'utilisation de SPDY. SPDY est une alternative à HTTP/1.1 et fonctionne exclusivement via des connexions SSL (j'ai commandé un certificat correspondant, mais il n'était malheureusement pas prêt ce week-end). Grâce à l'utilisation de SPDY devrait permettre de réduire les temps de chargement de 20 % supplémentaires - je suis curieux. Toute personne ayant des idées fondamentales sur ce sujet est invitée à les partager ici - je continuerai à essayer de livrer mes pages aussi rapidement que possible, ce qui devrait être dans l'intérêt de tous les utilisateurs d'Internet.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *