Simple Steps to Improve LCP and CLS Website Speed Scores

Jake Lett May 30, 2023
simple-steps-to-improve-lcp-and-cls-website-speed-scores
ADN

I recently attempted to improve my LCP on mobile and encountered poor performance for LCP and CLS scores. Most of my blog posts now have a featured image floating in the top right corner. When you viewed the image on mobile, the thumbnail made no sense and added no value. The text is the most important thing on a mobile device.

Tips to improve LCP and CLS scores

So I looked for a solution and discovered that utilising an HTML5 picture tag allows you to load an image at different browser widths, which is exactly what I needed. However, you cannot specify "no image" on mobile, but you can add a 1px placeholder picture. The code for WordPress and other CMS, such as Magento or Umbraco CMS, is provided below.

View this code to see how this could be done with a flexbox container and an image set as an object fit cover image.



    
    <?php the_title(); ?>




    
    image title

Add Lighthouse extension to your Developer tools of Google Chrome or any other browsers or simply you can get from Outgrow, VWO or Pingdom

also view other related posts,