How to Keep Up with Google: What to Do About LCP and Speed?

google building image

Speed is important for your website. It was 10 years ago and will likely be important 10 years from now.

Is your website fast enough?  Let’s find out.

Speed, Speed, Speed

Even though AMP may be finally out the door for antitrust reasons, Google still wants you to have a fast-loading site.

All created chaos in search rankings, but as we all know, “Chaos is a ladder.”  Is your firm going to climb out of the pit of the search ranking changes this summer?

From Google’s Own Search Central:

We’ll begin using page experience as part of our ranking systems beginning in mid-June 2021. However, page experience won’t play its full role as part of those systems until the end of August.
Developer.Google.com Post

What are LCP, FID, and CLS?

Let’s get nerdy.  Google indicates they will be looking at three core web vitals:  LCP (Largest Contentful Paint), FID (First Input Delay), and CLS (Cumulative Layout Shift).

Each will determine how fast your website loads, how quickly the user can interact with the page, and how often the page jumps around as it loads. Let’s dig into each.

Google PageSpeed Insights report shows a score of 91. The page fails Core Web Vitals with 1.4s for FCP and LCP, 249ms for FID, and 0.85 for CLS. Wondering how to keep up with Google? Here's what to do about LCP and speed improvements.

LCP – Largest Contentful Paint

Bar chart indicating the Largest Contentful Paint (LCP) of 4.8 seconds, with 35% green, 25% yellow, and 40% red. Learn how to keep up with Google: what to do about LCP and speed optimization.

Basically, this is the load speed of your website. When does your biggest part of the website load?  LCP is the largest image or text block visible within the viewport. This includes image tags, video tags, and background elements. To provide a good user experience, sites should strive to have Largest Contentful Paint of 2.5 seconds or less. To ensure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

FID –  First Input Delay

First Input Delay (FID) performance bar showing 83% in green, 14% in yellow, and 3% in red, with a total delay of 34 milliseconds. To keep up with Google: What to do about LCP and speed? Understand these metrics and optimize for better user experience.

How quickly can users interact with your website? To provide a good user experience, sites should strive to have a First Input Delay of 100 milliseconds or less. To ensure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

Note that FID is a tough challenge sometimes.  Even Google’s own Page Speed Insights fails currently.  Per the above report, they come in at 249ms, and this is Google’s own test.

CLS – Cumulative Layout Shift

Cumulative Layout Shift (CLS) score of 0.09 with a progress bar showing 76% in green, 13% in yellow, and 11% in red. Learn how to keep up with Google: What to do about LCP and speed?

In short, how much of the page jumps around once fully loaded. To provide a good user experience, sites should strive to have a CLS score of 0.1 or less. To ensure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

So per their own announcements, LCP (Last Content Paint) is coming.  You can see your score here in Google Page Speed Insights.  Are you a 10? 40? 70? Or possibly in the safe zone of 80 or 90?

Again, layout shifts are tough, and Google’s own Page Speed Insights comes in at .85, which is above their “strive” threshold of .1.

Steps for Better Performance

