How to set image lazy loading in AnQiCMS to optimize the display performance of the page?

The website loading speed is one of the key factors in user experience and search engine optimization.Among the many factors that affect page performance, images are often the element that occupies the most resources and takes the longest to load.To provide users with a smoother browsing experience and to enhance the website's performance in search engines, it is particularly important to optimize the image loading strategy.

AnQiCMS itself is renowned for its efficiency and lightweight nature, developed in Go language, with excellent high concurrency processing capabilities and fast response speed.On this basis, by introducing the Lazy Load technology, your website can achieve significant performance improvements on pages with a large number of images.

What is image lazy loading?

Image lazy loading, as the name implies, means to delay loading images in web pages.Without lazy loading, the browser will load all the images on the page at once, regardless of whether these images are within the user's visible area.If there are many images on the page, this will greatly increase the first load time, causing users to wait, and even possibly choose to leave due to the long waiting time.

Combination of AnQiCMS with image optimization strategy

In the background content settings of AnQiCMS, you will find that the system provides a variety of practical image optimization features, such as 'Whether to enable WebP image format' and 'Whether to automatically compress large images'.These features focus on optimizing the image files themselves, making the image size smaller and loading faster.However, when the image loads, it requires the use of "lazy loading" technology to further control, which usually needs some adjustments at the template level.

The design concept of AnQiCMS focuses on flexibility and scalability, providing a very convenient way to implement lazy loading of images in templates, especially for images published through the content editor.

核心：How to set image lazy loading on AnQiCMS website?

In AnQiCMS, implementing lazy loading for images mainly involves modifying your website template files and may require introducing a lightweight JavaScript library for assistance.The entire process can be divided into several key steps.

Step 1: Understand the lazy loading attributes of AnQiCMS templates

AnQiCMS template engine provides a built-in feature for processing images.lazya property specifically for lazy loading images. When you usearchiveDetailWhen labeling articles or product content, you can use this attribute to indicate that the system should convert images in the content to lazy loading mode.

Specifically, if the lazy loading JavaScript library you are using needs to load images,srcattribute todata-srcthenarchiveDetailYou can set it like this in the tag:lazy="data-src"The system will automatically iterate through.ContentField within<img>Label, itsrcrename the property todata-src，and add a default one.srcProperty (usually a placeholder or null value), for easy lazy loading library take over.

Step 2: Modify your template file.

You need to adjust the image output in the template files of the website. This usually includes two types of images:

1. Content images for article/product detail pages:These images are usually added through the background content editor, byarchiveDetaillabel output. Find yourarchiveDetail.htmlor related detail page template files (usually intemplate/您的模板目录/{模型table}/detail.htmlorpage/detail.html），定位到输出文章/产品内容的标签：

   {%- archiveDetail articleContent with name="Content" %}
   {{articleContent|safe}}
   

   将其修改为：

   {%- archiveDetail articleContent with name="Content" lazy="data-src" %}
   {{articleContent|safe}}
   

   Please note|safe过滤器是必需的，它确保 HTML 内容被正确解析而不是转义。

2. List page thumbnail or specific area image:These images are usually througharchiveList/pageListorcategoryListand other tags to loop out the thumbnails or cover images. For these images, you need to manually adjust<img>the attributes of the tags.

   For example, if your list page (template/您的模板目录/{模型table}/list.html) contains an image code similar to this:

   <img src="{{item.Thumb}}" alt="{{item.Title}}">
   

   You need to modify it to:

   <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="{{item.Thumb}}" alt="{{item.Title}}" class="lazyload">
   

   Here we used a very small Base64 GIF as a placeholder to ensure the page structure stability. At the same time, addedclass="lazyload"English, so that subsequent JavaScript libraries can identify and process these images.

Step 3: Introduce a JavaScript library for image lazy loading

After completing the template modification, you will still need a JavaScript library to listen for scroll events and trigger when the image enters the visible area,data-srcthe actual image address to.srcproperties.

Here is a recommendation to use a lightweight and efficient library, for example.lazysizes. It is easy to integrate, has excellent performance, and supports automatic detection of image size to reduce layout offset.

Add the following code to yourbase.htmlTemplate file's</body>Label before, or<head>the label usedeferAttribute loading:

<!-- 引入 lazysizes 库 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lazysizes.min.js" async=""></script>

<script>
    // lazysizes 配置示例 (可选)
    window.lazySizesConfig = window.lazySizesConfig || {};
    window.lazySizesConfig.loadMode = 3; // 提前加载，提高用户体验
    // 其他配置...
</script>

Make sure your image<img>Label hasclass="lazyload"And the real image address isdata-srcProperties, as shown in the second step.

Step 4: Clear the cache and test

After completing the above modifications, don't forget to log in to the AnQiCMS backend, click 'Update Cache' to clear the system cache, then visit your website's front page, use the browser's developer tools (F12) to check network requests, and you will find that the images are no longer loaded immediately, but load gradually as the page scrolls.

Combined with AnQiCMS backend image optimization feature

When configuring lazy loading at the template level, don't forget that the image optimization feature built into AnQiCMS backend is also indispensable.

• Enable WebP format:In the "Content Settings
• Automatically Compress Large Images:Enabling "Auto-compress large images" and setting "Auto-compress to specified width" can effectively reduce the physical size of the original image, further reducing the file size.
• Thumbnail processing:合理设置“缩略图尺寸”和“缩略图处理方式”，可以确保列表页的图片既清晰又不过大。

These background settings work in harmony with lazy loading technology, collectively enhancing the image loading performance of your website.

Summary

Through these several steps, your AnQiCMS website has successfully deployed image lazy loading.This can not only significantly speed up page loading speed and improve user experience, but also optimize the evaluation of the website by search engines to a certain extent, providing strong support for your content marketing and SEO strategy.Remember, website optimization is a continuous process. By combining the various features provided by AnQiCMS, you will be able to create a website that is both beautiful and high-performance.

---

Common Questions (FAQ)

1. Will lazy loading affect the SEO of the website?In most cases, lazy loading of images has a positive impact on SEO. Modern search engines' crawlers can identify them very well