TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

7 façons d’optimiser les images dans WordPress pour améliorer la vitesse de chargement des pages

9

Les images font inévitablement partie de tout site Web. Comme le dit la citation populaire – "Une image vaut mille mots". Les images sont très utiles pour exprimer la pensée, en particulier pour les didacticiels, la photographie et les sites Web. Avec les médias sociaux en effervescence, il est nécessaire que vous ayez une image en vedette pour chaque message individuel pour le partager de manière attrayante.Maintenant, la question pourrait vous venir à l’esprit – j’utilise beaucoup d’images sur mon site WordPress et quelle optimisation dois-je faire ?

La réponse simple est que chaque image de votre page affecte la vitesse de chargement qui à son tour a un impact direct sur l’expérience utilisateur. Personne n’aime les sites à chargement lent et vous devez donc traiter les problèmes d’optimisation d’image avec la plus haute priorité.

Comment connaître les problèmes d’optimisation d’image ?

C’est très simple et il existe de nombreux outils gratuits pour vérifier la vitesse de chargement des pages. Google dispose d’un outil dédié PageSpeed ​​Insights pour mesurer les problèmes sur la page affectant la vitesse de chargement. Entrez l’URL de votre page sur l’outil pour voir les résultats comme ci-dessous :

7 façons d'optimiser les images dans WordPress pour améliorer la vitesse de chargement des pages

Optimiser les images dans Google PageSpeed ​​Insights

Vous devriez voir "Optimiser les images" comme un problème prioritaire lorsque vos images ne sont pas compressées. La compression d’image est l’un des principaux problèmes que vous verrez sur l’outil Google PageSpeed ​​Insights. Mais il existe de nombreux autres problèmes que vous pouvez rencontrer lors de l’utilisation d’outils tels que pingdom et GTmetrix comme ci-dessous.

  • Paralléliser les téléchargements entre les noms d’hôtes
  • Servir du contenu statique à partir d’un domaine sans cookie
  • Spécifiez les dimensions de l’image
  • Servir des images à l’échelle

Tous ces problèmes peuvent être résolus facilement avec des plugins et en suivant des directives simples.

Comment optimiser les images dans WordPress pour améliorer la vitesse de chargement des pages ?

Voici le résumé des techniques d’optimisation pour améliorer la vitesse de chargement des pages :

  1. Réduire le nombre d’images sur le serveur
  2. Utilisez le plugin pour compresser les images pour économiser la taille
  3. Servir les images du sous-domaine
  4. Utiliser la bonne taille d’image
  5. Évitez le redimensionnement dans HTML / CSS
  6. Utilisez des icônes vectorielles dans la mesure du possible
  7. Sélectionnez le format d’image approprié

1 Réduire le nombre d’images

Chaque image sur une page enverra une requête HTTP distincte à votre serveur et prendra du temps à télécharger. Le proverbe « Une image vaut mille mots » peut sembler beau, mais en réalité, utilisez des images uniquement lorsque cela est nécessaire. Moins d’images signifie moins de demandes de serveur et une page de chargement rapide.

D’autre part, les images occupent de l’espace sur votre serveur et augmentent l’hébergeur. Surtout WordPress génère un grand nombre de vignettes en fonction du thème et des plugins installés. Consultez l’article sur la façon de réduire les vignettes sur le site WordPress.

2 Compresser les images pour économiser la taille

Le navigateur doit télécharger les images depuis votre serveur lorsque la page se charge. La réduction de chaque Ko de taille comptera sur les performances ; assurez-vous donc de servir les images après une compression appropriée. Par exemple, les images contiennent des métadonnées telles que l’emplacement, les détails de l’appareil photo, etc. Sauf si vous en avez besoin explicitement, supprimez ces données à l’aide de plugins pour réduire la taille des images.

Les images peuvent être compressées de deux manières: avec et sans perte. En termes simples, la compression avec perte est un moyen irréversible et supprime certains pixels de données de l’image. Et la compression sans perte est un moyen réversible qui compresse l’image sans aucune suppression de pixels. En fonction du format d’image (PNG / JPEG / GIF), de la qualité et de la compression requise, vous devrez peut-être essayer différents plugins pour voir ce qui fonctionne pour vous.

Si vous avez peu de pages Web ou peu d’images à optimiser, nous vous recommandons de le faire via des outils de compression d’images. Voici quelques-uns des outils de compression d’image que vous pouvez utiliser :

  • gifsicle – pour créer et optimiser des images GIF
  • optipng – utiliser la compression sans perte pour réduire la taille de l’image PNG
  • pngquant – utiliser la compression avec perte pour réduire la taille de l’image PNG
  • jpegtran – compresser les images JPEG

