In website operation, page loading speed and user experience are crucial aspects.Especially for articles containing a large number of images, image loading often becomes the culprit that slows down page speed.At this point, the lazy loading (Lazy Loading) technology is particularly crucial.The Anqi CMS thoroughly understands this, providing a simple and efficient way to control the automatic lazy loading of images in article content, helping your website improve performance and user experience.

Why is image lazy loading so important?

Lazy loading is a delay loading strategy that postpones the loading of images outside the viewport (i.e., outside the user's current screen).This means that when a user visits your page, only the images in the visible area of the first screen will load immediately, while other images will start loading as the user scrolls the page and they are about to enter the viewport.This mechanism brings a variety of benefits:

  1. Significantly improve page loading speed:Reduced the amount of resources needed to be requested during the first page load, speeding up page rendering, which has a positive impact on search engine optimization (SEO) and user retention rate.
  2. Save bandwidth resources:Users do not need to load all images, especially in mobile network environments, which can effectively reduce data consumption and improve user experience.
  3. Improve user experience:The page content can be displayed to the user faster, avoiding long white screen waiting times, making the browsing process smoother.
  4. Beneficial for SEO ranking:Page loading speed is one of the important indicators for search engines to measure website quality, lazy loading can help improve the Core Web Vitals score of the website, thus potentially obtaining a better search ranking.

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

The AnQi CMS provides a very intuitive and powerful template tag control method for handling lazy loading of images in article content. When we are in the article content (ContentAfter inserting images into the field, these images will load together by default when the page is loaded. However, by skillfully usingarchiveDetailLabel, we can indicate to the system to add special lazy loading attributes when rendering these images.

The core lies inlazyUsage of parameters. For example, you can set it like this in the template:

<div>文档内容：{% archiveDetail archiveContent with name="Content" lazy="data-src" %}{{archiveContent|safe}}</div>

Herelazy="data-src"It is to inform AnqiCMS, when outputting article content,<img>do not use tags directly,srcbut move the address to the attribute for the real image address instead.data-srcProperty. Generally,srcThe property can be set to a very small placeholder or left blank to prevent the browser from displaying a broken icon when the image is not loaded.data-srcIt is a conventionally used property name for a front-end lazy loading library, but you can customize this property name according to the requirements of the front-end library you choose (for exampledata-originaletc.).

It is worth noting that, due toContentThe field may contain HTML content, in order to ensure that these HTML codes are parsed correctly by the browser rather than being escaped as plain text, we need to use in conjunction with|safeFilter. This way, AnqiCMS ensures that the output image HTML structure is complete and includes the lazy loading tags we specify.

How to implement lazy loading effects in front-end?

AnqiCMS has completed the backend data processing and HTML structure preparation, but the real lazy loading effect still needs the cooperation of frontend JavaScript to be realized. The frontend JavaScript library will listen to the page scroll event, when it hasdata-src(Or other custom attribute) When the image of the attribute enters the user's viewport, JavaScript will trigger an action todata-srcassign the real address of the image insrcProperties, thus implementing image lazy loading.

There are many excellent lazy loading libraries available on the market, such as using the browser's native.Intersection Observer APIImplementation recommended by modern browsers or use lightweight third-party libraries.Choose which library depends on your project requirements and technology stack preferences, but the core principles are consistent: delay the timing of image loading from page initialization to when the image is about to appear on the screen.

**Practice and Precautions

  1. Distinguish between images:Although lazy loading brings many benefits, not all images are suitable for lazy loading.Images in the visible area of the first screen (Above-the-Fold) should be loaded immediately to ensure the experience of the first-time visitor.You can exclude this part of the image from lazy loading or use it directlysrcProperty.
  2. Use placeholders:For lazy loading images, it is recommended to use low-quality image placeholders (LQIP) or solid color background placeholders to avoid displaying blank image areas before loading, which affects aesthetics and user perception.
  3. Compatibility test:After implementing lazy loading, it is essential to thoroughly test under different devices and network environments to ensure that the function is stable and reliable and does not negatively affect page interaction.
  4. Combine image optimization:In addition, Anqi CMS also provides image compression, WebP format conversion, thumbnail processing, and other functions (which can be configured in the "Content Settings").Combine these built-in image optimization methods to further enhance the website's loading speed and image display effect, working in synergy with lazy loading to provide an ultimate browsing experience.

By using the above method, users of Anqi CMS can skillfully control the lazy loading behavior of images in article content, which not only optimizes the performance of the website but also greatly enhances the browsing experience of visitors.

Frequently Asked Questions (FAQ)

Q1: Lazy loading will be automatically applied to all images, including website logos and banners?A1: By default, the Anqi CMS provideslazyThe parameter is mainly used to process articlesContentThe image within the field. The Logo, Banner, or hard-coded images in the template need to be manually added with the corresponding lazy loading attributes or controlled through front-end JavaScript, they do not automatically受archiveDetailTaglazyThe impact of parameters. Logos and banners visible on the first screen are usually not recommended for lazy loading to ensure the**initial loading experience.

Q2: How to choose a suitable front-end lazy loading JavaScript library to work with Anqi CMS?A2: When choosing a front-end library, it is recommended to consider libraries based onIntersection Observer APIThe lightweight library, because it uses the browser's native capabilities, has better performance.If you need to be compatible with old browsers, you may need to consider libraries with polyfills or graceful degradation solutions.You can search for "lazyload js" or "intersection observer lazy load" on GitHub to find many mature solutions, such asvanilla-lazyloadorlozad.js.

Q3: Does lazy loading of images affect the SEO indexing of images?A3: As long as it is implemented properly, lazy loading images will not have a negative impact on SEO. Modern search engine crawlers are already able to understand and handle this throughdata-srcImages implemented with lazy loading properties. The key is to ensure that the real URL and ALT text of the image can be obtained when the image is indexed by search engines.Configure the lazy loading settings of AnQi CMS and choose a front-end lazy loading library that is SEO-friendly, there usually won't be any problems with this aspect.