Page performance is worth paying heed to. Even a second’s delay in page loading time could result in a 7% drop in conversions. If that wasn’t startling enough, from May 2021, page performance is even more crucial, as Google is officially making page experience a ranking signal.
*(You can read up on Google’s upcoming changes here).
This means websites that perform poorly will rank lower on search engines. So, we’re shedding some light on core web vitals metrics, DIY solutions, and when it’s time to seek a professional.
Why is This Important Now?
If currently, your website scores poorly where web vitals are concerned, you have lots of work to do before May. But that doesn’t mean it isn’t doable. By finding out what you need to do and putting it into action, you’re on the right track to SEO success.
Failure to do so, and you may end up penalized. We observed this last time Google made a significant change to its algorithm. When the search engine wanted to promote responsive websites as an influential ranking factor, there was a substantial shift against sites that weren’t optimized for mobile-friendliness.
With all that said, let’s take a closer look at what core web vitals actually are.
What are Core Web Vitals?
Web vitals aim to simplify the often confusing and complicated landscape of UX performance metrics to help site owners focus on what matters most. They’re a subset of web vitals that apply to all web pages that site owners can measure via numerous Google tools. Here, these web vitals are measured by performance in the 75th percentile.
Some of the more well-known solutions for evaluating your core web vitals include:
- Lighthouse
- PageSpeed Insights
- Chrome DevTools
- Google Search Console
- web.dev’s measure tool
- The Web Vitals Chrome extension
- Chrome UX Report API
There’s a lot of overlap between the tools. Some enable you to plugin the URL and then the tool will analyze your web vitals, others allow you to run a report directly in the browser, and others enable you to monitor your web vitals on an ongoing basis. Google has provided a multitude of tools with different users in mind – from less technical to more tech-savvy ones.
In any case, Page Speed Insights is a great starting point. I ran a random website through PageSpeed Insights and found they calculate field data via the Chrome User Experience Report using real-world speed data. With regards to core web vitals metrics, this is how they display the data:
Core web vitals are complementary to Google’s Page experience metrics, which include: multi-device responsiveness, HTTPS, pop-ups, etc., and as such, core web vitals aren’t a replacement for these metrics.
It’s also worth noting, what’s considered a core web vital may change over time as technologies evolve and priorities shift. However, at the time of writing, the current core web vitals include:
- The largest contentful paint (LCP): This measures loading performance (a loading performance under 2.5s is considered good).
- First input delay (FID): This metric measures load responsiveness to the first moment a user interaction can occur with the website. Ideally, this should be below 100ms.
- Cumulative layout shift (CLS): This measures visual stability. For a good user experience, pages should score less than 0.1 on this metric.
How Can You Optimize Your Website for Core Web Vitals?
Before you can start optimizing your site, you must determine how the website’s already performing across each metric. Therefore, the first step is to check your core web vitals score.
- Generate a report on your page speed and core web vitals using Google Page Speed Insights.
- Track particular issues with your core web vitals in Google’s Search Console, and see how your solutions are working
You can also use the Web Vitals Chrome extension. This is another fabulous tool for measuring your site’s metrics. Finally, web vitals can also be measured in Javascript using Standard Web APIs.
Making Enhancements to Your Core Web Vitals
Now that you’ve run the checks above, you should have a better idea of how your site performs for core web vitals. If you passed them all with flying colors, you don’t have to worry about May’s upcoming changes. However, if there were one or more metrics you could improve upon, pay attention. Below we’ve listed some of the changes you may need to make and how to execute them (in order of importance):
Optimizing LCP
As we’ve already said, the LCP measures the time it takes from clicking through to your website to seeing the main of your on-screen content. As such, this metric concerns your page load speed (usually the home page), which is influenced by the render time of the largest image, video, or volume of text on your website.
Remember, under 2.5 seconds is considered a good website load time. Anything above needs improvement, and if your site loads slower than four seconds, Google will consider it inferior.
Any of the following could be the cause(s) of slow loading times:
- Slow server response times (this could result from poor-quality web hosting, a lack of caching, increased web traffic, etc.)
- Render-blocking Javascript and CSS (These are files that prevent websites from displaying content before they’re fully loaded).
- Client-side rendering (These kinds of websites create dynamic routes directly in the browser).
How you might fix it:
- Remove any unnecessary third-party scripts (plugins). These might not be optimized and could slow your site down.
- Upgrade your web hosting. Cheap hosting might shackle your site to slower web servers, and hence, loading times.
- Set up lazy loading or use a content delivery system. This enables your site to cache more easily and sends content to users via data centers near them. All of this goes a long way to reducing load times.
- Remove large web page elements.
- Service HTML pages cache-first.
- Establish third-party connections early.
- Minify CSS.
- Optimize/compress website imagery.
- Ensure your web pages are AMP optimized.
Optimizing FID
First Input Delay (FID) measures how fast the page becomes interactive. In other words: when the user first clicks on something, how long does it take before something happens?
This metric may be less relevant for blogs or news sites where the central interactivity relates to opening articles to read. But for websites involving logins and/or signup pages, FID is crucial. Sites with an FID of more than 300ms are considered inferior. Ideally, you should score under 100ms on this metric.
Fixing your FID is difficult without in-depth knowledge of how websites load JavaScript.
However, you might be able to improve this metric by:
- Breaking up long tasks and minimizing Javascript bloat
- Removing unnecessary third-party scripts
- Using a web worker
Optimize CLS
Cumulative layout shift (CLS) concerns whether your web page elements stay where they should as the site loads. It measures the sum total of unexpected layout shifts (a layout shift occurs every time a visible element changes its position between rendered frames).
Have you ever tried to click on something on a mobile site, but the element moved as you were trying to select it? The chances are that the site had an undesirably high CLS. Anything below 0.1 is good. If you score higher than 0.25, your site badly needs to improve its visual stability.
Here are a few fixes to apply:
- Define media size attributes in HTML, so internet browsers know how much space they’ll take up.
- Reserve space for any ads.
- Add any new UI below the fold so they don’t push expected content down.
- Work with responsive images.
- Some fonts can cause a flash of unstyled text or invisible text while a font is rendered – so test for this and make any necessary changes.
- Use transform animations rather than animations of properties. The latter has a higher chance of triggering layout changes.
Optimizations Suggested by Google
Finally, Google’s PageSpeed insights tool comes with its own recommendations on how to improve your site’s performance. These are good practices across the board and, when implemented, could enhance your website’s load time.
That said, these optimizations won’t necessarily affect your core web vitals. However, they should help provide a better user experience, which is excellent for SEO and visitor retention. Most notably, you should start:
- Saving images in next-gen formats
- Eliminating render-blocking resources
- Enabling text compression
- Removing unused CSS
- Removing unused JavaScript
How To Implement These Optimizations
Lots of these fixes require knowledge and familiarity with development practices, so much so, that you need to be a developer. For instance, some of the changes demand an FE specialist, while others may require a Backend or a server-level specialist. For example, breaking up long tasks, minimizing Javascript bloat, and removing third-party scripts. You can’t remove all third-party scripts, some like Google Analytics are crucial. As such, you need an understanding of these third-party scripts, which ones you can actually delete, and how you go about doing that (which involves some coding know-how).
The keyword to remember is optimization. You’re not trying to rebuild your site into one Google wants. Instead, you’re trying to optimize your website with your user’s best experience in mind. Of course, at the same time, you’re also working to avoid Google’s penalization. This is where the challenge lies.
Suppose you don’t possess much technical knowledge yourself. In that case, your site might benefit from hiring a professional developer – especially if you don’t want to compromise your website’s design. A pro will be able to preserve your site’s “look and feel” while making the necessary optimizations.
Using a professional developer’s services is undoubtedly the easiest way to save you and your team lots of time. Plus, you can await May 2021, confident in the knowledge that your website makes the grade.
How Do You Hire Professional Support, and Where’s The Best Place to Find it?
When it comes to optimizing your core web vitals, the biggest mistake you can make is attempting to fix everything at once. Instead, prioritize and resolve core issues first. Website optimization is not a task you do once and can forget about. Rather, it’s an ongoing process that requires your continuous attention.
As we hinted at earlier, you should always start with an audit to get an idea of where your website stands. It’s then a good idea to work with an expert webmaster to prioritize and roll out an optimization plan.
Codeable experts can do that for you. Codeable matches customers with carefully screened WordPress experts and developers. To determine the best qualified candidates, every specialist goes through a vetting process which includes a technical exam and live coding tests.
Codeable’s pros can perform anything from small tasks and fixes to full custom development work and they can tackle your website’s optimization to ensure you’re ready to face May 2021 with confidence. Best of all, you can connect with a reliable expert within as little as three to five hours.
Are You Ready to Optimize Your Website for Web Page Experience Signals?
By now, you’ll know that Google is rolling out significant changes in May 2021 as to how its SEO algorithms treat core web vitals. Sites that aren’t ready and optimized by then risk losing their rankings and their visitors. It’s essential to start creating and executing a web page optimization plan to adjust to these changes ASAP.
Marketers can run quick and simple checks on your site today to determine how it performs across the three core web vitals. From there, you might be able to implement some of the DIY fixes outlined above. However, for significant optimizations, getting expert advice is a great idea. This will allow you to work promptly to prioritize the most important changes.
