Site speed: Learn how to test and make your page faster

Wil Reynolds: Do SEO for People, Not Robots
Do social networks influence the SEO of a website?

It is true that the average speed of the Internet in Brazil is far from 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 can worsen the situation, 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, famous for delivering the order within 5 minutes, but it’s been 15 minutes that the request was made and nothing. How long would it take you to give up? And if the fast food side to guarantee a similar application in just three minutes?

On the internet the situation is similar, but the story changes for seconds, for when you want certain content, accesses a site and it takes more than 10 seconds to load before you know it, is already in Google again looking for another option because every second wait seems like forever!

We live in the age of immediacy , in which time is worth more than money. And that was combined with the dynamism of the internet makes our audience increasingly demanding. The content of your site can even be great, but if the loading speed is not good, is that people will pay to see?

The speed influences the site of the results?

Back in 2010, Google announced that the load time of a page was one of his more than 200 factors rankeamento . This means the time your site takes to load in relation to its competitors is one of the influencers points of the organic placement of sites on the results page, so a direct impact on  SEO . According to a survey conducted by Backlinko , slower sites are penalized .

Besides being one of the organic Google rankeamento factors, site speed also influences the user experience and their results, as the data below:

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

Now that we know that the site speed interferes with the engagement of visitors, conversion rate and also its organic positioning, we will see how to test its load to start the optimization!

What is the optimal load time?

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

The expert Geoff Kenyon also conducted a survey in which found that if a website press 5/2 , is faster than about 25% of the internet; in 2.9 seconds more than 50% of the network; already pressing 0.8 second is faster than 94% of the web.

Despite the aforementioned statistics, the short answer is: as soon as possible . We already know that your site load time affect its results, so it is best to optimize it best to keep the charging time at least!

Testing site speed?

We currently have several free tools that you can test the page load time. You can also see a diagnosis with raising problems, and warnings on how to optimize it. The most commonly used tools are:

Google PageSpeed ​​Insights

Google PageSpeed ​​Insights

Probably the best known of the list, PageSpeed Insights is a tool that, when inserting the link to a page, you can analyze the content and generate suggestions for the desktop and mobile versions of it.

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

  • “You must correct”: highlighted in red, are improvements warnings that, if applied, will generate more impact on page load time;
  • “Consider fix”: highlighted in yellow are warnings improvements that do not influence much on the speed of the page and should not be prioritized;
  • “Approved by …”: highlighted in green are the positives of the page.

Although it is great to identify and prioritize problems, the tool does not detail what the page load time and also does not indicate the number of page requests for loading, which are important data for diagnosis.

GTmetrix

GTmetrix

Very popular among marketing experts, GTmetrix is considered one of the best and most complete tools to evaluate a page load time and identify areas for improvement, ease of use and variety of data displays.

The step by step to use the tool is very similar to Pagespeed Insights. Simply access it, include the page link you want to analyze and generate the report. But we recommend creating an account (even free) before starting the analysis, as this allows you to change which region the test is performed (and has São Paulo among the options), which the browser and the device, which type of network, and other configuration options and more data in the final report. The closer the public standard test that accesses the site (such as location, device type and browser), the better.

After adding the page link and start the report, the tool makes a complete analysis and presents various data on the next screen. At the top, it summarizes with two scores in Performance Scores , one based on Pagespeed Insights and another in YSlow , a project that analyzes the speed of pages based on the rules of high performance Yahoo sites. The scores are usually presented different, because the tools use different criteria to evaluate the page.

Just as in Pagespeed Insights, the colors of the scores determine their sense of urgency, but here we also have a comparison with the average number of sites analyzed by the tool in the past 30 days, in which one side of the score to the arrow represents the page is above or below the average, as shown in the following example.

Speed-the-site-GTmetrix

Still at the top of the report, hand tool performance evaluation while also displays the total time for the page load, which the page size and how many requests are generated to load. Likewise the performance scores, here also have arrows up and down, indicating whether it is above or below the average.

Speed-the-site-GTmetrix

