Core Internet Vitals Report: 28 Methods To Energy Up Your Web site
30 second summary:
- Google plans to roll out the new Core Web Vitals update in early 2021.
- The overall size, dimensions, loading order, and format of your images will have a drastic effect on your PageSpeed score.
- Loading critical CSS and JS inline can improve the perceived load time of your site.
- Videos lying above the fold and large background images can be particularly detrimental to your largest meal time.
- A server upgrade and CDN can improve your server response time and satisfactory color rating.
- Content Powered Founder James Parsons shares a comprehensive list of 28 items that will boost your website for Google's Core Web Vitals Update and Google PageSpeed Insights.
Announced in early 2020, the Core Web Vitals are a set of metrics that Google is developing and plan to include in their overall search algorithm in May 2021. Given that it's now almost 2021, anyone looking to tweak their website for this can now make the new algorithm update work. Fortunately, Google has done a very good job of publicly disclosing what these new metrics are and how they work.
With this information, you can create a checklist of action items to review and tweak on your website to prepare for the inevitable introduction of these new ranking factors. Here are 28 such items for this checklist.
A. Image optimization
Images are one of the biggest influencers in core web vital. All web vitals measure the time to first rendering, and loading images is the biggest source of delay before a page fully loads for the first time. Hence, image optimization is usually the most powerful tool for enhancing key web vitals.
1. Reduce the dimensions of background images
Background images are seldom fully required in a site design and can introduce a large delay in the first time a page loads.
If you're using a background image, reduce the size of that image and optimize it so that it loads as quickly as possible.
2. Minimize or replace background images with patterns
If you're not tied to a specific background image, replace the image with either flat colors, a gradient, or even a simple tile pattern. Again, the goal is to minimize how many assets must be loaded before the website has completed the initial loading. Since wallpapers don't have much of an impact (and even less necessary on mobile devices), minimize or remove them as much as possible.
3. Remove pictures on the phone above the crease
Speaking of mobile: Due to the quality of the cellular and radio signals, surfing on mobile devices is often slower than surfing on the desktop. Mobile devices are particularly vulnerable to delays in initial input and content movement.
To avoid this, make an effort to make as much of your parent content as possible based on text and other simple elements. Large pictures and slideshows above the crease will be particularly harsh on your score. So remove or move them as much as possible.
4. Implement lazy loading
Delayed loading is a common technique used to speed up the initial loading of a particular page. With Google's new metrics on the horizon, it's no surprise that support is quickly becoming a standard feature. For example, WordPress added native standard lazy loading in version 5.5 earlier this year. Use deferred loading for content, especially images, that do not need to be loaded via the fold first.
5. Use WebP images
Another Google initiative, WebP, is a new image format that was developed back in 2010. It is a smaller image format with better compression algorithms than traditional image formats like PNG.
While it wasn't really widespread until recently, it's becoming more valuable as both users and search engines become increasingly concerned with speed and load times. Support is widespread, even if not used, so you can more or less confidently use WebP images as primary image files.
6. Optimize the size of the image files
Using a tool to crunch or smush smaller file size image files should be a standard part of optimizing images for the web at this point.
If you haven't already, make sure you implement a way to process images as part of your future blogging workflow. You should also make sure that you've defined the height and width of the images to prevent shifting the layout.
B. CSS optimization
CSS has become an increasingly critical part of many website designs, making the web almost unrecognizable by blocking it. With a website that relies on CSS for everything from color to positioning, making sure your code is optimized is more important than ever.
7. Inline Critical CSS
You don't have to include every bit of your CSS, although it works too. Specifically, you'll want to incorporate CSS, which is vital to the overall design and layout of your topic.
This minimizes the number of individual files a browser has to pull from your server to load the original layout and draw the initial content on your site.
8. Minimize CSS
CSS is a very minimalist language by default and can work just fine without spaces, indentations, comments, and other text, making it more user-friendly and easier to develop. Before uploading new code to your site, run it through a tool to minimize it and remove the excess kruft that has a microscopic yet noticeable effect on page loading.
9. Consolidate CSS files and code
It can be tempting to save CSS in a multitude of files spread across the code and place it where it seems rather than where it makes sense to put it. Notice; What is easiest as a developer is not necessarily the fastest for a user. Consolidate your CSS, whether inline or in separate files, and execute certain elements only as needed.
10. Optimize the CSS delivery
CSS is often a late-loaded element of site code. Traditional site design loads the framework for the site, then the content, and then the CSS to format everything. Especially when CSS is stored in an external file, this delays the loading considerably. Preloading your CSS is a Google recommended strategy for forcing the browser to load the CSS and have it ready when needed.
11. Minimize JS scripts
Run your scripts through a minifier before adding them to your site.
12. Consolidate scripts and minimize usage
13. Move or asynchronize scripts whenever possible
Scripts are barriers to rendering a website. When a browser needs to render a JS script, it needs to process that script before it can continue loading the page. Since many developers include scripts in their headers, this delays the page loading significantly. Defer allows the browser to continue loading the page before the script runs, while Async allows it to load at the same time. These two features allow you to make up for the delay in using scripts and speed up the initial page load.
14. Remove jQuery Migrate
A recent update to jQuery resulted in many old plugins and scripts no longer working. To buy time and allow webmasters to update their websites, the Migrate module was introduced. This is essentially a translation module that allows old jQuery to work on sites that are using a newer version of jQuery.
Do a check on your website to see if anything you're using – especially old plugins and apps – is using jQuery Migrate. If so, consider updating or replacing these plugins. Your goal is to completely remove the use of the Migrate module as it is quite bulky and can significantly slow down websites.
15. Use Google Hosted JS whenever possible
Google offers a number of standard libraries that are hosted on their servers for use on your website. Instead of relying on third parties with these libraries or hosting them yourself, use the Google versions for the fastest load times possible.
D. Video optimization
Videos are becoming increasingly popular as part of the average website, from core elements of content to video-based advertising and everything in between. They are also extremely large files, even with partial loading and modern video buffering. Optimize your video usage as much as possible.
16. Use image placeholders for video thumbnails
There are many users who surf the Internet without wanting to watch videos. Hence, there is absolutely no need to force videos to load in the background for you. A good workaround is to use an image placeholder where the video would normally load.
The image loads faster and looks like the video player with a thumbnail loaded. When a user clicks on it to start the video, the video starts loading, but no video file or player needs to be loaded until that point.
17. Minimize videos above the crease
As with pictures, video files are extremely heavy, so loading above the crease is a guaranteed delay the first time you paint content. Slide it under the fold; Most people want to read a title and an introduction before they get to the video.
E. Optimization of fonts and symbols
The use of fonts and symbols can significantly slow a site's load times than you might expect. Your optimization may seem like a tiny bit of detail, but when you see the implications it can make you wonder why you haven't made these minor but powerful optimizations before.
18. Preload fonts
Similar to scripts, loading that font takes precedence when your website requests a font to be loaded and prevents the rest of the code from being rendered.
Using a preload command to load the font earlier than required speeds up page loading and prevents the “flash of unstyled text” effect that occurs briefly between the loading of the text and the appearance of the font.
19. Use only the fonts you need
Many web fonts and font families load their entire fonts and style sheets when called, even if your page doesn't use 90% of that content. Often times, you can limit how much it loads, but you may have to pay for premium font access. It can be worthwhile if you have a limited number of a particular font or a font with a particularly large character set.
20. Use SVG whenever possible
SVGs are scalable vector graphics and offer a way of creating extremely small elements of a page, which can still be scaled indefinitely and individually edited to a much larger extent than conventional fonts and symbols. If possible, switch to using SVGs instead of your usual icons.
F. Server optimization
No matter how many tweaks you make to your website's code, images, or other elements of your website, it doesn't matter if your server is slow. The proliferation of web hosting companies and the constant evolution of faster and stronger technologies mean that web hosting is showing its age very quickly. Every few years it can be worthwhile to move or upgrade your hosting to a faster infrastructure.
21. Upgrade to a faster server
You don't necessarily need to upgrade from a shared host to a dedicated host. However, this can help with some of the speed issues associated with shared hosting. Even a simple upgrade from a slower to a faster package can be good use of a budget.
22. Use a CDN
Modern content delivery networks can process most elements of your website faster than a typical web host under almost all circumstances. Use at least one CDN for your pictures, videos, and other multimedia content. You can also offload stand-alone script files.
23. Preload DNS queries
Preloading or prefetching DNS queries minimizes the delay between when an asset is requested by the visitor and when that asset is displayed.
This is linked to using a CDN to store assets by loading and resolving the CDN's domain before the first call, which further reduces page load times.
24. Preload your cache
Often times, a cache plugin or script used on a website is triggered when the first visitor views the page. That first visitor has a slower experience, but its loads are caching the page for future visitors until the cache expires. Unfortunately, often the first visit is a Google bot crawling your page from your XML sitemap or an internal link. This means that Google will be the first to detect the slow version of your website. You can get around this by pre-loading the cache on your website so that the next visit to Google is guaranteed to be a fast-loading website.
25. Consider a server-side cache
Software like Varnish Cache acts as a server-side cache to further accelerate the generation and delivery of a cached version of your page, making it as fast as possible with as few server calls as possible.
G. Additional optimization
Everything that doesn't fit into another category has been added here. These additional tweaks may not apply to your website design. However, when they do, they can be a great blessing to take care of.
26. Minimize third-party scripts
Webmasters in 2021 need to strike a balance between website speed optimizations and user engagement tools.
Many plugins, such as B. Buttons for sharing social networks, third-party comment systems, and media embeds must run third-party scripts in order to function. However, these scripts slow down the website. Minimize them as much as possible and try to find the fastest versions of each.
27. Avoid preloading the filler
A common technique for websites with slower loading times is to add a spin box, loading icon, animation, or other form of content that is loaded and displayed to indicate to a user that the website is actually loading. While this can help minimize bounce, it is a great success for the initial loads measured by the core web vital. Remove those and work on speeding up your website so you don't need it.
28. Consider a website redesign
With all said and done, sometimes you have to make so many changes to so many basic elements of your website that it is easier to just scrap your current design and develop a new one with speed in mind. Think of this as a possibility and analyze the benefits you get from optimized core web vitals. Nobody knows yet how influential these metrics will be on the overall algorithm, but it certainly can't hurt to optimize them.
James Parsons is the founder of Content Powered, a blog management and content marketing company. He has worked as a senior content marketer for over a decade, writing for Forbes, Entrepreneur, Inc and Business Insider.