image description
« Back to blog

Five Techniques to Speed Up a Web Page

When a web page takes too long to load, we constantly blame the internet connection. Many times, our anger with the router or internet provider is justified. However, on many occasions, the website that we are navigating is poorly made. It can increase loading time of each page by 2-3 seconds. This creates a large problem for those who use their site to showcase products and services. Large internet businesses like Amazon are a good example, where a .1 second greater loading time will mean a 1% loss in sales, or Facebook, where a single second delay can mean a loss of 6%.

But how can you tell if a web has been optimized? PageSpeed Insights is a platform made by google. With it, you can easily evaluate if a web page is the best it can be. After a small analysis, the platform reflects what aspects would be best improved to optimize the website.

Although a web page can be slowed down by a wide variety of factors, there are five that slow the majority of pages. At DIGITAL55, we compiled these five factors and Google-recommended techniques to improve the site’s speed.

 

Minifying resources (HTML, CSS and JavaScript)

Minifying is a reference to a process through which unnecessary or redundant information can be eliminated without affecting the way people navigate a website. This eliminates unused codes, unnecessary formats, makes use of simpler functions, etc. In short, you do not need to make a sweeping change to the website to improve its speed.

Google advises using HTML, CSS, or Javascript to minify the website:

●      Minificar HTML: HTMLMinifier.

●      Minificar CSS: CSSNano y csso.

●      Minificar JavaScript: UglifyJS y Closure Compiler.

 

Taking advantage of storage on a browser’s cache

Every time that we go to a website for the first time, resources are downloaded and stored in the navigator’s cache. Because of this, the next time that users visit the site, the process is different: the site will be accessed quicker. However, this is a slow process and “it can require various cycles of coming and going for the user to download everything from the server.” In other words, the loading process can be harmed by blocking certain content from properly downloading.

All storage resources rely on the memory cache. The cache defines if the resource can be stored, who can store it, and how much time it will take to store.

The interaction between user and server can be summarized through requests and responses. When a server responds it should provide headlines on Cache-Control and ETag:

  • Cache-Controldefines how and for how long navigators and other memory caches can store a concrete response.”
  • ETag gives a revalidation token so that the navigators automatically send and verify whether a given resource has changed since the last time it was requested.”

According to Google’s recommendations, the optimal storage time for the memory cache is a minimum of a week, and as much as a year for sites whose resources do not change often.

On the other hand, to best understand a storage cache policy, a concrete web page works best. Google puts a couple of complete guides online:

 

Setting up compression

GZip compression is available on all browsers. This compression service works automatically when the user types in an HTTP address in the browser. Setting up GZip compression reduces response size by 90%, which helps decrease download times from respective websites.

Google recommends using HTML5 Boilerplate, a platform with complete configuration guides for the most popular servers. Users can look for their server and, by following the given steps, adequately set up GZip on their device.

It is important to note that there are some servers and antivirus software that might disable GZip compression when information archives are downloaded.

 

Improving images

Normally, images make up a large portion of downloaded information from a page. Consequently, improving this is one of the best methods for improving loading time on a webpage.

On its website dedicated to improvements, Google has a guide with recommended steps for posting adaptable images.

GIF, PNG, and JPEG formats make up 96% of all images on the internet. Because of this, Google’s tool PageSpeed Insights offers specific recommendations for optimizing these formats. However, there are alternatives available like ImageMagick, which offers a similar outcome.

Note that if the images are already optimal, it is possible that using third-party tools will increase their size.

With a PNG format, image compression does not mean a loss of quality. On the other hand, with GIFs, it is better to use video instead. With JPEGs, compression means a loss of detail. However, the compression rate can be 10 times better than with previous formats.

 

Improving server response time

For a website to be considered optimal, the server’s response time should be under 200 milliseconds. This is the time it takes the server to load the HTML code. Anything above 200 milliseconds means a need for improvement.

There are different factors that slow down server response time: consulting the data base, memory shortage, slow logical application, libraries, etc.

Google recommends following certain concrete steps to optimize server response time quickly and simply:

  • Firstly, measure loading time to find out the server’s exact response time and what factor(s) slow it down.
  • Correct these factors. This can be done with guides that recommend certain practices for managing the platform’s content and framework.
  • Maintain periodic control of the server and stay alert about slow future loading speeds.

 

As we said at the beginning, many people use webpages as showcases for their products or services. Optimizing a site is important for fluid navigation, and allows clients fast access to information. Suboptimal sites directly suffer a loss of sales. Constant maintenance can prevent future loading problems that harm user experience.