Win the page speed race

A brief history of Google's mission to make the web faster

In 2009, by issuing a call to “make the web faster”, Google set out on a mission to try to convince website owners to make their websites load faster.

To entice website owners that really care about this, in 2010 Google announced that site speed would become a factor in the desktop search engine ranking algorithm ( not for mobile devices). This means that websites that load quickly will have an SEO advantage over other websites.

Six years later, in 2015, Google announced that the number of searches performed on mobile devices exceeded the number of searches performed on desktop computers. That percentage continues to grow. The latest published statistics show that, as of 2019, 61% of searches performed on Google are from mobile devices.

The current dominant role of mobile devices in search has led Google to develop the "Accelerated Mobile Pages" (AMP) project. This initiative is intended to encourage website owners to create a theme that is essentially another mobile theme that, in addition to their responsive mobile theme, adheres to a very responsive set of performance and development guidelines. Strict.

While many website owners and SEOs complain that having to put page speed and AMP on top of the page among more than 200 other ranking factors gives them headaches, page speed is a real endeavor. worthy force for website owners to focus on. In 2017, Google did a study whose results proved a lot for their focus on making the web faster. They found that “ When the page load time increased from one second to 10 seconds, the probability of leaving the site on mobile increased 123%. ”

In July 2018, page speed became a ranking factor for mobile searches, and today Google is incorporating even more speed-related factors (called Core Web Vitals). ) in our ranking algorithms.

With average human attention continuously decreasing and our reliance on mobile devices increasing, there's no doubt that page speed is and will continue to be, which is extremely important. for website owners.

How to optimize website speed

Think like a car racer

Winning a page speed race requires the same things as winning a car race. To win a car race, you have to make sure your car is as light as possible, as powerful as possible, and that you navigate the track as efficiently as possible.

I will use this analogy to try to make the techniques of page speed optimization a little easier to understand.

Make it light

Today, websites are more beautiful and functional than ever – but that also means they are bigger than ever. Most modern websites are the equivalent of a party bus or a limo. They are super fancy, equipped with all sorts of amenities, and therefore WEIGHT and SLOW. In the “race track” search engine, you won't win with a party bus or limo. You will look cool, but you will lose.

Image source: GTMetrix test results page

To win the page speed race, you need a suitable, lightweight racing car. Race cars don't have radios, cup holders, gloveboxes, or anything really unnecessary. Likewise, your website should not be loaded with complicated animations, video backgrounds, giant images, fancy widgets, too many plugins or anything else that is not really necessary. .

In addition to categorizing your site for unnecessary frenzy and too many plugins, you can also reduce website weight by:

Reduce the number of third-party scripts (snippets of code that send or receive data from other websites)
Switch to a lighter weight theme (less code heavy) and reduce the number of fonts used
Deploy AMP
Optimize images
Code compression and minification
Perform regular database optimization

On an open source content management system like WordPress, there are speed plugins available that can make these tasks much easier. WP Rocket and Imagify are two WordPress plugins that can be used together to significantly reduce the weight of your website through image optimization, compression, minification, and many other page speed best practices. .

Give it more power

You wouldn't put a golf cart engine in a race car, so why would you put your website on a cheap, shared hosting plan? It might be frustrating to pay a few dollars more per month for a hosting subscription if you've been on one of those plans for a long time, but again, golf cart vs. Motor Racer: Do you want to win this race or not?

Traditional shared hosting plans cram tens of thousands of websites into a single server. This leaves each site starving for computing power.

If you want to race in the major tournaments, it's time to plan your hosting. For WordPress sites, managed hosting companies like WP Engine and Flywheel use powerful servers and are specifically tuned to serve WordPress sites faster.

If managed WordPress hosting is not your thing, or if you don't have a WordPress website, then upgrading to a VPS (Virtual Private Server) will result in your website having a lot of computing resources. than. You'll also have more control over your own hosting environment, allowing you to "tune your engine" with things like the latest versions of PHP, MySQL, Varnish caching, and machine technologies. other modern web host. You will no longer suffer from your shared hosting company's greed as they cram more and more websites into your taxed server.

In short, putting your website on a well-tuned hosting environment can be like putting a turbocharger on your racing car.

Promote it better

Last, but certainly not least, a light and powerful racing car can only go so fast without a trained driver who knows how to navigate the track efficiently.