In the bottom of the screen are displayed several reports separated by tabs. Through them it is possible and identify the points that need to be corrected so that the page load time is reduced.

  • PageSpeed: based on Pagespeed Insights, this tab you will find a full report with all the points assessed by the tool, ordered by priority. Here we can also see the note that is given to each criterion according to the analyzed page, what type of configuration – whether it’s on the server, the content or javascript, for example – and, finally, what is the priority of this improvement.
  • Yslow: similar to that presented in the report PageSpeed guide and also organized by priority, but it is based on criteria defined by yslow.
  • Waterfall: report cascade that visually shows the entire sequence of requests made to the page load. Each line represents a request with its status (if it’s ok, if you’re redirecting or even if it is an error), what your weight and also the time it takes to load.
  • Timings: presentation of a line of page load time, with the time that each step took to load: redirect, connect, backend, TTFB (time to first byte), first pain, DOM interactive, DOM content loaded and onload .
  • Video: to have the report on video, you need to activate it again and make the analysis of the page. The report video is nothing more than the page view by pressing the practice, with the measured time and mapped timings.
  • History: Finally, we have graphs accompanying page performance history for some data presented: timings, page size, and requests the PageSpeed and Yslow notes.

Speed-the-site-GTmetrix

Another great feature that has GTmetrix is to compare your results with pages of competitors . How is a worldwide use of tool, may not be very interesting we use their average as a parameter to our page, or even depending on the niche, these metrics may not make sense. With the comparison sites feature, you can compare with the leaders of their segment and have more reliable parameters to follow.

Speed-the-site-GTmetrix

Only the free version of GTmetrix is ​​already very full and rich can generate reports to evaluate and optimize the site. But the tool also has more robust paid versions, and offers search engine optimization service, contracted separately.

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

What to do for a faster page load?

All optimizations listed below on the impact a website load time, but their own testing tools presented already point the 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 diagnostic tools.

For sites in WordPress , most of the tips also feature the solution using plugins and in some cases, the same plugin can solve more than one problem. Select the plugin that most impacts the necessary solutions and avoid several different plugins, as this may harm the site’s performance.

It is very important to remember that before making any changes, you need to make a backup of the site to avoid potential problems. Sites in WordPress can do this through plugins like UpdraftPlus and BackWPup .

Enjoy your browser cache

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

If the same site 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 cache. If you have not saved anything cached or cached dwell time has expired (you can set this), it made the request of the files in question to the site server.

To enable the browser cache on your site correctly, you must include a file .htaccess in the folder public_html of your hosting with the following code:

# Force to use Cache-Control and Expires header
<IfModule mod_headers.c>
Header unset ETag
</ IfModule>
No FileETag
<IfModule mod_expires.c>
ExpiresActive in
ExpiresDefault "access plus 1 month"
ExpiresByType text / cache-manifest "access plus 0 second"
# Html
ExpiresByType / html text "Access more 0 second"
# data
ExpiresByType / xml text "access plus 0 second"
ExpiresByType application / xml "access plus 0 second"
ExpiresByType application / json "access plus 0 second"
# Food
ExpiresByType application / rss + xml "over 1 hour access"
ExpiresByType application / xml + atom "access additional 1 hour"
# Favicon
ExpiresByType image / x-icon "access over one week"
# Support: images, video, audio
ExpiresByType image / gif "access plus 1 month"
ExpiresByType image / png "access plus 1 month"
ExpiresByType image / jpg "access plus 1 month"
ExpiresByType image / jpeg "access plus 1 month"
ExpiresByType video / ogg "access plus 1 month"
ExpiresByType "access plus 1 month" audio / ogg
ExpiresByType video / mp4 "access plus 1 month"
ExpiresByType video / WebM "access plus 1 month"
# HTC files
ExpiresByType text / x-component "access plus 1 month"
# Webfonts
ExpiresByType application / x-font-ttf "access plus 1 month"
ExpiresByType / OpenType font "access plus 1 month"
ExpiresByType application / x-source woff "access plus 1 month"
ExpiresByType image / svg + xml "access plus 1 month"
ExpiresByType application / vnd.ms-fontobject "access plus 1 month"
# CSS / JS
ExpiresByType / css text "Access another year"
ExpiresByType application / "Access another year" javascript
ExpiresByType application / x-javascript "access another year"
</ IfModule>
# Force IE to always carry using the latest version available
<IfModule mod_headers.c>
Header set X-UA-Compatible "SI = Edge, chrome = 1"
<FilesMatch "\ (js |. Css | Graphics | PNG | jpeg | pdf | xml | Oga | ogg | m4a | ogv | MP4 | m4v | Webm | svg | SVGZ | EOT | ttf | OTF | woff | single | webp | AppCache | manifesto | HTC | crx | oex | xpi | safariextz | vcf) $ ">
Header unset X-UA-Compatible
</ FilesMatch>
</ IfModule>

