I have about 10 referenced CSS and JavaScript (JS) files on my website and I can combine them so there’s only 2 CSS and JS files for the web browser client to download. Combining the files would decrease the number of HTTP requests and decrease page load times.
My question is: if those 10 CSS and JS files are cached after the first page load, would the 2nd page load time be just as fast as the page that has only 2 combined CSS and JS files? I would think so because cached files would no require an HTTP request. I understand that there are command scripts that can automate combining CSS and JS files for deployments but doing that would complicate future junior programmers/web designers that may work on website. The website is for a charity organization and there’s very little control and available human resources to keep things in check and in order.
Update: My assumptions that using a cached file do not require an HTTP is wrong.
Yes, you should reduce number of requests even if resources are cached. Two reasons:
1: There is a small performance hit (per file) even for cached files
If you profile your website, you will see that for every resource there is still a roundtrip being made to the server. If the resource has not been updated the server will return HTTP status code
304 - Not Modified, otherwise it will return HTTP status code 200 (and the resource itself).Here’s a sample trace produced by profiling Stack Overflow homepage CSS files:
As you can see, even though the CSS file is cached, a request was made to make sure the cached version is up to date.
2: First-time visitors will also benefit from this optimisation
It will improve page load speed for first-time visitors and anyone with a stale cache.