It is a fact that the average internet speed in Latin America is far from good. But, nevertheless, many websites manage to make this situation worse, since they are developed without due attention to 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 in up to 5 minutes, but 15 minutes have passed since you placed the order and nothing. How long would it take you to give up? What if the fast food next door guaranteed a similar order in only 3 minutes?
On the internet the situation is similar, but the story changes in seconds, because when you want certain content, you enter a website and it takes more than 10 seconds to load, before you realize it, you are already on Google again looking for another option, since every second of waiting seems like an eternity!
We live in the age of immediacy, where time is already worth more than money. And that era, combined with the dynamism of the internet, makes our audience more demanding every day. The content on your website may be great but if the loading speed is not good, will people pay to view?
Does speed influence website results?
Back in 2010 Google announced that page load time was one of more than 200 ranking factors. That means that the time your website takes to load in relation to those of your competitors is one of the influencing points of the organic positioning of websites on the results page. According to research by Backlinko , slower websites are penalized.
In addition to being one of Google's organic ranking factors, the speed of the website also influences the user experience and your results, according to the following data:
- Every extra second a page loads leads to an 11% drop in page views and 16% drop in customer satisfaction, according to Aberdeen Group ;
- According to Kissmetrics research , 40% of visitors abandon pages that take more than 3 seconds to load and every 1 second or more in website load time reduces conversions by 7%;
- 88% of users who had a bad experience when visiting a website because of loading speed are less likely to buy there, and more than a third of those users will share their bad experience with friends, revealed research from econsultancy .
- 85% of mobile users expect the page to load at least as fast as desktop, according to Web Performance Today .
Now that we know that website speed interferes with visitor engagement, conversion rate and also your organic rankings, let's see how to measure your load to start optimizing!
What is the ideal charging time?
According to Pingdom , which has a tool to measure the speed of websites, the average load time for sites is 5 seconds. In the Google Site Performance for Webmasters video , Maile Ohye states that 2 seconds is the limit for good performance.
The specialist Geoff Kenyon also carried out an investigation in which he identified that, in the event that a website loads in 5 seconds, it is faster than approximately 25% of the internet; in 2.9 seconds, more than 50% of the network; If it loads in 0.8 seconds, it is the fastest of 94% of the entire web.
Despite the cited statistics, the short answer is: as quickly as possible. We already know that the loading time of your website influences your results, so the ideal is to optimize it as much as possible to keep the loading time to a minimum!
How to measure website speed?
We currently have several free tools where it is possible to measure the loading time of a page. It is also possible to see a diagnosis with the lifting 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, by entering the link of a page, it is possible to analyze the content and generate suggestions for the desktop and mobile versions of the same.
Along with each improvement suggestion, the tool also shows how to apply it. Each suggestion is classified as a priority indicator:
- "You must correct": highlighted in red, they are notices of improvements that, if applied, will generate more impact on the loading time of the page;
- "Consider fixing": highlighted in yellow, these are notices of improvements that do not have much influence on the speed of the page and should not be prioritized;
- "Approved in...": highlighted in green, are the positive points of the page.
Despite being excellent for identifying and prioritizing problems, the tool does not detail what the page load time is and also does not record the number of requests for the page to load, which are important diagnostic data.
Very popular among marketers, GTmetrix is considered one of the best and most comprehensive tools to assess page load time and identify areas for improvement due to the ease of use and variety of data it presents.
The step by step to use the tool is very similar to that of Pagespeed Insights. Just enter it, include the link of the page you intend to analyze and generate the report. However, it is recommended to create an account (even if it is free) before starting the analysis, since that allows you to alter the region where the test will be executed, what will be the browser and device, what type of network, among others.
configuration possibilities and more information in the final report. The closer the test is to the standard of public that enters the website (such as location, type of device and browser), the better.
After including the page link and launching the report, the tool does a full analysis and presents various data on the next screen. At the top is a summary with two Performance Scores , one based on Pagespeed Insights and the other on YSlow, a project that analyzes page speeds based on Yahoo's high-performing site rules. The scores presented are usually different, as the tools use different criteria to evaluate the page.
In the same way as in Pagespeed Insights, the colors of the scores determine their urgency but, nevertheless, here we also have a comparison with the average number of websites analyzed by the tool in the last 30 days, where a The arrow next to the score represents whether the page is above or below the average, as we present in the example below.
Still at the top of the report, next to the performance evaluation, the tool also presents the total time to load the page, what is the size of the page and how many requests are generated to load. In the same way as 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 several reports separated by guides are presented. Through them it is possible to identify the points that need to be corrected so that the loading time of the page is reduced.
- PageSpeed: based on Pagespeed Insights, in this guide you will find a complete report with all the points evaluated by the tool, ordered by priority. Here we can also see the score that is awarded for each criterion according to the analyzed page, what is the type of configuration (if it is on the server, in the content or a javascript, for example) and, finally, what is the priority of that improvement.
- Yslow: similar to the report presented in the PageSpeed guide and also organized by priority, however it is based on the criteria defined by Yslow.
- Waterfall: waterfall report that visually presents the entire sequence of requests made to load the page. Each line represents a request, with its status (if it is ok, if it is redirecting or even if it is an error), what is its weight and also the time it takes to load.
- Timings: presentation of a timeline of the page load, with the time that each of the stages 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 in video, it is necessary to activate it and do the analysis of the page again. The video report is nothing more than the visualization of the page loading in practice, with time clocked and timings mapped.
- History: finally, we have graphs that accompany the performance history of the page in relation to some data presented: timings, page size, requisitions, and the PageSpeed and Yslow notes.
Another excellent feature that GTmetrix has is to compare your results with competitor pages. As it is a globally used tool, it may not be very interesting to use its measurements as a parameter for our page and, even, depending on the niche, those metrics may not make sense. With the website comparison functionality, it is possible to compare with the leaders in your segment and have more reliable parameters to follow.
The free version of GTmetrix is already very complete and manages to generate rich reports to evaluate and optimize the website. But the tool also has more robust paid versions, in addition to offering a website optimization service, contracted separately.
In addition to GTmetrix and Pagespeed Insights, there are several other excellent tools with free versions for testing, such as:
- Pingdom Site Speed Test
- WebPagetest
- Yslow
What to do to make the page load faster?
All the optimizations listed below have an impact on the loading time of a website but, nevertheless, the test tools presented already point out the ways to make the page faster, even 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 tips also present the solution using plugins, and in some cases, the same plugin can solve more than one problem. Choose the plugin that impacts the solutions needed the most and avoid several different plugins, because that can hurt the performance of the website.
It is very important to remember that, before making any changes, you need to make a backup of the website to avoid possible problems. WordPress websites can do that through plugins like UpdraftPlus and BackWPup .
Take advantage of the browser cache
Whenever someone enters a website, all of the content on the website is temporarily downloaded to the device until the user leaves the page. Through the cache we can tell browsers, such as Chrome and Firefox, to keep those saved files.
If the person enters the same website again, using the same device and the same browser, the page will take less time to load, since the files are already saved in the cache. In the event that you have nothing saved in the cache or the cache time has expired (it is possible to define that), a request for the files in question is made to the website's server.
There are also ways to enable caching directly in the HTML of the website, however they are considered deprecated and not recommended techniques.
If your website is on WordPress, there are several plugins available that perform this function. The most widely used is W3 Total Cache , which is even recommended by hosting companies. Another excellent alternative (less popular) is WP Fastest Cache , which also has other features and, compared to W3 and other plugins, performed better.
Reduce the number of redirects
When loading a page, it is sometimes necessary to redirect the browser from one 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 (such as when redirecting from www.example.com. to example.com. or from http to https) .
Regardless of the reasons, redirects add round-trip latency, increasing page load time. The best way to minimize that is to restrict the use of redirects to only the cases where it is necessary and find other solutions where it is not.
It's also important to be careful to enter the exact version of an external request so that you don't generate that kind of redirect as soon as you're loading. When adding a Facebook script, for example, it is important to already insert it with the correct link, without redirects.
To manage internal redirects on WordPress sites, plugins like Yoast SEO and SEO Redirection can be used .
Minifica CSS, Javascript y HTML
When developing a website, the programmer works with a data organization that includes line breaks, spaces and comments that do not influence the content. However, even though it may not seem like it, this information ends up weighing on the files and influencing the loading time.
To solve this, it is possible to minify (make smaller) those files, removing all that unnecessary information. Typically this action provides a 20-30% reduction in file size which, depending on the total size, can make a lot of difference.
But this work does not need (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, as well as the possibility to make the code “beautiful” again, including all the necessary information. Despite this functionality, it is important to keep a backup with all the original files.
If the site is on WordPress, this is easier, since there are several plugins available that do this job and many of them are free. The most used are Autoptimize , Better WordPress Minify and W3 Total Cache .
Don't use render-blocking Javascript
Upon entering a certain page, your HTML is loaded from top to bottom, making the requests in that order. With the CSS and Javascript files present at the beginning, they are processed before the page content, which ends up increasing load time.
Some test tools indicate to send the Javascript and CSS towards the end of the page, before </body> , using inline CSS for the most important styles, which directly affect the visual of the page, so that the content does not load "ugly" ”, only in HTML. However, inline CSS and Javascript also take time to load, plus using inline styles ends up hurting organization. Since only sending the Javascript towards the end does not influence the content, so it is recommended to only send the Javascript towards the end of the HTML.
If the website is on WordPress, the Speed Booster Pack plugin has the functionality to send the scripts to the footer, solving this problem.
Enable gzip compaction
Gzip causes site files to be compressed, which reduces file transfer time by an average of 70%.
First of all, it is important to see if the website already uses it. In addition to the diagnostic tools themselves that were presented, you can perform the test here . Some hosting services already do this automatically.
On WordPress sites it is possible to enable gzip using plugins like W3 Total Cache and WP Performance Score Booster .
Try to enable Keep Alive
Keep Alive allows the server to use a single connection to perform multiple file transfers, which reduces latency and also reduces CPU consumption, which impacts page load time.
Websites usually have this feature disabled, as most hosting companies provide this as optional, as it significantly increases server memory usage. Thus, before enabling the feature, it is important to contact the website hosting provider and assess whether this is possible.
In the event that the website is in WordPress, it is possible to install an .htacess editor plugin , such as the WP Htacess Editor .
Use a Content Delivery Network
Content Delivery Networks (CDNs) work together to regionalize data storage. They host the content on servers distributed throughout the world, allowing its distribution quickly and efficiently, regardless of where the access was made.
There are several CDN options, with free and paid versions and easy to integrate into WordPress sites. The main ones are:
- MaxCDN : one of the most used, it has a free 30-day trial and support for WordPress implementation;
- Amazon CloudFront : has a plugin for integration with WordPress and a free version with data limits, which can be an excellent alternative to start;
- Azion Technologies : solution used by many e-commerces, EAD 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 has integration with WordPress. It provides 30 days for tests, after that period the value fluctuates according to the use of data.
Optimize images
One of the factors that most harms 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 the format influence the speed of the website.
The attention towards the size of the images should already start in Photoshop or another editing tool, in the event that the image is edited. These tools have the "Export for Web" function, which allows you to save the already optimized file. In addition, there are several free websites and applications that do this job.
For WordPress sites, there is the excellent Smush Image Compression and Optimization plugin , which automatically removes extra data and compresses all image files sent to the website.
Each different image that is inserted into the page generates a new request, so it is important that, before filling a certain page with images to make it more attractive, you check if all the images are really necessary and remove the ones that are not. That is valid for the pages that are already active on the website, making a current diagnosis and removing unnecessary images.
A widely used technique to reduce the number of requests, mainly for icons, is the use of CSS Sprites, which combine various images into one single image and via CSS it is indicated which part of the image should appear in a certain place.
An excellent example of use is Facebook : when entering the website via desktop, the icons presented in the menu on the left are worked using CSS Sprites.
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 the loading time of websites on mobile devices, Google (along with other companies) launched Accelerated Mobile Pages (AMP), while Facebook has Instant Articles.
In the same vein as AMPs, Instant Articles allow users to post content hosted on Facebook itself and not on the source website, making page loads up to 10 times faster. In the case of websites that depend on advertisers, it is also possible to configure them so that ads are displayed during the article. You will find more information and how to configure them on the official website .
Conclution
As we have seen, it is useless to have 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.
Therefore, optimizing the loading speed of the website is a crucial factor for your Digital Marketing strategy, since it directly influences your organic ranking in Google and other search engines, improves the user experience and increases your conversion rate.
Remember that not all the optimizations mentioned here will influence the loading time and it may be that some have already been applied to your website. The ideal is to use the testing tools for a diagnosis of the website and prioritization of actions.
Now it's time to put everything into practice and comment on your experience here. And if you have already optimized your website and you know different tips or tools than what was presented here, be sure to share it in the comments.
Frequent questions
What is the ideal loading time for a website?
As fast as possible. However, sources such as: Pingdom, Google Site Performance for Webmasters and Geoff Kenyon, indicate that the maximum time should be 5 seconds.
How to reduce the loading time of my website?
Reduce the number of addresses, avoid uploading very large images (it is better to compress them), avoid many animations on your website and configure the AMP option.
