Tips to reduce loading times and improve a website’s SEO

Nowadays there are numerous tools to measure the loading times of different websites. A design adapted to consumption on mobile devices and loading times, are two of the basic elements on any to do list when one thinks about a digital project.

10 years ago, the success of a website, and in particular, the elements that influenced the good or bad positioning in search engines, depended on a series of metrics that have changed a huge amount. An element that has now become one of the obvious success metrics is the time for loading the page. A design adapted to consumption on mobile devices, in particular smartphones, and loading times, are two of the basic elements on any to do list when one thinks about a digital project.

If the project isn’t new, the first step would be to evaluate the time it takes to load the content of a website. There are now numerous tools available to measure that speed while establishing whether or not a website is adapted to mobile devices and to what degree. The tools most used by developers or experts in SEO (Search Engine Optimization) are associated with Google, for obvious reasons.

• PageSpeed Insights: the tool is used to copy and paste any URL to an open field and start a quick site analysis. The platform offers users two types of reports: one focused on a website’s performance on a desktop computer and another focused on mobile devices. These reports are scored between 0 and 100, showing a traffic light that changes between green, amber and red. The analyses don’t only give a score, they also establish specific elements that the developer must correct, some of which can be improved on and others that are correct. Some of the elements that tend to cause adaptation problems are :

– Reducing the server response time: an element that normally results in slower loading times.

– Deleting the JavaScript that blocks the viewing and CSS of the content at the top half of the page: the JavaScript is an interesting element to include animations or transitions in a website, although it also negatively affects the loading times.

– Minimizing JavaScript and CSS: compacting the JavaScript code could save a large number of data bytes and speed up the downloading times.

– Optimization of images: large photos take up a huge amount of time and space.

– Usability elements: all the visible content on the website must perfectly adapt to the device’s visible screen.

• Google Search Console: this is the leading tool for any SEO professional or developer who wants to measure how their website interacts with all the elements shown by Google. Professionals can use this tool to easily review the performance of the AMP websites with the content indexed by Google. They can also see the mobile usability status of their website. The fewer of these errors that the website has, the quicker the loading time.
• Google Analytics: this is one of the best online measuring tools on the market. It has the same number of free reports and customization characteristics as the free version, which has almost no rivals. It’s true that there are other very good analytical tools on the market, but most use Google Analytics. Regarding loading times, GA has several reports in its ‘Site Performance/Speed’ tab. Regarding the ‘Webiste time’ report, user’s are given information about basic interaction metrics such as the number of pages viewed and the bounce rate, network and server metrics, time containers in different metrics, and even geographical data. This also gives access to a suggestions report for improving loading times, which is the same analysis that the developer can access with the PageSpeed Insights report.

Loading times: how to improve performance

There are some practical tips to help any normal user, SEO expert or developer to improve the conditioning factors that directly influence the fast loading of a specific website:

• Having control over the entire JavaScript code and CSS pages: nowadays, when a website has JavaScript and CSS (and almost all do), a good practice is to place the entire code (which should be executed by the browser) in external files, as well as  placing CSS and scripts in separate files. This shrinks the headers, making the loading times faster. The browser doesn’t need to render a large amount of code for each page. In turn, this results in two huge advantages: better positioning and a much more accessible maintenance for the developer team. These are two examples of JavaScript code and CSS in external files:

–  JavaScript: <script src=”script.js” language=”javascript” type=”text/javascript”></script>

– CSS: <link rel=stylesheet type=”text/css” href=”hoja_de_estilos.css”>

• Optimization of the weight of the images: there are now many fast image optimization and zipping tools. One of the most used programs for editing images is Photoshop, which has a specific function for saving photos for websites. This makes it possible to have an image with the size we need and an average weight. There are also tools such as RIOT, Image Optim, Image Optimizer and Kraken, which perform batch zips to replace all the elements on a website. It’s a conditioning key for achieving a high positioning level.
• Careful with automatic CMS trimming such as WordPress: automatic trimming in WordPress is great when we want to render a website adapted to the size of the screen, and smaller screens such as tablets or smartphones, but this doesn’t mean that they are perfect. The search engine has to load the original image, calculate the space requirements, find the perfect image for these requirements and render it. The time taken to carry out these actions also makes the final loading of a website’s pages slower.
• Cache storage: cache is always great because it prevents the browser from having to load the entire content each time a request is made to the server. This hugely increases the time it takes to load the content, because, in a certain way, it is already loaded.
• Don’t excessively use 301 redirecting: avoiding 404 errors with 301 redirections is recommended for the correct operation of a website, although an excessive number of 301 redirections can also slow down the loading time. It’s obvious that the browser has to work overtime to load this content: it goes to the old website, it sees that there is a new address and redirects, and then it loads the content it finds at this new URL. This overtime makes loading slower than normal, especially in the case of websites with a long series of redirecting, where there are 301 redirections in a chain or in a loop, with new addresses preceded by several old addresses with their 301 redirections. The SEO must clean up all these problematic 301s. 

Are you interested in financial APIs?  Discover all the options offered by BBVA