In website operation, page loading speed and user experience are always the core concerns.Especially when the article content includes a large number of images, the initial loading time of the page will often increase significantly, which can not only lead to user loss but also affect the crawling and ranking of search engines.Image lazy loading (Lazy Loading) is the efficient strategy to solve this problem: it makes images start loading only when they enter the user's visible area, thus significantly improving page performance.
AnQiCMS (AnQiCMS) as an efficient content management system fully considers this need, provides a convenient lazy loading implementation method for us to deal with images on article detail pages. This article will focus onarchiveDetailin the labelContentField, a detailed discussion on how to use the built-in functions of Anqi CMS to implement lazy loading of images, as well as the HTML attribute modifications involved.
The core mechanism of lazy loading images in AnQi CMS
In the template design of AnQi CMS, when we usearchiveDetailtags to fetch articles or product details, itsContentThe field contains edited text content, which naturally includes inserted images. Typically, these images are in standard<img src="图片地址">The form is directly displayed in HTML. The principle of lazy loading images is to modify the image tag attributes to prevent the browser from requesting image resources at the beginning of page loading.
Of Security CMSarchiveDetailThe tag is built-in with support for lazy loading of images, which greatly simplifies the operation. When we call the field in the template,Contentwe can activate this feature by adding a,lazyparameter.
How toContentApply lazy loading to images in the field
First, we need to locate the template file for displaying article details, which is usually located in your template directory.{模型table}/detail.htmlfor examplearchive/detail.htmlorproduct/detail.html)
In the template, find the tag you use to display the main content of the articlearchiveDetailIt may look like this:
<div>
{% archiveDetail articleContent with name="Content" %}{{articleContent|safe}}
</div>
To enable lazy loading forContentthe image within this field, we just need to givearchiveDetaillabel tolazyParameter. ThislazyThe value of the parameter, which is the HTML attribute name you want to store the actual URL of the lazy-loaded image. In front-end lazy loading practice,data-srcIt is a very common and recommended attribute name. So, the modified code will become:
<div>
{% archiveDetail articleContent with name="Content" lazy="data-src" %}{{articleContent|safe}}
</div>
HerearticleContentis forContentThe variable name of the field content is customizable. You can adjust it according to your actual template situation.
lazy="data-src"The principle of modification of involved HTML attributes:
When the Anqi CMS parses this template code and outputs HTML to the browser, it will intelligently traverseContentall in the field<img>tags. Once detected,lazy="data-src"The parameter, it will not directly put the real URL of the picture intosrcThe attribute, but will perform the following conversion:
The original picture tag (for example):<img src="https://en.anqicms.com/uploads/image1.jpg" alt="描述">
Will be automatically modified by Anq CMS to:<img data-src="https://en.anqicms.com/uploads/image1.jpg" alt="描述">
This modification is the core first step to implement image lazy loading.data-srcIt is a custom HTML5 data attribute that the browser will not load actively during parsing.data-srcThe URL is not recognized as a standard image source.
|safeThe importance of filters:
You may have noticed that after{{articleContent}}we added a|safeFilter. This filter is crucial here. AnQi CMS, for security reasons, defaults to escaping HTML entities for all content retrieved from the database to prevent XSS attacks. IfContentThe field contains HTML structure (such as image tags) but is not used|safeThen the angle brackets and other symbols in the image tag will be escaped to</>This causes the browser to incorrectly parse the HTML structure.|safeThe filter explicitly tells the system that this content is safe HTML that does not need to be escaped, thus ensuring that the modified<img data-src="...">Can be correctly recognized by the browser.
In coordination with front-end JavaScript.
It is worth noting that the Anqi CMS.lazyThe attribute is only responsible for modifying the HTML structure on the server side, and thesrcattribute is replaced withdata-src(Or any other specified attribute). To truly implement the "lazy loading" effect for images, that is, to load the image only when it enters the user's viewport, you also need to introduce the corresponding JavaScript code on the front end.
This usually involves the following two methods:
- Using a third-party lazy loading library:like
LazysizesThese lightweight frontend libraries, they listen to page scrolling and automatically detect elements withdata-srcThe image of (or its configured properties) and when the image is about to enter the viewport, willdata-srcthe value will be copied back,srcProperties, thus triggering the browser to load images. You just need to introduce these libraries in the website and initialize them according to their documentation. - Write custom JavaScript:For developers familiar with JavaScript, they can make use of modern browsers'
Intersection Observer APIListen to the image element, when the element intersects with the viewport, execute the replacement logic for the image URL. This method is more flexible and can be optimized according to your specific needs.
No matter which way is used, the core task of front-end JavaScript is to monitor the presence ofdata-srcproperties<img>tags, when they enter the user's viewport, todata-srcthe value tosrcProperty, thereby completing the image loading.
Summary
By accessing the Anqi CMSarchiveDetaila tag toContentadd a fieldlazy="data-src"Parameter, we can easily allow the system to automatically modify the HTML attributes of the image tag, laying the foundation for lazy loading of images.Combine with the front-end JavaScript lazy loading logic, it can effectively reduce the initial load burden of the page, improve the overall performance and user experience of the website.This not only makes your website run more smoothly, but also helps improve its performance in search engines.
Frequently Asked Questions (FAQ)
Question: I have set up in the Anqi CMS template
lazy="data-src"But it seems that the image still loads immediately, why is that? Answer:Of Security CMSlazyThe attribute is mainly responsible for modifying the HTML structure on the server side, transferring the real URL of the image fromsrcattribute todata-srcThe property does not automatically add the front-end JavaScript code for you.To truly implement lazy loading for images, you need to introduce a corresponding JavaScript lazy loading library (such as Lazysizes) on the front end, or write custom JavaScript code to detectdata-srcattribute and copying its value back when the image enters the user's viewportsrcAttribute, thus triggering image loading.Question:
lazyfor the attribute value (for exampledata-srcCan you name it freely? What are the considerations? Answer:lazyfor the attribute value (for exampledata-srcIt should be consistent with the property name expected by the front-end lazy loading JavaScript library you choose.data-srcIt is a very common convention, supported by many lazy loading libraries and modern browsers native lazy loading (combinedloading="lazy") supported. But if the specific library you are using requires usingdata-original/data-imageetc., then yourlazyThe property value should also be set accordinglydata-original/data-imagePlease refer to the official documentation of the front-end lazy loading library you are using to confirm the required property names.Ask: Does lazy loading of images have a negative impact on SEO? Should I worry that the crawler cannot fetch the images? Answer:Modern image lazy loading technology is usually friendly to SEO, and even helps improve rankings because faster page loading speed is an important ranking factor.The crawlers of mainstream search engines (such as Google) are already able to execute JavaScript and understand most lazy loading patterns.The key is to ensure that your lazy loading implementation allows the crawler to identify the real URL of the image during page parsing.Store the image URL in the standard
data-srcWithin the attribute, along with appropriate JavaScript logic, it can ensure that search engines effectively discover and index your image content.At the same time, it is recommended not to use lazy loading for the key images on the first screen to ensure that users and crawlers can obtain important information as soon as possible.