How to implement lazy loading (Lazyload) of images in the article content to optimize page performance?

In website operation, page loading speed is crucial for user experience and search engine optimization (SEO).Especially when the content of the article includes a large number of images, the loading of image files often becomes the 'culprit' that slows down the page speed.Fortunately, by implementing the lazy loading (Lazyload) technique, we can effectively solve this problem.For those who use AnQiCMS, understanding and applying this technology will significantly improve website performance.

Image lazy loading, as the name implies, is to delay loading images outside the user's current viewport.When the user scrolls the page, the image starts loading only when it enters the visible area.This technology brings multiple advantages: first, it reduces the amount of data that needs to be downloaded when the page is first loaded, thereby speeding up the presentation of the page;Secondly, it reduces the server burden because it no longer needs to transmit all image resources at once;It is most important that it improves the user experience, allowing users to browse page content without long waiting times, and it is also favored by search engines, helping to improve the website's SEO performance.

For AnQiCMS users, the system has provided a very convenient mechanism to implement lazy loading of images in article content. In AnQiCMS template tags, when we usearchiveDetailTag to output the detailed content of the articleContentField, you can add a special parameter:lazy="data-src"This feature means that AnQiCMS will display images when rendering article content<img>label'ssrcThe attribute is automatically replaced withdata-srcFor example, an attribute originally shaped like<img src="image.jpg" />The image tag is rendered by AnQiCMS and becomes<img data-src="image.jpg" />This is a very critical server-side preparation step that provides the target for identifying and operating the frontend lazy loading script.

You need to do something usually in the template file to enable this preprocessing, such as in the template for displaying article details (usually{模型table}/detail.htmlor a similar file) to ensurearchiveDetailtags during outputContentthat it is usedlazy="data-src"The parameter. A specific code example is:{% archiveDetail articleContent with name="Content" lazy="data-src" %}{{articleContent|safe}}. Here,articleContentis the variable name you defined,name="Content"specifies the field of the article content to be output,lazy="data-src"indicating that the system performs the lazy loading attribute conversion.

After completing the backend preparation for AnQiCMS, the next step is to introduce a front-end JavaScript lazy loading library to identify these withdata-srcThe image of the attribute, and when it enters the user's viewport, it willdata-srcAssign the value againsrcThus triggering the actual loading of the image. There are many excellent lazy loading libraries available, such asvanilla-lazyload/lazysizesOr you can use the built-in features of modern browsersIntersection Observer APIImplement it yourself.

As a rule, you will find the public template files of a website (such asbase.htmlOr include the required JavaScript code in a dedicated footer file.This JavaScript file will include the logic of lazy loading libraries as well as the instructions to initialize it.For example, a generic lazy loading library will usually provide initialization code similar to the following:

<script src="path/to/your/lazyload.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var lazyloadImages = document.querySelectorAll("img[data-src]");
    var lazyloadThrottleTimeout;

    function lazyload () {
      if(lazyloadThrottleTimeout) {
        clearTimeout(lazyloadThrottleTimeout);
      }    
      lazyloadThrottleTimeout = setTimeout(function() {
          var scrollTop = window.pageYOffset;
          lazyloadImages.forEach(function(img) {
              if(img.offsetTop < (window.innerHeight + scrollTop)) {
                img.src = img.dataset.src;
                img.removeAttribute('data-src');
              }
          });
          if(lazyloadImages.length == 0) { 
            document.removeEventListener("scroll", lazyload);
            window.removeEventListener("resize", lazyload);
            window.removeEventListener("orientationChange", lazyload);
          }
      }, 20);
    }

    document.addEventListener("scroll", lazyload);
    window.addEventListener("resize", lazyload);
    window.addEventListener("orientationChange", lazyload);
  });
</script>

Please note that the above JavaScript code is a simplified example, and it is recommended to use a third-party lazy loading library with more comprehensive features and better compatibility in actual applications.

Place the above code (or the initialization code of the lazy loading library you choose) at the bottom of your AnQiCMS template.<head>or the</body>Ensure the DOM content is fully loaded before executing inside the tag.After deployment, you can verify through the browser's developer tool network tab: Observe whether the image is in a "Pending" state before it scrolls into the visible area of the page, and it starts loading only after entering the viewport.

Provided by AnQiCMSlazy="data-src"The function works with the front-end lazy loading script, and the images of the website's articles will be loaded smoothly on demand.This will significantly improve the initial loading speed of the page, enhance the user's browsing experience, reduce server bandwidth consumption, and bring better SEO performance to your website.This is a highly effective optimization strategy with an extremely high return on investment, worth every AnQiCMS user's careful configuration.

Frequently Asked Questions (FAQ)

Q1: Why does AnQiCMS just takesrcBecamedata-srcDo we need front-end JavaScript to implement lazy loading?A1: This step of AnQiCMS is preparing for lazy loading technology. Browsers will load by default.srcThe image in the attribute, while ignoringdata-src. Place the image address indata-srcIt can prevent the browser from downloading images when the page is initially loaded. The role of front-end JavaScript is to monitor these images with attributesdata-srcWhen the image of the attribute enters the user's visible area and assigns the value at the appropriate timedata-srcto dynamically assign the value ofsrcAn attribute triggers the loading of the image. This is a typical mode of front-end and back-end collaboration to implement performance optimization.

Q2: I inserted an image into the article editor and need to manually modify the HTML code to add itdata-src?A2: Generally not required. If you are using the AnQiCMS template file, usingarchiveDetailthe tag to output article content has already been configuredlazy="data-src"Parameter, the AnQiCMS system will automatically convert the images in the editor when rendering article content.srcproperties todata-srcThis means you can normally insert images in the editor, and the system will handle the subsequent property conversion.

Q3: Will lazy loading affect the crawling and indexing of images in search engines?A3: Modern search engines (especially Google) have already matured in their handling of lazy-loaded content. As long as you follow standard methods (such as usingdata-srcImplement lazy loading in combination with JavaScript), search engines usually can correctly crawl and index these images.However, to ensure **effectiveness, it is recommended that you follow the official guidelines of search engines and regularly check the indexing status of images through tools such as Google Search Console.