Website speed: learn to test and make your page faster

The content on your site might be great, but if the loading speed isn’t good, will people pay to see it?

Website speed is the time it takes for a webpage to be fully displayed on a mobile device or desktop. It is an important ranking factor on Google, as faster pages provide a better user experience. Ideally, it should not exceed 3 seconds.

It is a fact that the average internet speed in Brazil is far from being good. According to Akamai’s internet speed report, made in 2016, Brazil occupies the 87th position among the 242 participating countries. But even so, many sites manage to make this situation worse, as they are developed without due attention to the loading speed and end up becoming a real test of patience for the user.

Imagine the following situation: you went to a fast-food restaurant, famous for delivering orders within 5 minutes, but it’s been 15 minutes since the order was placed and nothing. How long would it take you to give up? What if the fast-food outlet next door guarantees a similar order in just 3 minutes?

On the internet, the situation is similar, but the story changes to seconds, because when you want certain content, access a website and it takes more than 10 seconds to load before you know it, you’re already on Google again looking for another option, because every second of wait seems like an eternity!

We live in an era of immediacy when time is already worth more than money. And this era, combined with the dynamism of the internet, makes our audience more demanding every day. The content on your site might be great, but if the loading speed isn’t good, will people pay to see it?

Does the speed of the site influence the results?

Back in 2010 Google announced that a page’s load time was one of its 200+ ranking factors. This means that the time your website takes to load in relation to your competitors is one of the influencing points of the organic positioning of the websites on the results page, therefore it directly impacts on  SEO. According to a survey conducted by Backlinkoslower sites are penalized.

In addition to being one of Google’s organic ranking factors, the speed of the site also influences the user experience and its results, as shown in the data below:

  • Every 1 second more a page load causes an 11% drop in page views and a 16% drop in customer satisfaction, according to the Aberdeen Group ;
  • According to Kissmetrics research, 40% of visitors leave pages that take longer than 3 seconds to load and every 1 second more in site load time reduces conversions by 7% ;
  • 88% of users who have had a bad experience accessing a site due to the loading speed are less likely to shop on it and more than a third of those users will share the bad experience with friends, a survey by Econsultancy revealed.
  • 85% of mobile users expect the page to load at least as fast as the desktop site, according to Web Performance Today.

Now that we know that site speed interferes with visitor engagement, conversion rate, and also your organic placement, let’s see how to test your load so we can start optimizing like Blue World City!

What is the ideal charging time?

According to Pingdom, which has a tool to test the speed of websites, the average loading time of websites is 5 seconds. In the Google Site Performance for Webmasters video, Maile Ohye states that 2 seconds is the limit for good performance.

Expert Geoff Kenyon also conducted a survey which found that if a site loads in 5 seconds, it is faster than approximately 25% of the internet; in 2.9 seconds, more than 50% of the network; even if it loads in 0.8 seconds, it’s faster than 94% of the entire web.

Despite the statistics cited, the short answer is: ASAP. We already know that your site’s load time influences your results, so the idea is to optimize it as much as possible to keep the load time to a minimum!

How to test website speed?

We currently have several free tools where you can test the load time of a page. It is also possible to see a diagnosis with the survey of problems and warnings to know how to optimize it. The most used tools are:

Google PageSpeed ​​​​Insights

Probably the best known on the list, PageSpeed ​​Insights is a tool in which, when inserting a link to a page, it is possible to analyze the content and generate suggestions for its desktop and mobile versions.

Along with each suggestion for improvement, the tool also shows you how to apply it. Each suggestion is ranked with a priority indicator:

  • “You must fix”: highlighted in red, are notices of improvements that, if applied, will have more impact on page load time;
  • “Consider Fixing”: highlighted in yellow, these are notices of improvements that do not influence the speed of the page much and should not be prioritized;
  • “Approved in…”: highlighted in green, these are the positive points of the page.

Despite being excellent for identifying and prioritizing problems, the tool does not detail the page load time and also does not point out the number of page requests for loading, which are important data for diagnosis.

GTmetrix

Very popular among marketing experts, GTmetrix is considered one of the best and most complete tools to assess the load time of a page and identify points of improvement, due to its ease of use and variety of data it presents.

The walkthrough for using the tool is very similar to Pagespeed Insights. Just access it, include the link to the page you want to analyze and generate the report. However, it is recommended to create an account (even if free) before starting the analysis, as this allows you to change which region the test will run (and São Paulo among the options), which browser and device, which is the type of network, as well as other configuration possibilities and more data in the final report. The closer the test is to the standard of the audience that accesses the site (such as location, device type and browser), the better.

After including the page link and starting the report, the tool does thorough analysis and presents various data on the next screen. At the top is a summary with two scores on Performance Scores, one based on Pagespeed Insights and the other on YSlow, a project that analyzes page speed based on Yahoo’s high-performance site rules. The scores presented are often different as the tools use different criteria to rate the page.

As with Pagespeed Insights, the colors of the scores determine your sense of urgency, but here we also have a comparison with the average of sites analyzed by the tool in the last 30 days, where an arrow next to the score represents whether the page is above or below average

