WordPress Speed Optimization: How to Reduce HTTP Requests

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 a web client requests a web page from a web server and how the server delivers the web page to the client. The HTTP protocol uses a request/response model. The client sends a request message to the server, which contains 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 won't know to transmit files to your browser for display. The more requests there are, the longer it naturally takes to display the content.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 filesA 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: The fine print below mentions it's not recommended for sites already using HTTP/2. This is also why Naibabiji has not enabled the CSS and JS minification feature. For the differences between HTTP 2.0 and HTTP 1.0, you can refer toZhihu article. After enabling the CSS and JS merging feature, test withGTmetrix. 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 a single image and then called via CSS code. As shown in the image below, one image can serve 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 function. 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 into a Post, the number of requests cannot be reduced. Improving website speed benefits user experience and helps with SEO optimization. Therefore, if your website is very slow, it is very necessary to performwebsite speed optimizationThe above isan optimization method for website speed by reducing HTTP requests。