Les bonnes pratiques pour les videos, visuels et typographie

Jean-Baptiste revient sur quelques bonnes pratiques à suivre concernant les ressources multimédia qu’on utilise sur les sites internet.

En général, on essaie de faire attention à optimiser ses performances et donc réduire son impact global énergétique, notamment en faisant attention aux ressources importantes c’est à dire qui pèsent un poids conséquent. C’est le cas des images et de tout le contenu multimédia en particulier les vidéos.

Il existe plusieurs façons d’optimiser les vidéos, les images mais aussi les typographies

  • Commencer par limiter la quantité de vidéos et plutôt que les mettre sur une même page, tenter de les disséminer au maximum.

Si le site internet est une médiathèque spécialisée dans la consultation vidéo telle que Youtube, l’optimisation se fera d’une autre façon bien sûr.

  • Limiter le poids des ressources, donc toujours essayer de compresser les fichiers notamment si les vidéos sont auto hébergées sur votre serveur, hébergeur, site WordPress…

Si vos vidéos sont hébergées sur une plateforme de diffusion de vidéos, vous allez vous retrouver à diffuser en streaming, la question d’optimisation du poids n’est pas la même puisque gérée par la plateforme.

En revanche quelque soit le mode d’hébergement de la vidéo, ce qui est important c’est que le fichier ne soit pas joué directement dès le chargement de la page.

Ceci entrainerait la diffusion automatique d’un flux sans que la personne ne l’ait demandé et ce flux aurait un impact énergétique très important.

Donc il faut toujours attendre une action du visiteur avant de lancer l’élément et idéalement, ne lancer le chargement de la ressource dans le navigateur qu’après un clic sur l’élément.

Si vous êtes sur un site WordPress, vous avez une extension de cache qui s’appelle WPRocket qui propose une petite option qui n’est malheureusement pas souvent cochée sur les sites internet. Cette option est pourtant très intéressante, elle transforme le player de la vidéo en image statique. Son intérêt c’est que l’on attend une volonté du visiteur pour aller regarder la vidéo.

  • La dernière chose à éviter quand c’est possible c’est d’avoir beaucoup d’images plein écran.

Plus l’élément chargé est important en terme de taille, plus on va avoir un impact important sur les temps de chargement. Privilégiez l’utilisation de visuels SVG qui va diminuer drastiquement le poids des ressources à charger.

? Ce qu’il faut retenir :

– limitation de la quantité de ressources

– optimisation du poids des ressources (compression des fichiers)

– ne pas jouer la ressource au chargement de la page

– idéalement, ne lancer le chargement de la ressource dans le navigateur qu’après un clic sur l’élément (technique proposée par Rocket)

– éviter le plein écran pour les images, préférer l’utilisations de visuels SVG aux images de fond full screen

Partageons ensemble une première vision de votre projet

WE WORDPRESS !
L’agence Whodunit est une agence web WordPress située à Paris et Lyon, spécialiste en création et maintenance de site WordPress.

L’agence

Agence WordPress Paris
Agence WordPress Lyon
Agence WordPress Bordeaux
Nos offres dédiées à Gutenberg
Une agence 100% télétravail
Devenez partenaire
Recrutement

Expertises

Audit et consulting
Conception
Développement WordPress
Formations et ateliers
Maintenance et hébergement
Stratégie et conseil

Maintenance WordPress

Les types de maintenance WordPress
Nos offres de maintenance
Fonctionnement de la maintenance
Guide maintenance
Support WordPress