logo versions clic design fond blanc

Performances et gestion de cache

par | 15 Juin 2023 | Les bases de la conception d'un site web

personnage écran avec compteur vitesse

Hey ! Bien le bonjour !

Aujourd’hui on va parler performances car rien de moins impatient qu’un visiteur du web…

Alors pour ne pas frustrer notre public et conserver une expérience utilisateur optimale, on va travailler les 5 points qui amélioreront la vitesse de votre site :

  1. Le gestionnaire de cache
  2. L’optimisation des médias
  3. L’Appel des fonts
  4. Le Lazy loading
  5. Le choix de l’hébergeur

1. Le gestionnaire de cache

Le cache, c’est ce qui va rester en mémoire pour éviter de charger à chaque fois les éléments présents sur le site et donc il va augmenter sa vitesse de chargement. Il y a des extensions qui vont vous permettre d’optimiser tout cela comme Wp Fastest Cache ou Wp Rocket qui s’avèrent très performants et simples à paramétrer.

Il y a également Litespeed Cache qui peut être activé directement chez votre hébergeur s’il le permet et qui va mettre en cache vos données directement côté serveur, ce qui va d’autant plus améliorer vos performances.
Donc si vous êtes chez O2switch, Planethoster ou Hostinger vous pouvez foncer 🚀

2. L’optimisation des médias

icone représentation d'une image rose

On commence par les images, alors oui, elles embellissent votre site mais elles prennent aussi beaucoup de place et amoindrissent ses performances.

Pour remédier à cela les navigateurs on désormais un format favori : le WEBP, qui va réduire sans perte de qualité vos fichiers image même transparent, et même les gifs !

Grâce à ce format vous allez grandement réduire le poids de votre site, tout comme son impact sur l’environnement 🌿

Comment on fait pour convertir ? Il existe un convertisseur de fichier qu’on aime bien utiliser File Converter et en plus il est free.
En revanche, si vous comptez mettre beaucoup, « beaucoup » de médias sur votre site (parce que votre activité pourrait le demander)  passez par des plateformes conçuent pour héberger vos galeries photos comme Piwigo et utilisez Piwigopress pour afficher où vous le souhaitez vos images sur votre site WordPress.

Pour les vidéos nous vous conseillons de faire de même avec Youtube ou Vimeo puis de passer par un module qui vous permettra son affichage. S’il n’y a qu’un court extrait, alors n’oubliez pas de le compresser, attention toutefois à la version mobile, prévoyez une vidéo qui s’adapte ou un affichage différent voir statique si cela entache sa bonne visibilité (Google apprécie les sites mobile friendly)

3. L’appel des fonts

Les polices d’écritures sont liées à votre identité et vous allez donc devoir intégrer celles qui auront été choisies pour vos titres, sous titres et corps de texte par exemple. Mais encore une fois nous faisons face à des éléments qui prennent de la place sur le site.

Dans ce cas vous pouvez appeler les polices en ayant créé des projets web (possible sur Google Fonts et Adobe Fonts) puis vous intégrez le lien du projet dans le <head> de votre site. Veillez à ce que le lien soit « preload » afin de précharger les polices lors de l’accès au site (des subtilités existent vous pouvez nous demander plus d’infos si ce sujet vous intéresse).

4. Le Lazy loading

Barre de chargement 60%

On pousse un peu plus loin le chargement et surtout on le diffère quand celui-ci ne s’avère pas utile, c’est-à-dire que tout ce qui n’est pas en court de lecture n’est pas encore chargé. Cela permettra une navigation plus fluide pour votre visiteur.

Afin d’appliquer le Lazy load, soit vous avez des connaissances en Javascript soit vous vous servez d’une extension comme Lazy load de Wp Rocket ou a3 lazy load.

5. Le choix de l’hébergeur

Ne négligez pas le choix de votre hébergeur qui fera beaucoup pencher la balance des performances. Choisissez en un optimisé avec WordPress et avec les extensions que vous prévoyez d’utiliser. Pensez également à l’emplacement de vos visiteurs, s’ils sont français O2switch ou Hostinger sont des références, sinon orientez votre choix en y intégrant ce facteur.

La petite info en plus : Ah oui, vous l’avez compris utiliser trop de place nuit à la vitesse de votre site, alors levez le pied si vous avez la main lourde sur le téléchargement de plugins… Et essayez de rester debout 😄

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Pin It on Pinterest

Share This