:Accueil/Design/LA VITESSE SUR LE WEB

LA VITESSE SUR LE WEB

IMAGES ET VITESSE

Comment rendre vos images attrayantes, adaptées à votre site web, donc responsive ? Assurez une bonne vitesse à vos images.

  1. De l’importance de la vitesse sur le web
  2. Les outils en ligne et gratuits pour optimiser
  3. Vérifier sa vitesse

 

Vos images sont la représentation de votre marque, de votre commerce alors autant les mettre en valeurs et les optimiser. Et aujourd’hui le mobil c’est le premier device utilisé pour Internet. La vitesse de chargement de vos pages est le FACTEUR IMPORTANT. Le critère de référence pour Google est 2/3 secondes de chargement pour une page sur un mobil. Avoir des images optimisées est donc ESSENTIEL. Mais comment connaitre la vitesse de chargement de son site et comment améliorer son score.

LA VITESSE SUR LE WEB

la vitesse sur le web

DE L’IMPORTANCE DE LA VITESSE SUR LE WEB

Avoir une image optimisée et responsive pourquoi ?

Une règle physique de base, plus c’est lourd, plus cela demande du temps pour s’afficher. La vitesse sur le web est un facteur déterminant dans le référencement. Une image qui se charge vite, s’est s’assurer de la satisfaction du visiteur. Qui n’a jamais connu la frustration de l’attente de la page ?

Pour infos, le temps moyen de chargement pour une page sur un mobile est de 3.21 secondes. Alors adieu les sliders, les images trop grandes ou trop lourdes. On voit dans ce tableau l’importance de chargement de la page. Le critère de référence pour Google est 2/3 secondes de chargement pour une page sur un mobile. Avoir des images optimisées est donc ESSENTIEL. Ces statistiques sont édifiantes, les chiffres clés sur la vitesse des sites web

tableau vitesse de chargement d'une image Pour plus de 3″ d’attente sur page, vous risquez de perdre 1 visiteur sur 3. La preuve que la vitesse sur le web est un paramètre essentiel pour assurer de bons scores SEO.

Il faut aussi avoir des pages légères, soyez attentif au poids total de la page. Compresser, compresser mais sans perdre de qualité. Sur WordPress, on peut installer un plug in pour compresser en direct, comme resmushit.

COMPRESSER, POURQUOI?

Le temps de chargement est un KPI indispensable pour Google et donc pour votre stratégie de référencement. Assurez à vos images une vitesse sur le Web satisfaisante. On peut se reporter à la documentation de Google sur les images.

  • Publier de belles images, des photos professionnelles qui sont à la hauteur de votre marque. Et oui, une photo pro mettra plus en valeur vos produits, investissez sur de belles images, c’est aussi s’assurer de bons retours de ces visiteurs.
  • Compresser ses images pour un chargement de page plus rapide. Ne pas dépasser les 100Ko pour une photo, en utilisant la compression.
  • Nommer ses images avec une bonne description. Eviter les noms comme ze12548image.jpg
  • Ne pas oublier les balises alt
  • Rappel

    • JPEG pour les photos, les images
    • Gif pour les images animées
    • PNG pour les images avec transparence, comme les logos.
    • SVG vectoriel, très utile pour les logos, pas de perte de qualité quand on modifie la taille de l’image.
la vitesse sur le webla vitesse sur le web

LES OUTILS EN LIGNE POUR OPTIMISER SES IMAGES

Avant de compresser ses images, voilà un outil de Google gratuit et très pratique : le test d’optimisation mobil . Outil de mesure de la vitesse sur le Web.

Cela vous donnera un aperçu de la vitesse de votre site. Afin d’améliorer le temps de chargement, on va compresser nos images, en utilisant des services en ligne. Une première étape avant de commencer à compresser ses images, vérifier son site sur un mobil. Pour cela je vous offre un super site, gratuit et efficace, RESPONSINATOR

Outils de compression gratuits

