Les statistiques ne cessent de nous répéter sur la forte corrélation entre une baisse de la vitesse de chargement des pages d'un site et une augmentation du taux de rebond avec une diminution de la conversion. Je ne découvrirai pas l'Amérique si je dis que le site est ralenti par une charge utile "gonflée" (avec des images mal optimisées et du code HTML redondant). Cela oblige le serveur à effectuer un travail inutile. Une énorme couche de ce travail est associée aux problèmes d'optimisation d'image.
Les images correctement sélectionnées, en elles-mêmes, attirent bien l'attention et aident à augmenter les conversions, à diffuser des informations sur les réseaux sociaux et à d'autres interactions des visiteurs. Par conséquent, ils continuent d'être activement affichés sur les pages Web. Mais comment cela affecte la vitesse de chargement de ces pages est une question intéressante. Tout dépend de la stratégie d'optimisation.
Je pense que les stratégies qui reposent sur la thèse selon laquelle les images sont du contenu statique ne sont pas très efficaces (je développerai cette idée et donnerai des arguments tout au long de l'article). Les appareils mobiles représentent désormais une part importante du trafic Internet, mais il y a un problème: ces appareils ont des tailles, des résolutions d'écran, des systèmes d'exploitation et des logiciels d'application différents (par exemple, des navigateurs). Comment faire une page Web rapidement (!) Et charger correctement sur n'importe quelle plate-forme et avoir la même apparence en même temps?
Dans cet article, nous réduirons la solution à l'optimisation de l'image au stade du développement, de l'assemblage du projet et / ou au stade de la maintenance du site Web fini.
Certes, certaines stratégies d'optimisation peuvent considérablement compliquer le processus de conception et de développement, et ajouter des maux de tête à la maintenance. Je suis généralement silencieux sur le gaspillage croissant de ressources et de temps lors du montage. Il existe de nombreuses méthodes et outils pour optimiser les images. Mais certains d'entre eux ne sont pas faciles à utiliser sans automatiser des processus complexes et répétitifs. Nous examinerons quatre stratégies et découvrirons laquelle vous permet de mieux automatiser et d'optimiser les images de manière flexible (dynamique) pour différents appareils.
Nous testerons quatre stratégies. Premièrement, sans optimisation d'image, nous allons simplement fournir un code adaptatif simple au serveur avec tous les points d'arrêt et les options d'image pour eux. Ensuite, nous examinerons l'optimisation au stade de la construction, où des outils et des services spéciaux aident à préparer les variantes d'images nécessaires. La troisième stratégie est l'optimisation à l'exécution: avant de soumettre la page, un outil automatisé ou un service en ligne applique une optimisation à l'image selon un modèle donné ou en fonction des informations du navigateur. La dernière stratégie consiste à utiliser les informations sur l'appareil et le navigateur obtenues via d'autres services spécialisés pour générer et livrer des images optimisées (j'en parlerai certainement à la fin de l'article).
Attention! Divulgacher!
Une stratégie d'optimisation d'image spécifique à l'appareil donnera les meilleurs résultats. Dans cet article, nous examinerons les avantages et les inconvénients de la mise en œuvre de chaque stratégie et leur impact sur le processus de développement d'applications Web.
Le but ultime de l'optimisation d'image est d'améliorer la vitesse de chargement des pages Web. J'utilise Google PageSpeed Insight pour auditer des pages . Il vous permet d'analyser facilement l'efficacité des stratégies individuelles. Comme je l'ai écrit ci-dessus, nous allons auditer les pages mobiles.
Stratégie n ° 1: code réactif sans optimisation
J'ai pris le code responsive standard sans utiliser aucune optimisation d'image: le navigateur, en fonction de la taille de l'écran, sélectionne simplement une option plus ou moins appropriée parmi un ensemble d'images identiques de tailles différentes. Il existe plusieurs points d'arrêt dans le code pour les images de différentes tailles. Ils sont déterminés par les tailles d'affichage des téléphones mobiles, des tablettes et des ordinateurs de bureau.
Mais là encore le problème: il existe des milliers de telles configurations, et chaque jour il y en a de plus en plus. Nous devons ajouter de plus en plus de points d'arrêt. Cependant, cela nécessite plus de temps de développement, conduit à une prolifération de la base de code et, à l'avenir, à la confusion et aux erreurs.
Voici un exemple avec quatre points d'arrêt dans l'attribut srcset:
<img srcset = "image-1920.jpg 1920w,
image-1280.jpg 1280w, image-640.jpg 640w, image-480.jpg 480w" tailles = "(largeur min .: 36em) 50vw, 100vw" src = " image-320.jpg "alt =" Syntaxe d'image adaptative "/>
Pensez maintenant à la quantité de code que vous pouvez avoir dans votre projet ...
De plus, les images pour chacune des tailles listées doivent être créées séparément. Cela prend du temps, ainsi que de l'espace de stockage supplémentaire.
Vous pouvez également implémenter la réactivité avec les requêtes multimédias CSS. Vous pouvez également utiliser les éléments new et
<source>
, où <picture> est un conteneur pour un ou plusieurs éléments <source & gt et un élément <img & gt. Cependant, toutes ces approches ne permettent pas de solutions évolutives.
Enfin, ces approches ne prennent pas en compte les spécificités de l'appareil. Chaque fois que vous écrivez un code comme celui-ci, vous essayez simplement de deviner les points d'arrêt à utiliser et les tailles d'image dont vous aurez besoin. De plus, rien ne garantit que les options que vous avez bien choisies aujourd'hui fonctionneront demain.
Avantages:
- pas besoin d'acheter un logiciel ou de payer un abonnement à des logiciels ou services supplémentaires;
- Il est relativement facile d'écrire du code réactif basé sur une norme bien documentée.
Désavantages:
- un espace supplémentaire est nécessaire pour stocker des images de différentes tailles;
- du temps et des efforts supplémentaires sont nécessaires pour mettre en œuvre une telle «multivariance adaptative»;
- la croissance du code et la complexité de sa maintenance;
- Ce code ne fonctionne pas de la même manière dans tous les navigateurs;
- pas de dépendance sur le contexte de l'appareil;
- La mise à l'échelle nécessite un CDN (Content Delivery Network) distinct;
- la finalisation des nouveaux appareils, formats d'image, etc. prend beaucoup de temps.
Résultats de test
Les tests montrent que je n'ai pas choisi les meilleurs formats, et même sans compression. Et mes images sont trop grandes.
Stratégie n ° 2: Optimisation au moment de la construction
Une façon de faciliter la création de variations d'image consiste à utiliser des services d'édition ou de compression d'images spécialisés tels que Kraken , Compressor.io , mozjpeg et squoosh.
Vous téléchargez vos images et le service traite et optimise les images sur son serveur. Ensuite, vous pouvez utiliser les images optimisées dans votre projet. Vous pouvez définir des paramètres d'optimisation standard ou personnalisés: compression avec ou sans perte, redimensionnement, mise à l'échelle, etc. Certains services peuvent fournir plusieurs versions de la même image à la fois selon les dimensions requises.
Que faire si vous faites faillite et utilisez le générateur Grunt ou Gulp pour optimiser vos images ? Pour ce faire, il suffit d'affecter les tâches appropriées à effectuer lors de la construction. Le traitement d'image lui-même peut être géré par le package imagemin js .
Il peut être installé via npm ou utilisé via l'interface de ligne de commande. C'est une solution modulaire avec des plugins pour compresser différents formats d'image: par exemple, imagemin utilise mozjpeg pour JPEG et pngquant pour la compression PNG. La définition des options d'optimisation d'image est similaire à de nombreux outils SaaS.
Lors de la mise en œuvre de cette stratégie, le plus gros fardeau incombe aux développeurs. Ils doivent d'abord automatiser le traitement par lots des images en peaufinant des outils tiers, puis mettre à jour périodiquement leur code pour prendre en charge de nouveaux formats d'image.
Avantages:
- l'optimisation de l'image est effectuée sur un serveur étranger;
- les services traitent les images assez rapidement;
- le contrôle d'optimisation peut être intégré à votre flux de travail de développement et de déploiement;
- les services ont une interface pratique pour définir les paramètres d'optimisation;
- de nombreux outils gratuits (ou plans gratuits) avec des fonctionnalités assez riches.
Désavantages:
- encore une fois, la mise en œuvre de la multivariance adaptative prend beaucoup de temps;
- il n'y a toujours pas de dépendance sur le contexte de l'appareil (taille, résolution d'écran, etc.);
- a encore besoin d'espace pour stocker de nombreuses images;
- a encore besoin d'un CDN;
- il faut encore plus d'heures de travail pour implémenter davantage l'intégration avec des produits tiers via l'API;
- chaque fois que de nouvelles variantes d'images apparaissent, vous devez également exécuter l'ensemble du processus d'optimisation pour les variantes déjà existantes;
Résultats de test
En termes de points, c'est légèrement mieux que la première stratégie. Les plaintes concernant la compression se sont calmées, mais concernant les formats et les tailles trop grandes - elles demeurent.
Il est important de noter que la charge utile totale est tombée à 1,4 Mo. C'est 80% de moins qu'une solution sans stratégie nous donne, et 50% de moins qu'une stratégie avec un code adaptatif.
Stratégie n ° 3: optimisation d'exécution
Lorsque nous visitons la page à partir d'un certain appareil, le navigateur envoie une demande avec un en-tête HTTP au serveur. L'en-tête stocke des informations sur le contexte d'accès et les formats d'image.
L'optimisation d'exécution s'exécute sur le serveur, juste avant l'envoi de la réponse (contenu) au navigateur. Le but de cette optimisation est de réduire la quantité de données transmises pour accélérer le chargement de la page Web.
Par exemple, l'en-tête du navigateur Chrome ressemble à ceci:
image / avif, image / webp, image / apng, image / *, * / *; q = 0.8
Avec l'avènement des conseils client, vous pouvez transférer plus d'informations en plus champs, par exemple, DPR (ratio de pixels du périphérique, "densité de pixels", une valeur similaire à la résolution) et Viewport-Width (largeur de l'écran).
Client Hints est un protocole par lequel le navigateur, dans l'en-tête de requête HTTP, peut indiquer au serveur le type de contenu qu'il souhaite recevoir. Les conseils client ajoutent des champs supplémentaires aux en-têtes de requête HTTP contenant des informations sur le navigateur. L'une des principales caractéristiques de ce protocole est d'informer le serveur de la taille des images dont la page a besoin.
À l'aide de ces données, les optimiseurs d'exécution déterminent comment compresser les images et dans quel format les produire. Cependant, pour un redimensionnement flexible, vous devez toujours implémenter manuellement une logique adaptative basée sur des points d'arrêt.
Ces tâches sont effectuées par des optimiseurs SaaS tels que Cloudinary et imgix. Ces plates-formes ont généralement une option d'optimisation automatique lorsque le serveur d'images ou le proxy décide de la meilleure façon d'optimiser le contenu. Mais vous pouvez également personnaliser vous-même les paramètres d'optimisation à l'aide de l'API (généralement en utilisant de simples paramètres d'URL).
ImgIx est un module complémentaire CDN (Amazon CloudFront) qui permet le traitement d'images en temps réel avant l'ajout au cache. ImgIx fournit toutes les fonctionnalités nécessaires pour le traitement de l'image, ainsi qu'un certain nombre de fonctions supplémentaires, par exemple, Monochrome, Flou, Demi-teinte.
Souvent, ces services peuvent également servir de CDN. Et Cloudinary possède son propre système DAM (Digital Asset Management).
Tout va bien, mais ces optimiseurs ne peuvent pas encore analyser le contexte de l'appareil. L'en-tête HTTP peut transmettre des données d'agent utilisateur et signaler que la page a été ouverte, par exemple, à partir du navigateur Chrome sur un appareil Android. Mais ce n'est pas assez. Rien n'est dit sur le fait qu'il s'agisse d'un téléphone ou d'une tablette, et quelle est sa diagonale, la résolution d'écran.
Les images sont également stockées sur les serveurs de la plateforme, et non sur vos propres ressources. Cependant, vous disposez généralement d'un quota d'espace disque fixe avec une certaine marge en cas de nouvelles images.
Avantages:
- très peu d'efforts sont nécessaires pour optimiser les images;
- run-time CDN ;
- , , DAM ;
- URL;
- , /
- , ;
:
- , ;
- src , , -;
- - ;
- fonctionne généralement plus lentement sur les premières demandes, car le service doit obtenir une image d'une source tierce, puis l'optimiser sans aucun cache.
Résultats de test
Les plaintes concernant la compression et les formats ont presque disparu, mais vous pouvez toujours
trouver à redire à la taille.
Par rapport aux deux stratégies précédentes, la charge utile est en baisse de 88%. Maintenant, ce n'est que 897 Ko.
Stratégie n ° 4: Optimiser pour le contexte de l'appareil
Comme dans la stratégie précédente, nous avons besoin d'un service avec un serveur d'images. Il doit utiliser des en-têtes de requête pour une optimisation dynamique sensible au contexte. Par exemple, un navigateur peut déclarer la prise en charge d'AVIF via Accepter dans une requête HTTP. Ensuite, le service réfléchira au type d'image qu'il doit afficher au format AVIF. Et c'est là que commence la «magie».
Par exemple, considérez le service ImageEngine . Il est capable d'obtenir des informations complètes sur l'appareil à partir du contexte d'accès à l'aide de la bibliothèque WURFL js ... En plus du navigateur et du système d'exploitation, il peut déterminer la marque et le modèle exacts de l'appareil, ainsi que les caractéristiques de l'écran (résolution, PPI et bien d'autres). Il prend également en charge les astuces client, y compris l'en-tête save-data, avec lequel tous les services ne fonctionnent pas.
Cela permet à un tel optimiseur d'offrir des options d'image plus pertinentes pour toutes les occasions, tout en garantissant l'équilibre optimal entre la charge utile et la qualité d'image.
Ces services utilisent également des CDN pour accélérer la livraison des images et améliorer les taux de succès du cache. Cette approche présente un énorme avantage dans le segment mobile d'Internet, car il existe de nombreux appareils avec des paramètres d'écran différents.
Cette stratégie ne nécessite presque aucune complétion de code. Il est assez facile de mettre à jour les valeurs d'attribut src de la balise img en les liant au service d'optimisation. Et c'est tout.
Avantages:
- nécessite un effort minimal de développement et de maintenance;
- peut être efficacement configuré et oublié (lors de l'utilisation des paramètres d'optimisation automatique);
- optimisation automatique et manuelle des images à l'aide de directives dans l'URL;
- les plus grandes économies possibles de charge utile d'image tout en maintenant une qualité maximale;
- vous pouvez mettre en œuvre et commencer à utiliser cette stratégie en quelques minutes;
- le service d'optimisation offre généralement le meilleur rapport prix / bande passante;
- pas de prolifération de la base de code: pas de code adaptatif et pas de points d'arrêt.
Désavantages:
- src , , - ( );
- ;
- , , .
Désormais, Google PageSpeed Insights est heureux.
La plupart des indicateurs se sont considérablement améliorés. Le service a automatiquement commencé à utiliser de nouveaux formats d'image (par exemple, AVIF avec une compression optimale en fonction du contexte d'accès). De plus, pour différentes tailles d'écran, les images changent automatiquement de longueur et de largeur et sont également mises à l'échelle.
Notre charge utile totale a diminué d'environ 95%:
Et tu seras heureux
Comme vous pouvez le voir, toutes les stratégies ont leurs avantages et leurs inconvénients. Il ne fait aucun doute que les services d'optimisation d'image, en particulier ceux basés sur le contexte de l'appareil, ont un avantage.
Les troisième et quatrième stratégies vous permettront de construire rationnellement le processus de développement avec un minimum de problèmes au stade de la création, de la maintenance et du stockage des images. De plus, vous n'aurez pas besoin d'écrire du code réactif alambiqué et non évolutif. L'optimisation de l'image fonctionnera de manière fiable et flexible pour répondre aux nouvelles exigences et besoins de l'entreprise.
Ne craignez pas de perdre le contrôle de vos paramètres d'optimisation d'image, car vous pouvez effectuer vos ajustements à l'aide d'API ou de simples paramètres d'URL.
Bien sûr, vous devrez payer pour un tel plaisir. Mais les représentants des services assurent que des plans tarifaires bon marché sont fournis aux particuliers, ainsi qu'aux petites et moyennes entreprises.
Cloud VDS de Macleod est idéal pour l'hébergement de sites Web.
Inscrivez-vous en utilisant le lien ci-dessus ou en cliquant sur la bannière et bénéficiez d'une remise de 10% pour le premier mois de location d'un serveur de toute configuration!
