When optimizing website speed, various testing tools often suggest reducing the number of HTTP requests. Beginners may not know where to start, so Naiba here introduces methods to reduce the number of HTTP requests for a website.
Taking the Naibabiji website homepage as an example, the number of requests is 75.
What is an HTTP request?
The HTTP protocol defines how web clients request web pages from web servers and how servers deliver web pages to clients. The HTTP protocol uses a request/response model. The client sends a request message to the server, which includes the request method, URL, protocol version, request headers, and request data.
You can understand it this way: if the browser does not send a request to the server, the server does not know to transfer files to your browser for display. The more requests there are, the longer it takes to display.
How to check the number of website requests?
Taking Chrome as an example, open a webpage, right-click and select 'Inspect' (CTRL + SHIFT + I), then click the 'Network' tab on the tool interface that appears. Refresh the webpage to see the relevant information.
The simplest method to reduce the number of HTTP requests
Merge CSS and JS files
A quick online search will yield many methods teaching you how to merge CSS and JS files. Various caching plugins usually also include this feature, for example,WP Rocket
Note that the small text below mentions that it is not recommended for sites already using HTTP/2.
This is also why Naibabiji has not enabled the CSS and JS compression feature.
For the difference between HTTP 2.0 and HTTP 1.0, please refer toZhihu article。
When you enable the CSS and JS merge function, useGTmetrix. You'll notice a significant improvement in the score. However, if your website server already uses HTTP 2.0, merging files specifically for a higher score is not a wise move.
Manual methods to reduce the number of HTTP requests
Although mentioned above, sites using HTTP/2.0 don't need to merge CSS and JS files just for a better score. However, this doesn't mean there's no need to reduce HTTP requests at all. To make the website faster, we can still manually streamline some HTTP requests. (Of course, if the website is already quite fast, this optimization is purely for the sake of perfectionism.)
1. Use Image Sprites
This is a CSS technique where multiple small images used on your website are combined into one image, and then called via CSS code.
As shown below, one image can be used for 14 icons, reducing 13 HTTP requests:
For the usage of image sprites, you can refer tothe article on w3school。
2. Delete unnecessary images
We can delete some unnecessary images on the webpage, such as the logo at the bottom of the website.
3. Reduce image size
Although reducing image size does not decrease HTTP requests, it speeds up image loading, thereby improving website loading speed.
4. Optimize external images
External images are also a factor affecting website speed and are counted in your website's HTTP requests.
For websites with many comments,disabling Gravatar avatarsis a very good option.
5. Delete unnecessary files
Some plugins also generate CSS or JS files. If a plugin is not essential, you can consider deleting it or integrating the plugin code into the website Theme.
6. Lazy loading
Lazy loading means resources are loaded only when they come into the browser viewport; resources not visible in the browser window are not loaded. The WP Rocket caching plugin has this feature built-in. If you are not using WP Rocket, you can install other plugins. You can refer tothis article from Lightning Blog。
7. Add cache expiration time
Some caching plugins help add a browser cache time to your website's static resources. When a user visits your website once, subsequent visits will not reload already cached static resources from the server, providing a speed boost.
8. Ignore irrelevant resources
Asset CleanupThis plugin can help you achieve this functionality.
What are irrelevant resources?
For example, a contact form is usually only used on the contact page, but its JS file loads site-wide. We can use Asset Cleanup to set it to load only on the contact page, thus reducing the number of requests.
9. Merge CSS files
Some very small CSS files can be merged into one CSS file, reducing requests (this may not be necessary with HTTP/2.0).
10. Control the number of images in articles
If you insert dozens of images in an article, the number of requests cannot be reduced.
Improving website speed benefits user experience and also helps with SEO optimization. So if your website is very slow, it is very necessary towebsite speed optimizationThe above isan optimization method for website speed by reducing HTTP requests。