Also at the top of the report, besides the performance evaluation, the tool also shows the total time for loading the page, what is the page size and how many requests are generated to load. As with the performance scores, here we also have up and down arrows, indicating whether it is above or below average.

At the bottom of the screen, there are several reports separated by tabs. Through them, it is possible to identify the points that need to be corrected so that the page loading time is reduced.

  • PageSpeed: based on Pagespeed Insights, in this tab you will find a complete report with all points evaluated by the tool, sorted by priority. Here we can also see the grade that is awarded for each criterion according to the page analyzed, what type of configuration is — whether it is server-side, content or a javascript, for example — and, finally, what is the priority of this improvement.
  • Yslow: Similar to the report presented on the PageSpeed ​​tab and also organized by priority, but based on criteria defined by Yslow.
  • Waterfall: cascading report that visually presents the entire sequence of requests made to load the page. Each line represents a request, with its status (if it’s ok if it’s redirecting or even if it’s an error), its weight and also the time it takes to load.
  • Timings: presentation of a page load timeline, with the time each step took to load: redirect, connect, backend, TTFB (time to the first byte), first pain, DOM interactive, DOM content loaded and Onload.
  • Video: to have the report on the video, you must activate it and perform the page analysis again. The video report is nothing more than the preview of the page loading in practice, with time clocked and timings mapped.
  • History: Finally, we have graphs that follow the page’s performance history in relation to some presented data: timings, page size, requests and PageSpeed ​​and Yslow notes.

Another excellent feature that GTmetrix has is to compare your results with competitor pages. As it is a tool for worldwide use, it may not be very interesting to use its averages as a parameter for our page or, depending on the niche, these metrics may not even make sense. With the website comparison functionality.

GTmetrix’s free version alone is very complete and can generate rich reports to evaluate and optimize the site. But the tool also has more robust paid versions, in addition to offering website optimization services, contracted separately.

In addition to GTmetrix and Pagespeed Insights, there are several other excellent tools with free versions to perform the tests, such as:

  • Pingdom Site Speed ​​Test;
  • WebPagetest;
  • Yslow.

What to do for faster page loading?

All the optimizations listed below impact the loading time of a site, but the test tools presented already point out ways to make the site faster, including prioritizing the impact generated by each action. Therefore, it is recommended that the optimization work follow the suggestions and prioritization of the diagnostic tools.

For WordPress sites, most of the tips also present the solution using plugins and, in some cases, the same plugin can solve more than one problem. Choose the plugin that most impacts the required solutions and avoids several different plugins, as this can degrade the site’s performance.

It is very important to remember that, before making any changes, you need to back up the website to avoid possible problems. WordPress sites can do this through plugins like UpdraftPlus and BackWPup.

Take advantage of browser cache

Whenever a website is accessed, all of its content is temporarily downloaded to the device, until the user leaves the website. Through the cache, we can indicate to browsers, such as Chrome and Firefox, to keep these files saved.

If the same website is accessed again, using the same device and the same browser, the page will take less time to load because the files are already saved in the cache. In case you have nothing saved in the cache or the time spent in the cache has expired (it is possible to define this), the relevant files are requested to the website’s server.

To enable browser caching on your website correctly, look for the .htaccess file in your domain root. You can edit it with Notepad or any basic text editor.

Important: Before making changes, remember to save the original version of the file as a backup.

There are also ways to enable caching directly in the website’s HTML, but these techniques are considered obsolete and not recommended.

If your site is WordPress, there are several plugins available that do this function. The most used is W3 Total Cache, which is even recommended by hosting companies. Another excellent alternative (less popular) is the WP Fastest Cache, which also has other features and, compared to W3 and other plugins showed better performance.

Reduce the number of redirects

When loading a page, it is sometimes necessary to redirect the browser from one URL to another. This redirect can be done to indicate the new location of content, track clicks and impressions, or correct different types of access — such as when redirecting from www.example.com.br to example.com.br or from HTTP to HTTPS.

Regardless of the reasons, redirects add round-trip latency, increasing page load time. The best way to minimize this is to restrict the use of redirects to only those cases where it’s necessary and find other solutions where it’s not.

It is also important to be careful to enter the exact version of an external request so as not to generate this type of redirect while it is loading. When adding a Facebook script, for example, it is important to already insert it with the correct link, without any redirects.

To manage internal redirects on WordPress sites, plugins such as Yoast SEO and SEO Redirection can be used.

Minimize CSS, Javascript and HTML

When developing a website, the programmer works with an organization of data that includes line breaks, spaces and comments that do not influence the content. However, as much as it may not seem, this information ends up weighing on the files and influencing the loading time.

To solve this, you can minify (lighten) these files, removing all this unnecessary information. Usually, this action provides a 20-30% reduction in file size, which depending on its total size can make a lot of difference.

But this work need not (and should not) be done manually. There are several free tools that can help. On the Minifycode website, it is possible to minify HTML, Javascript and CSS, in addition to the possibility of making the code “beautiful” again, including all the necessary information. Despite this functionality, it is important to keep a backup of all original files.

