22 best ways to speed up your website today — Part 1

If you think that your website performance isn’t a “BIG” thing to worry about, you might want to think it over again. Here is a report and some stats to prove that your website performance perhaps is a more serious issue than you might be aware of.

  1. 40% users abandon the website that takes more than 3 seconds to load.
  2. 79 % of these users who are dissatisfied with the website are less likely to visit the same website again.
  3. 47% of users expect a website to load in 2 seconds or less.
  4. A 1 second delay could reduce your overall revenue by 9%.
  5. As page load time goes from 1 to 5 sec the bounce rate goes 90% higher.

Thus, a few seconds of delay could have a huge impact on your overall sales conversion and your brand image as well.

Your website is the doorway to your customers and hence the performance of your website matters a lot. The difference between a successful business and a failed one is a thin line that distinguishes them both in terms of the product/service and the overall customer experience.

“According to a Google research with a 90% prediction accuracy, they found that as page load time goes from one second to 10 seconds, the probability of a mobile site visitor bounce rate increases 123%.”

This makes it fairly obvious that a well-performing website enjoys better customer engagement, conversion and retention. Given the reducing attention span and increasing impatience, it is extremely important to continuously monitor and improve the performance of the website today to ensure the availability and experience desired.

“An experiment performed by Amazon shows that for every 100 millisecond improvement, its sales increased by 1%. With $88 billion in online sales in 2015, that translates to $8.8 million of increased sales per millisecond.”

So, how do you improve this?

There are multiple factors that are responsible for affecting the load time of a website and it’s overall performance and availability but there are some factors that are more important than others. Now that we understand the importance of having a high performance website for your business, let’s look into the different strategies that would make a considerable improvement in your website performance for free.

  1. Minimize HTTP requests

A typical website contains hundreds of assets and these assets are hosted across different servers. These assets could be images, spreadsheets, animations or any other resource on the website. According to yahoo, 80% of the loading time of a website is spent on downloading the different parts of the page like images, spreadsheets and animations. Since an HTTP request is made for each of these components, more the number of components on the page longer it takes for loading the page completely.

The number of HTTP requests can be easily seen from the Developer Tools if you are using Chrome as your browser. Just right click the page you wish to analyse and click on “Inspect” and then click on the “network” tab. This will look similar to what is shown below. This will give you an idea about the number of resources available on your web-page and the number of HTTP requests required to load them.

The left column is the “name” of the components on the page and the “size” column shows the size of the components on the page. By reducing the number of round trips that the browser needs to make to the server to download the page, the loading time is reduced significantly. Reducing the number of HTTP requests will reduce the loading time significantly but you might be able to see the results only when coupled with other tips that follow.

2. Minify and combine the files(HTML, CSS & JavaScript).

Now that we are well aware of the number of HTTP requests on the website, it’s time to reduce the number of these requests. One of the most effective way to do it is by minifying and combining the files together. The best place to get started is with your HTML, CSS, and JavaScript files. This improves the efficiency of the code and improve the client side caching.

Minifying reduces the number and size of the files on the web-page and hence improves the loading time. This is especially true if the website is built using a website builder. Though these tools help you to create a website easily, the code is messy and hence slows down the website considerably. Codes containing unnecessary characters such as white space, comments and new line characters increase the loading time as well. Removing these reduces the file size of our code, therefore the amount of data that needs to be downloaded to the browser reduces making it faster.

3. Asynchronously load CSS and JavaScript files.

Once we have minified the files as mentioned in the last step, we need to optimize how the page loads as well. CSS and JavaScript can be loaded in two different ways- synchronously and asynchronously. As the name suggests if the script runs synchronously, the components load one at a time sequentially. This takes a lot of time. If the script runs asynchronously, it makes the website load much faster since the browser loads everything simultaneously from top to bottom.

4. Control the number of TCP connections.

This is probably the lowest hanging fruit when it comes to website performance optimization and the easiest to do but still, many websites just don’t have this implemented at all. TCP connection is the way by which both the user and the server send and receive acknowledgment that a connection has been made and data can begin to be transferred. Too many TCP connections slows down the website. Enabling keep-alive, makes sure you have the proper configuration on your servers and load balancer. Thus even if you can’t speed up the TCP connection, yet you can control how many times the connection takes place. Reducing it improves the overall performance.

5. Add a cache control header.

