L'autre soir, j'\u00e9tais en train de glisser sur une application sociale populaire, mes doigts glissaient avec beaucoup de vigueur, quand soudain quelques images HD cons\u00e9cutives sont rest\u00e9es coinc\u00e9es l\u00e0, tournant en rond pendant cinq ou six secondes - litt\u00e9ralement, j'ai failli jeter mon t\u00e9l\u00e9phone \u00e0 ce moment-l\u00e0. Vous avez peut-\u00eatre d\u00e9j\u00e0 \u00e9t\u00e9 confront\u00e9 \u00e0 ce genre de probl\u00e8me, n'est-ce pas ? Le chargement lent des images peut \u00eatre fatal pour les plateformes de m\u00e9dias sociaux, et les utilisateurs n'ont pas la patience d'attendre que vous mettiez en m\u00e9moire tampon. Surtout maintenant que les applications sociales ne peuvent pas \u00eatre d\u00e9plac\u00e9es pour faire face \u00e0 des attaques DDoS ou des crawlers malveillants, sans l'utilisation de CDN haute d\u00e9fense ne peut tout simplement pas top, mais une protection suppl\u00e9mentaire, la vitesse est souvent tir\u00e9e vers le bas \u00e0 nouveau. Ce n'est pas, plusieurs amis ont couru pour me demander : \u201cavec un CDN de haute d\u00e9fense, mais l'image est encore plus lente, pouvez-vous prendre en compte la s\u00e9curit\u00e9 et l'exp\u00e9rience ?\u201d<\/p>\n
Le probl\u00e8me est l\u00e0 : beaucoup de gens pensent qu'un ensemble de CDN \u00e0 haute d\u00e9fense sera parfait, mais en fait, la configuration par d\u00e9faut peut ne pas convenir du tout aux sc\u00e9narios d'images. Pour r\u00e9sister aux attaques, les CDN haute d\u00e9fense augmentent g\u00e9n\u00e9ralement les liens d'authentification ou les n\u0153uds de routage ; une mauvaise gestion ralentira la demande d'images. J'ai test\u00e9 trois services grand public - CDN5, CDN07 et 08Host, et j'ai constat\u00e9 que, selon les param\u00e8tres par d\u00e9faut, le temps de chargement de la premi\u00e8re image peut \u00eatre sup\u00e9rieur \u00e0 200 ms par rapport \u00e0 l'absence de CDN. De nos jours, m\u00eame les CDN doivent \u201cpr\u00e9venir les co\u00e9quipiers\u201d, vous devez \u00eatre en mesure de les \u00e9couter.<\/p>\n
N'attendez pas des fournisseurs de CDN qu'ils optimisent pour vous, car leurs solutions g\u00e9n\u00e9riques peuvent ne pas correspondre \u00e0 votre activit\u00e9. La cause premi\u00e8re d'un chargement lent des images est souvent triple : la taille de l'image est trop importante, l'ordre des requ\u00eates est d\u00e9raisonnable et la strat\u00e9gie de mise en cache du CDN est inutile. Sur les plateformes sociales en particulier, les utilisateurs t\u00e9l\u00e9chargent des images de diff\u00e9rentes r\u00e9solutions ; une image PNG non compress\u00e9e d\u00e9passe facilement 10 Mo, ce qui p\u00e8se directement sur le lien de transmission du CDN \u00e0 haute d\u00e9finition. Un autre probl\u00e8me est que de nombreux d\u00e9veloppeurs, afin de gagner du temps, synchronisent directement le chargement de toutes les images, la page est ouverte pour lancer des dizaines de requ\u00eates, la limite de concurrence du CDN est devenue un goulot d'\u00e9tranglement.<\/p>\n
Mon raisonnement est le suivant : la combinaison \u201ccompression + chargement paresseux\u201d permet d'\u00e9liminer le goulet d'\u00e9tranglement de la vitesse, puis d'ajuster la configuration en fonction des caract\u00e9ristiques du CDN haute d\u00e9fense. Tout d'abord, parlons de la compression - ne croyez pas que \u201cla compression sans perte est suffisante\u201d, les images sociales n'ont pas besoin de conserver l'image originale. J'utilise g\u00e9n\u00e9ralement le format WebP + la compression avec perte, mesur\u00e9e par rapport \u00e0 la r\u00e9duction du volume PNG de 70% ou plus, et l'\u0153il nu peut \u00e0 peine voir la diff\u00e9rence. Voici mon script de compression ImageMagick habituel \u00e0 placer dans le processus de t\u00e9l\u00e9chargement pour automatiser le processus :<\/p>\n
Notez que le param\u00e8tre -quality ne doit pas \u00eatre inf\u00e9rieur \u00e0 80, sinon le bruit sera trop \u00e9vident. La mise \u00e0 l'\u00e9chelle de la limite d'aspect (1920\u00d71080) emp\u00eache les utilisateurs de ralentir le CDN en transmettant des images 4K, et le suffixe > signifie une mise \u00e0 l'\u00e9chelle proportionnelle. D'ailleurs, n'oubliez pas d'ajouter -strip pour supprimer les informations Exif, ce qui permet d'\u00e9conomiser beaucoup de donn\u00e9es redondantes. Apr\u00e8s traitement, une image originale de 3 Mo peut \u00eatre r\u00e9duite \u00e0 environ 300 Ko. En utilisant CDN5 ou la transmission 08Host, le taux de r\u00e9ussite du cache est consid\u00e9rablement am\u00e9lior\u00e9, car la synchronisation entre les n\u0153uds est plus rapide pour les petits fichiers.<\/p>\n
La compression n'est pas suffisante, vous devez faire en sorte que le CDN mette en cache les images de mani\u00e8re efficace. Les CDN \u00e0 haut niveau de d\u00e9fense comme CDN07 disposent souvent de m\u00e9canismes de mise en cache multicouches, mais peuvent ignorer les variantes d'images par d\u00e9faut. Il est recommand\u00e9 de forcer les en-t\u00eates de cache, par exemple en renvoyant Cache-Control : public, max-age=2592000 (30 jours) pour les images WebP. N'utilisez pas de cha\u00eenes de requ\u00eate pour distinguer les versions d'images (comme image.jpg?v=2), ce qui invaliderait le cache CDN, mais utilisez plut\u00f4t des hachages de noms de fichiers (comme image-abc123.webp), afin que le n\u0153ud CDN puisse \u00eatre directement mis en cache et pour \u00e9viter les conflits.Le backend de 08Host prend en charge la correspondance r\u00e9guli\u00e8re du chemin de la strat\u00e9gie de mise en cache des images, ce qui est plus flexible que les param\u00e8tres globaux de CDN5.<\/p>\n
Vient ensuite le chargement diff\u00e9r\u00e9 (lazy loading), qui fonctionne particuli\u00e8rement bien pour les flux sociaux. Le principe est simple : donner la priorit\u00e9 au chargement des images dans la zone visible, et charger le reste lorsque l'utilisateur fait d\u00e9filer la page. La r\u00e9duction du nombre de requ\u00eates au premier \u00e9cran diminue naturellement la pression sur le CDN haute d\u00e9finition - apr\u00e8s tout, les d\u00e9fis de validation ou les contr\u00f4les d'itin\u00e9raire ne sont d\u00e9clench\u00e9s que sur les images n\u00e9cessaires. De nos jours, les navigateurs supportent nativement loading=\u201dlazy\u201d, mais pour des raisons de compatibilit\u00e9 avec les anciennes versions, j'avais l'habitude de l'impl\u00e9menter moi-m\u00eame en utilisant l'API Intersection Observer :<\/p>\n
Note : ajouter data-src \u00e0 la balise img pour stocker l'URL r\u00e9elle, src met une image de remplacement (image transparente de 1\u00d71 pixel). Mesur\u00e9 dans l'environnement CDN07, le nombre de requ\u00eates d'images de la page d'accueil est pass\u00e9 de 40 + \u00e0 6-8, le temps de chargement du premier \u00e9cran est plus rapide de 1,3 seconde. Cependant, ne soyez pas paresseux en chargeant trop, les images cl\u00e9s du premier \u00e9cran doivent toujours \u00eatre pr\u00e9charg\u00e9es, sinon l'utilisateur arrive \u00e0 voir un grand vide plus difficile.<\/p>\n
Il existe \u00e9galement certaines techniques d'optimisation dans le CDN de haute s\u00e9curit\u00e9 lui-m\u00eame. Par exemple, activer le protocole HTTP\/2 permet de multiplexer les requ\u00eates, afin d'\u00e9viter que le nombre de connexions TCP ne soit satur\u00e9 par les requ\u00eates d'images.08Host active par d\u00e9faut le protocole HTTP\/2, mais CDN5 doit l'ouvrir manuellement dans la console. En outre, ajuster les param\u00e8tres de compression du n\u0153ud CDN - gzip est commun, mais l'effet sur l'image est faible, il est recommand\u00e9 d'ouvrir la compression Brotli (CDN07 supporter le meilleur), le taux de compression des ressources textuelles peut \u00eatre augment\u00e9 \u00e0 nouveau 20%. Il y a aussi un petit pi\u00e8ge : les r\u00e8gles WAF du CDN de haute d\u00e9fense peuvent \u00eatre malmen\u00e9es par erreur les demandes d'image, comme par exemple Mauvaise \u00e9valuation de l'agent utilisateur ou du r\u00e9f\u00e9rent, n'oubliez pas d'ajouter le chemin de l'image statique \u00e0 la liste blanche, ou le retour inexplicable de 403 sera amusant.<\/p>\n
Enfin, n'oubliez pas le suivi et les tests A\/B. Apr\u00e8s avoir connect\u00e9 le CDN, effectuez r\u00e9guli\u00e8rement des scores avec WebPageTest ou GTmetrix, en vous concentrant sur LCP (maximum content drawing) et CLS (layout offset). J'ai rencontr\u00e9 un pic soudain de latence sur l'un des n\u0153uds du CDN5, ce qui a entra\u00een\u00e9 un chargement paresseux des images d\u00e9clench\u00e9 trop tard, et les images n'arrivaient en retard que lorsque les utilisateurs faisaient d\u00e9filer leur page fr\u00e9n\u00e9tiquement. Le probl\u00e8me a \u00e9t\u00e9 r\u00e9solu en divisant le nom de domaine (img1.example.com, img2.example.com) pour r\u00e9partir la pression des n\u0153uds du CDN.<\/p>\n
Pour \u00eatre honn\u00eate, il n'y a pas de solution unique pour l'optimisation, elle doit \u00eatre ajust\u00e9e en permanence. Le chargement des images sociales est un projet syst\u00e9matique : la compression pour r\u00e9duire le volume, le lazy loading pour r\u00e9duire la concurrence, la configuration du CDN pour am\u00e9liorer l'efficacit\u00e9 du cache - l'un des trois est indispensable. R\u00e9cemment test\u00e9e, la fonction de compression intelligente de 08Host, en fonction de l'\u00e9tat du r\u00e9seau, peut ajuster dynamiquement la qualit\u00e9 de l'image (d\u00e9gradation de la qualit\u00e9 du r\u00e9seau 4G 80%, Wi-Fi pour restaurer la qualit\u00e9 d'origine), ce qui est particuli\u00e8rement adapt\u00e9 \u00e0 la sc\u00e8ne sociale mobile. Bien s\u00fbr, si vous utilisez CDN07, vous pouvez combiner leur API d'optimisation d'image pour traiter la taille et le format en temps r\u00e9el, vous \u00e9vitant ainsi de d\u00e9ployer des services de compression.<\/p>\n
En bref, ne prenez pas le CDN \u00e0 haute d\u00e9fense comme une bo\u00eete noire, c'est \u00e0 la fois un bouclier et une lance lorsqu'il est ajust\u00e9 correctement. Maintenant, l'utilisateur brosse la carte rapidement, l'attaque est \u00e9galement emp\u00each\u00e9e, l'\u00e9quipe que les gar\u00e7ons n'ont finalement pas \u00e0 se lever au milieu de la nuit pour faire face \u00e0 l'effondrement - cette exp\u00e9rience, la valeur !<\/p>","protected":false},"excerpt":{"rendered":"
L'autre soir, j'\u00e9tais en train de glisser sur une application sociale populaire, mes doigts glissaient avec beaucoup de vigueur, quand soudain quelques images HD cons\u00e9cutives sont rest\u00e9es coinc\u00e9es l\u00e0, tournant en rond pendant cinq ou six secondes - litt\u00e9ralement, j'ai failli jeter mon t\u00e9l\u00e9phone \u00e0 ce moment-l\u00e0. Vous avez peut-\u00eatre d\u00e9j\u00e0 \u00e9t\u00e9 confront\u00e9 \u00e0 ce genre de probl\u00e8me, n'est-ce pas ? Le chargement lent des images peut \u00eatre fatal pour les plateformes de m\u00e9dias sociaux, et les utilisateurs n'ont pas la patience d'attendre que vous mettiez en m\u00e9moire tampon. Surtout maintenant que les applications sociales ne peuvent pas \u00eatre d\u00e9plac\u00e9es pour faire face \u00e0 des attaques DDoS ou des crawlers malveillants, sans l'utilisation de CDN haute d\u00e9fense ne peut tout simplement pas top, mais la protection ajout\u00e9e, la vitesse est souvent tir\u00e9e vers le bas \u00e0 nouveau. Ce n'est pas, plusieurs amis sont venus \u00e0 moi et ont demand\u00e9 : \u201cavec l'utilisation de CDN haute d\u00e9fense, mais l'image est encore plus lente, ne peut pas prendre en compte la s\u00e9curit\u00e9 et l'exp\u00e9rience ?\u201d Le probl\u00e8me est l\u00e0 : beaucoup de gens pensent qu'un ensemble de CDN haute d\u00e9finition sera parfait, en fait, la configuration par d\u00e9faut peut ne pas convenir du tout \u00e0 la sc\u00e8ne de l'image. Haute d\u00e9fense<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"gallery","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[150],"tags":[],"collection":[],"class_list":["post-1034","post","type-post","status-publish","format-gallery","hentry","category-updates","post_format-post-format-gallery"],"_links":{"self":[{"href":"https:\/\/www.ddosgj.com\/fr\/wp-json\/wp\/v2\/posts\/1034","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ddosgj.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ddosgj.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ddosgj.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ddosgj.com\/fr\/wp-json\/wp\/v2\/comments?post=1034"}],"version-history":[{"count":1,"href":"https:\/\/www.ddosgj.com\/fr\/wp-json\/wp\/v2\/posts\/1034\/revisions"}],"predecessor-version":[{"id":1091,"href":"https:\/\/www.ddosgj.com\/fr\/wp-json\/wp\/v2\/posts\/1034\/revisions\/1091"}],"wp:attachment":[{"href":"https:\/\/www.ddosgj.com\/fr\/wp-json\/wp\/v2\/media?parent=1034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ddosgj.com\/fr\/wp-json\/wp\/v2\/categories?post=1034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ddosgj.com\/fr\/wp-json\/wp\/v2\/tags?post=1034"},{"taxonomy":"collection","embeddable":true,"href":"https:\/\/www.ddosgj.com\/fr\/wp-json\/wp\/v2\/collection?post=1034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}