Lately, there’s been a lot of talk about page speed and many website owners and developers have been obsessing about the Google PageSpeed Insights scores.
There are two very important reasons why you should care about page speed:
- It directly affects bounce rate and user experience
- Google uses it as one of the search ranking factors
Website speed optimization can be a very technical and challenging process for most website owners who aren’t skilled programmers or SEO experts. However, there are a few fundamental practices that don’t require too much technical expertise and will take you a long way.
Tools for measuring page speed
There is a variety of tools that can help you measure your website speed performance and they mostly work in a similar way. Some of the most popular are:
All of these tools measure how fast the server responds and how much time it takes for the page to fully load. In this article, we will focus mainly on Google PageSpeed Insights.
Google page speed explained
Before you actually start improving your website speed, you need to understand what the tests are telling you. Visit the PageSpeed Insights online tool and enter a web page URL in the input. Click on the “Analyze” button and wait for a few seconds for the test to finish.
The first section we will focus on is the Lab Data. This section shows different load times Google measured when visiting your website. They are not necessarily the actual load times your visitors will experience as it depends on many factors such as the device they used, internet connection speed and so on, but they are still very good indicators of how your website performs.
As soon as the analysis is performed you will see the speed score which tells you the overall speed performance of your website. The score is measured separately for mobile and desktop devices.
You should aim to achieve a speed score of at least 60 on mobile devices and 80 on desktop devices. The higher, the better.
First Meaningful Paint (FMP)
This is arguably the most important indicator of your website speed performance. It tells you how fast the primary, also known as above-the-fold content of a page is loaded and made visible to the user. This is the content the user sees on the first screen when visiting a website. To achieve a good user experience, it is critical it loads as soon as possible.
Time to Interactive (TTI)
This indicator measures how long it takes for a page to become interactive. In other words, how much time it takes for the page to become fully functional so users can interact with it by clicking buttons, filling out forms, etc.
Common issues and how to fix them
In the Opportunities section, you will find the common issues that are slowing down your website. Fixing them may speed up your website considerably.
Reduce server response times (TTFB)
When users visit your website, an HTTP request is made to the hosting server. The server responds by sending all the relevant files to their browser so they can see the website.
This indicator tells you how fast your server responds to this request. It will vary depending on how much traffic your server has to handle at the time. It should ideally respond in under 0.2 s. If the response time is much higher (0.6 s or more) you should probably consider switching to a faster hosting option or change your hosting provider.
Other recommendations to reduce server response time:
- Using a Content Delivery Network (CDN) may reduce this time considerably, especially if your website is image or video heavy.
- Using a caching plugin will allow you to serve static versions of your web pages. As a result, fewer queries to the database are required to serve the content of your web page to the visitor.
- Keep your WordPress software, theme and plugins updated.
Properly size images
Images are typically the largest files on a website. Therefore, it is crucial to optimize them and reduce their size. I have already written about how to optimize images for web in one of our previous blog articles, so I won’t go into details here.
The main idea is to keep images as small as possible without sacrificing too much quality. To achieve that you should only use the image resolution you actually need. For example, if you only need an image to be 1000px wide on large screens, you should resize it accordingly to save precious kilobytes of data (or twice the size for retina screens). Once properly sized, you should also run your image through an image optimizer software to further reduce its size and optimize it for web delivery.
This is the most technical part of the website speed optimization process and a common issue that is present on almost any website.
To understand this, you need to know how a web page is built. A web page is a representation of the HTML file that is served to the browser. This file includes references to other external files necessary for the website to be completely rendered. These are:
- CSS files that define the styles of the web page. In other words, how the page looks like.
- Images and other media files.
For each of these files, a new request is made the first time you visit a web page. If these files are larger than they need to be or they block the content from being rendered on the screen, it will take more time for the page to load.
If you have a developer then they should solve this for you. In the case you DIY, you should use a plugin like WP Fastest Cache for this purpose (read below).
Enable text compression
Similar to the issue above, you need some technical knowledge to fix it. In a nutshell, text compression means all files are compressed before they are sent to the user’s browser in order to reduce their size. Enabling this server feature will drastically speed up the site.
This can be done in two ways:
- By tweaking the server configuration .htaccess file.
- By using a plugin like WP Fastest cache.
We will only talk about the second method as it is much safer and does not require technical skills needed for server configuration.
Speed up your website with WP Fastest Cache plugin
WP Fastest Cache plugin has a free version which will help you easily fix some of the common speed issues.
Install and activate the plugin and then navigate to WP Fastest Cache > Settings. You will find many features here that will help speed up the site. For a basic setup, you should check the following options:
- Cache system (enables website caching),
- Preload (caches page/posts automatically to improve future loads),
- New Post (update cache every time you publish a new post/page),
- Update Post (update cache every time you update an existing post/page),
- Minify HTML (reduces the size of HTML files),
- Minify CSS (reduces the size of all CSS files),
- Combine CSS (combines all CSS files into one for fewer HTTP requests),
- Combine JS (combines all JS files into one for fewer HTTP requests),
- Gzip (reduce the size of all files sent from server to visitors browser),
- Browser caching (enable browser caching for faster load).
Premium users can enable additional features such as Minify HTML Plus, Minify Css Plus, Minify JS, Combine JS Plus and Render Blocking Js. These will further decrease load times. The premium version also offers batch optimization of images.
When done with the settings, go to the Delete Cache tab and click on the Delete Cache button. Your website should be loading much quicker now!
Website speed optimization can be a very tedious and technically demanding process, nonetheless, it is a very important one. As Google and other search engines put more emphasis on page speed for their ranking system, improving it is no longer optional but rather necessary if you’re serious about SEO. We hope that this article gives you a sound understanding of how page speed is calculated and what factors affect it, so you can deal with it effectively.
Has this article helped you increase your page speed? Please let us know in the comments below.