Website designs are getting richer everyday. This is increasing the number of assets on the pages as well be it images, spread sheets, flash, animations or anything else. Whenever a user visits a page for the first time, the website makes a large number of HTTP requests but these requests can be used significantly by using the Expires header to make the components cacheable. Though typically it is used for images, it should be used with all the components be it style sheets, scripts or flash content. This reduces the number of requests significantly on successive visits and improves the overall performance.

6. Spriting images also helps improves the overall speed.

Spriting is a technique used to consolidate images. Sprites simply put are multiple images combined into a rectilinear grid to form one large image. When a request is made, the page fetches the large image all at once as a single CSS background image and uses the CSS background positioning to display the individual component images as needed on the page. This reduces multiple requests to only one, significantly improving performance.

7. Defer nonessential JavaScript loading.

Deferring a file means preventing it from loading until after other elements have loaded. If you defer larger files, like JavaScript, you ensure that the rest of your content can load without a delay. Truly deferring JavaScript means loading or parsing of that JavaScript only begins after page content has loaded which means that it will not affect page speed or the critical rendering path.

To do this you’ll need to place a call to an external JavaScript file which is just before the </body> tag and looks something like this if you are using HTML:

8. Compression using Gzip

Compression technologies such as gzip reduce payloads at the slight cost of adding processing steps to compress on the server and decompress in the browser. These operations are highly optimized, however, and tests show that the overall effect is a net improvement in performance is as much as 70%.

To get an idea of how compression could speed up your site, you can use GID Network to run a compression audit. Just enter your URL and click the “Check.” button.

Below this, you’ll see an analysis of the extent to which the size of the page could be reduced after using Gzip.

If you don’t have Gzip enabled, you must fix this as soon as possible else you might be suffering some significant performance issue that you might not even be aware of.

If you have a static HTML site, however, you’ll need to enable Gzip in your .htaccess file. The exact code you need depends on your server but if your site runs on Apache, for example, it looks like this:

9. Reformatting and compressing images.

Image compression helps in reducing the size to images and hence reduces the amount of time taken to download the images over the internet. It also helps in improving the overall performance when the website is visited again since the small sized images can be easily cached in the browser so that they don’t have to render every time from scratch when the same visitor visits the page again. Additionally, formatting also plays a vital role in improving the overall performance of the website. The images with inappropriate format take a lot of cache space, bandwidth and processing time and hence increasing the load time significantly.

The optimal formats for the image types are as mentioned below.

  • Low complexity with transparency — GIF, PNG8
  • High complexity with transparency — PNG24
  • Line art — SVG
  • Photos — JPEG, PNG24
  • Low complexity (few colors) — GIF, PNG8

10. Minimize TTFB (Time to First Byte)

In addition to the amount of time it takes to fully load a website it is also essential to improve the time when it starts to load. TTFB (Time to First Byte) is the amount of time taken by the browser to load the first byte of the website from the server. Google recommends it to be less than 200ms for optimum performance.

When a user visits a website, the browser sends an HTTP request to the server that hosts it. Between that initial request and the first byte of data there are 3 processes that take place:

1. DNS lookup

2. Server processing

3. Response

You can easily find out this time using the developer tools in chrome or using a third party tool. You also need to understand that this speed also depends on your internet connectivity speed and hence if the speed of your connection is slow, the time displayed will be relatively higher.

If the response time is higher than 200ms it might be due to traffic, slow connection, web server configuration or dynamic content creation. Dynamic content creation and server configuration are the factors that can be easily controlled.

Unlike static pages, a server needs to “build” a dynamic file before responding. This can be easily taken care of by enabling caching that will be discussed in the next point.

11. Enable caching

When a user visits a website, the elements on the page are stored on their hard drive in a cache, or temporary storage. This means that the next time they visit the website, their browser can load the page without having to send another HTTP request to the server.

When a user visits your website, they have to download the complete HTML document, style sheets, JavaScript files and images before the webpage becomes usable. Tenni Theurer from Yahoo conducted to test to prove hoe enabling caching makes a huge difference in the page load time.

He considered a page with 30 components and it took 2.4 seconds to load the first time. Once the page had loaded, the different components were stored in the user’s cache and only a few components needed to be downloaded for subsequent visits. In Theurer’s test, that was just three components and 0.9 seconds of loading time, shaving nearly 2 seconds off the previous time.

These are the 11 hacks that you can implement today and see a considerable improvement in your website-performance.

=======================================

This is the first part of the two posts of this blog. The next part is coming soon…
Till then:
Check this out:
Fyipe (A complete solution to all your website performance needs)