Vitesse d’affichage: L’optimisation Front-end

Dans le cadre de la programmation Web, le terme « frontal » se rapporte aux éléments permettant l’interaction entre votre site web et le navigateur du visiteur.

L’optimisation Front-End (FEO), également appelée optimisation de contenu, regroupe les éléments du processus de mise au point de votre site web pour rendre le chargement plus rapide et la navigation plus agréable pour l’internaute.

La vitesse d’affichage est un critère SEO qui prend de plus en plus d’importance , Google à d’ailleurs mis un nouvel outils de contrôle des performances qui distinguent l’affichage sur ordinateur de bureau d’une part et sur portable d’autre part, dans le contexte de l’arrivée de  l’index mobile first, cette préoccupation prend tout son sens

Dans les grandes lignes, la Front End Optimization met l’accent sur la réduction des tailles des fichiers et la réduction au minimum du nombre de requêtes nécessaires pour charger une page donnée. Le tout au service du facteur vitesse d’affichage, paramètre SEO sur lequel Google communique assidûment.

Au cours de la FEO, les concepteurs de sites web et éventuellement les experts SEO  distinguent entre le temps de téléchargement estimatif et réel d’une page. Le temps de téléchargement estimatif est considéré eo raison de son impact sur l’expérience globale de m’utilisateur (UX), tandis que le temps de téléchargement réel est souvent utilisé comme une mesure de référence de performance.

Les réseaux de diffusion de contenu (Content Delivery Network) jouent un rôle important dans le processus de l’optimisation FEO car ils sont couramment utilisés pour simplifier les tâches d’optimisation qui requièrent le plus de temps. Par exemple, un CDN typique dispose de caractéristiques de compression et de réduction automatique de fichiers, vous acquittant de devoir bricoler manuellement avec les ressources individuelles du site web.

Vitesse d’accès au serveur: le Time to First Byte ou (TTFB)

La vitesse d’accès au serveur, souvent utilisée pour mesurer le temps de réponse d’un site web, est l’une des plus importantes mesures de performance – ainsi que l’une des plus mal comprises.

• Du point de vue du temps de téléchargement réel, la TTFB est la durée nécessaire au premier octet de donnée pour aller d’un serveur vers le navigateur appelant.
• Du point de vue du temps de téléchargement estimatif, la TTFB est la durée nécessaire au navigateur pour analyser le premier octet après avoir téléchargé le fichier HTML.

Seule la TTFB estimative impacte l’expérience utilisateur, ce qui fait qu’elle est la plus importante des deux mesures.

Les retards frontaux représentent jusqu’à 80 % du temps de réponse de votre site web.

Il y a plusieurs façons d’améliorer la réactivité de votre site web :

et gagner des positions vers la première page sur Google

• Réduction des requêtes http
• Compression des fichiers
• Optimisation du cache
• Minimisation des codes
• Optimisation des images

Réduction des requêtes HTTP

Lors du chargement d’une page web, un navigateur doit ouvrir une connexion TCP distincte par requête HTTP émise, donc un nombre égal de connections à la quantité d’éléments de la page à télécharger.

Le problème est qu’il y a une limite au nombre de connexions simultanées qu’un navigateur peut ouvrir vers un seul hôte. Cette limite existe pour qu’un serveur ne soit pas surchargé avec un grand nombre de requêtes HTTP. Toutefois, elle sert également de goulot d’étranglement potentiel, forçant souvent le navigateur à mettre les requêtes de connexion sur une file d’attente.

Le seuil maximal de connexion étant rapidement atteint, diverses techniques liées à l’Optimisation du Front Page sont utilisées afin de réduire au mieux le nombre d’éléments de la page. L’une des plus communes est la consolidation des ressources – une pratique qui consiste à grouper plusieurs fichiers de petite taille en un seul « paquet ».

Exemple …

Supposons que votre site web se compose d’un fichier HTML, deux fichiers CSS, 3 scripts et 16 images – incluant votre logo et divers arrière-plans de menus. Au total, un navigateur devra faire 22 requêtes HTTP pour charger une page de votre site.

