Speed is very important for a website. It’s thus necessary that Google has created it an actual ranking factor. Over time, Google has taken action to improve the loading speed of websites by providing a set of tools for developers and webmasters. One of these tools is Google Lighthouse. But how does this Page Speed Insights Tool from Google actually work? And, more importantly, does page speed insights affect SEO? You’ll find everything you need to know in this article.
Key Points in Improving the Page Speed Insights Score and How Page Speed by Google Affects SEO & Google Rankings in 2019:
Everything up there might be a little bit hard to digest. We get it. Most probably, you won’t be able to solve everything! We’ve ruled out that it’s not important to get a 100% score. However, here are the key elements that will noticeably make your site load faster.
Warning: perform a backup of both your files and your database before engaging in these improvements. They can mess up your website and you have to make sure you can return to a previous version!
Server response time
The server is something you can’t really improve yourself. You either have a good one or a bad one. To improve it, you would either have to reduce the load on it significantly or improve its hardware, both of which you don’t have control over unless you own the physical machine.
So it’s important to have a good server in the first place. But how do you choose a good server?
Well, any hosting company that ranks well on Google should provide decent services. However, it’s up to you to test. Best advice? If you’re mostly focused on local SEO, choose a local server. For example, if most of your audience lives in India, choose a server with the datacenter in India.
If the datacenter is all the way in the US, the information will have to travel a big distance before reaching your target audience.
You can always test the hosting provider’s own website with Page Speed Insights and look for their TTFB (Time To First Byte) or Server Response Time. If it’s in the Passed Audits section, you know you have yourself a good hosting provider.
However, it’s better if you know someone that is an actual client of the hosting provider so you can test the speed there.
Realistically, the host’s own website will probably be on a dedicated server, while your site will be on a shared hosting package. This means that you will share the computer’s CPU and internet bandwidth with other websites.
If you can test a real site from a client, that’s great. You might be able to look through the reviews and find clients or ask the support team to provide one.
In general, images are the largest problem with websites. They are big and take up a lot to download.
There are two types of issues with the images. The first one is the screen size vs. the actual image size in pixels and the second one is the disk size.
Disk Size: The more physical space an image takes on a hard disk or SSD, the more it will take to download. 100 KB can download a lot quicker than 1000 KB (1MB). If you have 10 pictures like that on your blog post, expect your website to load very slow.
Screen Size: Screen size is the size at which an image is displayed. For example, the image below is being displayed at 300×300 pixels.
To make images load faster, you first have to make sure you’re not using an image bigger than it’s going to be displayed. For example, if you have an HTML section that styled with CSS at 300×300 pixels, but you load a 1000×1000 pixels image in the source, you’re losing load time for that 700×700 pixels.
That’s because the Browser has to download the 1000×1000 pixels image and then shrink it to 300×300 pixels. This takes more time for both the download and the shrinking process. You can fix this by uploading your images with the same width and height that they will be displayed at.
WordPress does this automatically by creating multiple instances of the image when you upload it. That’s why you’ll see that 300×300 or 150×150 suffix at the end of an image file path. That’s why you can choose sizes (Large, Medium, Thumbnail). Although it’s not perfect, especially if you manually resize the image with click and drag, and it takes up more space on your server in the long run, it does help with load speed.
Deferring the images is another thing that you can do to improve the load time. This means that you just will download them later because the user scrolls down on the web pages. There will be a brief moment when the images won’t be visible but they will eventually show up, one after another.
There is a multitude of plugins that can help you do that. However, many have bugs or only defer images in certain situations, for example, if they are created by WordPress or WooCommerce, but not when created or inserted by less popular plugins.
There are certain plugins for different CMS, such as Joomla or Magento. Just perform a Google search for them. If you’re not on a popular CMS, such as WordPress, deferring images can be done with jQuery, but you’ll most certainly need a developer for it if you’re not one yourself.
Next-gen image formats are recommended by Google. They are very useful, especially when loading a website from a mobile device. However, there’s a reason not many people use them yet.
If you can use a plugin on your CMS that might be easy, but if you’re on a custom platform, you’ll need to develop everything from scratch, which costs a lot. Here’s a list of which browsers support the WebP format.
If your size and optimize your images properly, the savings you’ll get by also converting them to next-gen image formats such as JPEG2000 or WebP might not be worth the cost in time and money.
However, if you have the time and budget, by all means, go do it. You can use this tool to check if the browsers your users spend the most time on are supported. Search for either WebP or JPEG2000.
HTML & CSS Structure
The HTML structure of your web page dictates the way it loads. Browsers read a page from the top to the bottom and they load the elements the same way. This means that if you want something to load first, you have to put it higher on your page.
Generally, the issues aren’t with HTML however with CSS. If you write your CSS chaotically, it will result in slower loading time and bad user experience.
Let’s take an example. Most websites, if not all, follow this HTML structure: head > body > footer.
If my CSS file styles the footer first, then the footer can receive the styling, though it’s before the fold. Meanwhile, the header and body might remain plain.
It’s also a good idea to add your mobile styling first, as mobile devices are the slowest ones.
However, if you have important scripts such as Analytics which should run as soon as possible, then, by all means, keep them in the header and make sure the fire and run properly, even though this might result in a lower Page Speed Insights score.
Caching is the process of storing files in a client’s browser in order to be able to quickly access them at a later time.
For example, if a user comes to your website for the first time, your logo will have to be downloaded. However, if you have an effective caching policy, that file will be stored in the user’s browser. When the user accesses your site a second time, it won’t have to download that file again as it will be instantly loaded from their computer.
Dynamic Elements (short cache policy): Dynamic elements are elements on your website that change frequently. For example, you might keep adding new posts in a slider on the Homepage.
In this case, the HTML is the dynamic element, so set a short caching policy if this fits you. 30 minutes might be enough, just in case, the user returns to that page in the same session.
In some cases, you might not want to cache those elements at all, if promptitude is what matters for your users, such as on news websites.
Static Resources (long cache policy): Static resources are files that rarely change. These are sometimes pictures and CSS or JS files, however, they will even be audio files, video files, etc.
You can set an extended cache time for pictures and CSS files since you know you’ll not be changing them very frequently. You can even go up to one year, but 3 months is usually enough.
Third-Party Tools: You don’t really have control over 3rd party tools, so if you feel like a tool that is hosted elsewhere makes your website run very slow, better find an alternative or give up on it.
A solution would be to host the files on your own server and cache them. However, this might not be very productive and it’s not recommended, as you’ll have to constantly update those files as soon as new versions come out, otherwise the tool or app won’t work properly.
Cache Plugins: There are a lot of plugins that will properly handle the cache protocols required for good user experience. If you’re on WordPress, one of these plugins is W3 Total Cache. However, if you want to go for a better option, WP Rocket is also pretty popular, but it will set you back a couple of hundred bucks.
Just search for the cache plugin/extension/ module + your platform on Google to find what you need. Look at the reviews to pick the best one.
Resetting the cache: When you make modifications to a web page, you want to reset the cache if an older version has been cached previously. However, you can only reset the cache on your server.
This means that users who have downloaded a previous version of a certain file will still load that old version from their computer when they access the website again. The file will be refreshed after the set amount of time in your caching policy or if the user manually resets their browser cache.
If you have a critical error in your web design or code, you can change the filename of your file. This way you can be sure that the cache for that particular file will be reset.
Sometimes, Chrome’s cache can be difficult to reset. Sometimes, routers and data centers between the client and the server might also cache files so, if you don’t see the modifications, give it a couple of hours.
Lightweight Theme & Plugins
The more you load your website with plugins, the heavier it gets and the slower it runs.
A website’s theme is that the biggest ‘plugin’ the website has. Most themes out there come with heavy 3rd party builders and huge libraries of plugins which all make the site run slower.
So when you’re looking for a theme, try to find one without too many animations, sliders, functions and so on. If you look at the big websites you’ll see that, in general, they’re pretty simple.
When you install new plugins, think about however necessary they’re to your web site. After you install them, test your score and loading speed. Does the plugin make your site run slower? If yes, is it critical to keep the plugin? Maybe look for a better alternative or remove it completely.
Improving your website speed is very important for higher search rankings. Page Speed Insights provides a set of best practices and possible improvements, prioritized by their impact on your site’s speed.
While the score itself shouldn’t concern you too much, it’s a good idea to try and get it at least over 50. However, focus on load time, which is measured in seconds. A better website should load in about 3 seconds. A really, really fast one should load in about 1.
Having a great server, compressing pictures and keeping things clean and easy in your code can benefit you the foremost once it comes to website speed.
What’s your Page Speed Insights Score? Have you seen better rankings after improving the loading speed of your website? Share your expertise with us within the comments section below!