Skip to Content
Five Ways To Improve LCP Without a Developer

Five Ways To Improve LCP Without a Developer

As a content creator, code newbie, or seasoned developer, understanding and optimizing for Core Web Vitals isn’t always easy to understand. Google I/O 2022 just wrapped and I watched a great, informational video about improving the Largest Contentful Paint (LCP) Metric as a developer. You might be surprised to learn that there are things any site owner can do to easily improve LCP without a developer at all.

In the linked video from Google I/O 2022, the author discusses the metric in detail and how it relates to other web vitals and what the threshold is. To have a passing LCP score, your site needs to have an LCP of 2.5 seconds or less.

The element that loads on the page that Google decides is the LCP candidate can take virtually no time to load or it could take an exceptionally long time to load. It comes down to a few variables, but this article assumes you are here for easy answers and easy steps to improve this score without messing with detailed optimization strategies.

What Is LCP?

Largest Contentful Paint is what it sounds like. Let’s break it down so it makes a bit more sense. It’s the Largest Content to Paint on the page in the First Screen View. In other words, it’s the first large thing that loads and Google assumes “this must be the content, how long does it take the user to see it?”

The LCP metric is measuring when something Google might consider to be your “content” loads on the page. When does the user actually see this supposed content? That’s the LCP.

Want to make your site more user (and search engine) friendly? Check out how to add alt text to WordPress Images here.

Why Do I Care About Largest Contentful Paint?

First and foremost, you should care about improving Largest Contentful Paint because poor web vitals mean a higher bounce rate. If a page load increases from 1 to 3 seconds a bounce rate will see a 32% increase. From Google Search Console Core Web Vitals Report.

LCP is one of the toughest metrics to solve for from a developer standpoint. Oftentimes, no matter how fast you make your site you can still fail LCP time and time again. It can come down to the content creator, but developers can also find ways to program the very hacks I’m mentioning below into their products 😉

What Can I Do To Easily Improve LCP?

Look no further than the How To below to get the 5 easy hacks you can use to improve your LCP score on your website.

Improve LCP Without A Developer
Yield: Easy Ways to Improve LCP

Improve LCP Without A Developer

Prep Time: 5 minutes
Active Time: 10 minutes
Additional Time: 10 minutes
Total Time: 25 minutes

This step-by-step guide will help you easily improve your LCP (Largest Contentful Paint). You can learn how to improve one of the main Google Core Web Vitals without having to hire a developer.

This tutorial can't solve all of your Core Web Vital woes, but it should give you a leg up on one of the toughest vitals to conquer.

Materials

  • w3c List of Web Safe Fonts - https://www.w3schools.com/cssref/css_websafe_fonts.asp

Tools

  • Theme support help docs - https://www.google.com/
  • Hide featured images on posts plugin - https://wordpress.org/plugins/hide-featured-image-on-all-single-pagepost/
  • Test CWV with Google - https://pagespeed.web.dev/

Instructions

  1. Remove Featured Images From Your Posts
    arrow and text that says remove featured image on one of my posts featured images
    If your theme doesn't offer a way to hide your featured images within your posts, you can use this plugin (on WordPress sites), to remove the featured images from the first screen view on all of your posts.

    What this does is prevents Google from deciding that the image in your first screenview is the LCP element.
    arrow and text that says LCP candidate points to first paragraph in the post since the featured image is now gone
    Why it matters is because assets, like images, can't load on the page without an additional network request and depending on the size of the image, they can potentially take a long time to load once the requests has been successful.
    Actual page speed report shows the paragraph is now the LCP element on desktop according to google
  2. Move your images in posts down below the first screenview
    graphic of a web page shows pink boxes representing images on a desktop screen and an arrow that says 'move image down'
    This will ensure that your first largest content that Google sees should be a block of text and not an image.
  3. Switch to Web Safe Fonts for your headings and body fonts

    What it means:
    Web Safe fonts mean fonts that are available on all devices. It means the text will be visible and it won't shift the way non-web-safe font assets do once loaded.
    What this does
    is prevents another asset from having to be fetched and loaded by the browser.
    How to fix it:
    If your theme offers a way to switch to a web safe font easily. Check out this list of font families that are safe for any device. You should be able to choose the font family from this list that you like best.

    If your theme doesn't have an option like this, you can place the family you like in some CSS (like this below) on your site. You can replace the "Arial, sans-serif" font with another from the list if you want to.

    This CSS code should force most site's fonts into using a web safe font:

    /***Add to your Additional CSS Section in the WordPress Customizer**/
    body, body p, body a, nav a, h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-family: Arial, sans-serif !important;
    }
    /**end replace with web safe font**/
  4. Make your first text block longer
    graphic of two desktop screens. the first has a parragraph smaller than the sidebar image so the sidebar image is the LCP Candidate and the second screen has a paragraph longer than the sidebar image
    Notice in the image above how the first desktop screen has a paragraph smaller than the sidebar image so the sidebar image is the LCP Candidate. Whereas the second screen has a paragraph longer than the sidebar image.

    Making the largest content in the first window a text block will allow the LCP element to load more quickly. That's due to the nature of this metric. The largest content on the page to paint needs to paint quickly and nothing paints more quickly than web safe text. (Hack level "Master" achieved.)
  5. Move any dynamically styled buttons or images, or iframes below the first screen view
    post shows share buttons above the post content. arrow and text suggest to remove these or move them below the first screen view

    If you have social share buttons, iframes, or any highly styled or animated components in the first screen view, this will slow down your first paint. Consider moving these elements out of the first screen view to prevent this from happening.

How'd it go?

Share how this project went for you with friends!

Skip to Instructions