The speed of the site is a determining factor for the user experience and for positioning on Google. So, if you want to retain visitors to your site and improve results with SEO, here’s how to evaluate and accelerate the performance of your pages.
Running out of time is already part of our routine. Looking at the clock gives you that anxiety: you won’t be able to do all the day’s tasks. In this context, it is understood that no one is tolerant of the low speed of a website, right?
In the face of the hustle and bustle that they live in their daily lives, consumers want experiences on the internet that do not waste their time – let alone lose patience! Therefore, streamlining the loading of pages should be at the top of digital marketing strategies.
But is speed a priority for websites? According to a survey by Google, the average load of pages on mobile devices – increasingly essential in the purchase journey – is 15 seconds. This time seems like an eternity in view of the fact that 53% of mobile visitors leave a website when it takes more than 3 seconds to load.
And have you ever wondered how much money a long shipment wastes? That figure has already been estimated: online retailers lose about £ 1.73 billion a year in global sales. With these numbers, it’s clear that you need to think about the speed of your website!
Now, if you need help with that, follow this article. We will bring you some useful tools to evaluate the speed of your pages and tips to make your site faster. Check out!
Table of Contents
- 5 tools to measure website speed
-
11 hacks to improve the speed of your website
- 1. Enable Gzip compression
- 2. Reduce the size of images
- 3. Use state-of-the-art formats for images
- 4. Upload the images in the size that will be used
- 5. Defer loading off-screen images
- 6. Minify HTML, CSS and Javascript
- 7. Eliminate features that prevent rendering
- 8. Create AMPs
- 9. Avoid multiple redirects
- 10. Take advantage of the browser cache
- 11. Reduce server response time
5 tools to measure website speed
Google is committed to making the internet faster. The search giant understands user behaviour very well and knows what experience they expect.
It is not by chance that, in 2010, the search engine started to include loading speed as one of the ranking factors. And in 2018, this criterion was expanded to mobile searches.
To contribute to the sites that want to improve their speed, Google has created some tools that help in the diagnosis of the pages and point out the corrections that can be made. Next, we’ll show you what they are, as well as other free resources for that.
1. PageSpeed Insights
This is the most popular page speed test tool. The PageSpeed Insights is a free resource, intended for developers, offered by Google.
To use it, it’s very simple: just enter the URL you want to test (it can be any website, including the competition). Then, the platform performs an analysis and presents a score from 0 to 100 for performance on desktop and mobile.
The diagnosis also shows how long it took for website elements to load and what actions you can take to improve speed. The closer to 100, the better: the fewer items you have to fix.
2. Lighthouse
Lighthouse is open source software offered by Google and used to audit websites. It can be run as a command-line tool or as a Google Chrome extension (with a more user-friendly interface).
It analyzes not only the speed but also all aspects of the quality of the website.
To do this, you must enter the URL you want to audit so that the platform presents a score and improvement tips for each of these requirements: performance, accessibility, best practices, SEO and Progressive Web Apps.
3. Chrome User Experience Report
The Chrome User Experience Report is also a Google tool for developers that serves to evaluate the user experience on the site.
Unlike the other tools, this one requires a little more technical knowledge to tinker with the codes.
The tool collects actual data from Google Chrome users and displays average data for websites, including site speed. Thus, developers can compare their performance with the average and assess which points need improvement.
4. GTmetrix
GTmetrix is a well-known tool for measuring the speed of websites. After analyzing the page you indicate, the platform displays a percentage score for speed, load time and total page size, in addition to showing market averages as a comparison.
Then, you can see the recommendations for adjustments to improve loading speed.
5. Pingdom
Pingdom is also one of the most popular website testing tools, especially within the WordPress community. The downside is that it is paid, although it offers a 14-day free trial period.
Despite this, the platform is quite complete. The analyzes are carried out in different parts of the world and information about the availability, the page loading speed and the performance of the main transactions of the website.
In addition, the tool points out opportunities for improvement and sends alerts when problems arise.
11 hacks to improve the speed of your website
You must have already tested your site on these tools, right? And you may not have achieved a very satisfactory score.
But you need not despair: a 100/100 score on these tools should not be an obsession. Do you know why?
They do tests with some limitations. PageSpeed Insights, for example, performs the analysis based on a 3G connection and on a server with an unknown location. These factors can provide a different view of the reality of your visitors.
In addition, optimizing all elements of the website to reach the maximum score can be impossible, since there are many variables involved. And often, improving one point can hurt another – so, thinking about the user experience, it may be better to leave it as is.
Still, reports from these tools are good indications of how well your site is doing.
So, if you are not seeing good results, we will now present some hacks to speed up the speed of your website. They were based on the main recommendations of the tools we mentioned above.
Follow!
1. Enable Gzip compression
Gzip is a file compression format for the website. That is, it reduces the size of the files sent by your server and the transfer time, with rates of up to 90% compression on larger files. This is one of the most efficient measures to reduce the page loading time.
All current browsers support this format and process compression automatically when the user accesses a website. You only need to ensure that the server is configured to make compressed files available when the user requests it.
Some servers do this automatically. On this site, you can test whether Gzip compression is already working on your site. If not, there are several cache plugins for WordPress that enable Gzip compression.
One of them is WP Fastest Cache, which shows a simple checkbox with everything you can configure, including Gzip compression.
2. Reduce the size of images
The images impact a lot on the weight and loading of a website. According to the HTTP Archive, in May 2019, they accounted for more than half of a website’s bytes. Optimizing them, then, can be one of the first steps to improve the speed of the website.
Let’s start by reducing the size. For that, you can use an image optimization plugin for WordPress, such as Optimus and Tinypng .
These applications reduce the kilobytes of the images (without losing quality) and eliminate all the superfluous information that editing programs can save with the file. They allow you to perform these actions automatically, during the upload, on the images that are included, but also on those already on the site.
3. Use state-of-the-art formats for images
Another important action to optimize the images is to use the most updated file formats, such as JPEG 2000, JPEG XR and WebP. They tend to have better compression while maintaining quality compared to JPEG and PNG. This reduces cellular data consumption and speeds up charging.
In the Optimus and Imagify applications, it is possible to make the automatic conversion to WebP. This format is supported on Chrome and Opera browsers and, on average, is 25-34% smaller than JPG .
4. Upload the images in the size that will be used
If you are going to use an image in size 313 × 235, for example, why include it on the website in size 640 × 480?
Letting the site do this resizing via HTTP or CSS can also delay loading, you know? In addition, the image will take up more space unnecessarily, as it will be used in a smaller size.
Therefore, save the image in the dimensions where it will be used on the website. Thus, the server does not waste time with resizing, nor space with an image that could be lighter.
5. Defer loading off-screen images
Even the images that do not appear on the screen affect the loading time of the pages, you know? But, if the visitor is not viewing, you can postpone loading them , right?
This is what happens when images appear as you scroll a page. This means that the developer used the lazy load feature for hidden images on the screen. Thus, they are only loaded when the user reaches them with the scroll.
This feature can be configured with the WordPress plugins: Lazy Load or Lazy Load by WP Rocket . Both options are very simple to use.
6. Minify HTML, CSS and Javascript
When a developer creates the codes for a website, it is common to include line breaks, blanks and comments. This information does not influence the content that the user sees, but it is there taking up space and can increase the loading time.
Therefore, the tools usually recommend the elimination of these superfluous characters . This is what is done by “minifying” the HTML, CSS and Javascript codes so that they are lighter.
But you don’t have to do all this work code by code, okay? There are free apps for this, like W3 Total Cache and Autoptimize . But, even using a trusted application, it is always important to keep a backup of your files for security.
7. Eliminate features that prevent rendering
Render-blocking is a recurring issue when it comes to speeding up page loading. However, it is a slightly more complex topic, so let’s explain it better now.
Generally, JavaScript and CSS codes force browsers to delay reading HTML pages, so that they appear to users with defined styles. After all, you don’t want your pages to lose all the visual appeal you’ve chosen, do you?
However, this can be a problem when it hinders the loading of pages with content that is not even being seen by users.
This means that Javascript and CSS are unnecessarily delaying the site by blocking content that is “below the fold”, that is, that the user has not yet seen.
To resolve this, you can determine that the JavaScript and CSS resources load asynchronously. Thus, it is possible to quickly present the main content and postpone loading unnecessary elements for the user experience.
This can be done, for example, with the Async Javascript plugin (for Javascript only) or the Speed Booster Pack (for Javascript and CSS).
8. Create AMPs
Accelerated Mobile Pages (AMPs) is an open-source project headed by Google to achieve that goal of making the web faster.
Pages created with this technology load instantly on mobile devices.
Although they have the same content as the original pages, they eliminate unnecessary elements and have a lighter and simpler development, which accelerates the speed of the site.
To create AMPs for your website, you can use the AMP for WP plugin, which allows you to build pages from different mobile templates, without having to mess with codes.
9. Avoid multiple redirects
Often, redirection is necessary so that the user does not fall into a non-existent page on the site. Incidentally, this is one of the SEO recommendations to not frustrate the visitor and show the search engine which is the main page that should be indexed.
However, too many redirects overload the server. They trigger an additional request cycle and delay loading.
Let’s say that to get to the mobile version of your website, there are two redirects:
- from “site.com” to “www.site.com”; website . com ”to“ www . website . with ” ;
- and from “www.site.com” to “m.site.com”.www. website. com ” to“ m. website . with ”.
This is an example that can slow loading. But, if you use a page with responsive design, there is no need to redirect, as the page itself adapts to the user’s screen.
Therefore, the recommendation is to use responsive pages. In addition, a plugin like SEO Redirection can identify unnecessary redirects for you to eliminate.
10. Take advantage of the browser cache
The browser cache is used to store the contents of the website on the user’s device so that they load more quickly on the next visit.
However, if the content is not cached or the storage time has expired, the pages will take longer to load.
The request for browsers to keep these saved files must be made by the server. This request usually happens automatically. But, if it doesn’t, you must include a file to force the cache to be used.
But of course, you don’t have to do this manually: the W3 Total Cache and WP Fastest Cache plugins make it easy for you.
11. Reduce server response time
The server’s response time measures how many milliseconds it takes, after the user’s request, to load the HTML required to render the page. If that time is longer than 200ms, PageSpeed Insights points to an opportunity for improvement.
How, then, to reduce this server response time? There are some solutions, related to the type of hosting.
When you purchase shared hosting, it is common for the neighbourhood (that is, the sites that share the hosting with you) to place excessive demands on the server and compromise the performance of your site.
In addition, accommodation abroad tends to increase latency time due to distances, which does not happen in regional accommodation.
Hiring dedicated servers or using a CDN can also improve server response times.
A CDN ( Content Delivery Network, or Network of Content Distribution) hosts the sites on servers spread around the world, which allows quick and effective distribution of the contents.
Anyway, now you have several practical solutions to make your website faster. In addition to improving the user experience and gaining their trust, you will also show Google that you deserve better placement in search results.