Un internaute naviguant sur Google Chrome ne  peut ouvrir que six connexions TCP simultanée vers votre serveur, le navigateur met donc en file d〙attente les 16 autres demandes.

En consolidant tous les modèles d’images en un seul sprite, vous allez réduire le nombre de requêtes de 22 à seulement 4.

Non seulement cela permet à au navigateur Chrome d’analyser la page en une seule « session », mais cela réduit aussi le nombre d’allers-retours requis pour le chargement de la page.

Le Content Delivery Network groupe les connexions

Les CDN peuvent réduire davantage le temps de réponse du serveur en regroupant les connexions et en veillant à ce qu’elles restent ouvertes tout au long d’une session.

Tandis que le CDN ne réduit pas le nombre de requêtes en soi, le regroupement améliore les performances en éliminant les retards liés à la fermeture et la réouverture des connexions TCP.

Multiplexage de HTTP/2

Au début de la phase d’adoption, le protocole HTTP/2 introduit le multiplexage – une métiode de connexion qui permet à de multiples requêtes eu réponses d’être envoyées via une seule connexion TCP.

Dans un avenir proche, cela réduira l’avantage de la mise en paquet des ressources décrite précédemment.

Compression de fichiers

Chacune de vos pages web est construite à partir d’une collection de HTML, JavaScript, CSS et (éventuellement) d’autres codes source. Plus la page est complexe, plus les fichiers sont volumineux et plus le temps de chargement sera long.

Avec la compression de fichiers, ces fichiers peuvent être réduits à une fraction de leur taille d’origine pour améliorer la réactivité du site. Préféré pour ses temps d’encodage/décodage rapides et les taux de compression élevés, Gzip est le choix de compression de fichier le plus populaire. Il peut réduire un code source de 60 ou même 80 pour cent.

Remarque :  Gzip n’est pas efficace pour réduire la taille des fichiers image, car ils sont déjà compressés.

Le point fort de Gzip se situe, dans une certaine mesure, dans sa capacité à regrouper tous les fichiers en un seul fichier .tar compressé (a.k.a., tarball). L’inconvénient est qu’il empêche l’extraction de fichiers individuels. Ce n’est pas un problème pour du contenu web car celui-ci doit de toute façon être décompressé pour pouvoir charger correctement la page entière.

Le facteur CDN

Presque tous les CDN fournissent une compression de fichiers automatisée, en convertissant sans problème tous les codes source compressibles en Gzip (par exemple, les fichiers CSS et JS) avant de les restituer aux visiteurs du site web.

Optimisation du cache

Les en-têtes cache HTTP jouent un rôle important dans la façon dont les navigateurs analysent un site web car elles déterminent quels éléments du contenu sont mis en cache et pour combien de temps.

La mise en cache stocke vos fichiers statiques, qui ont tendance à être les plus volumineux, soit en dehors de votre serveur – soit sur les disques locaux des visiteurs ou un PoP CDN à proximité. Cela peut considérablement améliorer la vitesse de chargement du site web.

L’inconvénient est que la gestion manuelle des en-têtes cache peut-être une tâche fastidieuse à l’efficacité réduite. De plus, les mécanismes de mise en cache rencontrent souvent des problèmes lors de la manipulation dynamique du contenu généré créé à la volée lorsqu’une page commence à se charger (par exempme, les objets AJAX et même les fichiers HTML générés dynamiquement).

Les options de contrôle CDN

De nombreux CDN offrent des options de contrôle de cache, via une interface  » tableau de bord » facile à configurer.

Cette console permet

• de définir des politiques sur l’ensemble du site,
• de gérer les règles de mise en cache pour des éléments individuels et même
• de définir des politiques pour des groupes de fichiers entiers,

sur la base de critères tels que le type de fichier et l’emplacement, (par exemple, toujours mettre en cache toutes les images dans le répertoire « /blog/ » pendant 60 jours).

Les CDN intègrent depuis quelques temps les techniques d’apprentissage automatique. Ils suivent des modèles d’utilisation du contenu pour optimiser automatiquement les options de mise en cache, permettant la mise en cache au contenu dynamique réputé « typiquement impossible de l’être »

Cela vous déleste le gestionnaire du serveur de nombreuses tâches de gestion de la mise en cache.

Minification de code

La minification (réduction de la taille du code) est un processus FEO qui reconnaît la différence entre la façon dont les développeurs écrivent du code et la façon dont les machines lisent ces codes.

L’idée est que – tandis que les développeurs écrivent le code pour une compréhension facile à la lecture, avec des espaces, des retours à la ligne et des commentaires – les machines lirons le code sans aucun de ces éléments, allant ainsi à l’essentiel.

La minification réduit le code à son strict nécessaire, le diminuant d’un bon tiers voir à la moitié avant compression.

Le facteur CDN dans ce contexte

Les CDN ont la capacité d’automatiser complètement la minification du code, il leur est très facile de minifier les fichiers JavaScript, HTML et CSS à la volée, envoyés aux navigateurs des visiteurs.

Gzip ET Minification :

Alors que convertir du code en Gzip et le minifier en même temps peut sembler redondant, la combinaison des deux méthodes offre les meilleurs résultats.

Ainsi, minifier les fichiers avant de les convertir en Gzip rétrécira la taille du fichier tar de 5 à 10 % de plus.

Optimisation des images

La mise en cache et la compression sont les deux méthodes les plus courantes pour optimiser les images, la mise en cache étant le plus efficace des deux. Ceci est dû au fait  que, contrairement aux codes source, tous les formats d’image sont déjà compressés.

Pour réduire davantage la taille d’un fichier image, vous devez « trafiquer » les données de l’image, soit en supprimant certaines informations de l’en-tête, soit en réduisant la qualité de l’image originale. Ceci est connu comme étant une compression avec perte.

Ce n’est pas une bonne idée, sauf éventuellement pour certaines images haute résolution, parce que l’œil humain ne peut percevoir naturellement l’ensemble des informations visuelles contenues dans de telles images.

Par exemple, la compression avec perte peut supprimer des gradations de couleurs et réduire la complexité des pixels sans trop affecter notre perception de l’image.

Au-delà de la compression Web, la meilleure façon d’optimiser les images est d’en réduire la taille et le poids AVANT de la mettre dans la bibliothèque.

Le facteur CDN pour les images

Les CDN aident également à automatiser le processus de compression de l’image, vous permettant de choisir les paramètres de vitesse de chargement de la page et de qualité de l’image.

Les CDN les plus avancés offrent également une option de rendu progressif, mettant l’accent sur le concept original de compression avec perte. Avec un rendu progressif, le CDN charge rapidement une version pixelisée de l’image. Le CDN le remplace ensuite progressivement par une série de variantes, de plus en plus belles, jusqu’à ce que l’image réelle soit prête à charger.

Le rendu progressif est utile pour sa capacité à diminuer les temps de chargement estimatif sans sacrifier la qualité de l’image.

Rendu progressif en cours

Images vectorielles et images tramées

Une autre technique d’optimisation d’image consiste à remplacer une partie de vos images ordinaires (tramées) avec leurs homologues vectoriels.

Cette technique s〙applique aux images composées de simples formes géométriques : lignes, courbes, polygones, etc. Une image vectorielle typique est une icône ou un diagramme.

Vous devez utiliser des images vectorielles quand vous le pouvez car :

• Elles sont de très petite taille, étant donné qu’elles ont seulement besoin de recueillir des données pour un ensemble de coordonnées – non pour chaque pixel individuel.
• Leur résolution étant indépendante, elles peuvent être zoomées et « dé-zoomées » indéfiniment, sans aucun impact sur la qualité. Cela les rend parfaites pour un design réactif. (responsive)

L’ensemble de ces optimisations du Front End

…ne sont pas toujours simples à mettre en oeuvre, elles demandent des compétences notamment pour ce qui concerne de serveur.

D’ailleurs selon le type hébergement de votre site web, vous n’aurez aucune prises sur certains paramètres. Les plus accro quitteront leur hébergement mutualisés et opteront pour un serveur dédié.

Cela à naturellement un coût qui, d’un site à l’autre , d’une thématique à l’autre sera amorti par les gains de positions, le trafic généré et, nous l’espérons le chiffre d’affaire en retour.