Preface
A few days ago, I discovered a major issue with my blog. The blog pages would load instantly, but the images would load slowly, taking up a lot of time, especially when there were multiple large-sized images in an article. In order to solve this problem, I tried to find a good solution in this post.
Solution
I also provided three solutions:
Write a program to automatically reduce the size of uploaded images in the Halo backend. This is the best solution I could think of.Use a built-in thumbnail feature of an image hosting service. However, it is more reliable to host the resources on my own server. Unstable image hosting websites may cause image loss.Resize the photos before uploading them. Unless there is a recommended batch processing software, this method is quite cumbersome.
However, all of these three solutions have certain problems. After continuous research, I found what could be the best solution.
Optimal Solution
1. Cloud storage + image processing - Break through the bandwidth limitation by combining with built-in image processing.
2. Gzip - Optimize webpage loading speed.
3. CDN acceleration or full-site acceleration.
First Choice - Trying Upyun and Discovering Some Problems
Since I heard that many people initially configured Upyun storage because it provides free space and traffic, it only costs a few dollars per year. However, I couldn't configure it properly, so I didn't pay much attention to it. One day, I suddenly realized that the problem was with the SSL certificate. The image display address needs to be resolved to my own domain name, but Halo automatically binds the HTTPS webpage with the HTTPS attachment URL based on the principle of certificate synchronization. Therefore, if the blog uses HTTPS, the attachment URL should also be HTTPS, otherwise it cannot be accessed. In short, configuring cloud storage for the first time requires continuous trial and error. Let's get to the point.
Configuring Alibaba Cloud Object Storage Service (OSS) for Halo
Price Analysis
Purchase object storage on Alibaba Cloud. According to the pricing, files below 5GB are free, but functions related to data transmission are charged. Although you can use it first and pay later, we have no problem with the experience because Alibaba Cloud supports a maximum of 10 yuan in arrears.
Attachment Configuration in Halo Backend
In the Halo backend, go to System - Blog Settings - Attachment Settings - Storage Location and change it to Alibaba Cloud. Fill in the other information later.
Creating a Bucket
Create a bucket in the Alibaba Cloud management console, and pay attention to the storage type being Standard Storage. The read and write permissions can be set to Public Read, and other settings do not affect it. Remember to fill in the bucket name in the Halo backend.
Click on the created bucket name, go to the Overview section on the left sidebar, and note down the Endpoint (Region Node) and Bucket Domain Name under Access Domain - Public Network Access. Fill in these details in the Halo backend. Of course, you can also bind it to your own domain name, you can try it yourself, but pay attention to the HTTP and HTTPS protocols (I fell into this pit).
Creating an Access Sub-account
Click on the personal profile in the upper right corner of the Alibaba Cloud interface and go to AccessKey Management, which can be understood as setting up a dedicated account for enabling access permissions.
Start using Sub-account - Create User, and make sure to check Programmatic Access.
After creating the user, you will get the AccessKey ID and AccessKey Secret, which should be filled in the Halo backend.
Go back to the OSS console and click on the created bucket name. Go to Permission Management - Bucket Authorization Policy - Add Authorization - Sub-account, and select the newly created sub-user. Make sure to select Full Control.
*Image Processing
Image processing is a very important step. Nowadays, whether it is photos or screenshots, the file sizes are not small. In the case of slow broadband, it is necessary to compress the images appropriately to improve the loading speed.
In the OSS console, go to Data Processing - Image Processing - Create Style, and adjust it according to your needs.
After creating it, pay attention to the Image Processing Domain Name Rule:
Domain/sample.jpg?x-oss-process=style/stylename
This corresponds to the Image Processing Strategy in Halo. Fill in the modifications accordingly.
It is important to note that image processing is done during the upload process, so the modified image processing plan cannot be applied to existing processed images. Therefore, it is recommended to keep trying until you find the perfect solution before batch uploading.
Here is my recommended solution:
Other Recommended Cloud Storage Platforms
I recommend the free cloud storage platform Upyun, and I am particularly optimistic about their Upyun League campaign. You can add a link to their website in the footer of your website. However, Upyun does not support browsing attachments in the Halo backend.
Reference Articles
Building an Image Hosting Service for a Blog
Practical Results of OSS Pricing
Halo & Upyun
Enabling Gzip on a Website