How to speed up your page loads by reducing HTTP requests
1) Check how many HTTP requests your site currently makes.
Google Chrome's Network panel makes it easy for anyone to check how many HTTP requests a site makes. It's a really cool way of seeing what's on your page and what's taking a long time to load.
Basically, it shows you all the files that a browser had to request and transfer in order to download the page -- and it also shows a timeline of when this happened. For example, the API can tell you precisely when the HTTP request for an image started, and when the image's final byte was received. It's a really cool way of seeing what's on your page and what's taking a long time to load.
To see the Network panel for a given webpage, open the webpage in Google Chrome. In the main Chrome menu at the top of your screen, go to View > Developer > Developer Tools.
The Network panel will open in your browser. Since it records all network activity while DevTools is open, the panel may be empty when you first open it. Reload the page to start recording, or just wait for network activity to occur in your application.
Here's an overview of what everything in the Network panel means:
Curious how many requests your website requires? The Network panel will tell you that, too. Take a look at the very bottom left of the screenshot above and you'll see the total number of requests; in this case, 25 requests.
2) Remove unnecessary images.
At this point, you should have an idea of which files are taking longest to load, including image files. The easiest way to reduce the number of requested files? Eliminate unnecessary images.
Images are a valuable webpage asset because they make for a strong visual experience on your webpages. However, if you have images on your page that aren't contributing much value, it's best to just cut them out altogether -- especially the ones that are really large.
3) Reduce the file size for remaining images.
For the images you do keep, use high-quality photos that have a compressed file size. This will help reduce the time it takes to make a HTTP request, thereby reducing load time.
4) Evaluate other parts of your page that are contributing to page load time.
Cutting and compressing images are a great first step to reducing HTTP requests and page load time. But what else did you see on the Network panel that's adding requests? For example, you might find that a video or Twitter integration adds an entire second or two to your load time. That's good to know. From there, you and your team can decide whether those assets are worth keeping.
5) Make JavaScript asynchronous.
If you have JavaScript on your page that's not asynchronous then you'll want to take it to your developer to make it asynchronous -- or remove it from the webpage altogether, if possible.
Why? It all comes down to user experience. When a person's browser loads a webpage, it loads the page's assets from top to bottom. When it hits a JavaScript file and wants to load it, if that JavaScript is not asynchronous, then the browser will stop loading everything else on the page until it loads that JavaScript file in its entirely.
If that JavaScript is asynchronous, then the browser will load it at the same time as it continues loading other elements on the page. Asynchronous JavaScript files make for a better user experience.
6) Combine CSS files together.
Every CSS file you use for your website adds to the number of HTTP requests your website requires, thereby adding time to your page load speed. While this is sometimes unavoidable, in most cases, you can actually combine two or more CSS files together.
Why? Because CSS code can be anywhere on your site or in any number of files, and it'll still works just as well. In fact, often the only reason a site has multiple CSS files in the first place is because the site's designer found it easier to work with separate files.