Rohan Negi

Mar 18, 2023

Improve Web Performance

1. Reduce the Number of HTTP Requests

are used by the web browser to fetch different parts of the page, like images, stylesheets, and scripts from a web server. Each request, especially using HTTP/1.1, will have some overhead in establishing the connection between the browser and the remote web server.

Furthermore, browsers usually have a limit on the number of parallel network requests, so if you have many requests queued up, some of them will be blocked if the queue is too long.

Your first step should be to eliminate requests that are simply unnecessary. What is the minimum required for your website? Find that out, and load only the necessary external resources.

You should remove any unnecessary images, JavaScript files, stylesheets, fonts, etc. If you are using a CMS like you should remove any unnecessary plugins as they often load additional files on each page.

Now that you have trimmed everything you could, the next step is to optimize the rest. You should look into compressing your CSS and JavaScript files. Optimized websites often load all the required CSS and JavasScript in a single request for each.

can help you monitor and identify HTTP requests and resources that are loading slowly for your real users.

2. Switch to HTTP/2

I mentioned above the overhead of sending many requests over HTTP/1.1. HTTP is the protocol that the browser uses to communicate with a remote web server. The HTML of your website, along with all other resources such as images, stylesheets, and JavaScript files are transferred using this protocol.

One way of solving this problem is reducing the number of requests. This is a good approach in any case. Fewer resources required to render your website is always going to result in faster page load times, but there is another way to avoid this overhead.

You could switch your website to . The details on how to do this will depend on the hosting provider you use.

HTTP/2 has several . Among them is the ability to send multiple files at the same time, over the same connection. This avoids the overhead of multiple requests.

3. Optimize Image Sizes

Many websites use graphics heavily. If your images are not compressed, or if you use too high of a resolution it will slow down your website’s performance.

For example, websites sometimes use images with 2x or even 3x resolution so they are displayed well on high-density displays such as retina screens. But if your users are not using a HiDP display, then you are just wasting bandwidth and increasing the load time for your visitors, especially if they are on slow mobile data connections.

You can read this for using responsive images correctly. Specifying multiple image sizes will allow the browser to select the appropriate image based on screen resolution.

When you are certain that you are loading the correct resolution across all device types, then it’s time to optimize the size of the images. Shopify has a on how to do that.

Make sure that you use the correct file type too! Use JPEG for images with lots of colors (e.g., photos), and use PNG for simpler graphics.

4. Use a Content Delivery Network (CDN)

Serving static files can get tricky. Since this is not the primary business of 99% of websites out there, it’s smart to outsource this part of your to someone else. Luckily there are services designed especially for this: Content Delivery Networks or CDN.

CDNs will optimize the delivery of static files such as CSS, images, fonts, and JavaScript to your visitors. Setting them up is usually very simple.

CDNs use geographically distributed servers. What this means is that the server closest to your visitor will be serving the files. So the load time for e.g., images will be the same, regardless of where the user is connecting. Generally, when serving static files from your own servers, the load time increases when users are physically far from the server.

You can use to monitor the performance of files hosted on CDNs so you can actually measure if outsourcing this part of your infrastructure makes sense. When we first started using a CDN for serving assets for we actually used Sematext Experience that showed that we were indeed serving things faster to our users.