L'autre soir, j'étais en train de glisser sur une application sociale populaire, mes doigts glissaient avec beaucoup de vigueur, quand soudain quelques images HD consécutives sont restées coincées là, tournant en rond pendant cinq ou six secondes - littéralement, j'ai failli jeter mon téléphone à ce moment-là. Vous avez peut-être déjà été confronté à ce genre de problème, n'est-ce pas ? Le chargement lent des images peut être fatal pour les plateformes de médias sociaux, et les utilisateurs n'ont pas la patience d'attendre que vous mettiez en mémoire tampon. Surtout maintenant que les applications sociales ne peuvent pas être déplacées pour faire face à des attaques DDoS ou des crawlers malveillants, sans l'utilisation de CDN haute défense ne peut tout simplement pas top, mais une protection supplémentaire, la vitesse est souvent tirée vers le bas à nouveau. Ce n'est pas, plusieurs amis ont couru pour me demander : “avec un CDN de haute défense, mais l'image est encore plus lente, pouvez-vous prendre en compte la sécurité et l'expérience ?”
Le problème est là : beaucoup de gens pensent qu'un ensemble de CDN à haute défense sera parfait, mais en fait, la configuration par défaut peut ne pas convenir du tout aux scénarios d'images. Pour résister aux attaques, les CDN haute défense augmentent généralement les liens d'authentification ou les nœuds de routage ; une mauvaise gestion ralentira la demande d'images. J'ai testé trois services grand public - CDN5, CDN07 et 08Host, et j'ai constaté que, selon les paramètres par défaut, le temps de chargement de la première image peut être supérieur à 200 ms par rapport à l'absence de CDN. De nos jours, même les CDN doivent “prévenir les coéquipiers”, vous devez être en mesure de les écouter.
N'attendez pas des fournisseurs de CDN qu'ils optimisent pour vous, car leurs solutions génériques peuvent ne pas correspondre à votre activité. La cause première d'un chargement lent des images est souvent triple : la taille de l'image est trop importante, l'ordre des requêtes est déraisonnable et la stratégie de mise en cache du CDN est inutile. Sur les plateformes sociales en particulier, les utilisateurs téléchargent des images de différentes résolutions ; une image PNG non compressée dépasse facilement 10 Mo, ce qui pèse directement sur le lien de transmission du CDN à haute définition. Un autre problème est que de nombreux développeurs, afin de gagner du temps, synchronisent directement le chargement de toutes les images, la page est ouverte pour lancer des dizaines de requêtes, la limite de concurrence du CDN est devenue un goulot d'étranglement.
Mon raisonnement est le suivant : la combinaison “compression + chargement paresseux” permet d'éliminer le goulet d'étranglement de la vitesse, puis d'ajuster la configuration en fonction des caractéristiques du CDN haute défense. Tout d'abord, parlons de la compression - ne croyez pas que “la compression sans perte est suffisante”, les images sociales n'ont pas besoin de conserver l'image originale. J'utilise généralement le format WebP + la compression avec perte, mesurée par rapport à la réduction du volume PNG de 70% ou plus, et l'œil nu peut à peine voir la différence. Voici mon script de compression ImageMagick habituel à placer dans le processus de téléchargement pour automatiser le processus :
Notez que le paramètre -quality ne doit pas être inférieur à 80, sinon le bruit sera trop évident. La mise à l'échelle de la limite d'aspect (1920×1080) empêche les utilisateurs de ralentir le CDN en transmettant des images 4K, et le suffixe > signifie une mise à l'échelle proportionnelle. D'ailleurs, n'oubliez pas d'ajouter -strip pour supprimer les informations Exif, ce qui permet d'économiser beaucoup de données redondantes. Après traitement, une image originale de 3 Mo peut être réduite à environ 300 Ko. En utilisant CDN5 ou la transmission 08Host, le taux de réussite du cache est considérablement amélioré, car la synchronisation entre les nœuds est plus rapide pour les petits fichiers.
La compression n'est pas suffisante, vous devez faire en sorte que le CDN mette en cache les images de manière efficace. Les CDN à haut niveau de défense comme CDN07 disposent souvent de mécanismes de mise en cache multicouches, mais peuvent ignorer les variantes d'images par défaut. Il est recommandé de forcer les en-têtes de cache, par exemple en renvoyant Cache-Control : public, max-age=2592000 (30 jours) pour les images WebP. N'utilisez pas de chaînes de requête pour distinguer les versions d'images (comme image.jpg?v=2), ce qui invaliderait le cache CDN, mais utilisez plutôt des hachages de noms de fichiers (comme image-abc123.webp), afin que le nœud CDN puisse être directement mis en cache et pour éviter les conflits.Le backend de 08Host prend en charge la correspondance régulière du chemin de la stratégie de mise en cache des images, ce qui est plus flexible que les paramètres globaux de CDN5.
Vient ensuite le chargement différé (lazy loading), qui fonctionne particulièrement bien pour les flux sociaux. Le principe est simple : donner la priorité au chargement des images dans la zone visible, et charger le reste lorsque l'utilisateur fait défiler la page. La réduction du nombre de requêtes au premier écran diminue naturellement la pression sur le CDN haute définition - après tout, les défis de validation ou les contrôles d'itinéraire ne sont déclenchés que sur les images nécessaires. De nos jours, les navigateurs supportent nativement loading=”lazy”, mais pour des raisons de compatibilité avec les anciennes versions, j'avais l'habitude de l'implémenter moi-même en utilisant l'API Intersection Observer :
Note : ajouter data-src à la balise img pour stocker l'URL réelle, src met une image de remplacement (image transparente de 1×1 pixel). Mesuré dans l'environnement CDN07, le nombre de requêtes d'images de la page d'accueil est passé de 40 + à 6-8, le temps de chargement du premier écran est plus rapide de 1,3 seconde. Cependant, ne soyez pas paresseux en chargeant trop, les images clés du premier écran doivent toujours être préchargées, sinon l'utilisateur arrive à voir un grand vide plus difficile.
Il existe également certaines techniques d'optimisation dans le CDN de haute sécurité lui-même. Par exemple, activer le protocole HTTP/2 permet de multiplexer les requêtes, afin d'éviter que le nombre de connexions TCP ne soit saturé par les requêtes d'images.08Host active par défaut le protocole HTTP/2, mais CDN5 doit l'ouvrir manuellement dans la console. En outre, ajuster les paramètres de compression du nœud CDN - gzip est commun, mais l'effet sur l'image est faible, il est recommandé d'ouvrir la compression Brotli (CDN07 supporter le meilleur), le taux de compression des ressources textuelles peut être augmenté à nouveau 20%. Il y a aussi un petit piège : les règles WAF du CDN de haute défense peuvent être malmenées par erreur les demandes d'image, comme par exemple Mauvaise évaluation de l'agent utilisateur ou du référent, n'oubliez pas d'ajouter le chemin de l'image statique à la liste blanche, ou le retour inexplicable de 403 sera amusant.
Enfin, n'oubliez pas le suivi et les tests A/B. Après avoir connecté le CDN, effectuez régulièrement des scores avec WebPageTest ou GTmetrix, en vous concentrant sur LCP (maximum content drawing) et CLS (layout offset). J'ai rencontré un pic soudain de latence sur l'un des nœuds du CDN5, ce qui a entraîné un chargement paresseux des images déclenché trop tard, et les images n'arrivaient en retard que lorsque les utilisateurs faisaient défiler leur page frénétiquement. Le problème a été résolu en divisant le nom de domaine (img1.example.com, img2.example.com) pour répartir la pression des nœuds du CDN.
Pour être honnête, il n'y a pas de solution unique pour l'optimisation, elle doit être ajustée en permanence. Le chargement des images sociales est un projet systématique : la compression pour réduire le volume, le lazy loading pour réduire la concurrence, la configuration du CDN pour améliorer l'efficacité du cache - l'un des trois est indispensable. Récemment testée, la fonction de compression intelligente de 08Host, en fonction de l'état du réseau, peut ajuster dynamiquement la qualité de l'image (dégradation de la qualité du réseau 4G 80%, Wi-Fi pour restaurer la qualité d'origine), ce qui est particulièrement adapté à la scène sociale mobile. Bien sûr, si vous utilisez CDN07, vous pouvez combiner leur API d'optimisation d'image pour traiter la taille et le format en temps réel, vous évitant ainsi de déployer des services de compression.
En bref, ne prenez pas le CDN à haute défense comme une boîte noire, c'est à la fois un bouclier et une lance lorsqu'il est ajusté correctement. Maintenant, l'utilisateur brosse la carte rapidement, l'attaque est également empêchée, l'équipe que les garçons n'ont finalement pas à se lever au milieu de la nuit pour faire face à l'effondrement - cette expérience, la valeur !