If the site is WordPress, this becomes simpler, as there are several plugins available that do this work and many of them are free. The most used are AutoptimizeBetter WordPress Minify and W3 Total Cache.

Do not use render-blocking Javascript

When accessing a given page, its HTML is loaded from top to bottom, making requests in that order. With the CSS and Javascript files present at the top, they are processed before the page content, which ends up increasing its load time.

Some testing tools suggest sending Javascript and CSS to the bottom of the page, before </body>, using inline CSS for the most important styles, which directly affect the look of the page, so the content doesn’t load “ugly”, HTML only. But CSS and inline Javascript also take time to load, and using inline styles ends up harming the organization. Sending only the Javascript to the end does not influence the content, so it is recommended to send only the Javascript to the end of the HTML.

If the site is WordPress, the Speed ​​Booster Pack plugin has the functionality to send scripts to the site’s footer, solving this problem.

Enable gzip compression

gzip compresses the site’s files, which reduces file transfer time by 70% on average.

First of all, it’s important to check if the site already uses it. In addition to the diagnostic tools themselves that have been introduced, you can perform the test here. Some hosting services already do this automatically.

Try enabling Keep-Alive

Keep-Alive allows the server to use a single connection to transfer multiple files, which reduces latency and also CPU consumption, which impacts page load times.

Websites usually have this feature disabled, as most hosting companies deliver it as an option, as it significantly increases memory usage on the server. Thus, before enabling the function, it is important to contact the website’s hosting provider and assess whether it is possible.

Use a Content Distribution Network

Content Delivery Networks (Content Delivery Network, or CDN) work together to regionalize data storage. They host content on servers around the world, allowing it to be distributed quickly and efficiently, regardless of where access is made.

There are several options for CDNs, with free and paid versions and easy to integrate into WordPress sites. The main ones are:

  • MaxCDN: one of the most used, has a free 30-day trial and support for WordPress implementation with starting plans from $9 per month;
  • Amazon CloudFront: it has a plugin for integration with WordPress and a free version with a data limit, which can be an excellent alternative to start;
  • Azion Technologies: solution used by many e-commerce, distance learning sites, and media and financial market companies. It has WordPress support and plans that vary according to the traffic used;
  • Microsoft Azure CDN: integrates with other Azure services and also features WordPress integration. Provides 30 days for testing, after the period the value fluctuates according to the use of data.
  • Akamai/Exceda: pioneer and creator of the term “CDN”, has 100% contract availability and infinite scalability. Values ​​according to volume (monthly or annual package), with or more days without costs.

Optimize the images

One of the factors that most affect the loading of pages is the lack of care in the use of images. In this case, the size of the files, the quantity, and even their format influence the speed of the website.

Attention to image size should already start in Photoshop or another editing tool, if the image is to be edited. These tools have the “Export to Web” function, which allows saving the file already optimized. Also, there are several free websites and apps that do this job.  For WordPress sites, there is the excellent Smush Image Compression and Optimization plugin, which automatically removes additional data and compresses all image files uploaded to the site.

Each different image that is inserted on the page generates a new request, so it is important that, before filling a certain image with images to make it more attractive, check if all the images are really necessary and remove what is not. This is true for pages that are already active on the site, making a current diagnosis and removing unnecessary images.

A technique often used to reduce the number of requests, especially icons, is the use of CSS Sprites, which combine several images into one and via CSS is indicated which part of the image should appear in a certain place.

css-sprites

An excellent example of use is Facebook: when accessing the site via desktop, the icons shown in the left menu are worked using CSS Sprites. To learn more about this and learn how to do it, you can check out this Tableless article.

Configure AMP and Instant Articles

The mobile internet connection is not as good as the fixed internet and using the cell phone the user is even more demanding in relation to the loading time of the websites. To improve website load times on mobile devices, Google (along with other companies) has launched Accelerated Mobile Pages (AMP), while Facebook has Instant Articles.

To learn more about what MP is and how to set it up, check out the Google AMP article: what it is and how to set up your site to run faster on mobile devices

In the same vein as AMPs, Instant Articles allow users to access content hosted on Facebook itself and not on the origin site, which makes page loads up to 10 times faster. For sites that rely on advertisers, you can also configure them to display ads during the article. You can find more information and how to configure them on the official website.

Conclusion

As we have seen, there is no point in having a beautiful website, which has received praise for its innovative design, but which does not prioritize loading time and ends up below the competition when it comes to results.

That’s why optimizing your site loading speed is a crucial factor for your Digital Marketing strategy, as it directly influences your organic ranking on Google and other search engines, improves the user experience and increases your conversion rate.

Keep in mind that not all optimizations mentioned here will influence your load time and it may be that some have already been applied to your site. The ideal is to use the testing tools to diagnose the site and prioritize actions.

Now it’s time to put everything into practice and comment on your experience here. And if you’ve already optimized your site and know tips or tools different from what was presented here, don’t forget to share in the comments.