How to use loading="lazy" correctly

One of the easiest and most effective measures to improve a website's loading speed is lazy loading of images. By simply adding loading="lazy" to an HTML image tag, the browser will not load many images at once, but will instead start loading them only when they are needed.

In this article, I will summarize the correct usage, precautions, and effects of loading="lazy" in a way that is easy for beginners to understand.

■ What is loading="lazy"?

As the word "lazy" implies, it is a mechanism that does not load images until they are needed.
Instead of loading all images the moment the page is opened, loading only occurs when the user scrolls to the position where the image is visible.

This provides the following benefits:

• Improved page loading speed

• Lighter initial display, which reduces bounce rates

• Saves data usage for mobile users

• Highly effective for improving Google Lighthouse and Core Web Vitals scores

■ Situations where it can be used correctly

Basically, it can be used for almost all images, but it is particularly effective in the following places:

• Images in positions that are not visible without scrolling down

• Photos that appear in large numbers within blog posts

• Portfolio photos or galleries on landing pages or corporate websites

• WordPress thumbnails or images on list pages

The more images there are at the bottom of the page, the higher the effect.

■ Cases where you should NOT use "lazy"

It is not a universal solution, and there are cases where it is better not to add it, such as the following:

1. Images in the first view (above the fold)

The area that users see first when they open a page.
Adding lazy here will make the loading appear slow, which is counterproductive.

2. Background images (CSS background-image)

Lazy loading does not work for images specified in CSS rather than HTML attributes.

3. Logos, header icons, etc.

It is better for UX to load items that appear at the top of the page immediately.

■ How effective is it?

It is so effective that site speed diagnostic tools (Lighthouse / PageSpeed Insights) also recommend
"improving by using lazy loading for images".

On sites with many images, you will notice a significant increase in loading speed,
and it also leads to improvements in Google scores.

■ Common questions

● Does it affect SEO?

Since Google officially recommends it, it is not a problem; it is a recommended practice.

● Is it okay to use it with alt attributes or width / height?

Of course. In fact, width and height are essential.
They help prevent CLS (Cumulative Layout Shift), which also has a major impact on SEO.

● How well does it work with WebP?

Very well.
Combining lightweight WebP with lazy loading significantly improves display speed.

■ Summary

loading="lazy" is a very simple HTML setting that
contributes significantly to improving display speed, SEO, and UX.

• Use it actively for images further down the page

• Do not add it to images in the first view

• Always specify width / height

• Effect is doubled when combined with WebP

Since even beginners can implement it immediately,
it is a basic technique you should definitely remember if you are doing web development!