The other night, I was swiping on a popular social app, my fingers were swiping with vigor, when suddenly several consecutive high-definition images were stuck there spinning in circles for five or six seconds - literally, I almost threw my phone away then. You may have encountered this kind of bad thing, right? Slow loading images are a killer for social media platforms, and users don't have the patience to wait for you to buffer. Especially now that social applications are not moving to encounter DDoS attacks or malicious crawlers, without the use of high-defense CDN simply can not top, but added protection, the speed is often dragged down again. This is not, several friends ran to ask me: \u201cwith a high-defense CDN, but the picture is slower, can you take into account the security and experience?\u201d<\/p>\n
The problem is here: many people think that a set of high-defense CDN will be all right, in fact, the default configuration may not be suitable for picture scenarios at all. High-defense CDN in order to resist attacks, usually increase the authentication links or routing nodes, poorly handled will slow down the image request. I have tested three mainstream services - CDN5, CDN07 and 08Host, and found that under the default settings, the first picture loading time may be more than 200ms more than not using CDN. These days, even CDNs have to be \u201cteammate-proof\u201d, so you have to be able to tune in.<\/p>\n
Don't just expect CDN vendors to optimize for you, their generic solutions may not match your business. The root cause of slow image loading is often three things: the image size is too large, the request order is unreasonable, and the CDN caching strategy is useless. Especially social platforms, users upload pictures of varying resolutions, an uncompressed PNG picture easily more than 10MB, which directly makes the transmission link of the high-defense CDN pressure. Another pit is that many developers in order to save time, directly synchronize the loading of all the pictures, the page is opened to launch dozens of requests, CDN concurrency limit instead of becoming a bottleneck.<\/p>\n
My thinking is: \u201ccompression + lazy loading\u201d combination punch through the speed bottleneck, and then adjust the configuration for the characteristics of high-defense CDN. First of all, let's talk about compression - don't believe what \u201clossless compression is enough\u201d, social images do not need to keep the original picture. I usually use WebP format + lossy compression, measured than the PNG volume reduction of 70% or more, and the naked eye can hardly see the difference. Here's my usual ImageMagick compression script, put into the upload process to automatically handle:<\/p>\n
Note that the -quality parameter should not be lower than 80, otherwise the noise will be too obvious. Scaling the aspect limit (1920\u00d71080) prevents users from dragging down the CDN by transferring 4K images, and the suffixed > means scaling proportionally. By the way, be sure to add -strip to remove Exif information, which can save a lot of redundant data. After processing, an original 3MB graph can be pressed to about 300KB, with CDN5 or 08Host transmission, the cache hit rate increased significantly, because the synchronization of small files between nodes faster.<\/p>\n
Compression is not enough, you have to make the CDN cache images efficiently. High-defense CDNs like CDN07 often have multi-layer caching mechanisms, but may ignore image variants by default. It is recommended to force the cache header to be set, for example, for WebP images to return Cache-Control: public, max-age=2592000 (30 days). Don't use query strings to distinguish image versions (such as image.jpg?v=2), which will invalidate the CDN cache, instead use file name hashes (such as image-abc123.webp), so that the CDN node can be directly cached and to avoid conflicts.08Host's backend support for regular matching of the path of the image caching strategy, which is more flexible than the global settings of CDN5.<\/p>\n
The next step is delayed loading (lazy loading), which works especially well for social feed streams. The principle is simple: prioritize the loading of images in the visible area, and load the rest when the user scrolls. By reducing the number of first-screen requests, the pressure on the high-defense CDN naturally drops - after all, validation challenges or route checks are only triggered on necessary images. Nowadays browsers natively support loading=\u201dlazy\u201d, but for compatibility with older versions, I used to implement it myself using the Intersection Observer API:<\/p>\n
Note that you have to add data-src to the img tag to store the real URL, and src to put a placeholder image (1\u00d71 pixel transparent image). Measured in the CDN07 environment, the number of home page image requests from 40 + down to 6-8, the first screen load time faster by 1.3 seconds. However, don't be lazy to load too much, the first screen key images should still be preloaded, otherwise the user comes in to see a large blank more difficult.<\/p>\n
There are some optimization techniques in the CDN itself. For example, enable HTTP\/2 protocol can multiplex requests to avoid the number of TCP connections are full of image requests.08Host default on HTTP\/2, but CDN5 have to manually open in the console. In addition, adjust the compression settings of the CDN node - gzip is common, but the effect on the picture is poor, it is recommended to open Brotli compression (CDN07 support the best), text-based resource compression rate can be raised again 20%. There is also a small pit: high-defense CDN's WAF rules may be mistakenly injured image requests, such as Misjudgment User-Agent or Referer, remember to add the static image path to the whitelist, or inexplicably return 403 will be funny.<\/p>\n
Finally don't forget about monitoring and A\/B testing. After hooking up the CDN, run regular scores with WebPageTest or GTmetrix, focusing on LCP (maximum content drawing) and CLS (layout offset). I've encountered a sudden spike in latency on a node of CDN5, which caused lazy loading images to trigger too late, and the images only came late when users were scrolling frantically. The problem was solved by splitting the domains (img1.example.com, img2.example.com) to spread the pressure on the CDN nodes.<\/p>\n
To be honest, there is no once-and-for-all solution for optimization, and it has to be continuously adjusted. Social image loading is a systematic project: compression to reduce the volume, lazy loading to reduce concurrency, CDN configuration to enhance the efficiency of the cache - all three are indispensable. Recently tested 08Host intelligent compression function, according to the network state can dynamically adjust the quality of the picture (4G network degradation quality 80%, Wi-Fi to restore the original quality), which is particularly friendly to the mobile social scene. Of course, if you use CDN07, you can combine their image optimization API to process the size and format in real time, saving yourself the trouble of deploying compression services.<\/p>\n
In short, don't take the high defense CDN as a black box, it is both a shield and a spear when adjusted properly. Now the user brushes the map, the attack is also prevented, the team of boys finally do not have to get up in the middle of the night to deal with the collapse - the experience, value!<\/p>","protected":false},"excerpt":{"rendered":"
The other night, I was swiping on a popular social app, my fingers were swiping with vigor, when suddenly several consecutive high-definition images were stuck there spinning in circles for five or six seconds - literally, I almost threw my phone away then. You may have encountered this kind of bad thing, right? Slow loading images are a killer for social media platforms, and users don't have the patience to wait for you to buffer. Especially now that social applications are not moving to encounter DDoS attacks or malicious crawlers, without the use of high-defense CDN simply can not top, but added protection, the speed is often dragged down again. This is not, several friends ran to ask me: \u201cwith a high defense CDN, but the picture is even slower, can not take into account the security and experience?\u201d The problem is here: many people think that a set of high defense CDN will be all right, in fact, the default configuration may not be suitable for the picture scene at all. High Defense<\/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\/en\/wp-json\/wp\/v2\/posts\/1034","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ddosgj.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ddosgj.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ddosgj.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ddosgj.com\/en\/wp-json\/wp\/v2\/comments?post=1034"}],"version-history":[{"count":1,"href":"https:\/\/www.ddosgj.com\/en\/wp-json\/wp\/v2\/posts\/1034\/revisions"}],"predecessor-version":[{"id":1091,"href":"https:\/\/www.ddosgj.com\/en\/wp-json\/wp\/v2\/posts\/1034\/revisions\/1091"}],"wp:attachment":[{"href":"https:\/\/www.ddosgj.com\/en\/wp-json\/wp\/v2\/media?parent=1034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ddosgj.com\/en\/wp-json\/wp\/v2\/categories?post=1034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ddosgj.com\/en\/wp-json\/wp\/v2\/tags?post=1034"},{"taxonomy":"collection","embeddable":true,"href":"https:\/\/www.ddosgj.com\/en\/wp-json\/wp\/v2\/collection?post=1034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}