Donc, vous avez un serveur bien configuré mais les performances de votre site Web sont médiocres. Les temps de réponse de vos pages (latence) sont en secondes et votre serveur ne peut pas gérer plus de 100 utilisateurs simultanés. Vous avez investi dans le référencement mais vous pensez toujours que la recherche Google ne vous donne pas le classement que votre site mérite. Que fais-tu? Comment Google PageSpeed Insights peut-il vous aider ? Commençons par les bases!
La performance est un facteur de classement important
Une bonne performance du site Web est essentielle. Un site Web moderne ne se compose pas seulement de quelques fichiers statiques, il se compose de bibliothèques frontales et de frameworks comme Bootstrap. Plus un client doit télécharger de fichiers pour afficher une page complète, plus le chargement d'une page sera long. Et plus le chargement d'une page est long, plus le classement baisse.
L'impact du mobile
L'autre facteur clé du classement de recherche d'un site Web est sa compatibilité avec les appareils mobiles. Non seulement parce que les sites adaptés aux mobiles sont optimisés pour se charger rapidement sur des connexions mobiles à faible débit et à latence élevée, ils offrent également une excellente expérience utilisateur.
Bootstrap est un framework très populaire pour implémenter facilement une conception Web réactive, et même si Bootstrap est facile à utiliser, il nécessite au moins deux fichiers statiques supplémentaires pour pouvoir fonctionner. Cela signifie que nous achetons la convivialité au détriment des performances de chargement. Mais ne vous inquiétez pas, je vous expliquerai comment vous pouvez compenser cette petite perte plus loin dans cet article.
Google PageSpeed Insights aide à augmenter les performances
Avec PageSpeed Insights by Google, vous pouvez effectuer des vérifications pour identifier les domaines d'amélioration et rendre vos sites Web plus rapides et plus conviviaux en quelques secondes. Ces deux éléments sont essentiels pour obtenir une pole position dans la recherche Google.
Comprendre les recommandations de PageSpeed Insights
1. Évitez les redirections de pages de destination
Les redirections peuvent entraîner une latence perceptible si la demande est redirigée plusieurs fois vers le point de terminaison à partir duquel les données sont finalement envoyées au client. Chaque redirection initie une autre action de demande-réponse HTTP (avec des recherches DNS possibles et des poignées de main TCP) qui peut réduire considérablement les performances du site, en particulier sur un appareil mobile avec une connexion Internet lente.
Un bon exemple pour éviter les redirections pour les appareils mobiles consiste à utiliser un design moderne et réactif. Un site Web déjà optimisé pour les mobiles ne nécessite pas de redirection vers un sous-domaine dédié aux appareils mobiles.
Assurez-vous également de rediriger correctement en une seule étape de http://example.comvers https://www.example.com. Les gens ont tendance à taper simplement la forme la plus courte de votre domaine dans la barre d'adresse du navigateur - mais votre site Web doit fonctionner uniquement avec https (pour plus de sécurité et un meilleur classement) et très probablement utiliser www comme sous-domaine.
Conseil SEO : 301 redirections de HTTP vers HTTPS
HTTPS est devenu un facteur important pour le classement dans Google. Le moteur de recherche préfère les sites Web qui utilisent le protocole HTTPS pour assurer des communications sécurisées entre les deux points de terminaison, ici le client et le serveur. Pensez à activer une option de redirection 301 sur vos domaines une fois que vous avez installé vos certificats SSL.
Pour les utilisateurs de Plesk, l'extension Plesk Security Advisor vous aidera à activer des certificats gratuits pour tous vos sites Web, et vous pouvez activer vos redirections 301 via les « Paramètres d'hébergement » sur votre tableau de bord.
En ce qui concerne les redirections, Plesk prend en charge les redirections 301 optimisées pour le référencement de HTTP vers HTTPS prêtes à l'emploi. Cela signifie que si vous activez un certificat SSL gratuit alimenté par Let's Encrypt, Plesk vous aidera à passer au protocole sécurisé sans perdre le pouvoir de classement.
2. Activer la compression
Envoyez toujours du contenu compressé avec GZIP ou Deflate vers le client. Cette règle vérifie si la source a servi des ressources compressibles (telles que du HTML, des images ou des fichiers JS/CSS) avec compression. La compression réduit le nombre d'octets transférés sur le réseau jusqu'à 90 %. Cela réduit le temps global de téléchargement de toutes les ressources, ce qui permet un temps de chargement plus rapide et une meilleure expérience utilisateur.
L'important pour l'utilisation de la compression est que les deux côtés (client et serveur) comprennent l'algorithme de compression appliqué. Les champs d'en-tête HTTP échangent les algorithmes pris en charge. Si vous voulez en savoir plus sur le protocole réseau HTTP, veuillez lire mon article sur HTTP/2 . La plupart des navigateurs modernes prennent déjà en charge la compression prête à l'emploi. Côté serveur, vous pouvez utiliser des modules spéciaux, par exemple mod_deflate(Apache) ou ngx_http_gzip_module(Nginx).
Plesk prend en charge la compression prête à l'emploi
Ne vous inquiétez pas, un serveur Plesk pré-installe déjà les modules de compression requis, il vous suffit d'activer cette fonctionnalité manuellement pour tous les domaines devant utiliser la compression. Vous pouvez ajouter le code nécessaire dans un .htaccess (Apache) ou web.config (NGINX) dans le répertoire racine de votre site Web ou encore plus facilement directement dans Plesk :
Allez dans « Sites Web et domaines » et sélectionnez « Paramètres Apache et nginx ». Si vous utilisez le serveur Web Apache, vous devrez ajouter le code suivant dans la zone de texte sous « Directives Apache supplémentaires ». Sélectionnez la zone de texte « Directives supplémentaires pour HTTPS » si vous utilisez HTTPS, sinon la première zone de texte.
AddOutputFilterByType DEFLATE text/plain text/html text/xml; AddOutputFilterByType DEFLATE texte/css texte/javascript ; AddOutputFilterByType DEFLATE application/xml application/xhtml+xml ; AddOutputFilterByType DEFLATE application/rss+xml ; AddOutputFilterByType DEFLATE application/javascript application/x-javascript
Si vous utilisez NGINX, vous devez ajouter le code suivant dans la zone de texte « Directives nginx supplémentaires ».
NGINX
gzip activé ; gzip_vary activé ; gzip_proxied tout ; gzip_comp_level 6 ; gzip_disable "msie6" ; gzip_types text/plain text/css text/javascript text/xml application/json application/javascript application/x-javascript application/xml application/xml+rss;
Avertissement : La compression dynamique peut affecter le processeur de telle sorte que vous pourriez perdre l'avantage de performance de la compression en raison d'un long traitement du processeur. Cela n'a pas de sens de définir le niveau de compression au niveau le plus élevé car le gain dans la taille du fichier est minime par rapport à un niveau moyen, mais la charge CPU et le temps de traitement sont considérablement plus élevés. Une autre amélioration serait de mettre en cache les fichiers déjà compressés et de les livrer directement sans aucun processus de compression impliqué.
3. Tirez parti de la mise en cache du navigateur
Le chargement de fichiers statiques est long et coûteux. Le navigateur stocke les ressources déjà téléchargées dans la mémoire cache du navigateur. Le serveur peut définir une politique de mise en cache spécifique avec des en-têtes spéciaux. Le cache local doit fournir les ressources du cache local au lieu de les redemander au serveur.
Vous pouvez utiliser deux champs d'en-tête dans l'en-tête de réponse : Cache-Controlet ETag. Avec Cache-Control, vous pouvez définir combien de temps le navigateur peut mettre en cache les réponses individuelles. ETag crée un jeton de revalidation avec lequel le navigateur peut reconnaître facilement les modifications apportées aux fichiers.
Le navigateur doit mettre en cache les fichiers statiques pendant au moins une semaine. Si vous avez des fichiers qui ne changent pas régulièrement ou pas du tout, vous pouvez augmenter la durée du cache jusqu'à un an.
4. Réduisez le temps de réponse du serveur
PageSpeed Insights déclenche cette règle si le serveur ne répond pas dans un certain laps de temps (> 200 ms). Le temps de réponse signifie le temps dont le navigateur a besoin pour charger le code HTML pour la sortie. De nombreux facteurs peuvent avoir un effet négatif sur le temps de réponse.
La raison d'un temps de réponse lent n'est pas facile à résoudre sans une analyse approfondie. Les facteurs possibles de retard peuvent être causés par le serveur, tels qu'un processeur lent ou un manque de mémoire, ou dans la couche d'application, par exemple une logique de script lente, des requêtes de base de données lourdes ou un trop grand nombre de bibliothèques incluses.
La question est, comment trouver ces goulots d'étranglement? Vous pouvez utiliser l' extension New Relic pour résoudre de tels problèmes ou vérifier votre site Web avec WebPageTest pour voir comment les navigateurs affichent les pages et quels fichiers ralentissent votre site !
5. Minifier HTML, CSS et JavaScript
Le serveur peut réduire les ressources comme le code HTML ou les fichiers JavaScript et CSS avant de les envoyer au navigateur. Cela permet d'économiser de nombreux octets de données, ce qui accélère le téléchargement des ressources. La minification est le processus de compactage du code sans perdre aucune information dont le client a besoin pour restituer correctement le site Web.
De telles optimisations contiennent par exemple la suppression de commentaires, de code inutilisé ou d'espaces inutiles. Ne vous inquiétez pas, vous n'avez pas à le faire manuellement, il existe de nombreux outils ou plugins gratuits qui feront le travail automatiquement pour vous. Il suffit de le chercher sur Google !
Remarque : Si vous regardez dans un fichier aussi réduit, vous pourriez penser qu'il n'est pas du tout lisible mais pour l'ordinateur cela ne fait aucune différence. En fait, c'est encore mieux si le code est le plus compact possible !
6. Éliminez JavaScript et CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison
PageSpeed Insights déclenche cette règle si le navigateur charge des fichiers JavaScript et CSS même si le contenu dit au-dessus de la ligne de flottaison n'a pas besoin de son code pour créer la sortie appropriée. Cela signifie que le navigateur ne peut pas afficher la sortie HTML tant que toutes les ressources externes ne sont pas complètement disponibles.
Une ressource externe n'est pas nécessairement un fichier d'un autre serveur mais un fichier supplémentaire en général que le client doit charger en plus de la réponse HTML pour restituer correctement la page. Le rendu du code JavaScript et CSS pertinent peut être ajouté en ligne. Mais cela devrait être limité uniquement aux parties de code absolument nécessaires. Vous ne devez pas charger le rendu du code JavaScript critique de manière asynchrone ou différée au bas de la page.
7. Optimiser les images
Si vous avez beaucoup d'images sur votre site Web, cela pourrait être l'un des plus gros potentiels d'amélioration. L'optimisation des images sans impact sur la qualité visuelle peut réduire considérablement la taille du fichier, ce qui améliore considérablement le temps de téléchargement et l'utilisation de la bande passante.
De nombreuses possibilités différentes existent pour optimiser les images, par exemple la résolution, le format d'image ou les paramètres de qualité. Sur de nombreux sites Web, les webmasters téléchargent des images dans des résolutions trop élevées et donc avec des tailles de fichiers trop volumineuses. PageSpeed Insights répertorie ces fichiers après la vérification avec un pourcentage d'économie de taille possible pour des variations optimisées des mêmes images.
Les réseaux de diffusion de contenu comme CloudFlare (lien vers notre extension) peuvent optimiser automatiquement les images pour vous et les rapprocher de vos clients. Attention, cette fonctionnalité d'optimisation nécessite un abonnement payant. Bien entendu, vous pouvez également optimiser vos images manuellement. Lisez ce guide fourni par Google : Optimiser les images .
8. Privilégiez le contenu visible
Cette règle est similaire à la règle de blocage de rendu. PageSpeed Insights le déclenche lorsque des allers-retours réseau supplémentaires sont nécessaires pour restituer le contenu au-dessus de la ligne de flottaison de la page chargée. Si les visiteurs chargent cette page via une connexion lente (avec des latences élevées), les demandes réseau supplémentaires créeront des retards importants et dégraderont l'expérience utilisateur.
Il est important de structurer le code HTML pour que le contenu critique soit chargé en premier. Ainsi, si vous avez une barre latérale à côté de votre article, placez la barre latérale après l'article dans le code HTML afin que le navigateur affiche l'article avant la barre latérale.
J'ai déjà évoqué la livraison JavaScript asynchrone, il est également possible d'améliorer la stratégie de livraison CSS. Les instructions CSS requises dans la partie contenu visible peuvent être chargées directement dans le code HTML et le reste reporté dans un fichier après le processus de rendu.
