How to Use Tengxun Cloud CDN and Object Storage (COS) to Solve the Problems of Slow Image Loading and High Return Rate
Slow loading of images, server bandwidth is crowded, and monthly traffic charges are frighteningly high… As long as your website, App or applet has a large number of images, these three problems will sooner or later become your "nightmare".
The first reaction of many developers is to "increase server bandwidth", but the bandwidth fee of thousands of a month is very low in cost performance. In the era of cloud computing, the standard answer to this problem is only a combination of punches:
Tencent Cloud Object Storage (COS) + Content Delivery Network (CDN)
.
This article will use vernacular and pure actual combat logic to take you from zero configuration of this architecture, completely solve the problem of picture loading Caton and high return rate, and help you reduce your server cost by 80%.
1. why is your picture loading so slow? (pain point disassembly)
Before optimization, let's look at why the traditional "server hard load" mode collapsed.
Geographical distance limit (transmission damage): your server is located in Beijing, Shenzhen users to access, data across thousands of kilometers. If the network shakes slightly, the picture will become a "loading" hourglass.
High back-to-source rate (master station concurrent suffocation): "back-to-source" means that the CDN node has no cache and runs to your source station server to get data. If the return rate is as high as 70%-80%,CDN will lose its meaning and your server will still be overwhelmed by instantaneous high concurrency.
Single-machine bandwidth bottleneck: a 2MB high-definition picture, if 100 people open web pages to download at the same time, instantly need 200MB of bandwidth. The bandwidth of 5Mbps and 10Mbps of ordinary servers is basically paralyzed in one second.
Breaking Scheme: COS + CDN Linkage Architecture
COS (object storage): replace your local server, dedicated to storing large amounts of pictures. It has extremely high concurrent read and write capabilities and extremely low storage costs.
CDN (Distribution Network): Synchronize the pictures in COS to thousands of edge nodes across the country and even the world in advance. Users in Guangzhou take maps directly from the Guangzhou node and users in Beijing take maps from the Beijing node, with the return rate falling below 5%.
2. Phase 1: COS Infrastructure and Permission Security
First, we need to move the picture from the fragile server to the stable COS.
1. Create a bucket
Log in to the Tencent Cloud console, search for "Object Storage COS", and click Create Bucket:
Name: Any name that is easy to remember (such as my-image-bucket).
Region: We recommend that you select the same region as your CVM. For pure static distribution, select the region closest to your core user base.
Access: There's a big hole here! Be sure to select Private Read and Write ". Tips for avoiding pits: Many novices directly choose "public reading and private writing" for the convenience of drawing ". This is equivalent to exposing your real COS download address on the public network. If someone maliciously swipes your COS link, COS's downstream traffic fee will bankrupt you overnight. We must
Through the following CDN to achieve public network anti-brush.
2. Upload test pictures
After the creation is completed, enter the bucket and upload a few test pictures (for example
test.jpg
), record its path. At this point, because it is "private read and write", you will be prompted to access its object URL directly.
AccessDenied
(access denied), which indicates that the security policy is in effect.
3. Phase 2: CDN Configuration and Seamless Back-to-Origin (Core Step)
Next, we will put on the "accelerated armor" of CDN for COS ".
1. Domain name access is associated with CDN
Enter the Tencent Cloud CDN console and click "Domain Name Management"-> "Add Domain Name":
* Accelerated domain name: fill in your own prepared second-level domain name, such as img.yourdomain.com.
* Source station type: Select Tengxun COS ".
* Source site address: directly check the bucket you just created in the drop-down menu.
2. Activate "COS private bucket authentication" (key anti-brush step)
After the COS source station is selected, the system will pop up a golden option: "back-to-source authentication" or "bind permissions/private bucket authentication".
* Must check on!
* Principle: After opening, Tengxun Cloud will automatically generate an encrypted channel that only CDN knows to take the map to COS. For ordinary users, they can only access.
3. Configure CNAME (let the domain name take effect)
After adding the domain name, tengxunyun will give you a CNAME address ending with .cdn.dnsv1.com.
* Go to your domain name resolution service provider (such as Tencent Cloud DNSPod, Alibaba Cloud Resolution, etc.) and add a CNAME record.
* The host record is filled with img, and the record value is filled with the CNAME address just copied.
* Wait 2-5 minutes for global resolution to take effect.
The third stage of 4.: how to squeeze the return rate to the limit?
Many people find that the pressure on the server is still great after the CDN is matched, because the cache hit rate is too low and they return to the source every day. To solve this problem, you must adjust the following three advanced parameters in the CDN console:
1. Node cache expiration rules (the longer the better)
Images are "static resources" that, once published, are rarely modified.
* Add a rule to the CDN Cache Configuration.
* Content Type: File suffix.
* Specific suffix:. webp;.svg
* Refresh time: It is recommended to set it to 30 days or even 365 days.
* Logic: Tell the CDN node as long as the picture comes in, unless I
Refresh manually, otherwise it will not be allowed to go to COS for one year, and the picture will be nailed to the edge node directly.
2. Turn on the "filter parameter cache" (also known as ignore parameters)
When users access pictures, sometimes the URL will be followed by a tail, such as? from = weixin.
* If filtering is not turned on: CDN will think a.jpg? V = 123 and a.jpg? V = 456 are two completely different files, triggering two back-to-source COS downloads.
* Correct approach: turn on "filter parameter cache". No matter what parameters are followed, CDN will be regarded as a.jpg, directly hit the node cache, and the return rate will plummet instantly.
3. Open "Advanced Back-to-Source Configuration" (Advanced Advanced)
If you have a lot of pictures and occasionally unpopular pictures are visited, you can turn on "Range Back to Source".
* When a user requests a large 10MB image, but only looks at the first 2MB, it closes.
* If Range is not opened, CDN node will download all 10MB from COS at one go, resulting in waste of traffic.
* After the Range is turned on, the CDN will pull back as much as the user sees, thus saving money accurately.
The fourth stage of the 5.: the ultimate experience optimization-picture advanced slimming
If you think the picture is not loaded fast enough, then the "volume" of the picture is too large. Tencent Cloud offers a near-cheat tool: Data Vientiane (CI). It is directly integrated into COS and CDN, and can reduce the size of pictures by more than 60% without modifying any front-end code.
1. Turn on Vientiane Webp Adaptive
* Pain point: PNG/JPG format is too old and bulky. The WebP format is 30%-50% smaller, but some old browsers (such as IE more than ten years ago) do not support it.
* Immortal Configuration: Turn on "WebP Adaptive Distribution" in CDN or COS data Vientiane console ".
* Effect: When the user's browser supports WebP, CDN automatically converts a.jpg into WebP format in the background and sends it to the user. If it is an old browser, a.jpg is still sent. Fully automated, front-end without perception, loading speed in situ take-off.
2. Real-time cropping and compression (with parameter access)
Don't let the front end load the original image directly! If your list page only needs 200x 200 thumbnails and you pass 4K original images, the user will definitely be stuck.
* Tengxun cloud supports adding parameters directly after the picture link to allow cloud processing in real time:
* Original:
* Thumbnail of 200 width:
pg?imageMogr2/thumbnail/200x/
* Let the cloud help you with cutting. The user's mobile phone only needs to download a few KB of pictures. How can it be unpleasant?
6. summary and self-examination list
Through the above "fairy combination" configuration, we finally completed such an efficient, cost-saving and absolutely safe picture distribution architecture.
[User Browser]
│
├──> 1. Access to CDN node (img.yourdomain.com) ──> [Cache hit: 0 ms flash load]
│
This ─ ─ ─> 2. cache miss (return rate <5%)
│
However-> [encrypted secure channel]-> tengxun cloud COS (private storage bucket)-> [data Vientiane automatically transfers to WebP/clipping]
When the user browser initiates a request, it first accesses the CDN node. If the cache hits, the image will flash load in 0 milliseconds. If the cache misses (this is usually less than 5%),CDN will return to Tengxun Cloud COS private storage bucket through encrypted secure channel, automatically transfer to WebP or trim through data Vientiane, and finally return it to the user safely.
Finally, sort out a list of anti-rollover self-examination before going online for you:
Inspection items
Correct status
Why it matters
COS Bucket Permissions
Must be private read-write
Prevent malicious theft and protect the safety of assets.
CDN back-to-origin authentication
Must be turned on and authorized
Otherwise, the CDN cannot get the picture from the private COS bucket.
Picture cache time
Recommended for more than 30 days
Greatly reduce the return rate and reduce COS traffic charges.
Filter parameter cache
Must open
Prevent random URLs with parameters from killing your CDN cache
HTTPS Certificate
It is recommended to configure and force a jump
Avoid modern browsers or applets from blocking images with mixed content
Strictly follow this tutorial, and your picture loading speed will officially bid farewell to the era of "toothpaste squeezing". Even in the face of sudden millions of traffic, your server can gracefully cope with it.
