In today's fast-paced online world, the loading speed of a website is crucial for user experience and search engine rankings.If your website contains a large number of images, optimizing their loading method will be a key step in improving website performance.Image lazy loading (Lazy Load) is a highly efficient solution.

Why is image lazy loading so important?

The images on the website may enrich the content and enhance visual appeal, but they are often the main reasons for slow page loading.When a page carries a large number of high-resolution images, the browser needs to download all these image resources at the initial load, which undoubtedly consumes a lot of time and bandwidth.Users may experience a long wait, even choosing to leave before the page is fully loaded.Search engines consider page loading speed as an indispensable indicator when evaluating website quality and ranking.Therefore, managing image loading reasonably, especially enabling lazy loading of images, has profound significance for optimizing user experience, reducing bounce rate, and improving website SEO performance.

What is image lazy loading?

In simple terms, image lazy loading is a 'load-on-demand' strategy.Its core idea is to defer loading non-critical resources.When a user first visits a page containing a large number of images, only the images within the current visible area of the screen will load immediately, while those located below the page and not yet in the user's viewport will pause loading.These images will begin to be requested and displayed only when the user scrolls down the page and they are about to enter the visible area.So, it not only greatly shortens the initial loading time of the page, but also saves unnecessary bandwidth consumption, allowing users to see the content they really care about faster.

How to implement lazy loading of images in article content of Anqi CMS?

The Anqi CMS has fully considered the performance optimization needs of the website from the beginning and provides convenient support for lazy loading of images in the content.It enables lazy loading of images in the main content of the article by flexibly using template tags.

To implement this function, we mainly utilizearchiveDetaila special parameter in one of the tags. In the template system of Safe CMS, for example, in the template file of article detail pages (usually{模型table}/detail.html）in，we usearchiveDetailtags to get and display the main content of the article, that isContentfield.

To make the images in the article content lazy load, you need to add aarchiveDetailtag inlazyParameter. This parameter will indicate the system, in the renderingContentfield, all of its properties included<img>Tagssrcare replaced withlazythe new properties specified by the parameter (e.g.data-src），同时将原始的图片地址存储到这个新属性中。

具体的操作方法示例如下：

{% archiveDetail articleContent with name="Content" lazy="data-src" %}{{articleContent|safe}}

In this code block:

  • {% archiveDetail articleContent with name="Content" %}：这部分负责从后台获取文章的ContentContent, and assign it to the template.articleContenta variable.
  • lazy="data-src": This is the key instruction to enable lazy loading. It will traversearticleContentof all<img>tags, convertingsrc="图片地址"structure todata-src="图片地址", and it may clear the original one.srcProperty (or set to a placeholder, depending on the front-end implementation).
  • {{articleContent|safe}}:|safeThe role of the filter here is to ensurearticleContentThe HTML code contained in the variable is correctly parsed and rendered by the browser, rather than being escaped as plain text.

By adding in the templatelazy="data-src"Such parameter settings prepare the lazy loading mechanism for the front-end of Safe CMS, and prepare elements withdata-srcProperties of the image elements.

It should be noted that simply modifying the HTML structure through templates is not enough to fully implement lazy loading.The real lazy loading effect of images still needs the cooperation of front-end JavaScript libraries.data-srcThe image address stored in the properties is reassigned tosrcProperties, thus triggering the actual loading and display of the image.

Significant advantages brought by lazy loading of images

Enable image lazy loading will allow your website to experience comprehensive performance improvements and user experience optimization: English

  • Significant increase in page loading speed: EnglishThe browser does not need to download all the images on the page at once when it is initially loaded, it only needs to load the images that are currently visible to the user.This greatly reduces the page's first content paint time (FCP) and time to interactive (TTI).
  • Optimize bandwidth and traffic consumption: EnglishAvoided loading images that the user may never scroll to and view, thereby reducing the server's bandwidth usage and also saving valuable traffic for users accessing the website.
  • Improved user experience:Users can see the main content of the page without long waiting, reducing the anxiety during waiting and improving the overall browsing fluency and satisfaction.
  • Helps search engine optimization (SEO):The page loading speed is an important factor in the search engine ranking algorithm. Faster loading speed helps improve the visibility of the website in search results and attract more potential visitors.

Suggestions for implementing lazy loading

When practicing image lazy loading in AnQi CMS, to ensure the **effect and avoid potential problems, you can consider the following points:

  1. Choose a lightweight and efficient front-end lazy loading JS library:.There are many excellent open-source lazy loading libraries on the market, such as.lazysizes/vanilla-lazyloadEnglish.They are usually small in size, have good browser compatibility, and are easy to integrate.base.html）in it.
  2. Provide visual placeholders for unloaded images:Before the image is loaded, there may be blank areas on the page, which may affect the user experience.To avoid this abrupt feeling, you can set a uniform placeholder background color, a small loading animation, or use a very low-quality (BLURRED_LOW_RES) blurred image as a transition.This can usually be achieved through CSS styling or configuration of lazy loading JS libraries.
  3. Rationally plan the first screen (Above the Fold) image loading:For images that are located on the first screen of the page, which users can see immediately without scrolling, it is strongly recommended not to enable lazy loading for them. These images should be loaded directly through conventionalsrcProperty loading, to ensure that users can immediately obtain the most important visual information when they open the page.You can manually control it when writing article content, or set exclusion rules in front-end JS logic.
  4. Focus on SEO compatibility:Modern search engines (especially Google) have the ability to execute JavaScript, usually able to identify