` becomes `

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

Understanding image lazy loading and its importance

Image lazy loading, as the name implies, means delaying the loading of images in 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 (i.e., the visible area on the screen).When the user scrolls the page, new images will only be loaded as they enter the viewport.

This loading strategy brings significant benefits:

  • Enhance the speed of the first screen load:Reduces the amount of data requested during the first load, allowing users to see the page content faster.
  • Save bandwidth resources:Prevented loading images that the user might never see, thereby reducing bandwidth consumption on both the server and the user's end.
  • Improved user experience:The page response is faster, reducing the user's waiting time, especially more noticeable for mobile device users.
  • Beneficial for SEO:Search engines are increasingly emphasizing page loading speed, lazy loading helps 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 to enhance website performance. We can find these options in the 'Content Settings' section of the backend:

  • Remote Image Download:If the content references external link images, the system can choose to download them 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 while maintaining high quality.AnQiCMS supports automatically converting uploaded images to WebP format, significantly reducing image size.
  • Automatically Compress Large Images:For images that are too large, the system can automatically compress them and specify the maximum width after compression, which helps reduce the size of the image file and accelerate transmission speed.
  • Flexible thumbnail processing:We can set the thumbnail size and processing methods (such as proportional scaling by the longest edge, cropping by the shortest edge, etc.) to meet the needs of different page layouts and avoid loading original large images on list pages.In addition, the system also supports batch re-generating thumbnails for easy adjustment of optimization strategies.

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

Implement lazy loading of images: core method

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

Manual setting (template level)

The lazy loading of images in AnQiCMS document content is mainly achieved by modifying the template. When we edit articles or product content in the background, the images inserted will eventually bearchiveDetailThis tag is used to render display. This tag provides alazyattribute, specifically for integrating lazy loading of images.

Taking the document content as an example,tag-/anqiapi-archive/142.htmlthe document describes in detail.ContentThe calling method of the field, and especially note:

The Content field supports the lazyload usage of images. It needs to uselazy="{定义的src名}"Handle it, for example, if you use the lazyload plugin, you need to call it like this<img src="" />change it to<img data-src="" />Then call it like thislazy="data-src"

This means that AnQiCMS is able to 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 add an image'ssrcattribute in the content withdata-src, and when the image enters the viewport it willdata-srcthe value to reassign tosrc.

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" ... %}This is used by AnQiCMS to get the documentContenttag for field content.
  • lazy="data-src"This is the key. It tells AnQiCMS, when renderingContentall the tags in the field<img>to be displayedsrcThe value of the attribute is migrated todata-srcthe attribute, and the originalsrcattribute is set to empty or a placeholder (the specific behavior depends on the internal implementation of CMS, but the purpose is to not load the image immediately).
  • {{archiveContent|safe}}:|safeThe filter is crucial, it ensures thatarchiveContentThe HTML content contained within will not be escaped, but will be output as raw HTML directly to the page, so that the browser and frontend JavaScript libraries can correctly parse and handle it.

[en] Accompanying the front-end JavaScript library

[en] Simply setting in the templatelazy="data-src"[en] Is not enough to achieve lazy loading. This only changes the HTML structure of the image. The browser does not knowdata-srcThe meaning. We need a frontend JavaScript library to listen to page scroll events, determine if the image is in the viewport, and based on this assign the value back.data-srcthe content back.srcThus triggering the image loading.

Common lazy loading libraries include:

  • Lazysizes:Powerful, easy to integrate, and supports responsive images.
  • lozad.js:Lightweight, uses Intersection Observer API, excellent performance.
  • Native Lazy Loading:Modern browsers (Chrome, Firefox, etc.) already have native supportloading="lazy"Properties. If only considering users who support these browsers, you can directly allow AnQiCMS tolazyThe attribute converts toloading="lazy".

To integrate these libraries, usually just need to include in the page's<head>or<body>Load 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'slazyattribute directly supportsloading="lazy"And your target browser supports native lazy loading, you don't even need an additional JS library.

Optimization Practices and Recommendations

  1. Choose an appropriate lazy loading solution:Consider your website audience and browser compatibility needs. For most modern websites, it is preferable to prioritize nativeloading="lazy"Properties. If you need broader compatibility and advanced features (such as preloading, responsive images, etc.), choose a mature JS library.
  2. Testing and verification:After deploying lazy loading, it is essential to test on different devices and browsers to ensure that images load normally and the lazy loading effect meets expectations.Check the network request to confirm that the image is loaded only when it rolls into the viewport.
  3. Combine with AnQiCMS image optimization feature:Lazy loading is not万能.It solves the problem of 'when to load', but what to load is equally important.Ensure that the images loaded are optimized by combining the AnQiCMS backend's WebP conversion, image compression, and thumbnail generation features, so that the file size is small and the image quality is high.
  4. Provide placeholders or background color:Before the image is loaded, the page may appear with blank areas or jumping content. You can set a background color placeholder for the image using CSS, or use a very slightly blurred image assrcPlaceholder to smooth user experience.
  5. Attention to the first screen image:For images within the first screen (the area that users can see without scrolling), it is generally not recommended to use 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 using flexibility