[GUIDE] Optimiser WordPress avec GTMetrix

Débriefer Page Speed

Les premiers résultats sont là. La note de PageSpeed est tombée, il est temps de voir en détail ce qui va et ne va pas.

Ci dessous des pistes pour améliorer vos notes :

• Defer parsing of JavaScript
  Vos pages utilisent des balises “script” pour appeler des fonctions (comme google analytics). Ces scripts “fonctions” ajoute du temps supplémentaire à vos pages.
  Une solution est de differrer l’exécution du script notamment grâce au plugin comme Autoptimize  (Réglages → Autoptimize -> optimiser le code JavaScript).
  

• Inline small CSS
  
  Pour améliorer votre score, privilégiez l’utilisation des fichiers css, plutôt que d’insérer des styles dans les balises HTML.
  Deplus essayez de combiner ces fichiers css pour en avoir le moins possible. L’ouverture de plusieurs petits fichiers est plus longue que l’ouverture d’un gros fichier.
  

• Leverage browser caching
  Chaque fois qu’un navigateur charge une page Web, il doit télécharger tous les fichiers Web pour afficher correctement la page. Cela inclut tous les HTML, CSS, JavaScript et images.
  
  Un gain de temps peut être trouver en utilisant ce cache. Notament si le visiteur revient sur la page. Ou que la page possède des points communs avec une page précédente.
  Un paramétrage fin de la configuration de votre hébergement permet d’exploiter directement ce cache sans plugin.
• Minify CSS / Minify JavaScript / Minify HTML
  La minification des fichiers est l’art de réduire la taille de ces fichiers en supprimant les espaces. Ces fichiers sont toujours lisibles pour une machine, moins par un humain.
  
  Autoptimize permet aussi de gérer la minification de vos fichiers html, css et .js

   

• Serve scaled images
  Mettre des images avec une taille appropriée permet d’économiser sur le poids de la page et ainsi le nombre d’informations à transmettre. GTMetrix vous liste les images dont la taille de présentation sur vos pages diffère de trop avec l’image source.
  
  A vous  mettre des images en correspondance avec la dimension de la page. Pour le bien d’un site, Il n’est pas rare d’avoir des images identiques mais avec des dimensions bien différentes spécifiques pour chaque usage dans le site (vignette, haute résolution, etc …).

   

• Specify a cache validator
  Pour pleinement profiter de tous les avantages de la mise en cache des navigateurs.
  
  Toutes les ressources statiques doivent avoir un en-tête Last-Modified ou ETag.

   

• Specify image dimensions
  Votre image n’a pas de dimension de définie.
  
  La spécification d’une largeur et d’une hauteur pour toutes les images permet un rendu plus rapide en éliminant le besoin de refluer et de repeindre inutilement.

   

• Specify a character set early
  Un jeu de caractères (charset) est une liste de caractères que les navigateurs utilisent pour afficher une page Web. Chaque caractère correspond à un nombre spécifique et selon le charset défini par le site web, il déterminera comment le navigateur le lira. Il existe de nombreux jeux de caractères différents pour diverses utilisations ainsi que des jeux qui se sont simplement développés à partir de jeux de caractères préexistants.Actuellement, le jeu de caractères le plus populaire et le jeu par défaut utilisé en HTML5 est UTF-8.
  
  La définition du jeu de caractères au niveau du serveur réduit le traitement du navigateur.
  Définissez le jeu de caractères utilisé au niveau du serveur permet– d’évitez de le mettre dans la balise meta http-equiv
  – Réduit le temps de chargement des pages
  – Un rapport coûts-avantages : valeur élevée.
• Avoid bad requests
  Parfois, votre HTML ou CSS demandera une ressource comme une image ou un fichier html qui n’existe pas. Quand cela arrive, cela fait faire au navigateur et au serveur plus d’allers-retours qui ne servent à rien (parce que la chose demandée n’est pas là).
  La suppression des “liens brisés”, ou des demandes qui entraînent des erreurs 404/410, permet d’éviter les demandes inutiles.

   

• Avoid landing page redirects
  Les redirections sur les pages ajoutent des délais au chargement de la page. Pendant que les redirections se produisent, rien n’est montré au client.
  Dans de nombreux cas, les redirections peuvent être éliminées sans changer la fonction d’une page. Si votre site nécessite des redirections, effectuez la redirection côté serveur plutôt que côté client (navigateur), afin de réduire les demandes d’aller-retour côté client.
  Si votre service nécessite des redirections, effectuez la redirection côté serveur plutôt que côté client, afin de réduire les demandes d’aller-retour côté client. En minimisant les redirections HTTP d’une URL à une autre, on évite les RTT (ou Round-trip time = une aller retour serveur <-> navigateur) supplémentaires et le temps d’attente pour les utilisateurs.
  
  
• Enable compression
  La compression coté serveur permet d’envoyer un volume d’information moins élever.
  
  Activer la compression (gzip) coté serveur

   

• Enable Keep-Alive
  L’activation des connexions HTTP Keep-Alive ou HTTP persistantes permet à la même connexion TCP d’envoyer et de recevoir plusieurs requêtes HTTP, réduisant ainsi la latence pour les requêtes suivantes.Configurer votre serveur apache avec “Keepalive on”. Ou reportez-vous à la documentation Nginx
  
  
