What are the best strategies for minimizing HTTP requests?

Minimizing HTTP requests is essential for optimizing website performance. To achieve this, combining and minifying CSS and JavaScript files reduces the number of external requests. Image sprites and lazy loading ensure that images are efficiently loaded as users scroll down the page. Implementing icon fonts, using CDNs, and adopting the HTTP/2 protocol further reduce latency and request overhead. Reducing reliance on third-party scripts and implementing effective caching strategies helps to store assets locally, cutting down on repeated requests. Regularly auditing and removing unused assets is a final step in streamlining HTTP requests, leading to faster load times and improved overall website performance.

When it comes to combining files, it's important to strike a balance between optimizing site performance and overloading it with too much content. This becomes even more crucial when using HTTP/2 or HTTP/3, as these protocols are designed to handle multiple requests simultaneously. Combining too many files can cause the site to become bloated and slow, leading to a poor user experience.

It has much fewer impact (and Can bé almost neglected) when using HTTP/2 : best move would be to enable http2 on server first !-)

Having multiple icons for your website such as your logo and social media logos can cause slower loading times under HTTP/1.x. Fortunately, HTTP/2 allows for multiple requests in a single connection, which means it's better to load individual small images instead of a large sprite sheet on every page. As a result, breaking apart sprite sheets will significantly reduce page weight and improve loading times.

It is a more efficient way to manage several svg icons in a single file and with a single call, you have a collection of svg using the <symbol> tag and you only call it with the <use> tag

While Google PageSpeed Insights is a useful tool for analyzing website performance and identifying areas for improvement, it does not provide detailed information about caching. Instead, it focuses on measuring the overall speed of your site and providing suggestions on how to optimize it. To get more detailed information about your caching performance, you may need to use plugins or built-in tools specifically designed for caching analysis.

While CDN helps with serving content faster from Edge and offloading some HTTP requests from your server,it does not help with reducing the total number of HTTP requests on the client. In the contrast, it adds one or more CDN hostnames to fetch. A little trick to minimize the latency on CDN requests is prefetching CDN hostname using dns-prefetch.

With the CDN it is also important to consider "Edge Caching", a method of storing frequently accessed content closer to the end user, in order to improve the performance and reduce the latency of content delivery.

That's important to keep in mind not only on the website level, also on the page level. Many resources (JS usually) are not required on every page of our website, probably are needed only on a few pages. For example, if you are using WordPress with a contact plugin, this will probably add JS and CSS for the contact form on every page even if these scripts and code are really required only on your contact page.

A recent raising approach is to use utility first libraries, e.g. tailwind css or alphine js. With this approach, you only need to load the utility library in your application, and then put the utility classes/functions inline in your HTML. That way, no additional css/js HTTP request is needed.

Minimize HTTP requests is one of the first point of attention if you want to improve the website performance, however there are many other factors like the TFFB, the DNS resolution, network route, server response, etc. that can highly improve the performance.