Page speed refers to the time it takes for a user to be able to see the contents of a particular page after clicking through to that page. The wait time depends on how long it takes the browser to receive information from information from a server.
Because of its direct connection to how users are able to interact with your site, it’s a huge component of user experience, and also an important ranking factor to be mindful of.
While page speed deals with the amount of time a user must wait for an individual page to render, site speed takes into account various site pages and finds an average speed based on several samples of a website’s pages.
The direct connection between page speed and user experience can’t be overlooked.
This is especially true for mobile devices, as page speed is one of the Google ranking factors for mobile search. In addition to this, page speed becomes even more important as consumers increasingly rely on mobile to access digital content and services in their day-to-day lives.
Besides having the potential to either keep searchers on your site or send them bouncing back to the search engine results page, page speed also impacts the bottom line for businesses: customer retention and conversion rate.
According to Web.dev, one company increased their conversion rate by 7%, lowered bounce rates by 7%, and increased pages per sessions metrics by 10%.
All by reducing the average page load time by 850 milliseconds.
These numbers offer a concrete example of the power of page speed, and show why it’s a metric that can’t be deprioritized.
Recently, Google has introduced a new ranking signal, which combines Core Web Vitals with existing user experience signals. It is a set of metrics related to speed, responsiveness, and visual stability.
This new ranking signal is in the early stages of development and is not scheduled to launch until at least next year.
The following is a list of best practices to follow to increase your site’s page speed.
1. Enable Compression
Enabling GZIP compression can significantly reduce the amount of time it takes to download your HTML, CSS, and JavaScript files because they are downloaded as much smaller compressed files, which are then decompressed once they get to the browser.
2. Minify CSS, JavaScript, and HTML Elements
Minifying your CSS and JavaScript files removes unnecessary white space and comments to reduce the file size, and as a result, the time it takes to download them.
3. Include the Trailing Slash
The trailing slash is a forward slash (i.e. /) at the very end of a URL. When you visit a URL without the trailing slash, the web server will look for a file with that name. If it does not find a file with that name, it will then treat it as a directory and look for the default file in that directory.
In other words, by omitting the trailing slash, you are forcing the server to execute an unnecessary 301 redirect. While it may seem instantaneous to you, it does take slightly longer, and as we have already established, every little bit adds up.
4. Reduce Redirects
Each time a page redirects to another page, your visitor faces additional time waiting for the HTTP request-response cycle to complete. For example, if Page A redirects to Page B, and then Page B redirects to Page C, each of those additional redirects makes your page slower.
That does not mean you can’t set up a redirect. Google has recommended keeping the redirects for at least a year, then removing them. This makes long-term maintenance easier.
5. Remove Render-Blocking JavaScript
Browsers have to build a DOM tree by parsing HTML before they can render a page. If your browser encounters a script during this process, it has to stop and execute it before it can continue.
6. Enable Browser Caching
Browsers cache lots of information from the page, including stylesheets, images, JavaScript files, and more. This is helpful if the visitors come back to your site, because the browser does not have to reload the entire page. Only the new elements need to be downloaded on subsequent pages. This can drastically reduce the number of files that need to be downloaded during a typical browsing session.
7. Server Response Time
Your server response time is affected by the amount of traffic you receive, the resources each page uses, the software your server uses, and the hosting solution you use. To improve your server response time, look for performance bottlenecks like slow database queries, slow routing, or a lack of adequate memory and then fix them. The optimal server response time is under 200ms.
8. Above the Fold Content
Your webpage can load more quickly to visitors if it's coded to prioritize above the fold content. This means ensuring that any elements that appear above the fold are also as near the beginning of the HTML code so the browser can download and render them first.
9. Optimize Media Files
Today, mobile devices come with a high-quality camera, and modern CMS like WordPress have the capability to simply upload media files. But, the images that you can take with your mobile device are four times bigger than necessary.
By uploading the images that have been taken on mobile devices, it will slow down your website considerably, especially for mobile users. Optimizing the media files on your website has the potential to improve your page speed tremendously.
10. Use a Content Distribution Network
Content distribution networks (CDNs), also called content delivery networks, are networks of servers that are used to distribute the load of delivering content. Essentially, copies of your site are stored at multiple, geographically diverse data centers so that users have faster and more reliable access to your site.
As you’ve seen, page speed plays a large role in search engine optimization — and more importantly, search experience optimization.
Below are common page speed issues that can affect your site’s usability, and more specifically, page speed.
1. Unused JavaScript on the Page
JavaScript consumes unnecessary bandwidth and can cause pages to load slowly. If it isn’t used, remove it from your page.
2. Static Assets Served Without an Efficient Cache Policy
Setting a long cache lifetime can speed up page load on repeat visits to your page.
3. Text is Not Visible During Webfont Load
A flash of invisible text (FOIT) occurs when a browser initially hides text due to its large file size, which leads to a poor user experience.
4. Render-Blocking Sources Are Not Eliminated
These resources will block the first paint of your page, and will delay page load times.
5. Unused CSS
Bandwidth is lost to loading the CSS, so it becomes a common issue to have excess or unused CSS on your site.
7. Excessive DOM
Network efficiency and performance, runtime performance, and memory performance can all be slowed due to the presence of a large DOM tree.
8. Main-Thread Work
When the main thread is responsible for other tasks besides rendering pages, web pages may not respond to user interactions.
9. Unoptimized Images
Images should be served in next-gen formats to load images faster, and to consume less cellular data for mobile users.
10. Inappropriately Sized Images
Appropriately sized images save cellular data and improve page load time.
11. Long JavaScript Execution Time
When JavaScript takes a long time to execute, many factors of page performance suffer. Reduce the time spent on parsing, compiling, and executing the JavaScript.
12. Off-Screen Images
Off-screen images provide no value to users but take up valuable bandwidth, making them a cause for slow site speed.
13. Large Network Payloads
Large network requests not only slow down the page load time, they also cause users to use (and pay for) more cellular data to successfully load the page.
14. Long Server Response Times
All other requests depend on the server response time of the main document, so it’s crucial that you reduce it.
15. Unencoded Images
When JPEG or BMP images on a page have their compression levels set to 85, and the resulting image can save 4kiB or more, then it’s an image that can be compressed.
16. Large GIF Files
Large GIF files are inefficient for delivering animated content because of the extremely large file size associated with the file format.
17. Key Requests Are Not Preloaded
This tactic can speed up page load times by identifying the third level of requests in your critical request chain.
18. JavaScript is Not Minified
JavaScript will increase your payload sizes and script parse time, which become a problem for overall page load time.
19. CSS is Not Minified
When CSS is not minified, there is more pressure on the network’s bandwidth and the time required to load a page.
20. Multiple Page Redirects
Redirects slow down page load speed. Ideally, no page should have two or more redirects associated with it.
21. Connections to Required Origins
Dealing with connections ahead of time can save bandwidth and make for a quicker connection.
22. Lack of Text Compression
Text-based resources should be served with compression to minimize total network bytes and thus improve the page load times.
1. Misuse of Web Fonts
Web fonts must be downloaded before they can render, and a large file size can prevent some web fonts from appearing in a reasonable amount of time. In addition, there can be issues with page speed if too many types of fonts are used.
2. Duplicate Style Sheets
Technical duplicates can reduce page load time and should be avoided. This is especially true when the issue starts to affect hundreds or thousands of URLs. Style sheets also become an issue when they are loaded after the JavaScript in the <head> section.
3. Large HTML File Size
The more there is to load, the longer the load time will be. The specific threshold of what is considered “large” will change depending on the load time you are aiming for and the amount of content you have.
4. Multiple JavaScript Requests
A URL should contain no more than three JavaScript files that work at the same time to load. A browser has to process one at a time, which can become a tedious process and slow down page load time.
1. Issues With the Character Set
A character set should be UTF-8 — the recommended specification of HTML5. The character set also needs to be specified in the <head> section, and cannot be missing from the HTTP headers.