WordPress propose de nombreux plugins de compression d’images gratuits et premium. Deux de ces plugins populaires sont – EWWW Image Optimizer et WP-Smushit. EWWW Image Optimizer a beaucoup de paramètres et effectue la compression sur votre propre serveur d’hébergement. Bien que WP-Smushit soit simple et direct, il compresse les images sur un serveur externe. Une fois installés et activés, ces plugins aideront à compresser automatiquement les images lors de leur téléchargement. Voici le tutoriel complet sur l’utilisation du plugin WP-Smushit.

7 façons d'optimiser les images dans WordPress pour améliorer la vitesse de chargement des pages

Plugin WordPress WP Smush

N’oubliez pas que les plugins de compression d’image consommeront des ressources serveur élevées. Ne compressez pas des centaines d’images à la fois, ce qui entraînerait une violation des conditions de votre hébergeur. Compressez moins d’images avec un intervalle suffisant pour éviter une charge élevée sur le serveur.

3 Servir des images à partir d’un sous-domaine

Il est recommandé d’héberger les images sur un sous-domaine distinct. Cela aidera à charger les images en parallèle avec le contenu du domaine principal. Le contenu de votre page se chargera plus rapidement car les images sont chargées à partir d’un endroit différent.

7 façons d'optimiser les images dans WordPress pour améliorer la vitesse de chargement des pages

Servir du contenu à partir de différents serveurs

Consultez notre article sur la façon de déplacer le dossier des images WordPress vers le sous-domaine.

4 Utiliser la bonne taille d’image

Préparez les images exactement avec la taille comment elles seront affichées sur le site. Lorsque vous avez besoin d’une image 600×350, ne préparez pas la taille 1200×700. Le navigateur a besoin de beaucoup de temps pour télécharger des fichiers image plus volumineux en raison de leur taille. Le plugin WP-Smushit a également une option pour définir la taille maximale des images téléchargées. Cela aidera à redimensionner les images téléchargées à la limite de taille maximale et à réduire la taille de l’image.

5 Évitez de redimensionner dans HTML / CSS

Les gens utilisent HTML et CSS pour redimensionner l’image après son téléchargement dans le navigateur. Cela ne fera qu’ajouter un peu plus de temps au chargement, car le navigateur a besoin de plus de temps pour rendre l’image à la taille requise.

Par exemple, ce n’est pas une bonne pratique de télécharger une image de 90 × 90 pixels et d’essayer de réduire la taille avec le code HTML ci-dessous.

<img src="your image URL" height=45 width=45>

6 Utiliser des icônes vectorielles

Les images normales (appelées images raster) sont de format différent et ne seront pas rendues correctement lors d’un zoom à des dimensions plus grandes. Le meilleur moyen est d’utiliser des icônes de polices SVG évolutives comme des icônes de police géniales au lieu d’images. Par exemple, les icônes du menu de navigation doivent utiliser des icônes de police SVG. L’utilisation d’images pour des icônes aussi petites déformera non seulement l’apparence, mais augmentera également le temps de chargement de la page. Vous trouverez ci-dessous un exemple d’utilisation de l’icône de police :

Je suis une icône de police, utilisez-moi à la place de l’image.

Assurez-vous d’ activer la compression GZIP au niveau du levier du serveur pour réduire la taille du fichier des images SVG et d’autres contenus.

7 Sélectionnez le format d’image approprié

Il existe trois formats d’image universellement pris en charge: GIF, PNG et JPEG. Chacun a ses avantages et ses inconvénients.

  • Utilisez GIF lorsque vous avez besoin d’animation
  • PNG peut être utilisé pour des images haute résolution et de haute qualité comme des images photographiques. Mais les images PNG seront plus grandes.
  • JPEG est plus adapté aux captures d’écran normales et aux images Web avec une taille d’image et une qualité inférieures (par rapport au PNG).

Choisissez le format d’image requis et compressez-le avec des plugins avant de le servir aux utilisateurs.

Conclusion

Lorsque vous démarrez un site Web, nous vous recommandons d’essayer plusieurs combinaisons et de vérifier laquelle vous convient. Si vous avez déjà un site en cours d’exécution avec un grand nombre d’images, utilisez des plugins pour compresser toutes les images existantes. Utilisez l’outil Google PageSpeed ​​Insight pour vérifier si le problème "Optimiser les images" est supprimé et si votre score de vitesse de page est amélioré. En suivant toutes les techniques d’optimisation énumérées ci-dessus, vous contribuerez à améliorer considérablement le score de chargement de la page jusqu’à la zone verte.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails