curseur slider
Voir plus
Lire plus

Qu’est-ce que la #WebPerf ?

Technique3 minutes
Qu’est-ce que la #WebPerf ?
Vincent Hervo
30, Mar 2022

Le terme de #WebPerf est de plus en plus présent sur la toile, mais qu’en est-il dans les faits ?

La performance d’un site Internet

Sur mesure VS thème 

Bien que le thèmes CMS présentent de nombreux avantages, chez Kookline, nous avons fait le choix de ne faire que des thèmes sur mesure. Outre les bénéfices certains en terme de sécurité, de nombreux avantages sont également à noter sur la performance de votre site web. ?

Dans 99% des cas, un site fait avec un thème (gratuit ou payant) issu d’un “store” embarque des plugins. Par expérience, la plupart de ces plugins ne seront pas utiles pour votre site ou ils ne seront pas optimisés pour celui-ci : un page builder, une multitude de Javascript et de feuilles de style. La conséquence ? Votre site sera lent et pourra finir par crasher.

Nous partons toujours d’une page blanche. Nous vous accompagnons à développer votre thème suivant vos besoins et objectifs actuels et futurs tout en prenant en compte l’existant. Cela se fera en embarquant le minimum de plugin possible, afin de garantir une rapidité d’affichage la plus élevée possible. 

Cache et réglages techniques

Puisque chaque site est unique, nous déterminons les éléments “non temps réel” ayant un impact sur les performances. Ces éléments seront alors mis en cache via un système de fichier ou encore de transient sous WordPress.

Pour rappel, le cache peut s’apparenter à une mise en mémoire de tout ou une partie des éléments d’une page. Lorsqu’un internaute visite votre site, en fonction du système de cache mis en place, le serveur sera moins sollicité et les données seront accessibles plus rapidement.

webperf

Certains éléments de votre site nécessite un chargement instantané, alors que d’autres peuvent être différé (footer, élements sous la ligne de flottaison, etc). Nous indiquons alors quels fichiers doivent être chargés en premier. C’est notamment le cas pour les Criticals CSS. Pour les contenus qui ne changent pas régulièrement, nous indiquons aux navigateurs de les garder en cache pour des durées que nous préconisons (image de fond, éléments statiques …).

Et parce qu’il vaut mieux charger un seul fichier que plusieurs petits fichiers, nous concaténons et minimisons (suppression des espaces, saut de lignes …) nos Javascript et fichiers CSS afin de réduire le temps de chargement.

Optimiser les images sur son site

Lorsqu’on téléverse des images dans le gestionnaire de médias de WordPress, celui-ci les redimensionne automatiquement en plusieurs dimensions prédéfinies. Parce que ces dimensions peuvent ne pas correspondre au design de votre site, nous déclarons des dimensions spécifiques afin que les images soit à la taille adaptée. L’objectif est d’avoir le poids le plus faible pour ces images.

Couplé à ces redimensionnements, nous recompressons également vos images grâce à plusieurs algorithmes de compressions sans pertes et nous les convertissons au format WebP, nouveau format d’image ayant une meilleure compression que le JPG avec la même qualité visuelle.

Nous mettons en œuvre dans nos développements et intégrations le lazy loading. Pourquoi afficher une image si l’internaute ne peut pas encore la voir ? cela n’a aucun intérêt et rajoute du temps de chargement. Les images seront chargés dès qu’elles devront être affichées.

L’expérience utilisateur : indicateur de performance

L’expérience utilisateur est un élément clé dans un projet web. Faciliter la navigation de l’internaute, c’est aussi faciliter son engagement et la conversion. Concept clé des projets digitaux mis de plus en plus en avant ces derniers temps, c’est également un indicateur pour la performance de votre site.

D’un point de vue interface, nos experts UX prennent en compte les habitudes de navigation des internautes pour afficher l’information et la délivrer la plus facilement possible à l’internaute. C’est également un jeu d’équipe. Cet indicateur est pris en compte lors de la stratégie SEO, notamment lors de la création de vos pages : quel contenu et fonctionnalité proposer en fonction de la requête de l’internaute et de son intention de recherche sous-jacente ?

Côté technique, nous axons nos développements sur un affichage rapide, de façon à ce que vos internautes visitent votre site web en ayant l’impression qu’il s’affichent instantanément.

Entre autre, il est couramment admis qu’au delà de 3s de chargement, 50% des internautes auront quitté votre site web pour aller chez un de vos concurrents.

Afin de gagner de précieuses millisecondes de chargement ou de temps d’interaction, nous utilisons de bonnes pratiques de développement et des outils d’analyse. 

Les principaux outils d’analyse de la performance

Les Core Web Vitals / PageSpeed Insights

PageSpeed Insights est un outil de test de performance proposé par Google qui analyse votre site web sur-mesure afin de détecter les améliorations à y apporter.
Un rapport détaillée est affiché pour les vues mobiles et Desktop.

Core Web Vitals

 

PageSpeed Insights se base également sur les Core Web Vitals (ou signaux web essentiels en français), pour indiquer des pistes d’améliorations, basées sur 3 grands axes :

  • les performances de la page (LCP)
  • l’interactivité d’une page (FID)
  • la stabilité d’une page (CLS).

Nous mettons ainsi en œuvre les recommandations de cet outil pour votre site, afin d’obtenir les meilleurs scores possibles

GTmetrix

GTmetrix est également un outil d’analyse de performance de site web. Il prend également en compte les Core Web Vitals mais donne également des indications complémentaires par rapport à PageSpeed Insights C’est notamment l’exemple de la timeline de chargements des fichiers de votre site web, des temps de réponses du serveur et du réseau. La structure des pages de votre site est également un élément testé par cet outil.

Mettre en place la #WebPerf sur un site

En résumé, la performance d’un site web sur-mesure se fait tout au long du développement, bloc par bloc, section par section et page par page. Les ajustements se font ainsi au fur et à mesure de développement du site. Des tests finaux sont également effectués avant la livraison client, afin que vous soyez pleinement satisfait d’avoir fait le choix d’un site web sur-mesure chez Kookline ? !

Ces articles peuvent vous intéresser

 

 

Voir plus d'articles
Flèche vers le haut