Si vous avez déjà vérifié les performances de vos pages à l’aide de notre outil gratuit de test de vitesse de site web, vous avez alors vu une liste des optimisations de Google Insights qui, une fois mises en œuvre, améliorent les performances de votre site, offrant ainsi une meilleure expérience utilisateur et des taux de conversion plus élevés.
La liste des optimisations peut sembler énorme, alors nous allons examiner maintenant les recommandations les plus courantes de Google Insights et vous en donner un aperçu et vous indiquer les avantages qui en découlent pour vous et vos utilisateurs.
Commencez par mesurer les performances de votre page
Vous devez connaître le fonctionnement actuel de votre page pour pouvoir mesurer toute amélioration. Si vous êtes un utilisateur d’Uptrends (Business ou Enterprise), vous savez probablement exactement comment votre page se comporte. Si vous n’êtes pas un utilisateur d’Uptrends, vous pouvez utiliser notre outil gratuit de test de vitesse de site web pour tester votre site et rassembler les indicateurs de performance dont vous avez besoin pour commencer à optimiser.
Nous vous recommandons d’utiliser l’une de nos options de test de vitesse mobile; ce qui est rapide sur mobile est super rapide sur un ordinateur de bureau. Notez vos paramètres de test et le choix du point de contrôle pour une référence future.
En haut des résultats de l’outil de test de vitesse (gratuit) de site web, vous trouverez des données sur la taille de votre page, les types d’objet et le nombre d’objets. Enregistrez ces informations avec les informations sur la connexion et les temps de réponse au bas du graphique en cascade.
Maintenant que vous connaissez votre point de départ, vous pouvez commencer à appliquer les optimisations nécessaires pour améliorer le temps de chargement de vos pages. En haut de la page, vous trouverez un score Google Insights et une liste de recommandations.
Dans cet article, nous aborderons ces recommandations ainsi que d’autres optimisations utiles que vous devrez peut-être effectuer pour améliorer les performances de votre site web.
Que l’essentiel : supprimer les téléchargements inutiles
Bon d’accord, ceci n’est pas une recommandation de Google Insight, car Google ne juge pas l’utilité de votre contenu (du moins pas à ce stade), mais il est préférable de commencer par un regard objectif sur votre contenu existant.
Supprimer les téléchargements inutilisés et inutiles
Certains téléchargements ne sont jamais utilisés par la page qui les demande. Il est facile d’oublier de supprimer une demande de fichier de vos en-têtes de page une fois que votre page n’en a plus besoin. Les éléments de page oubliés deviennent un problème plus grave pour les fichiers de script orphelins. Les fichiers de script ont un prix en termes de performances, non seulement pour le rapatriement, mais également pour temps de traitement. Le JavaScript prend 60 % plus de temps de traitement que les images de la même taille. Tree Shaking (une technique d’élimination de code inutile) peut aider à minimiser le gonflement dû au code inutile.
D’autres éléments de page peuvent ne pas offrir grand-chose en contrepartie de leur coût en taille de page et en performances. Gardez un œil sur les éléments de page qui ne suscitent que peu d’interaction de la part de l’utilisateur, tels que les carrousels d’images. Supprimez les éléments sous-utilisés pour donner un coup de pouce aux performances de votre page.
Réduisez et compressez vos ressources textes
Saviez-vous que vos fichiers HTML, CSS et de script sont remplis de contenu inutile que vos utilisateurs ne voient pas et, franchement, dont ils n’ont même pas besoin ? Une fois que les développeurs ont terminé le développement du site, ils laissent beaucoup de texte dans les fichiers CSS, Script et HTML dont le navigateur et les utilisateurs n’ont pas besoin. Vous pouvez réduire la taille des fichiers en supprimant :
- Les commentaires du développeur : les commentaires ont un rôle important à jouer pour faciliter la compréhension et la lecture du code, mais les utilisateurs ne les voient jamais et n’en ont pas besoin.
- Code redondant : vos fichiers CSS peuvent contenir plusieurs déclarations identiques, leur consolidation réduit la taille du fichier.
- Les espaces et les fins de ligne : Les espaces et les fins de ligne facilitent la lecture du code, mais le navigateur n’en a pas besoin. Le navigateur peut lire le code parfaitement sans ces espaces supplémentaires.
Les outils de compression et de minimisation courants peuvent réduire considérablement la taille des fichiers. La minimisation a lieu avant le téléchargement de la page sur le serveur web, tandis que la compression est effectuée de manière dynamique en fonction des capacités du navigateur de l’utilisateur.
Optimiser les images et les graphiques
La majeure partie du contenu d’une page est constituée de fichiers d’image. Pour les fichiers d’image courants, tels que les fichiers JPEG et PNG, la compression est déjà effectuée, mais cela ne veut pas dire que les fichiers sont optimaux. L’optimisation de l’image est une discussion à plusieurs facettes.
L’image offre-t-elle de la valeur ?
N’utilisez pas d’images et de graphiques simplement pour faire beau; s’ils n’ajoutent rien à l’histoire, il vaut mieux les laisser de côté.
L’image est-elle correctement dimensionnée ?
L’envoi d’une image haute définition à la plupart des appareils est un gaspillage de bande passante. Vous avez besoin d’une haute définition lorsque vous voulez imprimer des images, mais pour un affichage sur la plupart des écrans, vous n’avez besoin que de 72 à 144 pixels par pouce. En outre, il vaut mieux envoyer des images en fonction de la taille de l’écran au lieu de les faire redimensionner dans le navigateur. Si une requête de page provient d’un smartphone, envoyez des images déjà dimensionnées pour s’adapter à l’écran.
Utilisez le meilleur format pour vos graphiques
Vous avez beaucoup de choix pour optimiser le contenu visuel :
JPEG : un format d’image compressée (avec perte) utilisé principalement pour les photos. A cause de la perte de résolution lors de la compression, les images JPEG ne conviennent pas aux images contenant du texte ou d’autres éléments graphiques aux contours nets.
PNG : un format d’image compressée (sans perte) utilisé pour les photos mais mieux adapté aux graphiques, en particulier à ceux qui doivent tirer parti de la transparence.
GIF : un format d’image compressé utilisant au maximum 256 couleurs. Crée de fichiers graphiques plutôt petits, mais il ne gère pas bien les dégradés et n’offre aucune transparence. Les images GIF animées ont également un grand succès sur le web, mais elles dégradent les performances de la page en raison de la taille du fichier. Convertir les fichiers GIF en vidéos peut fournir le même résultat sans le coût élevé.
SVG : des graphiques vectoriels évolutifs qui s’adaptent facilement à la page. Les fichiers SVG sont le plus souvent utilisés pour les icônes et les logos.
Image Sprites : une seule image composée de plusieurs éléments graphiques dont l’affichage est déterminé par le navigateur par le biais de CSS. Les sprites sont parfaits pour les icônes et autres petits éléments de page qui autrement nécessiteraient plusieurs requêtes.
CSS et HTML : Vous pouvez créer de nombreux effets graphiques courants, tels que des ombres et des animations 3D, directement sur la page sans nécessiter de ressources supplémentaires.
WebP : WebP est une compression sans perte ou avec perte, prise en charge par Chrome et d’autres navigateurs basés sur Blink, pouvant réduire la taille des fichiers jusqu’à 25 % de plus que les formats PNG ou JPEG.
Une fois que vous avez déterminé le meilleur moyen d’afficher vos images et vos graphiques sur la page, vous devez vous assurer que les tailles de leurs fichiers sont les plus petites possibles. Nous utilisons TinyPNG pour réduire au minimum nos fichiers JPEG et PNG afin d’obtenir la taille de fichier la plus petite toute en préservant la qualité. Utiliser les outils tels que TinyPNG est idéal pour le contenu statique, mais si vous avez besoin d’une solution plus dynamique, contactez votre fournisseur de CDN. La plupart des CDN offrent une optimisation automatisée des images.
Utiliser des indices client pour répondre avec les meilleures ressources
Les en-têtes de requête contiennent des informations facultatives décrivant l’environnement et la connexion de l’utilisateur. En utilisant les valeurs trouvées dans ces en-têtes, vous pouvez répondre avec le meilleur contenu en fonction de l’environnement utilisateur.
Le paramètre de l’en-tête de requête Accept indique au serveur les types de fichiers multimédias qu’il peut traiter pour des éléments tels que les images et l’audio. Si l’en-tête Accept inclut WebP, vous pouvez réduire la taille de l’image d’environ 25 %. Les autres indications du client ne sont pas automatiques.
Utiliser des indices client
Un serveur informe le client qu’il souhaite connaître certaines informations sur l’environnement de l’utilisateur via l’envoi de l’en-tête Accept-CH suivi de la liste de variables séparées par des virgules. Ces variables concernent généralement la résolution de l’écran et du support, telles que :
- Taille intrinsèque
- Taille intrinsèque corrigée en fonction de la densité
- Taille extrinsèque
- Largeur du Viewport
- Ratio pixel physique / pixel logique (DPPX)
- Largeur
- Mémoire de l’appareil
Avec ces informations du client le serveur pourra formater le contenu de manière à optimiser les performances sans gaspiller la bande passante de l’utilisateur.
Indices de réseau
Les indices de réseau informent le serveur sur la connexion. À l’aide de cette collection d’indices, le serveur connaît le temps d’aller-retour (RTT) qui indique le temps nécessaire à l’utilisateur pour recevoir et traiter le contenu. D’autres indices :
Downlink (liaison descendante) : mégabits par seconde pour la vitesse de téléchargement
Type de connexion effectif (ECT) : Il s’agit d’un type comparatif et non du type réel. Si votre vitesse descendante ressemble plus à une connexion 3G qu’à une vitesse 4G, le serveur la traite comme telle.
Save-Data : Indique que le client souhaite recevoir moins de données.
L’utilisation d’indices client peut s’avérer très rentable, mais leur utilisation se complique rapidement. Jeremy Wagner explique les bases avec des cas d’utilisation pour vous aider.
Une seule requête avec la mise en cache HTTP
De nombreuses ressources de page sont utilisées de nombreuses fois de suite lorsqu’un utilisateur visite sur votre site. La récupération répétée de ces fichiers a de graves répercussions sur l’expérience des utilisateurs de votre site. La mise en cache HTTP permet de réduire le nombre d’allers et retours nécessaires pour charger la page suivante. En définissant l’âge maximal du contrôle du cache et en fournissant un etag ou un jeton, vous laissez le navigateur réutiliser la ressource à partir du cache s’il n’a pas expiré, et s’il a expiré, de renvoyer le jeton pour savoir si le la ressource a changé. Si rien n’a changé, le navigateur peut réutiliser la ressource à partir de son cache. Définissez l’âge à sa valeur maximale pour les ressources de page qui changent peu fréquemment.
Prioriser et réduire le nombre de requêtes
Vous devez d’abord charger le contenu le plus important – soit celui au-dessus de la ligne de flottaison ou celui du chemin critique. Quelle que soit la page, votre priorité est de satisfaire les utilisateurs en leur donnant le contenu qu’ils demandent le plus rapidement possible. Si vous essayez de tout charger en même temps, vos utilisateurs attendent…, et beaucoup d’entre eux repartent (taux de rebond de 40 % dans les trois premières secondes).
- Regroupez les fichiers CSS et les scripts : regrouper vos fichiers en un seul téléchargement peut permettre des temps de chargement plus rapides en réduisant le nombre de requêtes. Envoyez d’abord des fichiers critiques pour ne pas bloquer le rendu.
- Décidez ce qui est critique et utilisez le fractionnement de code pour envoyer immédiatement ce qui est important, puis regroupez et chargez le reste.
- Utilisez des types de média et des requêtes de média pour marquer les éléments CSS non-critiques comme non-bloquants pour le rendu.
- Utilisez HTTP/2 push pour envoyer des fichiers critiques avec le code HTML.
- Activez la mise en cache HTML pour empêcher plusieurs requêtes pour le même fichier.
- Utilisez les indices du navigateur – de pré-chargement et de pré-connexion – pour contourner les priorités du navigateur et ainsi récupérer en premier les fichiers qui sont nécessaires à la page.
Pour le contenu au-dessus de la ligne de flottaison, éliminer le code JavaScript et CSS qui bloquent le rendu
Le temps que vos utilisateurs sont prêts à rester devant un écran blanc en attente de chargement de votre page dépend de nombreux facteurs, mais vous pouvez les faire interagir plus rapidement et les empêcher de rebondir en leur donnant quelque chose tout de suite.
Le navigateur doit traiter les fichiers HTML, JavaScript et CSS avant de pouvoir construire le CSSOM et le DOM. Tant que le navigateur n’a pas fini de télécharger et traiter tous ces fichiers, l’utilisateur ne voit rien. Pour réduire les temps d’attente réels et perçus des utilisateurs, envoyez uniquement les fichiers JavaScript et CSS critiques. Envoyez le code hors écran et le code conditionnel d’interaction utilisateur de manière asynchrone pour obtenir un rendu d’écran plus rapide. Au moment où l’utilisateur fait défiler ou interagit avec le contenu, le navigateur aura téléchargé et traité le code. En savoir plus sur le code qui bloque le rendu d’Ilya Grigorik.
En fin de compte, est-ce que ça en vaut la peine ? Absolument !
Même les plus petits gains de performances des sites web et de pages web peuvent avoir un impact considérable sur la satisfaction des utilisateurs, les taux de conversion, la rétention, le classement des pages (PR) et les revenus.
- 40 % des utilisateurs quittent un site dont le chargement prend plus de 3 secondes
- Chaque seconde coûte 7 % en conversions
- Un retard d’une seconde par pour un site générant $100,000 par jour pourrait entraîner des pertes de $25 millions par an (source).
Vos revenus sont étroitement liés à votre site web, à votre application web et aux performances de votre API. Les microsecondes que vous gagnez sur les temps de chargement vous procurent de récompenses majeures avec des conversions plus élevées et des visiteurs fidèles.
Les performances web peuvent chuter de manière inattendue
Votre site web est un objet qui vit et qui respire et qui nécessite des soins quotidiens. Chaque modification de code, de contenu, de réseau ou d’architecture peut potentiellement modifier les performances de votre site web. Souvent l’influence n’est pas positive et pourrait passer inaperçue pendant un certain temps. Protégez votre investissement et automatisez vos tests de performance avec les moniteurs Uptrends de type Full Page Check, API multi-étapes ou Surveillance d’Applications Web. Uptrends vous indiquera le moment où votre performance tombe sous votre seuil de tolérance.
Leave a Reply