If you have a website, you will want to consider doing the following:

  • Host with a Good Web Host
    • Premium hosting provides better backend code delivery and a faster First Contentful Paint (FCP).
  • Compress ALL Images
    • This is absolutely mandatory and an easy win. Use TinyPNG or any other providers. Anyone on dev can provide a shared login link.
    • To compress images within the WP Media Library, try a plugin like Smush.
  • Consider Converting Images to WebP
  • Use Proper Image Sizes and Formats
    • Images used on the site, especially on the homepage, should be sized appropriately for how they will be used on the live page.
    • For example, an image box that takes up 700px width even on a desktop should not use a 1200px wide image. The image should be 700px.
    • Use images in PNG format only where transparency is required. Otherwise, use JPG or WebP as they are more efficient.
    • Get a better grasp of responsive images.
  • Set a Fixed Width and Height on <img> Elements
    • This reduces page layout shifts on load, helping the CLS score.
    • Example: <img src=”/images/layout/logo.png” alt=”PaperStreet Logo” width=”328″ height=”71″>
    • Use width:100% in CSS to prevent images from overflowing on mobile. Use height: auto to keep height in proportion with the width.
  • Lazy Load Images
    • Only load images when they enter view.
    • Lozad.js library is part of our base theme.
    • See the directions for use in this document.
  • Eliminate Plugins, Fonts, Scripts or Stylesheet Calls That are Not Needed
    • This is an easy win. Find features or plugins that are not in use and disable them. Remove calls in functions.php; disable and delete plugins in wp-admin.
    • If a plugin may be needed (meaning you are not sure), disable it without deleting it.
    • If something is in use but could be removed, ask for permission to remove it.
  • Optimize Video Delivery
    • Offload this task to a service like Cloudinary.
    • Request a video asset no more than 2-3 MB in size. If the video is long, ask if it can be edited to be shortened and looped. If the file size is still too large, try an online video compressor.
    • Video must be loaded asynchronously. Have a background image in place until the video loads.
  • Eliminate FontAwesome Sets if There are More Than One
    • Solid, Regular, Light – pick one (FA cheatsheet).
    • Even if the design called for more than one, consider reducing FA sets to just one. Review the site for the most commonly used and stick with that.
    • This requires replacing “fa” class names within code. If going from regular to solid, you’ll switch from “far” to “fas.”
  • Replace FontAwesome Social Set with a Custom Font Pack
    • The FA Social set is extremely wasteful in KB size. We use only a tiny fraction of its icons!
    • Generate your own on Fontello or IcoMoon, or use the base theme’s socialicons.min.css (generated with IcoMoon).
  • Load Fonts Locally
  • Preload Critical Assets
    • In functions.php, function ps_enqueue_main()
    • Use <link rel=”preload”> on assets you know will be needed and needed early.
    • This starts loading them sooner and means the assets do not have to be discovered while parsing code.
    • Fonts and hero images are great candidates for preloading.
    • Preload content with rel=”preload”.
  • Try to Asynchronously Load any JavaScript Files Loaded in the Header or Footer
    • This is especially important if the script is called directly to a .js file.
    • It is OK if the script is loaded on a timeout; just don’t let it be render blocking on load.
    • Check out Lazy loading JavaScript to improve site speed – See the jQuery AJAX technique.
  • Reorganize Stylesheet and Script Files
    • Move code where it belongs so it is not loaded on pages where it is not needed.
    • There are stylesheets intended for homepage-only use and subpage-only use.
    • /css/homepage-style.css
    • /css/subpage-style.css
    • There are scripts for site-wide use and more specific use, e.g., for contact form processing.
    • /js/common.js – Shared functions, global level
    • /js/main.js – Core JS file for our themes
    • /js/contact.js – Inputs and reCAPTCHA
    • /js/homepage.js – Homepage only scripting
    • /js/headerSearch.js – Header AJAX search
  • Install Autoptimize  (WordPress® Only)
    • Plugin: https://wordpress®.org/plugins/autoptimize/
    • This plugin minimizes and combines scripts for even better delivery. It almost always results in better PageSpeed scores.
    • Only scripts and stylesheets that are properly enqueued in a functions.php file will be successfully optimized. Thus, anything loaded in the header or footer should be moved to an enqueue as files are loaded on the base theme.
    • IMPORTANT: Some scripts will break when scripts are concatenated via Autoptimize. In these cases, you can try: (1) excluding the file via Autoptimize settings or (2) disabling JavaScript optimization in the plugin.
  • Other Hacks
    • Finally, there are some obfuscation code tricks that could be used to “fix” your LCP code.  You can run your entire site through JavaScript obfuscator, which means that Google will only use your static HTML version of your site with no CSS.  I have seen this trick work and scores are 99 out of 100 almost every time. In my opinion, this is a loophole that should be fixed.

Will Page Speed Matter?

Of course. They have stated that in the past for other speed updates. However, recent tests on various websites show that you can have a crap page score and still rank well.  Let’s take the search term “Fort Myers Auto Accident Lawyer.”  The top 9 search results in May 21, 2021, were::

  1. ForThePeople.com – 89/95  (out of 100)
  2. BLSLawyers.com – 71/94
  3. Lawyers.FindLaw.com – 45/81
  4. AttorneysShapiro.com – 77/91
  5. Expertise.com – 99/99
  6. GarvinLegal.com – 88/98
  7. VilesandBeckman.com – 50/71
  8. PendasLawFirm.com – 79/87
  9. WolfandPravato.com – 20/71

In other studies I have seen scores for mobile speed at:

  1. #1 at 64 of 100
  2. #2 at 79
  3. #3 at 29
  4. #4 at 48
  5. #5 at 13
  6. #6 at 43
  7. #7 at 83
  8. #8 at 18

The seventh site is the fastest yet ranks #7.  One of the slowest sites is in the third slot.

As you can see, it is not necessarily the top speed scores that rank higher with similar content.  Speed will be one factor, among many, that determines rankings.  Links will still matter. Your content will still matter. User metrics will still matter.

It appears as though you will need a minimum number not to be “dinged,” and then if two things are probably equal in all other items, speed will matter.

Conclusion

Take LCP seriously.  Google has stated that it does affect rankings.

Share This
Blog Decorative Background

Join the Sales and Marketing News, receive our last insights, tips and best practices.

Our 7 Guarantees

Keeping 2,000+ Clients Happy Since 2001.

1
You Will Love Your Design We design to please you and your clients
2
Same-Day Support 24-hour turnaround edits during business hours
3
Free Education We provide knowledge to help you expand
4
No Hidden Charges We quote flat-rate projects
5
Own Your Site No strings attached
6
We Create Results SEO, PPC, content + design = clients
7
We Make Life Easier One agency for web, branding and marketing