There are also ways to enable caching directly into the HTML of the site, but they are considered obsolete techniques and not recommended.

If your site is on WordPress, there are several plugins available that make this function. The most used is the W3 Total Cache , which also is recommended by the hosting companies. Another great alternative (less popular) is the WP Fastest Cache , which also has other features, and comparison with the W3 and other plugins, performed better.

Reduce the number of redirects

When you load a page, it is sometimes necessary to redirect the browser to a URL to another. This redirection can be done to indicate the new location of a content, track clicks and impressions or correct different types of access – as when redirects www.exemplo.com.br to exemplo.com.br or http to https .

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

It is also important to be careful to insert the exact version of an external request to not generate this type of redirection while it’s charging. When adding a script of Facebook, for example, it is important as insert with the correct link without redirects.

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

Minifique CSS, Javascript and HTML

When developing a site, the programmer works with an organization’s data that includes line breaks, spaces and comments that do not influence the content. But however it does not appear, this information end up weighing on the files and influencing the charging time.

To resolve this, you can minificar (lighten) these files, removing all these unnecessary information. Usually this action provides a reduction of 20 to 30% in file size, which depending on their overall size can make a difference.

But this work need not (and should not) be done in a manual way. There are several free tools that can help. On the site Minifycode can minificar HTML, Javascript and CSS, plus the ability to make the code “pretty” again, including all necessary information. Although this feature is important to keep a backup with all the original files.

If the site is on WordPress, this becomes simpler because there are several plugins available that perform this work and many of them are free. The most commonly used are Autoptimize , Better WordPress Minify and W3 Total Cache .

Do not use rendering blocking Javascript

When you access a particular page, your 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 your load time.

Some tools tests indicate send Javascript and CSS to the bottom of the page before </ body> using inline CSS for the most important styles that directly affect the look of the page, so that the contents do not load “ugly” only in HTML. But CSS and Javascript inline also slow to load, and to use inline styles will hinder the organization. Already send only JavaScript to the end does not influence the content, so the recommended is to send only JavaScript to the end of the HTML.

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

Enable gzip compression

The gzip makes the site files to be compressed, which reduces file transfer time by 70% on average.

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

If gzip is not yet active on the site, you must change the .htaccess in the folder public_html with the following code:

<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^ (Accept-EncodXng | X-cept-Encoding | X {15} | ~ {15} | - {15}) $ ^ ((gzip | Deflate) \ s * \ s *) + | [X ~ -] {4,13} $ HAVE_Accept-Encoding
RequestHeader attach Accept-Encoding "gzip, deflate" env = HAVE_Accept-Encoding
</ IfModule>
</ IfModule>
<IfModule filter_module>
FilterDeclare COMPRESS
FilterProvider COMPRESS DEFLATE resp = $ Content-Type text / html
FilterProvider COMPRESS DEFLATE resp = $ Content-Type text / css
FilterProvider COMPRESS DEFLATE resp = $ Content-Type text / plain
FilterProvider COMPRESS DEFLATE resp = $ Content-Type text / xml
FilterProvider COMPRESS DEFLATE resp = $ Content-Type text / x-component
FilterProvider COMPRESS DEFLATE resp = $ Content-Type application / javascript
FilterProvider COMPRESS DEFLATE resp = $ Content-Type application / json
FilterProvider COMPRESS DEFLATE resp = $ Content-Type application / xml
FilterProvider COMPRESS DEFLATE resp = $ Content-Type application / xhtml + xml
FilterProvider COMPRESS DEFLATE resp = $ Content-Type application / rss + xml
FilterProvider COMPRESS DEFLATE resp = $ Content-Type application / atom + xml
FilterProvider COMPRESS DEFLATE resp = $ Content-Type application / vnd.ms-fontobject
FilterProvider COMPRESS DEFLATE resp = $ Content-Type image / svg + xml
FilterProvider COMPRESS DEFLATE resp = $ Picture Content-Type / x-icon
FilterProvider COMPRESS DEFLATE resp = $ Content-Type application / x-font-ttf
FilterProvider COMPRESS DEFLATE resp = Content-Type $ source / OpenType
FilterChain COMPRESS
change FilterProtocol COMPRESS DEFLATE = yes; = the byteranges
</ IfModule>
<IfModule! Mod_filter.c>
AddOutputFilterByType DEFLATE text / html text / plain text / css application / json
AddOutputFilterByType DEFLATE application / javascript
AddOutputFilterByType DEFLATE text / xml application / xml text / x-component
AddOutputFilterByType DEFLATE application / xhtml + xml application / rss + XML application / xml + atom
AddOutputFilterByType DEFLATE image / x-icon image / svg + xml application / vnd.ms-fontobject application / x-font-TTF font / OpenType
</ IfModule>
</ IfModule>