The “course navigation” part of this analogy refers to the process by which a web browser loads a web page. Each element of a web page is another turning point for the browser to navigate as it moves through the code and processes the page's output.

I'll switch analogies in a moment to try to explain this more clearly. When remodeling a house, you paint the rooms first and then redo the floors. If you repaint the floors first and then paint the rooms, the new floors will be covered with paint and you will have to go back and look at the later floors.

When a browser loads a web page, it goes through a process known as (incidentally) “drawing”. Each page is "drawn" as the browser receives bits of data from the web page's source code. This painting process can be done efficiently (i.e. paint the walls before repainting the floors) or it can be done in a more chaotic out-of-order fashion that requires multiple back-to-backs to do. redo or fix or add something that could have been/should have been done earlier in the process.

Image source: WebPageTest.org test results (Coiler view)

This is where things can get technical, but it's important that you do whatever you can to help your site push the "race track" more effectively.

Caching is a concept that every website should have to make it easier to load a web page in the browser. It took enough time for the browser to process all of the page's source code and draw it visually for the user, so you might as well have it ready on the server. By default there is no caching, which is not the case.

Without caching, the website's CMS and the server can still work to generate the website's source code while the browser is waiting to draw the page. This can cause the browser to pause and wait for more code to arrive from the server. With caching, the source code of a page is precompiled on the server so that it is completely available to be sent to the browser in full in one go. Think of it like a copier that has lots of copies of documents already produced and ready to be distributed, instead of making one on-demand copy every time someone asks for it.

Various types and levels of caching can be achieved through plugins, your hosting company, and/or through a CDN (Content Delivery Network). CDNs not only provide caching, but also store copies of pre-generated website code on multiple servers worldwide, reducing the impact of physical distance between servers and users on load times. (And yes, the internet is really made up of physical servers that have to communicate with each other over a physical distance. The Web isn't really "the cloud" in that sense).

Going back to our race car analogy, using caching and a CDN equates to a much faster ride around the track.

Those are two of the basics of effective page drawing, but there are even more techniques that can be used. On WordPress, the following can be implemented via a plugin or plugins (again, WP Rocket and Imagify are a particularly good combination for achieving many of these):

Asynchronous and/or deferred script loading. Basically, this is a way of referring to loading things at once or waiting for later to load things that are not needed immediately.
Preload and prefetch. Basically, get data about links in advance instead of waiting for users to click them.
Slow loading. The ironic term is that the concept exists for page speed purposes, but by default most browsers load ALL images on a page, even those out of view until the user scrolls. down them. Doing lazy loading means asking the browser to be lazy and wait for those out-of-the-box images to load until the user actually scrolls there.
Deliver images in next-generation formats. New image formats like WebP can be loaded by browsers much faster than the old-fashioned JPEG and PNG formats. But it's important to note that not all browsers will be able to support these new formats – so be sure to use a plugin that can deliver next-generation versions for browsers. supports them, but provides older versions for browsers that don't . WP Rocket, when combined with Imagify, can achieve this.

Image source: Install WP Rocket plugin

Optimized for Core Web Vitals

Finally, the optimization of the new Core Web Vital stats (Pain with the greatest content, First Input Delay, and Cumulative Layout Shift) can also make the ride around the track much more efficient.

Image source

These are pretty technical concepts, but here's a quick overview to familiarize you with what they mean:

Largest Content Paint (LCP) refers to the picture of the largest element on the page. Google's PageSpeed Insights tool will tell you which elements are considered LCP elements of a page. A lot of times this is a hero image or large slider area, but it varies from page to page, so run the tool to determine the LCP in your page and then think about what you can do to make that particular element load faster.
First input delay (FID) is the delay between the user's first action and the browser's responsiveness. An example of a FID problem would be a button showing the user earlier when it is clickable. The delay will be because the click function loads significantly later than the button itself.
Cumulative Layout Shift (CLS) is a set of three big words that refer to a simple concept. Do you know when you are loading a web page on your phone and you click something or read something but then it jumps up or down because something else is loaded above or beyond under it? That motion is CLS, it's very annoying and it's a byproduct of inefficient page rendering.

In short, racing cars > golf carts

Page speed optimization is certainly complicated and confusing, but it's an essential ingredient to achieving better rankings. As a website owner, you're in this race whether you like it or not – so you too can do what you can to turn your site into a racing car instead of a golf cart!