In a content management system, the loading efficiency of images is crucial for website performance and user experience, especially for articles with many images.Many users may be concerned about whether AnQiCMS (AnQiCMS) supports lazy loading of images in article content to optimize page loading speed.
The answer is yes, AnQi CMSSupportThe image lazy loading display in the article content. This is due to its flexible template engine and fine control over content display.Although Anqi CMS itself as a backend content management system does not directly execute lazy loading logic on the browser side, it provides the necessary mechanisms for frontend developers to easily implement this feature.
The core mechanism of lazy loading
The template tag system of AnQi CMS is the core of this function. On the article detail page, when we need to call the article content (usually images inserted in the rich text editor), we will usearchiveDetailtags to retrieveContentfield. ThisContentThe field is built-in with special support for image lazy loading.
Specifically, when calling the content of the article in the template, it can be indicated to perform lazy loading by setting theContentAdd a fieldlazyattribute to indicate that the image should be lazy loaded. For example:
{# 假设 archiveContent 变量包含了文章的 HTML 内容 #}
<div>文档内容：{% archiveDetail archiveContent with name="Content" lazy="data-src" %}{{archiveContent|safe}}</div>
Herelazy="data-src"Instruct the system to render the article content by using HTML<img>label'ssrcproperties todata-srcproperties. Why is this done?
通常，懒加载的原理是，当浏览器解析页面时，它只会加载srcImage with attribute value. Anddata-srcThe attribute is a custom attribute, the browser will not immediately load the image it points to. The front-end JavaScript lazy loading library will load the image when it enters the viewport (viewport), anddata-srcAssign the value againsrcThus triggering the loading of the image
Therefore, Anqi CMS provides in the template rendering layerlazyThe transformation ability of the attribute, paving the way for the work of the front-end lazy loading library.
How to implement image lazy loading
To fully implement lazy loading of images in article content, you need to pay attention to the following aspects:
Template configuration: Make sure that your article detail page template (usually
archiveDetailOr similar tag call location to retrieveContentUsed when fieldlazy="data-src"Or other attribute names that meet your front-end lazy loading library requirementsFront-end lazy loading library introduction You need to introduce a suitable JavaScript lazy loading library on the front-end page of the website. There are many excellent lazy loading libraries available, such as
lazysizes.js/vanilla-lazyloador you can also be based onIntersection Observer APIimplement it yourself. These libraries listen to page scrolling and when images are about to enter the user's viewport, they willdata-srcmove the value of the property backsrcProperties, thus achieving on-demand loading of images.CSS style optimization: To avoid layout shifts (Layout Shift) before the image is loaded, you can provide
<img>Set a fixed width and height or use placeholders (such as low-quality image placeholders, solid color background placeholders) to reserve space for images in advance.
The benefits of lazy loading
- Improve the speed of the first screen loadingReduced the amount of image resources that need to be downloaded during the initial page load, allowing users to see the page content faster.
- optimize user experience: Page response is faster, reducing user waiting time, especially obvious for mobile device users.
- Bandwidth saving: Only load the images that the user actually sees or will see, avoiding unnecessary resource consumption.
- Beneficial for SEO: Search engines are increasingly emphasizing page loading speed and user experience, lazy loading helps improve the performance of websites in search engines.
Combining the image optimization features provided by Anqi CMS itself, such as automatic conversion to WebP format, automatic image compression, and so on, image lazy loading will further improve the overall loading performance and user experience of the website, helping your website stand out in the highly competitive network environment.
Frequently Asked Questions (FAQ)
Q1: Does the Anqi CMS backend have a direct switch to enable lazy loading of images?A1: The Anqi CMS backend currently does not have a direct 'one-click enable' lazy loading feature switch. Image lazy loading needs to be configured at the template level.archiveDetaillabel'slazyProperties, and combine it with the front-end JavaScript lazy loading library to implement. This means that developers need to make corresponding modifications to the template file.
Q2: Besides the images in the article content, does the thumbnail on the article list page support lazy loading?A2: The thumbnail on the article list page (such as throughitem.Thumboritem.LogoThe call itself does not have a lazy loading attribute conversion feature. However, front-end developers can add it in the template for these thumbnails.<img>Manually add tagsdata-srcThese properties are introduced, and the corresponding lazy loading library is introduced to achieve lazy loading of thumbnails. This belongs to the category of front-end optimization, with high flexibility.
Q3: Do you need to install an additional plugin to implement lazy loading of images?A3: Anq CMS itself provides attribute support for template tags (such as)lazy="data-src")，it is responsible for thesrcProperty transformation. But to truly implement the effect of image lazy loading, it is necessary to introduce a JavaScript lazy loading library on the front-end page (such aslazysizes.js/Intersection Observer APIThis library detects whether an image enters the viewport when the user scrolls the page and assigns itdata-srcthe value of the property tosrcThe attribute triggers image loading. Therefore, this usually requires cooperation with frontend code, rather than the backend plugin of Anqi CMS.