Improve Mobile LCP Speed Score by Not Loading Images At Top of Page

Get a Free HubSpot CMS Guide
Improve Mobile LCP Speed Score by Not Loading Images At Top of Page

I was recently trying to improve my page load scores and was running into poor performance for LCP and CLS scores. I narrowed things down to most of my blog posts having a featured image floated in the top right. When you viewed the image on mobile the thumbnail didn’t really make sense and wasn’t adding any value. On mobile, the text is the most important thing.

So I looked for a solution and found using an HTML5 picture tag gives you the flexibility of loading an image at certain browser widths which is exactly what I wanted to do. But you can’t specify “no image” on mobile but instead can add a 1px placeholder image. Below is the code for WordPress and other CMS like HubSpot CMS.

<!-- wordpress version -->
<picture>
	<source srcset="<?php echo get_the_post_thumbnail_url($post->ID, 'medium'); ?>" media="(min-width: 768px)">
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="<?php the_title(); ?>" class=" img-responsive">
</picture>

<!-- Any CMS -->
<picture>
	<source srcset="https://dummyimage.com/900x400/000/fff" media="(min-width: 768px)">
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="image title" class=" img-responsive">
</picture>

Image Is loaded on Desktop

load image desktop improve lcp score

Image Is Not Loaded On Mobile

no load image mobile improve lcp score

Related resources

  • HubSpot CMS vs WordPress: Feature Comparison and Review
  • 25+ Questions to Ask Before Redesigning Your Business Website
  • 5 Things A Business Should Consider Before a Website Redesign
  • How to Get a Responsive Website for Your Manufacturing Company
  • What Is a Good WordPress Alternative for Businesses?
  • Tags: , ,

    Want to Get Email Updates of New Posts? Join My Email Newsletter