• Inline small JavaScript
  L’ouverture multiple de petit fichier est moins performant que l’ouverture d’un gros fichier (javascript).
  On vous recommande donc d’unifier un maximum vos fichiers. Autoptimise permet de la faire en parti.

   

• Minimize redirects
  La minimisation des redirections HTTP d’une URL à une autre permet d’éviter du temps (RTT : Rond Trip Time = le temps d’un aller retour serveur <-> navigateur) supplémentaire et le temps d’attente pour les utilisateurs.
  Quelle que soit la raison, les redirections déclenchent un cycle requête-réponse HTTP supplémentaire et ajoutent un temps de latence (round-trip-time). Il est important de minimiser le nombre de redirections émises par votre application, en particulier pour les ressources nécessaires au démarrage de votre page d’accueil. La meilleure façon de le faire est de limiter votre utilisation des redirections aux cas où cela est absolument nécessaire techniquement, et de trouver d’autres solutions là où ce n’est pas le cas.

   

• Minimize request size
  En gardant les cookies et les en-têtes de requête aussi petits que possible, on s’assure qu’une requête HTTP peut tenir dans un seul paquet.
  Les réseaux les plus répandus limitent les paquets à environ 1500 octets, donc si vous pouvez limiter chaque requête à moins de 1500 octets, vous pouvez réduire la surcharge du flux de requêtes.
  
  
• Optimize images
  Réduisez le temps de chargement des pages en chargeant des images de taille appropriée.
  – Réduire la taille des fichiers en fonction de l’endroit où les images seront affichées
  – Redimensionner les fichiers images par thème plutôt que par CSS
  – Enregistrer les fichiers dans le format approprié en fonction de l’utilisation
  – Rapport coûts-avantages : valeur élevéeOptimiser vos images pour le web signifie enregistrer ou compiler vos images dans un format convivial pour le web en fonction de ce que l’image contient.
  En termes de coûts versus bénéfices, l’optimisation de vos images devrait se trouver en haut de votre page si vous ne les avez pas déjà optimisées.
  
  
• Optimize the order of styles and scripts
  Une façon d’accélérer le temps de chargement de vos pages est d’optimiser l’ordre de vos styles et de vos scripts. Vous devriez toujours placer vos balises de style avant vos scripts et tout appel à une feuille de style devrait aussi être avant ces scripts.
  Lorsque le navigateur commence à télécharger un script, il ne chargera rien d’autre avant que ce script ne soit complètement chargé et c’est pourquoi la plupart des pages Web passent environ 80 à 90 % de leur temps de chargement à attendre un réseau.
  Le fait de mieux organiser les fichiers externes (d’abord les css, puis les js) permet de mieux paralléliser les téléchargements et d’accélérer le temps de rendu du navigateur.

   

• Put CSS in the document head
  Il est possible de déclarer une feuille de style un peu partout dans la page. Mais cela fait chuter les performance de votre page
  Placer vos déclaration de styles et les éléments du corps du document vers la tête (head) du document améliore les performances de rendu.

   

• Serve resources from a consistent URL
  Il est important de servir une ressource à partir d’une URL unique, pour éliminer les octets de téléchargement en double et les RTT supplémentaires.
  Il est parfois nécessaire de référencer la même ressource à plusieurs endroits dans une page – les images en sont un exemple typique. Il est encore plus probable que vous partagiez les mêmes ressources sur plusieurs pages d’un site, par exemple des fichiers .css et .js.
  
  Si vos pages doivent inclure la même ressource, celle-ci doit toujours être servie à partir d’une unique URL cohérente pour la même ressource. S’assurer qu’une ressource est toujours assignée à une seule URL présente un certain nombre d’avantages. Cela réduit la taille globale de la charge utile, car le navigateur n’a pas besoin de télécharger des copies supplémentaires des mêmes octets.
  
  
• Combine images using CSS sprites
  La combinaison d’images dans le moins de fichiers possible à l’aide de sprites CSS (1 fichier avec plusieurs images) réduit le nombre d’allers-retours, réduit la surcharge de la demande et peut réduire le nombre total d’octets téléchargés par une page Web.
  
  Comme pour JavaScript et CSS, le téléchargement de plusieurs images implique des allers-retours supplémentaires. Un site qui contient beaucoup d’images peut les combiner en moins de fichiers de sortie pour réduire la latence. Avec l’aide des css, on peut positionner l’image pour ne voir que la partie ciblée.
  
  
• Avoid CSS @import
  L’utilisation de CSS @import dans une feuille de style externe peut ajouter des délais supplémentaires lors du chargement d’une page Web.
  Eviter l’utilisation de “@import” dans vos css. Déclarer vos 2 fichier css ou mieux, combiner vos 2 fichiers css en 1 seul !

   

• Prefer asynchronous resources
  Lorsqu’un navigateur analyse une balise de script traditionnelle, il doit attendre que le script soit téléchargé, analysé et exécuté avant de faire le rendu du HTML qui lui succède.
  L’appel asynchrone des ressources empêche ces ressources de bloquer le chargement de la page.
  Regardez si vous avez la possibilité d’utiliser des propriétés “defer” ou “async” pour vos déclarations