In website operations, page loading speed is always one of the key factors affecting user experience and search engine optimization (SEO).Especially for content-rich websites, images are often the 'biggest drag' on page speed.Therefore, how to efficiently manage image resources has become an indispensable part of improving website performance.Today, let's talk about how AnQiCMS cleverly implements lazy loading of images in document content, thus significantly improving page loading speed.
In AnQiCMS's design philosophy, website performance optimization is one of its core advantages.Based on the high concurrency features of the Go language, the AnQiCMS system inherently has the ability to respond quickly.On this basis, it also lays a solid foundation for website loading speed through a series of fine-grained image processing strategies, such as static caching, WebP image format conversion, automatic compression of large images, and flexible thumbnail processing methods.These features are optimized from the source of image upload, reducing the image size and thus lowering the transmission time.
However, even if the image has been compressed to the extreme and optimized in format, if there are a large number of images on the page, the browser still needs to download all the images during the initial load. This still consumes a lot of bandwidth and time, affecting the user's first visit experience.这时，图片懒加载（Lazy Loading）就成了解决这一问题的English。
In AnQiCMS, the implementation of image lazy loading for document content is particularly flexible and efficient. The system is built-in with support for detailed pages of documents.ContentField image (that is, the image in the article text) special processing ability. When we use such{% archiveDetail with name="Content" lazy="data-src" %}such template tags to output the main content of the article, the AnQiCMS system will intelligently process the content on the backend.<img>TagssrcThe attribute converts todata-srcOr other properties required by the front-end lazy loading library you specified.
For example, the original image tag might be<img src="https://en.anqicms.com/uploads/image.jpg" alt="描述">After processing by AnQiCMS, it might become<img data-src="https://en.anqicms.com/uploads/image.jpg" alt="描述">Here,data-srcis a custom attribute that is not currently recognized by the browser as an image source.So, when the browser parses the page, it will not actively download this image, but will wait for the "command" of the front-end lazy loading script.
Of course, it is not enough to convert properties only on the backend; we also need to introduce a small piece of JavaScript code on the frontend to 'command' the browser when to load these images. This is usually achieved through a lightweight frontend lazy loading library, such as usingIntersectionObserverAPI or some popular lazy loading JS libraries. You can include this script in the public header file of the template (such asbase.html). When the script detects images (withdata-srcProperty) will enter the user's viewport, it willdata-srcthe value to reassign tosrctrigger the formal loading of the image.
In the daily content publishing work, these optimization methods complement lazy loading.Combine the 'Content Settings' feature provided by AnQiCMS backend, we can further enhance the image optimization effect.For example, enable WebP image format conversion to automatically convert all uploaded images to a smaller WebP format; set automatic compression for large images to avoid wasting resources due to direct uploading of ultra-large images; and flexibly configure thumbnail sizes to ensure efficient image loading in scenarios such as list pages.These background configurations do not require manual intervention, once set, they can take effect automatically, greatly enhancing the efficiency of content operation.
Common Questions (FAQ)
问：Lazy loading 是否适用于所有页面上的图片，包括缩略图和Banner图？Answer: AnQiCMS built-in
lazy="data-src"属性转换主要针对通过archiveDetail标签输出的文档ContentField image. For other images, such asarchiveListorcategoryListthumbnail output by labelThumb), and Banner image (Logo), they are usually used directlysrcProperties. If you want these images to also implement lazy loading, you may need to manually write or introduce a more general JavaScript lazy loading library and adjust it according to its requirements.<img>Label structure, for example, tosrcwithdata-src, and remove after the image is loadeddata-src.问：If I have enabled the WebP conversion and image compression features of AnQiCMS, do I still need to implement image lazy loading?答：Yes, it is highly recommended to enable simultaneously.WebP conversion and image compression optimize the image from the file size perspective, reducing the transmission volume of individual images.The image lazy loading is optimized at the loading timing level, reducing the number of images that need to be downloaded during the initial loading of the page.The combination can achieve the dual effects of “smaller volume” and “on-demand loading”, bringing **excellent image performance** to the website.
问：Implementing image lazy loading requires what technical foundations?答：Mainly need to understand HTML template editing (familiar with AnQiCMS Django template engine syntax), CSS style, and basic JavaScript knowledge. In AnQiCMS, you need to edit template files (for example
base.htmlor specific document detail page template) and add lazy loading JavaScript code.If you choose to use an existing front-end lazy loading library, it usually only requires simple introduction and initial configuration according to the library's documentation.srcproperties todata-srcThe conversion, greatly simplified the implementation difficulty.