How to Improve Website Speed By Prioritizing Image Loading

Not all website elements are created equal when it comes to loading priority. While some resources, like text and basic layout elements, are crucial for a visitor’s initial experience, others, like fancy graphics and lower-fold images, can wait. Why? Because bandwidth isn’t limitless! Just like your data plan, your website has a finite amount of bandwidth to allocate. So, to ensure a smooth and speedy experience, we need to guide the browser towards the most important resources first.

This is especially true for images. They’re everywhere – headers, footers, sidebars – not just above the fold. But browsers are clueless. They can’t tell a hero image from a tiny footer icon just by looking at the code. They’re blind until the page starts rendering.

That’s where fetchpriority comes in. This magic attribute lets us tell the browser which images deserve the red carpet treatment. Think of it as a VIP pass for your hero image, the one that grabs attention the moment visitors land on your page.

<img src="hero.jpg" fetchpriority="high">

Boom! Your hero image jumps to the front of the queue, ensuring a lightning-fast appearance. Boost the priority of the LCP image by specifying fetchpriority="high" on the image element, causing LCP to happen sooner.

Boost your Largest Contentful Paint (LCP) score by prioritizing your LCP image with fetchpriority=”high”. This simple attribute tells browsers to load it first, shaving milliseconds off your LCP.

But what about those lower-priority images? No need to leave them hanging. We can use “lazy loading” to tell the browser to chill with those icons and charts until they’re actually needed. Think of it as a “load-on-demand” service for images.

<img src="icon.png" loading="lazy">

This way, your website feels snappy and responsive, even when it’s packed with visuals.

Heads Up

“fetchpriority=”high” only works as intended in Chrome and Edge. It isn’t yet fully supported in Safari, Firefox, Opera, or Brave. While these browsers may recognize it, they don’t prioritize resources as aggressively.

Text First, Please

Remember, on mobile especially, text reigns supreme. Visitors want to start reading, not wait for a hero image to load. So, prioritize text in your hero section. Let the words do their magic before the visuals take center stage.

How to load images with the right priority in WordPress

Smush Pro with fetchpriority & Lazy Loading

While there are several great contenders in the WordPress image optimization arena, one plugin truly reigns supreme for fetchpriority and lazy loading: Smush Pro with Fetchpriority & Lazy Loading. This plugin isn’t just about squishing your images (although it does that amazingly too); it’s about strategically delivering them for maximum impact and speed.

How to load images with the right priority in Drupal

Image Optimize with OptiPic

While Smush Pro reigns supreme in the WordPress world, Drupal has its own champion for image optimization and strategic loading: Image Optimize with OptiPic. This dynamic duo combines lossless compression with smart delivery techniques, giving your Drupal site the edge it needs to shine.

What is the difference between fetchpriority="high" and rel="preload" attributes?

Both fetchpriority="high" and rel="preload" can help you load a hero image faster, but they work in different ways:

rel="preload"

• Tells the browser to discover the resource early: This is useful for resources not readily apparent to the parser, like background images or those loaded by scripts. For instance, if your hero image is hidden by a preloader script, rel="preload" would make the browser aware of it sooner, potentially leading to faster loading once the script finishes.
• Doesn’t directly influence priority: While preloading makes the browser aware of the resource, it doesn’t explicitly tell it to prioritize it over others. The browser still uses its internal logic to determine priority based on factors like viewport position and rendering needs.

fetchpriority="high":

• Gives the resource a higher priority: This instructs the browser to prioritize downloading and processing the resource over others with lower priority (usually “auto” or “low”). This can be very effective for critical resources like the hero image, pushing it to the forefront of the download queue.
• Works independently of discovery: You can use fetchpriority="high" regardless of when the browser discovers the resource. Whether it’s readily visible or hidden by scripts, the browser will prioritize it based on your hint.

For your hero image, you can combine both approaches for optimal results:

<img src="hero.jpg" rel="preload" fetchpriority="high">

Conclusion

By strategically loading your images, you’ll not only impress your visitors with a speedy website, but you’ll also climb the search engine ladder. Google loves websites that prioritize user experience, and fast loading times are a major ranking factor. So, go forth and conquer the image-loading game!

How Manmash Consulting Can Help

Manmash Consulting can help you optimize your images and speed up your website by seamlessly implementing the fetchpriority and lazy loading attributes on your website and make your website feel much snappier and more responsive, even if it’s packed with visuals. For further information, please contact Manzar Mashhood on his Whatsapp +923331200550 or visit our contact page.