How to Automatically Add Lazy Loading Attributes: Image Optimization and Web Performance Improvement
We provide guidance on how to automatically apply the Lazy Loading feature to images to improve web performance and shorten initial loading times. This is an image optimization method to optimize LCP (Largest Contentful Paint), a core element of SEO audits, and improve indexing status.
Lazy Loading Setup for Image Optimization and Fast Loading
Lazy Loading is an image optimization method that ensures images and other elements on a webpage are loaded only when they are actually needed. This feature is highly effective as it shortens initial loading times and saves server resources by loading images only when required. It particularly improves user accessibility by delaying non-essential resources during page load and can be implemented by adding the loading="lazy" attribute to the HTML code.
This attribute improves web performance by instructing the browser to load images only when they appear on the screen. This directly helps improve Core Web Vitals scores by increasing webpage efficiency and maintaining fast loading speeds.
Lazy Loading only loads resources as needed when the code is executed, which also helps control the loading of other parts of the page. The method below allows creators to automatically add the LAZY attribute to images without any separate coding work.
Lazy Loading code refers to loading set resources only in necessary situations when executed. This is known as deferred loading. By loading non-essential parts later and only when needed, you minimize the impact of post images on the initial loading speed.
Summary of Lazy Loading Effects (Core of SEO Audits)
| Improvement Metric | Effect and Impact |
| LCP (Largest Contentful Paint) | Accelerates the loading of the most important content by delaying images outside the viewport. |
| Initial Loading Speed | Shortens overall loading time by reducing unnecessary HTTP requests during page load. |
| Resource Conservation | Reduces bandwidth and server resource waste if the user does not scroll to the end. |
How to Implement and Apply Automatic Lazy Loading Code
How to Use Automatic LAZY Formation
- This is a simple method of adding attributes through JavaScript or a plugin to images generated in a standard post.
Below is promotional image material for a post I wrote today about Seoul Youth Allowances. I simply inserted this image through the editor. However, checking the code reveals that the loading="lazy" attribute is included even though I did not perform any separate coding.
Verifying Code Application
โ Example (Automatically Applied Code)
img
src="https://blog.kakaocdn.net/dna/bidI61/btsIhViAlvh/AAAAAAAAAAAAAAAAAAAAAC-b0DERD4OkgnW5s9yXP0Sti53wAbdxHkxTif3qcY1q/img.webp?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1772290799&allow_ip=&allow_referer=&signature=rKD0ujW0j2gqi7T9VcqS4eBd3Ws%3D"
srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbidI61%2FbtsIhViAlvh%2FAAAAAAAAAAAAAAAAAAAAAC-b0DERD4OkgnW5s9yXP0Sti53wAbdxHkxTif3qcY1q%2Fimg.webp%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1772290799%26allow_ip%3D%26allow_referer%3D%26signature%3DrKD0ujW0j2gqi7T9VcqS4eBd3Ws%253D"
onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"
alt="Seoul Youth Allowance"
data-filename="54878545474.webp"
data-origin-width="599"
data-origin-height="788"
loading="lazy"
data-phocus-index="1"Below is the original code when the attribute is not applied. There is no loading="lazy" attribute. During initial load, all images are fetched at once.
โ Example (Attribute Not Applied)
img
src="https://blog.kakaocdn.net/dna/bidI61/btsIhViAlvh/AAAAAAAAAAAAAAAAAAAAAC-b0DERD4OkgnW5s9yXP0Sti53wAbdxHkxTif3qcY1q/img.webp?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1772290799&allow_ip=&allow_referer=&signature=rKD0ujW0j2gqi7T9VcqS4eBd3Ws%3D"
srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbidI61%2FbtsIhViAlvh%2FAAAAAAAAAAAAAAAAAAAAAC-b0DERD4OkgnW5s9yXP0Sti53wAbdxHkxTif3qcY1q%2Fimg.webp%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1772290799%26allow_ip%3D%26allow_referer%3D%26signature%3DrKD0ujW0j2gqi7T9VcqS4eBd3Ws%253D"
onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"
alt=""
data-filename="54878545474.webp"
data-origin-width="599"
data-origin-height="788"
data-phocus-index="1"Usage: Automatic Lazy Loading using JavaScript
Applying Code to HTML Banner Plugin or Above /BODY
The usage is very simple. You can use the JavaScript code below by placing it in an HTML banner output. You don't even need to modify the HTML code itself. This code adds the loading="lazy" attribute to img tags on all pages. For Tistory skins with a sidebar, you can simply add it to the side using HTML banner output, or for application across all pages, place the code above /BODY.
script
document.addEventListener("DOMContentLoaded", function () {
var images = document.querySelectorAll('img');
images.forEach(function (img) {
img.loading = 'lazy';
});
});
/scriptException Handling for Specific Images (Excluding Images Critical to LCP)
If you wish to exclude specific images (e.g., logos at the top of the viewport or main banners that critically affect LCP) from deferred loading, you can modify the filename in the code below so the tag is not applied to those designated images. Include this code as well.
script async="async"
// Image lazy loading configuration script
document.addEventListener("DOMContentLoaded", function () {
var images = document.querySelectorAll('img');
images.forEach(function (img) {
var imageUrl = img.getAttribute('src');
if (imageUrl.includes('image_filename_not_to_change.jpg')) {
img.removeAttribute('loading');
} else {
img.setAttribute('loading', 'lazy');
}
});
});
/scriptThis method is a simple way to add lazy code to images without separate coding work during post creation and is essential for improving SEO performance.
Q: What is Lazy Loading, and why is it necessary for web performance and SEO?
A: Lazy Loading is a method of loading images on a webpage only when the user actually sees them. This speeds up initial loading and improves LCP (Largest Contentful Paint), one of the Core Web Vitals metrics. LCP improvement positively influences search engine evaluations, contributing to higher rankings.
Q: How do I apply Lazy Loading in HTML?
A: Simply add the loading="lazy" attribute to the img tag in HTML. Browsers recognize this attribute and handle deferred loading without the need for separate JavaScript libraries.
Q: How can I automatically apply Lazy Loading to all images while excluding specific ones?
A: To apply the Lazy attribute to everything except specific images (e.g., the most important image affecting LCP), use the JavaScript code provided in the section above. Through the code, you can apply the attribute to all images while using a conditional statement with the filename to remove the attribute from specific images.