Website loading speed is one of the key factors in user experience and search engine optimization.Among many factors affecting page performance, images are often the most resource-intensive and take the longest to load.In order to provide users with a smoother browsing experience and improve the website's performance in search engines, it is particularly important to optimize the image loading strategy.
AnQiCMS itself is renowned for its efficiency and lightweight nature, developed in Go language, with excellent high concurrency processing capabilities and fast response speed.By introducing lazy loading (Lazy Load) technology on this basis, your website can achieve significant performance improvement on pages with a large number of images.
What is image lazy loading?
Lazy loading of images, as the name implies, means delaying the loading of images on web pages.Without lazy loading, the browser will load all the images on the page at once, regardless of whether these images are within the user's visible area.If the page has many images, it will greatly increase the initial loading time, causing users to wait, and even possibly leave due to the long waiting time.
While lazy loading technology is different, it only loads images within the visible area of the current screen, and images within the visible area will be loaded step by step as the user scrolls down the page.This "lazy loading" method can effectively reduce the amount of network requests and data transfer during the initial page loading, thus speeding up the page display speed, saving bandwidth for users, and reducing server pressure.
Combining AnQiCMS with image optimization strategy
In AnQiCMS's backend content settings, you will find that the system provides a variety of practical image optimization features, such as whether to enable the WebP image format and whether to automatically compress large images.These features focus on the optimization of the image file itself, making the image smaller and faster to load.However, when an image loads, it needs to rely on "lazy loading" technology to further control it, which usually requires some adjustments at the template level.
AnQiCMS's design philosophy emphasizes flexibility and scalability, it provides a very convenient way to implement image lazy loading in templates, especially for images published through the content editor.
Core: How to set image lazy loading on AnQiCMS website?
To implement lazy loading of images in AnQiCMS, it mainly involves modifying your website template files and may require introducing a lightweight JavaScript library to assist in the implementation.The entire process can be divided into several key steps.
Step 1: Understand the lazy loading properties of AnQiCMS templates
AnQiCMS template engine provides a built-inlazyproperty specifically for lazy loading images. When you usearchiveDetailWhen labeling the output of an article or product content, you can use this attribute to indicate to the system that the images in the content should be converted to lazy loading mode.
In particular, if the lazy loading JavaScript library you are using needs to load the image'ssrcThe property todata-src, you can bearchiveDetailtag, you can set it like this:lazy="data-src". The system will automatically traverseContentfields in<img>Label itsrcattribute renamed todata-srcAdd a default one,srca property (usually a placeholder or empty value), so that the lazy loading library can take over.
Step two: Modify your template file
You need to adjust the image output in the website template file. This usually includes two types of images:
Content images for article/product detail pages:These images are usually added by the background content editor, by
archiveDetaillabel output. Find yourarchiveDetail.htmlor related detail page template files (usually intemplate/您的模板目录/{模型table}/detail.htmlorpage/detail.html), locate the tag for the output article/product content:{%- archiveDetail articleContent with name="Content" %} {{articleContent|safe}}Change it to:
{%- archiveDetail articleContent with name="Content" lazy="data-src" %} {{articleContent|safe}}Please note
|safeThe filter is required to ensure that HTML content is parsed correctly and not escaped.Thumbnail or specific area image on the list page:These images are usually output through
archiveList/pageListorcategoryListand other tags in a loop. For these images, you need to manually adjust<img>the attributes of the tags.For example, if your list page (
template/您的模板目录/{模型table}/list.html) contains a similar image code:<img src="{{item.Thumb}}" alt="{{item.Title}}">You need to change it to:
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="{{item.Thumb}}" alt="{{item.Title}}" class="lazyload">Here we used a very small Base64 GIF as a placeholder to ensure the stability of the page structure. Also added
class="lazyload"so that subsequent JavaScript libraries can identify and process these images.
Step 3: Introduce a JavaScript library for lazy loading images.
After you modify the template, you will need a JavaScript library to listen for scroll events and to perform an action when the image enters the visible area, such asdata-srcthe real image address tosrcProperty.
Here we recommend using a lightweight and efficient library, for examplelazysizes. It is easy to integrate, performs well, and supports automatic detection of image size to reduce layout offset.
Add the following code to yourbase.htmltemplate file</body>Before the label, or in<head>Used in tagsdeferProperty loading:
<!-- 引入 lazysizes 库 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lazysizes.min.js" async=""></script>
<script>
// lazysizes 配置示例 (可选)
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.loadMode = 3; // 提前加载，提高用户体验
// 其他配置...
</script>
Make sure your image<img>Label withclass="lazyload"And the real image address is indata-srcThe property, as shown in the second step.
Step 4: Clear cache and test
After completing the above modifications, don't forget to log in to the AnQiCMS backend, click "Update Cache" to clear the system cache, then visit your website's frontend page, use the browser's developer tools (F12) to check network requests, and you will find that the images are no longer loaded immediately, but load gradually as the page scrolls.
Combine AnQiCMS backend image optimization function
When configuring lazy loading at the template level, don't forget that the built-in image optimization feature of AnQiCMS backend is also indispensable.
- Enable WebP format:In the "Content Settings" check the "Enable Webp Image Format" option, which will automatically convert the JPEG and PNG images you upload to a smaller, faster-loading WebP format.
- Automatically compress large images:Turn on 'Auto-compress large images' and set 'Auto-compress to specified width' to effectively reduce the physical size of the original image, further reducing file size.
- Thumbnail processing:Reasonably set the 'thumbnail size' and 'thumbnail processing method', which can ensure that the pictures on the list page are clear and not too large.
These backend settings work in harmony with lazy loading technology, collectively enhancing the image loading performance of your website.
Summary
By following these steps, your AnQiCMS website has successfully deployed lazy loading for images.This can not only significantly accelerate page loading speed and enhance user experience, but also optimize the evaluation of the website by search engines to a certain extent, providing strong support for your content marketing and SEO strategy.Remember, website optimization is a continuous process, combining the various features provided by AnQiCMS, you will be able to create a website that is both beautiful and high-performance.
Frequently Asked Questions (FAQ)
1. Will lazy loading affect the SEO of the website?In most cases, lazy loading of images has a positive impact on SEO. Modern search engines (such as Google) have good recognition of spiders