How to Improve Website Speed by Optimizing Front-End

Author: Ievgen Cherkashyn

People build websites to promote their goods and services, attract shoppers and deliver a great shopping experience. All retailers face the same challenge: to convert customers into buyers. The percentage of online shoppers who become actual buyers can be quantified as a ‘conversion rate.’ There are many factors that influence conversion rates. For starters, customers are more likely to purchase something when your online store has compelling headlines and offers strong promotions, a user-friendly layout and fast load speeds.

All the way back in 2010, Google identified page load speed among a multitude of factors that determine search result rankings. But even more importantly than search rank, website load speed is crucial for a website’s usability. More time spent loading a webpage results in a higher bounce rate and lower time spent on the website.

Page load time VS website speed

Page Load Time

Page Load Speed represents how fast a webpage is loaded from a server and displayed in a browser. Page Load Time is the period of time between clicking on a link and receiving a response from a server.

There are three major factors to consider with regards to site speed:

  • time for a browser to receive requested data (Page Loading Time);
  • how browser responds to a page load;
  • the speed of rendering by a browser

Naturally, a fast-loading site doesn’t guarantee a top position in search rankings, even though it can provide you with an advantage when your site is tied with another in terms of relevance.

How fast is fast?

Defining average acceptable website speed

Now let’s look at some figures and try to figure out what ‘slow’ and ‘fast’ means in the context of websites. Obviously, these definitions change over time, and internet users become more demanding when it comes to website speed. Back in 1999, when people were still using dial-up Internet connections, they were perfectly fine waiting eight seconds on average to load a page. In 2006, internet connection speeds had improved, and users claimed that they were willing to wait up to six seconds. By 2010, users admitted leaving a page if it took more than three seconds to download.

Google first realized importance of website speed. Arvind Jain, a Google engineer, claims that the corporation cares that new products do not slow down other Google services. It’s no wonder that Google engineers suggested an optimal site performance of 0.1 seconds. That’s what it takes to store visual information in sensory memory. If a page loads in less than in 0.1 seconds, we feel like the page has been downloaded instantly. Naturally, this can be a very effective way to retain customers on your website.

How can you measure website load speed?

What speedometer measures website load speed? On the web you can find various tools that help you measure your website’s speed. Let’s take a look at the most efficient and popular options.

Google PageSpeed

Google PageSpeed Insights is a great tool for measuring a website’s performance. It lets you track key statistics, detects possible issues, and offers possible solutions and recommendations on how to improve your website. Google PageSpeed uses a graded estimation system with a scale from 1 to 100. If you score 85 or above, your website is considered optimized and performing well. Its extra feature is estimation of user experience of a website’s mobile version.

GTmetrix

GTmetrix tracks your website performance, including scores delivered by Google PageSpeed Insights and YSlow (offered by Yahoo!), as well as optimization recommendations provided by those resources. GTmetrix also includes information on total page load time, page size and number of requests. You can download this information as a report, which is convenient for further analysis.

Pingdom

Another tool for measuring website performance is Pingdom, which is positioned as a professional tool for marketing and overall performance monitoring. You can access Pingdom’s features by subscribing to various plans, and there’s a 14-day trial version available before you commit. Besides essential Pingdom features like rating a website’s performance and displaying browser requests, you can store test results and track changes in website speed over time.

How do you optimize the performance of your website?

Front-end Optimization

After running tests to measure your website’s performance and identify bottlenecks, it’s time to think about site optimization. We’ll focus on front-end (the part of a website that the user interacts with directly) optimization. Here are four ways to optimize your website’s front-end:

1. Compress images

In 2016, HTTP Archive conducted research that found that about 64% of a website’s page weight made up of images. Images slow down websites. Thus, optimizing images can be one of the best ways to improve your site’s load time. Before you dig into techniques of image compression and think about optimal formats, ask yourself if you really need certain images; as a rule, a website should minimize graphics that negatively impact speed, as this results in an overall poorer user experience. If you cannot eliminate an image, consider CSS effects instead that weigh less and look sharp at any resolution.

Moreover, consider which image format is most suitable. For example, should you go with raster or vector images. Vector formats are more preferable for working with logos, text, and icons, as the quality of vector images does not depend on scale and resolution. However, vector formats are not good for complex images such as photographs. With photographs, you should consider using a raster image format, such as JPEG, GIF or PNG. In order to pick the correct format, you might consider the decision flowchart provided by Google:

This chart comes in handy if you are hesitating about which format to choose, but want to minimize your site’s size.

2. Minimize CSS, HTML and JavaScript

  • Minify CSS, HTML, and JavaScript by removing unnecessary gaps, tabulation symbols, line folds, and so on. This results in poorer code readability for humans, but with smaller file sizes — and machines can read minified code just fine.

  • Benefits of the asset pipeline. The asset pipeline is a default Ruby on Rails framework which combines, minifies and compresses JavaScript and CSS resources. It also enables you to create these resources in other programming languages and preprocessors including CoffeeScript, Sass, and LESS.

  • Reduce number of requests. The number of requests that a browser can perform simultaneously is limited, which is why reducing the number of requests can reduce load times. The asset pipeline combines resources, resulting in fewer browser requests.

  • Cache files. File caching improves page load time — but what can you do if you’ve made changes to an asset? To account for possible changes, the pipeline uses a fingerprint — the tool for building a relation between a file’s name and its content. If a file is renamed after changing its content, the fingerprint enables the user to check if two versions of the file are similar. This technique provides the browser with the relevant file version.

3. Follow the Above-the-Fold Principle

It’s a proven fact: the placement of elements on your website plays an important role in your site’s overall load speed. The more elements you have, including images and stylesheets, the more HTTP requests are made for each element which lead to increased load speed. Distributing your website’s elements properly enables you to effectively improve your front-end performance.

The Above-the-Fold principle is about putting the most necessary elements on the upper part of a webpage that can be seen without scrolling down. Here are several tips for following the Above-the-Fold principle:

  • Minimize data above the fold. The more data is shown at the top of a page the more HTTP requests are sent to the hosting server; this process directly impacts page load time. Minifying the data above the fold leads to better website performance.

  • Move CSS to the upper part of a webpage. Putting CSS in the header of your website leads to step-by-step loading of the headline, logo, navigation, and so on. Users feel more comfortable when they can see bits of your site loading, and can tell that something is happening.

  • Put scripts below. If your scripts are in the upper part of a web page, a browser downloads them first and then shows content the user originally requested. Placing scripts at the bottom tells a browser to download the most relevant information first, then download the scripts.

Implement Gzip compression

Compressed files download and transfer to a web browser much faster. Gzip compressor works with text files including JavaScript, CSS and HTML documents; however, elements such as videos, pictures, and audio files cannot be compressed by Gzip. Compressed files take up less space and require less bandwidth. According to surveys, keeping Gzip compressed files on your server can increase a page’s download speed by 3-4 times.

Gzip operates on most modern browsers including Chrome, Firefox, Opera, and Internet Explorer, which makes Gzip one of the most attractive compressors.

Conclusion

Of course, it takes much time and effort to identify a site’s bottlenecks which slow down performance. Follow our blog for an upcoming article on how to optimize your back-end to improve page load time.

Originally published at rubygarage.org.