How to implement lazy loading of images in document content to optimize display performance?

Optimize website display performance: A practical guide to implementing lazy loading of images in Anqi CMS

In today's internet age, the loading speed of websites is crucial for user experience and search engine rankings.Large image files are often one of the main culprits that slow down website loading speed.Luckily, the Lazy Loading technology for images can effectively solve this problem.Images are only loaded when the user scrolls to their visible area, thus significantly improving the initial loading speed of the page, saving bandwidth, and improving the overall user experience.

The AnQi CMS is an efficient enterprise-level content management system that fully considers the needs of website performance optimization.It has good support for lazy loading of images, allowing users to easily implement this feature when publishing document content without complex secondary development.

What is lazy loading of images and why is it important?

In simple terms, lazy loading of images is 'on-demand loading'.When a user visits a web page with a large number of images, the traditional loading method loads all the images at once, regardless of whether these images are within the user's current viewport (visible area on the screen).This may cause the page to load slowly, especially on mobile devices, and users may feel impatient while waiting, even leaving directly.

The advantages of image lazy loading are reflected in several aspects:

• Improve page loading speed:Only load images in the visible area of the page when it is first loaded, greatly reducing the initial loading content, allowing users to see the main content of the page faster.
• Improve user experience:The page responds faster, reducing the white screen time, and users can browse content more smoothly.
• Save bandwidth resources:Images that the user has not scrolled to or have never visited will not be loaded, thereby saving unnecessary bandwidth consumption for the server and the user.
• Beneficial for SEO optimization:Search engines are increasingly emphasizing the loading speed and user experience of websites. Faster loading speeds help improve the ranking of websites in search results.

How does AnQi CMS support lazy loading of images?

AnQi CMS provides specific template tag attributes in document content (Content) output to cooperate with the implementation of image lazy loading. The core isarchiveDetailIn the tag, forContentAdd a fieldlazyProperty.

When we use in the templatelazy="data-src"After such settings, Anqi CMS will intelligently handle the document content in the<img>tags. It will keep the original of the imagesrcThe attribute (i.e., the actual address of the image) is converted or moved to a custom attribute, such asdata-src. This way, when the browser parses HTML, it will not immediately load these images because theirsrcattribute is empty or points to a placeholder.

To truly implement lazy loading of images, it is necessary to work with frontend JavaScript code to “activate” these images. This JavaScript code typically runs when the image enters the user's viewport anddata-srcReplace the real image address withsrcto trigger the image loading.

Hands-on practice: Enable lazy loading of images in document content.

To enable lazy loading of images on the document detail page of your Anqi CMS website, you need to modify the template file used to display the document content. This usually involvesarchiveDetail.

Assuming you are usingarchiveDetailTag to output the documentContentField, the template code may look like this:

{# 默认用法，自动获取当前页面文档 #}
<div>文档内容：{% archiveDetail with name="Content" %}</div>

To enable lazy loading of images, you need to add this taglazy="data-src"Properties. At the same time, since the content may contain HTML tags, we usually cooperate with|safeA filter to ensure that HTML code is parsed correctly rather than being escaped. The modified template code will be like this:

{# 启用图片懒加载的文档内容输出 #}
{% archiveDetail articleContent with name="Content" lazy="data-src" %}
{{articleContent|safe}}

Here:

• articleContentIs the variable name you define for the content data you obtain, you can customize it as needed.
• name="Content"Specify the document to be retrieved.Contentfield.
• lazy="data-src"It is the key to lazy loading. It tells Anqi CMS to output content while<img>label'ssrcattribute is replaced withdata-src. You can change it according to the requirements of the frontend lazy loading JavaScript library you choose,data-srcFor other values, for exampledata-originaletc.
• {{articleContent|safe}}Make sure to output the obtained HTML content as safe HTML, not plain text, so that the<img>tags can be correctly identified by the browser.

Choose the appropriate JavaScript lazy loading scheme

As mentioned before, the Anqi CMS'slazyThe property setting only completes the preparation of the HTML structure, and the actual lazy loading function needs to be implemented through JavaScript. There are many mature JavaScript lazy loading libraries to choose from, such aslazysizes.js/vanilla-lazyloadBased on, they are usuallyIntersection Observer APIImplementation, with good performance and wide compatibility.

Start withlazysizes.jsFor example, its use is very simple:

1. Introduce a JavaScript library:tolazysizes.jsFile included in your template file (usuallybase.htmlor other common header or footer template). For example:

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

2. (Optional) Add placeholder image:You can set a background color or a low-quality placeholder for lazy-loaded images in CSS to improve user experience and avoid blank spaces before the image loads.
3. (Optional) Configure lazysizes:For more advanced features, you can consultlazysizes.jsthe official documentation for configuration.

Whenlazysizes.jsAfter being introduced and executed, it automatically detects all tags withdata-src(or the other attributes you specify) of<img>, and automatically moves their values todata-srcwhen they enter the user's viewportsrcAttribute, thus triggering image loading.

Further optimization: Combine with other image processing features of Anqi CMS.

In addition to lazy loading images, Anqi CMS also provides other practical image processing features that can be used with lazy loading to further improve website performance:

• Enable WebP image format:In the AnQi CMS backend, you can choose to enable the WebP image format.WebP is a modern image format that is usually smaller than JPEG and PNG files while maintaining the same or better quality.After enabling, uploaded images will be automatically converted to WebP format, reducing image size.
• Automatically compress large images and thumbnails:The Anqi CMS allows you to set automatic compression of large images to a specified width and provides various thumbnail processing methods (proportional scaling by the longest side, padding by the longest side, and cropping by the shortest side).Set these parameters reasonably to ensure that the image size on the website is moderate, reducing file size, and further speeding up loading speed.
• Use CDN for acceleration:Combining lazy loading with CDN (Content Delivery Network) allows images to be loaded from the server closest to the user, further shortening the distance of image transmission, and achieving faster loading speeds.

By following these steps, you can effectively implement lazy loading of images on the Anqi CMS website and combine it with other optimization strategies to provide your users with a faster, smoother browsing experience.

Frequently Asked Questions (FAQ)

1. Why did I set it according to the guidelazy="data-src", but the image still loaded directly?

This is likely because you only configured the Anqi CMS outputdata-srcThe attribute is present, but no corresponding JavaScript lazy loading library has been introduced to “activate” these images.lazy="data-src"It only tells the browser where the image address isdata-srcin, but it will not automatically move it tosrc. You need to uselazysizes.jssuch a front-end JavaScript library to listen for when these images enter the viewport, and assigndata-srcthe value tosrc.

2. Does lazy loading of images affect the SEO of a website?

In the past, lazy loading of images could indeed have an impact on SEO, because search engine crawlers might not be able to capture those images that have not been loaded.However, with the advancement of technology, modern search engines (such as Google) have been able to execute JavaScript and simulate user scrolling behavior, thus they are usually able to normally crawl lazy-loaded images.srcIn the attribute), it will not have a negative impact on SEO.

3. Can images outside the document content also be lazy-loaded (such as in the sidebar, carousel)?

Yes, in principle, any image can be implemented lazy loading. It is the of AnQi CMS.lazy="data-src"The attribute mainly acts on thearchiveDetaildocument output by the tagContentField. For other areas of the image, such as images directly written in the template,<img>tags, carousel images, or sidebar ad images, you need to manually modify their HTML structure, tosrcattribute is replaced withdata-src(Or other attributes required by lazy loading libraries), and ensure that they can also be recognized and processed by the JavaScript lazy loading library you introduce.This usually means you need to check and modify the relevant template files.