How to implement image lazy loading (Lazy Load) in AnQiCMS article content?
When building and operating a website, page loading speed is always a key factor in user experience and search engine optimization.Images are an important part of website content and often one of the main reasons affecting loading speed.Implementing image lazy loading (Lazy Load) can significantly improve website performance, reduce unnecessary bandwidth consumption, and allow users to see the page content faster.
AnQiCMS is a powerful content management system that provides many conveniences for content operation.It not only built-in rich image optimization features, but also provides a concise implementation for lazy loading of images in article content.
Basic Image Management in AnQiCMS
Before delving into the implementation of lazy loading, it is worth mentioning that AnQiCMS provides a series of backend optimization functions in image processing.In the "Content SettingsThese features process images on the server side, ensuring that the image file itself is as small and efficient as possible, laying a solid foundation for front-end lazy loading.Although these features do not directly implement lazy loading, they work in collaboration with lazy loading to improve the overall performance of website images.
The key step to implement lazy loading of images
In AnQiCMS, the core of implementing lazy loading of article content images lies in the template tagsarchiveDetailThe clever use. When you need to display the main content of the article on the article detail page, you will use this tag to call itContentfield.
archiveDetaillabel'sContentfield specifically supports special handling for image lazy loading. It provides alazyThe parameter allows you to specify the image attribute name required by the lazy loading library. For example, if your front-end lazy loading JavaScript library needs to store the original image link indata-srcIn the attribute, then you can callarchiveDetailWhen setting the tag, you can do it like this:
{# 获取文章内容，并启用图片懒加载，将图片 src 属性替换为 data-src #}
{%- archiveDetail articleContent with name="Content" lazy="data-src" %}
{{articleContent|safe}}
Herelazy="data-src"The purpose is to inform AnQiCMS, when renderingarticleContentAll HTML content in the variable will be<img>label'ssrcProperties are automatically converted todata-srcProperty. This way, when the browser loads the page for the first time, these images will not load immediately, but will wait for the instructions of the front-end lazy loading JavaScript library.
At the same time, please note{{articleContent|safe}}of|safeFilter. Since the content of the article usually contains HTML structure, it is used|safeIt ensures that the HTML code is correctly parsed and not escaped, which is an important step to ensure that the image is displayed normally.
The配合 of front-end JavaScript lazy loading libraries
AnQiCMS'lazyThe parameter processing has only completed the preparation work of the backend HTML structure, the actual implementation of "lazy loading" for images still depends on the front-end JavaScript lazy loading library.
These front-end libraries typically work in the following way: they scan all elements on the page that have a specific attribute (such asdata-srcordata-original）的<img>Label. When the user scrolls the page and the image enters the visible area of the browser, these libraries will capture this event and thendata-srcthe value of thesrcAttribute. OncesrcThe attribute is filled, and the browser will start loading this image.
There are many excellent lazy loading libraries to choose from, such aslazysizes/vanilla-lazyloadThey usually just need to be simply added to your website template to work. You need to include them in the websitebase.htmlfile (or other common header/footer template files) of the<head>or<body>Include these JavaScript files at the bottom.
For example, if you chooselazysizeslibrary, you may only need to addbase.htmlthe file</body>the following code before the closing tag:
<!-- 引入 lazysizes 懒加载库，它会自动识别 data-src 属性 -->
<script src="/public/static/js/lazysizes.min.js" async=""></script>
Make sure you have already includedlazysizes.min.jsThe file was placed inpublic/static/js/the directory, or you can include it through CDN.
Integration and **Practice
Combining AnQiCMS template processing with a frontend JavaScript library can enable lazy loading of article content images. To achieve **the effect, there are also some practices worth noting:
- Ensure library correctnessRead the documentation of the lazy loading library you choose carefully, to ensure it is properly introduced and initialized.
- Image size attributeTo avoid layout jitters (Cumulative Layout Shift, CLS) after the image loads, it is recommended to
<img>Explicitly specify in the tagwidthandheightProperty. - Optimize the first screenFor important images on the website's homepage (the part that users can see without scrolling), such as article headers or Banner images, it can be considered not to use lazy loading.Loading these images directly can improve the page's "Largest Contentful Paint" (LCP) metric, thus enhancing user experience.
- Optimize the backendDon't forget to use the image compression, WebP conversion, and other functions provided by the AnQiCMS backend to reduce the size of image files from the source.
By following these steps, you can effectively implement lazy loading of images in article content on websites powered by AnQiCMS, thereby significantly improving website access speed and user experience.
Frequently Asked Questions (FAQ)
1. Lazy loading will it affect SEO?
Early lazy loading implementations may indeed cause some difficulties for search engine crawling, as search engines may not be able to discoversrcAn image with no attributes. However, with the development of technology, modern search engines (especially Google) are already able to handle based ondata-srcLazy loading technology for properties.If your lazy loading implementation is standard-compliant and ensures that image links are ultimately crawlable by search engines, then lazy loading usually has a positive impact on SEO, as it can improve page loading speed, and page speed is one of the important ranking factors.Suggest you regularly check the crawling and indexing status of your website through tools like Google Search Console.
How do I know if my lazy loading is working?
You can verify if lazy loading is working by the following methods:
- Check the browser developer tools:Open your website page, press F12 to open the browser developer tools, and switch to the "Network" tab.Then, clear the network activity and scroll down the page slowly.If the image is loaded on demand rather than all at once, and you will see that new image loading requests only appear when the image enters the visible area, then lazy loading is effective.
<img>Take a look at the HTML structure of the tag,srcThe attribute has been replaced withdata-srcor the other attributes you have configured, and it is filled with the actual image link after scrolling. - Manual verification:Disable the browser's JavaScript (this can be done through the settings in the developer tools), then reload the page.If the images have not loaded, and they can be loaded normally after enabling JavaScript, it also means that the lazy loading logic is working.
3. If my image is not in the article content (Content) field, such as the thumbnail on the article list page, how can I implement lazy loading?
archiveDetailThe `lazy` tag