If images are good, you will get good traffic not only from Google search but also from Google images and improve engagements.
Today, we will cover lazy loading & related topics –
Lazy Loading of Images:
Lazy loading is a technique used to defer the loading of images until they are needed, typically when they come into the viewport (visible area) of the browser window. This helps improve page load performance, especially for pages with many images.
But before covering lazy loading, we have to cover Async and Defer.
Async Attribute:
When you include a script tag with the `async` attribute in your HTML document, it tells the browser to download the script file asynchronously while continuing to parse the HTML document. This means the browser won’t wait for the script to be downloaded and executed before moving on to the next HTML elements or scripts.
Example: <script src=”script.js” async></script>
Defer Attribute:
Similar to `async,` the `defer` attribute in a script tag tells the browser to download the script file asynchronously. However, scripts with the `defer` attribute will only execute after the HTML document has been fully parsed. This ensures that the scripts are executed in the order they appear in the document.
<script src=”script.js” defer></script>
Differences:
- Execution Order: Scripts with the `async` attribute may execute in any order, depending on when they finish downloading. At the same time, scripts with the `defer` attribute will execute in the order they appear in the document after the HTML has been parsed.
- Parsing: `async` scripts don’t block the HTML parsing process, while `defer` scripts wait until HTML parsing is complete.
How to Implement Lazy Loading?
To implement lazy loading, you can initially load a placeholder image and then use JavaScript to load the actual image when it becomes visible to the user.
<img src=”placeholder.jpg” data-src=”actual-image.jpg” class=”lazy-load” loading=”lazy” />
In this example, the `data-src` attribute holds the URL of the actual image. JavaScript can then detect when the image enters the viewport and replace the `src` attribute with the `data-src` attribute value to load the actual image.
By combining lazy loading with the `async` and `defer` attributes for JavaScript, you can optimize the loading of images and scripts to enhance the overall performance and user experience of your web pages.
The modern browser uses Intersection Observer API and supports lazy loading.
Optimizing Images Using WordPress Plugins
Optimizing images is crucial for improving website performance, reducing load times, and enhancing user experience. WordPress offers several image SEO plugins that can help automate and streamline the process of image optimization.
You can use paid plugins such as Flying Press, WP Rocket, etc.
How do you use Flying Press for Lazy Loading Images?
FlyingPress is a paid WordPress plugin that offers a variety of performance optimization features, including lazy loading of images. Here’s how you can use FlyingPress to enable lazy loading for images on your WordPress site:
- Install and Activate FlyingPress
- Go to Images option in FlyingPress
- You will see that the option Lazy Load images is already activated.
- Now always exclude images from lazy loading that are above the fold content. The reason I will explain in a later section. The option also lets you exclude the number that you want to exclude from lazy loading. If you have more than six images then you can also type the image URL in the box “Exclude images“
- Click on Save Changes and you are good to go.
Why Should You Exclude Above-the-Fold Images from Lazy Loading?
Let’s say you install a plugin and enable lazyloading of images. Now the images in above-the-fold content, which plays an important role in page speed, also start lazy loading.
So, the images will load only when the user interacts with the web pages. This not only degrades user experience but also decreases the speed of the website. So, instead of lazy loading, you should preload the images above the fold content.
Preloading allows critical resources, such as images, stylesheets, and scripts, to be fetched and loaded in advance, ensuring they are readily available when the user requests them. This can help improve the perceived loading speed and overall user experience, particularly for content that is immediately visible to users when they first visit a webpage.
How to Identify Above the fold content Images?
The above-the-fold content typically includes header images, hero banners, logos, and other visual elements that users see immediately upon loading the page.
Here are the steps to identify them –
- Inspect the website
- Go to Network and in that go to Img
- Check the screenshot below
Conclusion
In conclusion, optimizing images is a crucial aspect of improving website performance and enhancing user experience. While lazy loading is a popular technique for deferring the loading of non-critical images until they are needed, it may not always be suitable for above-the-fold content, where immediate loading is essential for a fast and seamless user experience.