This summer, Google will unveil another significant update regarding speed. The suspense is terrible, but I hope it will last. Speed is important for your website now and will be even more important this summer. How fast is your website?
I have been running search campaigns since 2003 and have seen a lot of changes. There has been the Florida update, BigDaddy update, Caffeine update, the Hummingbird update, the Penguin update, and the Rankbrain update as some of the biggest algorithm changes. The rankings often focus on relevancy tweaks, backlink improvements, combating spam, and speed improvements to your site. We previously posted a notification blog that this update was on its way, yet the information below is more comprehensive as we approach this update going live.
This time the focus will be on speed. Is your website fast enough? Let’s find out.
Speed, Speed, Speed
Lately, Google cares about speed and may be doing something about it this summer. 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.”
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.
LCP – Largest Contentful Paint
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
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
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
- Consider Converting Images to WebP
- WebP is not supported in IE11, but it is an image format of the future, and PageSpeed urges its use. It offers demonstrably better file sizes than even a compressed JPG. There are code workarounds to get WebP to display in all modern browsers and then a workaround for Safari and IE. See https://css-tricks.com/using-webp-images/.
- Converting large, critical homepage images to WebP can result in better scores.
- Convert single images: https://cloudconvert.com/jpg-to-webp or https://ezgif.com/jpg-to-webp
- Use a plugin for the Media Library: https://wordpress.org/plugins/webp-converter-for-media/
- 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
- 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
- Load Fonts Locally
- See /css/webfonts.css.
- Load fonts exactly as done in this file. Try experimenting with font-display swap or optional.
- Review the details on optimizing fonts in this excellent article.
- Easily get Google Fonts that are ready for use in this stylesheet here: https://google-webfonts-helper.herokuapp.com/fonts.
- 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”.
- 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.
- 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.
- 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.
- Other Hacks
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 as of May 21, 2021, are::
- ForThePeople.com – 89/95 (out of 100)
- BLSLawyers.com – 71/94
- Lawyers.FindLaw.com – 45/81
- AttorneysShapiro.com – 77/91
- Expertise.com – 99/99
- GarvinLegal.com – 88/98
- VilesandBeckman.com – 50/71
- PendasLawFirm.com – 79/87
- WolfandPravato.com – 20/71
In other studies I have seen scores for mobile speed at:
- #1 at 64 of 100
- #2 at 79
- #3 at 29
- #4 at 48
- #5 at 13
- #6 at 43
- #7 at 83
- #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.
Take LCP seriously. Google has stated that it will affect rankings.