` to `

In today's fast-paced online environment, website loading speed is crucial for user experience and search engine rankings.Images are often a major component of web content and can also be a key factor affecting page loading performance.To solve this problem, the Lazy Loading image technology emerged.AnQiCMS as an efficient content management system, provides us with flexible image optimization and lazy loading implementation solutions.

Understanding image lazy loading and its importance

Lazy loading of images, as the name implies, is to delay loading images on web pages.It does not download all images immediately when the page is first loaded, but only those that appear in the user's viewport (that is, the visible area on the screen).When the user scrolls the page, new images will enter the viewport before they are loaded.

This loading strategy brings significant benefits:

  • Improve the speed of the first screen load:Reduced the amount of data requests during the first load, allowing users to see the page content faster.
  • Save bandwidth resources:Avoided loading images that the user may never see, thereby reducing bandwidth consumption on the server and the user's end.
  • Improve user experience:The page response is faster, reducing the user's waiting time, especially for mobile device users.
  • Beneficial for SEO:Search engines are increasingly focusing on page loading speed, lazy loading can help improve the Core Web Vitals score of a website, which may lead to better search rankings.

AnQiCMS as a platform committed to providing efficient and customizable solutions naturally also considers the impact of image optimization on the overall performance of the website.

AnQiCMS image processing strategy overview

Before delving into lazy loading, it is worth mentioning that AnQiCMS itself provides a variety of image optimization features, which complement lazy loading and help improve website performance. We can find these options in the "Content Settings" panel:

  • Remote Image Download:If the content refers to an external link image, the system can choose to download it to the local server for unified management and optimization.
  • WebP image format conversion:WebP is a modern image format that is usually much smaller than JPEG and PNG files and can maintain high quality.AnQiCMS supports automatic conversion of uploaded images to WebP format, significantly reducing the size of the images.
  • Automatically compress large images:For images that are too large, the system can automatically compress them, specifying the maximum width after compression, which helps reduce the file size of the image and accelerate the transmission speed.
  • Flexible thumbnail processing:We can set the thumbnail size and processing method (such as proportional scaling based on the longest edge, cropping based on the shortest edge, etc.) to meet the needs of different page layouts and avoid loading the original large image on the list page.In addition, the system also supports batch regeneration of thumbnails, which is convenient for adjusting and optimizing strategies.

These built-in image processing functions provide high-quality, small-volume image sources for lazy loading, making the lazy loading effect better.

Implement image lazy loading: core method

AnQiCMS through its powerful template system provides a flexible implementation for lazy loading of images in document content.Although it does not have a global 'one-click enable' switch, it allows us to easily implement image lazy loading effects by using template tags during content rendering.

Manually set (template level)

The lazy loading of images in the AnQiCMS document mainly involves modifying the template. When we edit articles or product content in the background, the images we insert will eventually be loaded througharchiveDetailThis tag is used to render and display. This tag provides alazyattribute, specifically used for integrating lazy loading of images.

For example, using the document content,tag-/anqiapi-archive/142.htmlThe document explains in detail.ContentThe field calling method should be specified:

The Content field supports lazyload for images. It needs to be usedlazy="{定义的src名}"Process, for example, if you use the lazyload plugin you need to<img src="" />to<img data-src="" />call it like thislazy="data-src"

This means that AnQiCMS can recognize and convert the attributes of image tags when rendering document content. Suppose we choose a common front-end lazy loading JavaScript library, such asLazysizesIt usually will display the image'ssrcattribute is replaced withdata-srcand when the image enters the viewport it willdata-srcAssign the value againsrc.

Therefore, in our template (for exampledetail.htmlorarchive/detail.html) when rendering the document content, we can set it like this:

{# 假设archiveContent变量存储了文档的HTML内容 #}
<div>
    {%- archiveDetail archiveContent with name="Content" lazy="data-src" %}
    {{archiveContent|safe}}
</div>

Here:

  • {% archiveDetail archiveContent with name="Content" ... %}: Is used by AnQiCMS to obtain documentsContentfield content label.
  • lazy="data-src": This is the key. It tells AnQiCMS, during renderingContentall in the field<img>when the tag is rendered,srcthe value of the properties is transferred todata-srcThe attribute contains, and sets the originalsrcThe attribute is set to empty or a placeholder (the specific behavior depends on the CMS implementation, but the purpose is to not load the image immediately).
  • {{archiveContent|safe}}:|safeThe filter is crucial, it ensures thatarchiveContentThe HTML content contained is not escaped but is output as raw HTML to the page so that the browser and front-end JavaScript libraries can parse and handle it correctly.

Combine with front-end JavaScript library

Only set in the templatelazy="data-src"It is not enough to implement lazy loading. This only changes the HTML structure of the image. The browser does not know.data-srcThe meaning. We need a frontend JavaScript library to listen for page scroll events, determine if an image is in the viewport, and based on that, assigndata-srcthe content back.srcThus, it triggers image loading.

There are common lazy loading libraries:

  • Lazysizes:Powerful, easy to integrate, and supports responsive images.
  • lozad.js:Lightweight, using Intersection Observer API, excellent performance.
  • Native Lazy Loading:Modern browsers (Chrome, Firefox, etc.) already support it nativelyloading="lazy"Properties. If only the users who support these browsers are considered, the AnQiCMS can be used directly.lazyproperties toloading="lazy".

To integrate these libraries, it usually only needs to be added to the page.<head>or<body>Add the corresponding JS file at the bottom of the tag. For example, using Lazysizes:

<script src="path/to/lazysizes.min.js" async=""></script>

Or, if AnQiCMS'slazyproperty supports it directlyloading="lazy"And your target browser supports native lazy loading, you even don't need any additional JS library.

Optimization Practices and Suggestions

  1. Choose the appropriate lazy loading scheme:Consider your website audience and browser compatibility needs. For most modern websites, it is advisable to prioritize nativeloading="lazy"Property. If you need broader compatibility and advanced features (such as preloading, responsive images, etc.), choose a mature JS library.
  2. Test and verification:After deploying lazy loading, it is necessary to test on different devices and browsers to ensure that images can be loaded normally and the lazy loading effect meets expectations.Check the network request to confirm that the image is loaded only when it scrolls into the viewport.
  3. Combine AnQiCMS image optimization feature:Lazy loading is not万能。It solves the problem of “when to load”，but “what to load” is also important.Be sure to combine the AnQiCMS backend's WebP conversion, image compression, and thumbnail generation functions to ensure that the loaded images are optimized, with small file sizes and high quality.
  4. Provide placeholder or background color:Before the image is loaded, the page may appear blank or have jumping content. You can set a background color placeholder for the image using CSS, or use a very small blurred image assrcPlaceholder to smooth user experience.
  5. Note the first screen image:Images within the first screen (the area that users can see without scrolling) are usually not recommended for lazy loading, as they are the first content that users see and should be loaded as soon as possible.Lazy loading should mainly be applied to the content below the first screen.

By flexible application