How to Improve LCP Mobile Speed Score

I was recently trying to improve my LCP on mobile 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.

Solution – Responsive Picture HTML Tag Instead of CSS Div Background Images

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.

Here is a code solution on how this could be setup using a flexbox container and image set as an object fit cover image.

<!-- 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

Image Is Not Loaded On Mobile