In sites in WordPress, you can enable gzip using plugins like W3 Total Cache and WP Performance Score Booster .

Try to enable the Keep Alive

The Keep Alive allows the server to use a single connection to make transferring multiple files, which reduces latency and also the consumption of CPU, which impacts the page load time.

Usually the sites have this feature disabled, as most hosting companies deliver as something optional, as it significantly increases the memory usage on the server. So, before you enable the function, it is important to contact the hosting provider’s website and evaluate whether it is possible.

To enable the feature, you must upgrade the .htaccess in the folder public_html of your hosting with the following code:

<IfModule mod_headers.c>
Header set Connection keep-alive
</ IfModule>

If the site is on WordPress, you can install a plugin editing .htaccess , as the WP .htacess Editor .

Use a Content Distribution Network

Content Distribution Networks (Content Delivery Network, or CDN) work together to regionalize data storage. They host the content on servers scattered around the world, allowing its distribution quickly and effectively, regardless of where the access is performed.

A wide range of CDNs, with free and paid versions and easy to integrate into WordPress sites. The main ones are:

  • MaxCDN : one of the most used features free 30 – day trial and support for implementation in WordPress with initial plans of $ 9 per month;
  • Amazon CloudFront : features plugin for integration with WordPress and a free version with data limit, which can be a great alternative to start;
  • Azion Technologies : solution used by many ecommerces, distance education sites and media companies and financial markets. WordPress has support and plans that vary according to the traffic used;
  • Microsoft Azure CDN : Azure integrates with other services and also has integration with WordPress. It provides 30 – day testing period after the value fluctuates according to the use data.

Optimize images

One of the factors that most affect the loading of the page is the lack of care in the use of images. In this case the file size, the amount and format to its influence in site speed.

The attention to the size of the images should already start in Photoshop or other editing tool, if the image is edited. These tools have the “Export to Web” function, which allows you to save the file already optimized. In addition, there are several websites and free apps that do this work. You can see all of them and learn how to make accessing the article How to compress images without losing quality and increase the speed of your site .

For sites in WordPress, there is a great plugin Smush Image Compression and Optimization , which automatically removes additional data and compresses all image files uploaded to the site.

Each different image that is inserted in the page generates a new request, so it is important that, before filling with images determined to let more attractive, to review all the pictures are really needed 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 widely used technique to reduce the number of requests, especially icons, is the use of CSS Sprites , which combines 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 : to access the site via desktop, the icons shown on the left menu are worked using CSS Sprites. To learn more about it and learn how to do, you can check out this article from Tableless .

Set AMP and Instant Articles

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

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

In the same line of MPAs, the Instant Articles allow users to access content hosted on Facebook itself and not on the source site, which makes for pages to load up to 10 times faster. In the case of sites that rely on advertisers, it is also possible to configure them so that ads appear during the article. You can find more information and how to set them on the official website .

Conclusion

As we have seen, there is no point having a beautiful site, which received praise for its innovative design, but that does not prioritize the load time and just below competitors when it comes to results.

So optimize the site loading speed is a crucial factor for their digital marketing strategy, since it influences directly on your organic rankeamento on Google and other search engines, improves the user experience and increase your conversion rate .

Remember that not all the optimizations mentioned here that will influence their charging time and it may be that some have already been applied to your site. The ideal is to use the testing tools for a diagnosis of the site and prioritization of actions.

Now it’s time to put it into practice and comment here your experience . And if you’ve optimized your site and know tips or different tools than was presented here, be sure to share in the comments.