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. Read on to find out this codeless LCP hack.
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 LCP hacks you can use to improve your LCP score on your website.
Improve LCP Without A Developer
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
- Remove Featured Images From Your Posts
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.
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.
- Move your images in posts down below the first screenview
This will ensure that your first largest content that Google sees should be a block of text and not an image. - 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**/ - Make your first text block longer
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.) - Move any dynamically styled buttons or images, or iframes 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.