On November 10th, 2020, Google made this announcement on Twitter:
You probably have two questions …
- What does that mean?
- Why does it matter?
Here’s what it means:
Core Web Vitals measures three distinct on-page metrics, two of which are tied to how fast a web page loads. Now, more than ever, having a quick-loading website is vital for a strong online presence.
Google’s studies have shown that as page load time increases, so does the bounce rate—the measure of how many users leave a page before interacting with it.
Check out these stats:
And here’s why it’s important:
With Google placing such a heavy emphasis on user experience, webmasters must adapt to the times… or be left behind.
What can you do to improve your site speed? Let’s break down 5 useful strategies that can move the needle right away, even if you’re a total beginner.
1. Use a content delivery network (CDN)
A CDN is a network of servers spread across the world that share a website’s files. When a user requests a website, the server closest to the user’s physical location is the one that delivers the content.
In short, it cuts down how far the information has to travel.
A CDN is a great way for large, asset-heavy websites to quickly reduce pageload times. Popular website builders like Wix and Squarespace automatically store content in their own CDNs.
So, if you’re on one of those platforms, you’re in luck.
What about WordPress, the platform that powers nearly 40% of all websites? There are several great plugins that you can use. All of them user-friendly, highly supported, and well-rated.
2. Ensure images are optimized
This is the most direct, straightforward way to ensure you have lightning quick load times. Images account for a large portion of a webpage’s load time.
Your goal at the end of the day is to reduce an image’s file size as much as possible, without sacrificing quality.
How do you do that?
First of all, use properly sized images from the get-go. Before ever uploading an image to your website, see how large the container holding it will be.
If you have a container that is only 500px by 500px, it doesn’t make sense to upload an image twice that size. Use the properly sized image for each appropriate container.
The second thing you can do is take advantage of image compression. Image compression reduces the file size of an image based on the compression rate.
The higher the compression rate, the smaller the file. However, as compression rate increases, the image quality decreases. Again, you’re looking for the perfect balance between all those factors.
There are two types of compression: “Lossy” and “Lossless.”
- Lossy images lose a bit of quality each time they’re compressed.
Lossless images do not lose quality.
Although we won’t be getting deep into each of those compression types here, you need to know what they are, and which option may be best for your specific website.
Many popular website builders compress images automatically, but you’ll have to check your own platform to see if you already have this feature.
For WordPress users, there is a litany of plugins that quickly allow you to compress images in a matter of moments, without the need for a programmer. Here are some of the most popular:
The third thing you can do is decide which type of image format you’ll be using.
You’ll likely be choosing between PNG and JPEG. Although getting into the differences is an entire article on its own, here are a couple of general guidelines:
- JPG allows you to get a smaller smile size than a PNG would allow. JPG is great for photographs like the one below. File compression is lossy.
- PNG is your go-to for any transparent image, text-heavy image, or graphic like the one below. File compression is lossless.
3. Leverage the power of caching
Whenever a user visits your website, several things are happening behind the scenes.
Although it seems almost instantaneous to us, these steps are taking place:
1. A request is sent to your website’s server.
2. The server has to process that request.
3. Then the server has to return the request to the user’s browser.
All those things take time.
But the more elements on your page, the longer it takes for all of that action to happen.
Caching stores some of that information, allowing the same content to be served up more quickly the next time it’s requested.
Caching is either done by your server or through a plugin. Popular WordPress hosts like Kinsta and Bluehost already have built-in caching solutions.
Popular WordPress caching plugins include:
If you’re not on WordPress, check out your website builder’s support forum to see if caching is done automatically or if you have to take additional steps to enable that feature.
4. Minimize the number of plugins used
A note for WordPress users:
Many of the plugins and providers mentioned above have multiple features within their products. For example, a performance plugin may also have caching, lazy load features, and more.
Make sure that you don’t have multiple resources performing the same task. Like this one:
And this one.
This can potentially cause conflicts, working against your goal of a lean, quick-loading site. If you can find one tool to serve multiple uses, go with that tool. Consolidating plugins is a great way to reduce site loading time.
The fewer plugins, the better.
Deleting plugins is another great way to improve site speed. Plugins take up space on your database. Go through your plugins on a regular basis. If you find plugins that are deactivated, see if you can delete them entirely.
Even if a plugin is not active, it is still taking up space in your database. Use it or delete it.
5. Minify CSS and HTML
HTML and CSS provide servers with the information they need to properly render your website. They are responsible for things such as site structure, formatting, and styling.
Minification is a process that minimizes the code found within your HTML and CSS files.
Put simply, it creates clean, easy-to-read code for the servers. This dramatically reduces load times because the servers no longer have to deal with code that is redundant or lengthy.
Here’s how the code looks before minification.
And after minification.
Google recommends several tools directly in their Developer resources. Again, double-check that the tools you’re using don’t cause any duplicate efforts. Many CDNs have built-in minification processes that happen behind the scenes.
Always review the documentation of any tool you implement on your website. It might take more time in the beginning, but it will save you time and trouble later on.
The 5 tips we shared with you today are quick and easy ways to speed up your website’s speed …
… and reduce the chances of visitors bouncing.
Test your page’s load time before and after you implement each recommendation. You might be surprised at how much you can speed up your website’s loading time by taking these few quick steps.
Your website visitors will thank you for it, or at least stick around long enough to find out what you’re all about.
Nick Valle is a digital marketing expert with a strong focus on search engine optimization. His experience ranges from working with enterprise-level companies to local mom-and-pop businesses. He is also the founder of Restoration Rocket. An SEO agency laser-focused on the restoration industry.