Comment optimiser la vitesse d'un site web | MultipleMedia
Lisez sur nos vingt ans !

COMMENT OPTIMISER LA VITESSE D’UN SITE WEB.

100 sur PageSpeed Insights … ou presque ! PageSpeed Insigths, proposé par Google, est un outil qui analyse la vitesse d’affichage de votre site. Or, de nos jours, avec l’avènement du mobile, cette vitesse n’est plus un atout mais bien une nécessité.

 

Chez MultipleMedia, nous avons obtenu un score de 99. Comment ? Nous avons identifié deux leviers d’action principaux :

- le temps de réponse de votre serveur

- la taille du contenu à télécharger.

 

»»» Voici ce qu’il faut faire !

 

Le temps de réponse du serveur.

 Ceci représente une partie importante du temps de chargement d’une page web. Il s’agit du délai entre la requête faite par l’utilisateur et le moment où le téléchargement commence.

Contrairement au reste de la page, l’attente de la réponse du serveur ne s’effectue pas avec le cercle de chargement du site. Cela donne donc l’impression « qu’il ne se passe rien », ce qu’il faut éviter à tout prix.

« Nous avons opté pour WP Super Cache. »

 

Plusieurs variables peuvent influencer l’équation, mais les solutions requièrent souvent de la modification de code. Étant donné que nous utilisons WordPress, il nous semblait inapproprié de modifier ce dernier. Pour remédier à ce problème, l’utilisation d’un plugin de cache fut nécessaire. Celui-ci garde en mémoire les pages qui ont été chargées, évitant ainsi la réécriture de la page à chaque fois. Avec plus de 2 millions de téléchargements, nous avons opté pour WP Super Cache. Ses fonctionnalités sont efficaces, précises et sa bonne réputation nous assure un support fiable.

Toutefois, il reste un inconvénient de taille lorsque l’on utilise un plugin comme celui-là : les caches expirent après un certain temps. Si personne n’a visité une page depuis un moment, il est possible qu’il n’y ait pas de cache en mémoire. Le prochain utilisateur aura donc une réponse du serveur plus lente.

Autre point : pensez à régénérer le cache lorsque vous effectuez des modifications afin de les voir s’afficher, sinon il faudra attendre son expiration. Il est toutefois possible de configurer le plugin pour qu’il le régénère automatiquement.

Ici, les avantages surpassent largement les inconvénients. L’impact de l’utilisation d’un plugin de cache sur la vitesse du site est considérable et le résultat n’en est que plus marquant pour l’utilisateur.

 

L’Optimisation des images.

Les images d’un site correspondent à une vaste partie du chargement d’une page web. Du thème au carrousel, on les retrouve partout. Point d’orgue de l'esthétique, elles se doivent d’être de bonne qualité. Or, qui dit qualité dit fichier plus lourd, c’est-à-dire plus de données à télécharger. Il faut donc s’assurer de garder une qualité convenable, tout en réduisant le plus possible leur taille.

« … grâce au plugin EWWW Image optimizer »

Nous avons décidé de créer des images en format WebP grâce au plugin EWWW Image optimizer. Le choix de ce format est relativement simple puisqu’il s’agit d’un format d’image développé par Google, plus optimisé que le JPEG. Les images sont compressées au maximum, sans perte de qualité visible. Nous avons tout simplement créé des copies de nos images, en format WebP. Si le moteur de recherche ne supporte pas ce dernier, il choisira le JPG/PNG équivalent.

Le problème avec WebP est qu’il n’est supporté que par Chrome et Opéra. Autre inconvénient : deux exemplaires de chaque images (une originale et une WebP) sur notre serveur doublent l’espace de stockage requis.

Les gains offerts par l’optimisation des images vont de 5% à plus de 50% de diminution du volume de données à télécharger.

 

Optimisation du code source

Les dernières modifications ont eu un impact faible pour l’utilisateur, mais significatif pour l’outil de Google. Nous avons utilisé une approche hybride afin d’optimiser les codes sources du site web. Une partie fut automatisée grâce à l’utilisation du plugin Autoptimize, tandis que nos fichiers JavaScript et CSS ont été manuellement compressées.

« L’utilisation d’Autoptimize… »

Une autre optimisation était l’ordre de téléchargement des sources selon une priorité plus appropriée. Nous ne voulions pas laisser le chargement de notre page en suspens pour télécharger des fichiers JavaScript utilisés uniquement après le chargement initial de la page.

 

Aller plus loin

Une fonctionnalité qui nous a permis d’économiser beaucoup de temps et qui a drastiquement augmenté notre note sur gtmetrix.com est le KeepAlive. C’est une fonctionnalité qui garde ouverte la connexion afin de télécharger tout le contenu plutôt que d'ouvrir et fermer les connexions pour chaque requête. Cependant, cette fonctionnalité, comme toutes celles citées dans cet article, peut amener certains désagréments.

Tout d’abord, elle ne s’active pas sur le site, mais sur le serveur. Il n’est pas possible de l’activer uniquement sur le site souhaité si la machine qui l’héberge le fait également pour d’autres sites pour lesquels on ne veut pas cette fonctionnalité. D’ailleurs, cela peut devenir plus demandant en termes de performances si beaucoup d’utilisateurs visitent le site. Notre conseil : prenez le temps d’analyser la charge des connexions avant de prendre une décision.

Toutefois, les avantages surpassent de loin les inconvénients. Cette fonctionnalité nous a permis de sauver en moyenne 1,3 seconde.

 

En résumé nous avons atteint des résultats quasi parfaits. Sur Google PageSpeed, nous obtenons un score de 99 sur mobile et 95 sur desktop et nous obtenons un A et un B sur gtmetrix.com.

Si vous aussi vous voulez améliorer les performances de votre site, contactez notre agence web.

UI Design | TOP 10 Animations Add To Cart

Plaisirs

26 octobre 2018

UI Design, les meilleures animations Add To Cart (ajout au panier d'achat).   Découvrez notre sélection d’animations " UI Design" (User Interface Design) sur un sujet...

Par : Jean-Philippe Georges, Responsable Marketing et Communication et
Jean-Philippe Talamon, Designer UX/UI

WordPress 5 et Gutenberg | Avantages et Inconvénients

Recherche

23 octobre 2018

WordPress 5 et Gutenberg: notre verdict !   Résultat mitigé, heureusement il reste de la place pour d'éventuelles améliorations à venir! Cependant, nous commençons...

Par : Nathalie Vallières, Développeur et
Jean-Philippe Georges, Responsable Marketing et Communication

Application mobile et site web au rendez-vous du congrès APFF.

Nouvelles

9 octobre 2018

L'APFF nous a demandé de concevoir une nouvelle application mobile de gestion des événements ainsi qu'un site web dédié.   Pour accompagner l’organisation et la...

Par : Jean-Philippe Georges, Responsable Marketing et Communication