Une véritable boite à outils pour les images et leur donner une vitesse sur le web rapide. Clair, simple, efficace, découvrez ILOVEIMG. Sur ce site, vous pouvez compresser vos images, les éditer, les convertir, ajouter un filigrane. Un bel outil. Tout comme PIXLR, un outil de retouche photos en ligne. Rapide, il permet en autres de retoucher légèrement ses images, d’enlever un background.

Un autre outil de compression gratuit que je vous donne, SQUOOSH. Un bel outil simple et surtout avec la possibilité de voir le poids de ses images optimisées.

Une autre astuce et un outil plus complexe, en même temps, cela permet de compresser et de choisir la meilleure optimisation pour vos images. RESPONSIVE BREAKPOINT c’est l’outil pour facilement générer des images bien optimisées. Le Screenshot ci-dessous vous présente les résultats obtenus avec Responsive Break point avec une option pour les écrans Retina.

Maintenant que vous avez compresser vos images, que vous avez bien rempli les balises alt et open graph, que vous avez décrit votre image, je vais vous montrer comment faire des tests de vitesse de chargement des pages. Très utile.

Pour ceux qui veulent aller plus loin, vous pouvez utiliser  un compresseur de CSS. Comme CSS Compressor.

la vitesse sur le web compression des images

VÉRIFIER SA VITESSE

Vous avez optimiser vos images. Voici venue l’heure de vérité. Il est temps de faire des tests de vitesse. Aucun radar à l’horizon, testons notre vitesse.

Afin d’être pertinent dans ses mesures, on utilise les indicateurs suivants :

  • Le Start Render : cette métrique mesure la première fois que le navigateur affiche autre chose qu’une page vierge.
  • Le First Contentful Paint : selon la définition de Google, “Le FCP mesure combien de temps il faut au navigateur pour afficher le premier élément du contenu DOM après qu’un utilisateur s’est rendu sur votre page. Les images, les éléments n’est pas inclus. “ Le FCP mesure donc le temps écoulé entre le moment où le visiteur débute sa navigation et le moment où le navigateur affiche le contenu. 
  • Le Speed Index : cet indicateur correspond au délai moyen nécessaire à l’affichage des pixels au-dessus de la ligne de flottaison. Il mesure ainsi la progression de l’affichage de la page. Plus le Speed Index est faible, plus l’affichage de la page est rapide.
  • Le First Input Delay (FID) selon la définition de Google : Le First Input Delay (FID) mesure le temps entre le moment ou un utilisateur interagit avec votre site (par exemple, en cliquant sur un lien, en appuyant sur un bouton, ou en utilisant une fonction personnalisée avec JavaScript), et celui ou le navigateur est capable de répondre à cette interaction.  Le FID c’est la mesure du temps entre le moment ou un utilisateur clique sur un CTA et le moment où le navigateur réponds à la demande.

Je vous présente ici des outils de vérification de la vitesse sur le web pour votre site. Ces sites sont gratuits.

Conclusion

Avec ces outils, l’optimisation de vos images devrait être facilitée. Vous pourrez désormais ajuster votre site afin d’avoir la bonne vitesse sur le web. Longue vie à vos images.

Voici une liste non exhaustive de site de test et d’optimisation

  1. Dareboost  Site de test
  2. ShortPixel Compresser ses images
  3. Pingdom Test de vitesse

Il en existe encore plein d’autres. Bon travail à vous e surveillez votre vitesse sur le web.

tableau sur la vitesse-chargement-taux-rebond

Let’s Work Together

RACONTEZ MOI VOTRE PROJET

Vous avez un projet web? , un site a réaliser avec WordPress ? Des photos professionnelles, adaptées à votre site web?

Contactez moi et ensemble nous parlerons de votre projet, dans le but de réaliser un site simple, efficace, avec du contenu attrayant. Des images optimisées et une expérience utilisateur remarquable.

PARLONS NOUS