WordPress Speed Optimization: How to Reduce HTTP Requests

When optimizing website speed, some testing tools always prompt us to reduce the number of HTTP requests. Beginners may not know how to reduce these requests, so Naibabiji here introduces methods to decrease the number of HTTP requests for a website.Taking the homepage of the Naibabiji website as an example, the number of requests is 75.What is an HTTP request?The HTTP protocol defines how a web client requests web pages from a web server and how the server delivers web pages to the client. The HTTP protocol adopts 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 will not know to transmit files to your browser for display. The more requests there are, the longer it 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 in 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 search online will yield many methods on how to merge CSS and JS files. Various caching plugins usually include this feature, for example,WP Rocket Note: The fine print below mentions that it is not recommended for sites already using HTTP/2. This is why Naibabiji does not enable CSS and JS compression. 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 withgtmetrixand you will notice a significant improvement in scores. However, if your website server already uses HTTP 2.0, deliberately merging files just for a higher score is not advisable.

Manual methods to reduce the number of HTTP requests

Although it was mentioned above that sites using HTTP 2.0 do not need to merge CSS and JS files for the sake of scores, it does not mean there is no need to reduce HTTP requests. To make the website faster, we can still manually streamline some HTTP requests. (Of course, if the website is already fast, this optimization is purely for perfectionists.)

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 how to use image sprites, you can refer tow3school's article。

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 an excellent choice.

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 only loaded when they come into the browser window; resources outside the viewport are not loaded. The WP Rocket caching plugin includes this feature by default. If you are not using WP Rocket, you can install other plugins. You can refer toLightning Blog's article。

7. Add cache expiration time

Some caching plugins help add a browser cache expiration time to your website's static resources. Once a user visits your site, static resources already cached in the browser will not be reloaded from the server on subsequent visits, improving speed.

8. Ignore irrelevant resources

Asset CleanupThis plugin can help you achieve this functionality. What are irrelevant resources? For example, a contact form is typically 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, thereby reducing the number of requests.

9. Merge CSS files

For very small CSS files, we can merge them into one CSS file, reducing requests (not necessary for HTTP 2.0).

10. Control the number of images in posts

If an article contains dozens of images, the number of requests cannot be significantly reduced. Improving website speed enhances user experience and benefits SEO optimization. Therefore, if your website is very slow, it is highly necessary to optimize.Website Speed Optimization, that's all aboutan optimization method for website speed by reducing HTTP requests。