- 1 How to improve HTTP requests in WordPress (increases the speed of the site easily)
- 2 Profitez de limites de bande passante CDN plus élevées sur nous
- 3 Get certified and stand out from the competition.
- 4 Comment accélérer votre site WordPress
- 4.1 3. Conditionally load scripts that are not needed sitewide
- 4.2 4. Delete unnecessary images (and optimize the rest)
- 4.3 5. Use Lazy Loading for Images and Videos
- 4.4 6. Limit Custom Fonts Use and/or Use System Fonts (Same for Icon Fonts)
- 4.5 7. Disable WordPress Emojis
- 4.6 8. Reduce/Eliminate Third-Party HTTP Requests
- 4.7 9. Combine Images with CSS Sprites
- 5 Video WordPress make fewer http requests
- Resource Center
- Website speed
- How to Make Fewer HTTP Requests in WordPress (Easily Increase Site Speed)
How to improve HTTP requests in WordPress (increases the speed of the site easily)
Matteo Duo, June 22, 2022
However many HTTP requests tenga su sitio, más lento se cargará. Entonces, if you can reduce the quantity of HTTP requests and optimize how you load, you can improve the performance of your web site.
In this publication, lo guiaremos has través de todo lo que necesita saber sober cómo hacer menos HTTP solicitudes en WordPress.
¿Apurado? Save this article as a PDF.
¿Cansado de desplazarse? Download a PDF version to learn more without connecting with friends more easily.
Comenzaremos with a basic introduction to HTTP requests, why it is important and how to analyze WordPress site requests.
Next, we’ll share some tips and strategies you can implement to reduce your site’s requests. In addition to helping you with the “Make fewer HTTP requests” message in GTmetrix, these strategies will also help you with the “Avoid chaining critical requests” message in Google PageSpeed Insights.
- What are HTTP requests?
- Why is it important to reduce HTTP requests?
- How to see and analyze your site’s HTTP requests
- How to Optimize and Make Fewer HTTP Requests in WordPress
- Best WordPress Plugins to Make Fewer HTTP Requests
Slow website? ⏱ Too many HTTP requests could be the culprit. Check out this guide to making fewer requests here 💥Click to Tweet
Prefer to watch the video version?
Kinsta spoiled me so much that I now demand this level of service from every provider. We also try to be at this level with our SaaS tool support.
Suganthan Mohanadasan by @Suganthanmn View plans What are HTTP requests?
Lorsqu’une personne visite votre site Web, son navigateur a besoin d’un moyen de télécharger toutes les ressources requises pour cette page à partir de votre serveur. Pour ce faire, il envoie des requêtes HTTP au serveur pour chaque ressource individuelle.
For example, it might say, “hey server, I need that coolimage.png file” and “hey server, I also need the CSS stylesheet for that contact form plugin“. The server then responds to those requests with the files in question.
Once the web browser gets those files, it can assemble the web page for your visitor. Of course, it’s a little more complicated than that, but that’s the basic idea.
HTTP, short for Hypertext Transfer Protocol, is how these computers (the visitor’s browser and your webserver) communicate.
One important thing to understand is that each separate element is a separate HTTP request. For example, if you have five image files on a webpage, the browser needs to make five separate HTTP requests, one for each image.
Similarly, if you use four WordPress plugins and each plugin adds its own CSS stylesheet, the visitor’s browser will need to make four separate HTTP requests, one for each plugin’s stylesheet.
Why Is It Important to Reduce HTTP Requests?
In general, the more HTTP requests your website has, the slower it’s going to load. So if you want to make your website load faster, you need to optimize and reduce the number of HTTP requests that your site requires.
While this is a bit of an oversimplification, the basic idea is that the web browser will only display the website to your visitor once it’s finished downloading all of the HTTP requests (though there are some tactics to tell the browser it’s ok to wait for certain files).
Donc, si un site Web doit faire 70 requêtes HTTP avant de pouvoir afficher la page, cela prendra plus de temps que s’il doit faire 40 requêtes HTTP.
De plus, certaines requêtes HTTP “bloqueront” d’autres requêtes HTTP, ce qui signifie que le navigateur ne peut pas commencer à télécharger certaines requêtes HTTP tant qu’il n’a pas fini de télécharger les requêtes HTTP qui le précèdent.
En résumé, lorsque vous effectuez moins de requêtes HTTP, vous accélérez le chargement de votre site Web.
Profitez de limites de bande passante CDN plus élevées sur nous
Power more websites with one of the fastest and widest CDN networks available. Kinsta customers receive up to 500% more CDN bandwidth at no additional cost.
How to see and analyze your site’s HTTP requests
Above, you learned that all things being equal, reducing the number of HTTP requests will speed up your site. However, all HTTP requests aren’t always “equal”. Some HTTP requests are bigger than others. Some are slower than others.
For example, the request for a huge 3 MB image file will take a lot longer than the request for a tiny 20 KB image.
If you want to make the biggest improvement to your site, focusing on the big, slow-loading HTTP requests first will have the biggest return on your investment.
To analyze your site’s HTTP requests, you can use something called Waterfall analysis.
Most speed test tools offer this, but the interfaces at GTMetrix and Pingdom are very convenient. You can also use your browser’s developer tools. However, we’ll use GTmetrix for our screenshots.
Once you plug in your URL, you’ll see a basic summary box at the top. This shows you how many HTTP requests your site has, but it doesn’t break down the individual requests:
To analyze your individual requests, go to the Waterfall tab below.
Here, you’ll see a list of each individual HTTP request on your site along with information on how long that HTTP request took to download:
You can see how not all HTTP requests are equal. For example, the 839.3 KB image takes 1.12s while the 57.6 KB image took just 87.5 ms:
You can also find HTTP requests from the different WordPress plugins that you’re using by searching for the name of that plugin’s folder on your server. For example, you can see that WooCommerce adds seven of its own HTTP requests:
This way you can see if the plugins you are using are adding a lot of HTTP requests (especially slow loading requests).
Get certified and stand out from the competition.
Become a certified expert with our Kinsta Academy course, How to Speed Up Your WordPress Site. Learn everything from small tweaks to site-wide changes that will drastically improve your website’s performance.
Start the free course
How to Optimize and Make Fewer HTTP Requests in WordPress
À un niveau élevé, il existe deux grandes stratégies pour faire moins de requêtes HTTP :
- Combine HTTP requests. If you have HTTP requests that you absolutely must load, you can combine them into a single file. For example, instead of six small CSS files, you can combine them into a single larger CSS file, which will still load faster because the browser needs to make fewer requests (this isn’t always true with HTTP/2, which we’ll discuss below).
We’ll start with the tactics that focus on removing HTTP requests and then we’ll get into how to combine the remaining HTTP requests. The basic idea is to remove what you can and then combine whatever is left.
1. Remove Unnecessary WordPress Plugins
Pour commencer, vous voudrez utiliser l’analyse en cascade pour extraire toutes les demandes de vos plugins. Vous pouvez le faire en recherchant des “plugins”, qui récupèreront toutes les requêtes HTTP provenant du dossier wp-content/plugins .
Si vous survolez le nom du fichier, vous pouvez voir de quel plugin il provient. Par exemple, vous pouvez voir ici une demande du plugin slider que vous utilisez peut-être.
Some further research would reveal that Slider Revolution adds three of its own HTTP requests, even though this test page does not contain any sliders:
How to see where an HTTP request is coming from
If you’re using Slider Revolution for a key slider, then maybe you need to keep it. But if you installed it to test it, then later removed the slider, and you’re now not really using it…then you should remove it to get rid of those HTTP requests.
Basically, you want to go through the entire list and ask yourself if each plugin is really adding value to your site. If a plugin isn’t (but is adding HTTP requests), then you’ll be better off removing it.
2. Replace Heavy Plugins With More Lightweight Ones
Once you’ve trimmed any unnecessary plugins, the next step is to see if you can replace any plugins you’re using with more lightweight alternatives.
For example, let’s say you want to add social share buttons to your site. That’s a good feature to have, but some social share plugins can add a lot of HTTP requests.
Par exemple, le populaire plugin AddThis ajoute six de ses propres requêtes HTTP (y compris certaines requêtes externes – plus sur celles en une seconde) :
Vous pouvez réduire une grande partie de cette graisse en utilisant une alternative plus optimisée telle que NovaShare ou Grow by MediaVine.
LIVRES ÉLECTRONIQUES KINSTA
Comment accélérer votre site WordPress
Is your WordPress site slow? Whether you’re new to WordPress or you’re a seasoned developer, you’ll find over 200 helpful tips to speed up your site in this free guide.
3. Conditionally load scripts that are not needed sitewide
At this point, you should have removed any plugins that are not needed anywhere on your site. However, there is another class of plugins that could cause problems – plugins that are only needed on specific parts of your site but load their scripts everywhere.
For example, take the popular Contact Form 7 plugin. You probably only need this plugin on a couple of pages (e.g. your “Contact Us” page). However, Contact Form 7 loads its scripts on every single page on your site. So, for example, Contact Form 7 is still adding some HTTP requests to your blog posts even though your blog posts don’t have any contact forms.
Another example could be WooCommerce if you’re only using it as a payment processor. WooCommerce will still load its scripts everywhere, even though you really only need them on the cart and checkout pages for this use case.
An advanced tactic here is to conditionally load plugins only where they’re needed. For example, you could let Contact Form 7 load on your “Contact Us” page, but disable it everywhere else.
If you’re not a developer, you can use plugins like Asset CleanUp or Perfmatters to do this without code. With Perfmatters, you must first enable the Script Manager. Then you can open the Script Manager to view all scripts that load on a page and disable unnecessary ones:
The script manager in the Perfmatters plugin
Be careful because you could cause problems if you accidentally disable a script that is really needed . While this is a useful tactic, it’s also an advanced tactic.
If you don’t feel confident, you can just skip this step or hire a developer to help you.
4. Delete unnecessary images (and optimize the rest)
Bien utilisées, les images rendent votre site Web plus convivial et attrayant. Ils ajoutent de la valeur à votre site.
However, each image on your site is a separate HTTP request. So if you have images that aren’t adding value, it’s best to remove them to eliminate those HTTP requests.
For example, is that funny GIF worth it? It might be… but it also might not – you need to think about the trade-offs whenever you’re adding more images to your content.
Finally, make sure to resize and compress the images that remain. While this won’t reduce the number of HTTP requests by itself, it will reduce the size of those HTTP requests, which will make them load faster.
5. Use Lazy Loading for Images and Videos
With lazy loading, your site will wait to load below-the-fold images, videos, and iframes until a user starts scrolling down.
Because these resources don’t load right away, there’s no need to make an HTTP request for the initial page load.
As of WordPress 5.5, WordPress now includes native lazy loading for images using the HTML loading attribute. For some other ways to implement lazy loading (including for video files), you can check out our complete guide to WordPress lazy loading.
6. Limit Custom Fonts Use and/or Use System Fonts (Same for Icon Fonts)
Custom fonts are great for improving the design and user experience on your site. However, you need to be careful with how you use them because each custom font type that you use adds another HTTP request.
If you’re going to use custom fonts, make sure to stick to a small number. Do you really need a different font for your post title and your post body? Or could you use the same font? Do you really need all five font weights? Or could you just choose two?
The same holds true for icon fonts such as Font Awesome and IcoMoon. Icon fonts can be useful, but you probably don’t need to load multiple icon font libraries. It’s better to pick just one icon font library and stick with that.
Finally, if you want to go one step further and completely eliminate HTTP requests related to your site’s fonts, you can consider using a system font stack. While this will give you less flexibility in terms of design, it also means that your visitors won’t have to load any font files just to render your site.
(Suggested reading: How to Change Fonts in WordPress).
7. Disable WordPress Emojis
By default, WordPress adds its own HTTP request for emojis. While it’s only a single 5.1 KB HTTP request, this file has long been a thorn in the side of WordPress performance fans. Here at Kinsta, we love WordPress performance, which is why we have an entire guide on how to disable WordPress emojis.
The simplest option is to just install and activate the free Disable Emojis (GDPR friendly) plugin. However, you can read our full guide for some other options.
After you do this, your HTTP request count will drop by one and you can still use emojis 😃
8. Reduce/Eliminate Third-Party HTTP Requests
So far, we’ve focused mainly on reducing the HTTP requests for files on your WordPress site’s server. However, your visitors’ browsers might also need to request files from third-party servers.
These requests can be even more troublesome because your site is at the mercy of the speed of those third-party servers.
- Google Analytics – the tracking script is hosted on Google’s servers, but visitors’ browsers still need to download that file.
- Embedded YouTube videos – you’ll see lots of HTTP requests to YouTube’s servers.
- Third-party ad services – you’ll see tons of third-party requests related to serving your ads.
- Google Fonts (on Google’s CDN) – you’ll see third-party requests to Google’s servers to load your font files.
You can apply many of the same tactics from above to these third-party HTTP requests.
For example, if a plugin adds its own third-party requests (like the AddThis plugin from above does), you can remove it and use something more optimized.
For YouTube videos, you can lazy load them and replace the initial page load with an image thumbnail. This will delay adding those HTTP requests until a visitor wants to play the video.
For third-party scripts that are necessary, like Google Analytics or Facebook Pixel, you can experiment with hosting those scripts locally.
WP Rocket has built-in add-ons to host Google Analytics and Facebook Pixel locally or you can use a plugin like CAOS (Complete Analytics Optimization Suite).
We also have some guides that might help:
- How to host fonts locally
- How to host Google Analytics locally
9. Combine Images with CSS Sprites
At this point, you should’ve hopefully been able to make fewer HTTP requests from your site. Now, it’s time to get into how to combine the HTTP requests that remain, starting with images.
Another way to optimize the images on your site is to combine separate images into a single image file. Then, you can use CSS to display just a portion of that image file where needed. This is a tactic called CSS sprites.
CSS sprites work best for decorative images like logo variations or icons. You should not use CSS sprites for informational images (like images in the body of a blog post) because there are two big drawbacks:
- SEO – because you’re combining images into a single image file, you can’t rank individual images in Google Search.
- Accessibility – because you can’t add alt-text to images, people with screen readers won’t be able to understand images loaded with CSS sprites (though there are some tactics to fix this).
If you’re still confused about this topic, here’s an example CSS sprite file from Amazon – you can see how it includes a bunch of logo variations, as well as icons. Amazon uses CSS to ensure that only the relevant “part” of this image file is displayed in each location:
An example of CSS sprites from Amazon. You are using CSS to “target” only a specific part of the combined image.
Unfortunately, there is no “set it and forget it” WordPress plugin for CSS sprites. However, you can find tools to help you, like this CSS Sprite tool:
- Upload the images you want to combine into the tool.
- L’outil vous donnera ensuite un fichier image combiné, ainsi qu’un code CSS pour chaque image que vous avez téléchargée.
- Téléchargez le fichier image combiné sur votre site WordPress.
- Use the CSS code to display the image in your content. The provided CSS will automatically select only the proper portion of the combined image file.
To reduce all of these separate requests, you can combine these separate files/stylesheets into a single file/stylesheet. This is called file combination or file concatenation , depending on the tool that you’re using.
Go to the File Optimization tab in WP Rocket settings. Next, enable minification, then combine the files:
For a more in-depth look, check out our comprehensive WP Rocket guide.
- Aggregate JS files
- Aggregate CSS files
For a more in-depth look, check out our full auto-optimization tutorial.
The advantages of combining files are less clear with HTTP/2, which is what your site uses if you host at Kinsta. HTTP/2 is designed to be more efficient when transferring multiple small files, which means there is less difference between one large CSS/JS file and multiple smaller files.
We recommend you keep testing it as it may still be beneficial for some sites, but you may not notice a difference in actual page load times either.
However, many performance testing tools like GTmetrix still don’t recognize HTTP/2, so GTmetrix may still show the “Making fewer HTTP requests” message and lower your score. Remember, though, that scores don’t matter as much as actual page load times.
It can also help with the “avoid chaining critical requests” message in Google PageSpeed Insights/Lighthouse.
By deferring requests for certain files or loading them asynchronously, you can prevent certain unimportant resources from “blocking” the resources needed to quickly load the visible part of your site.
To learn more about why this happens, you can read our guide to understanding a web page’s critical rendering path.
Then you can follow our step-by-step guide to eliminating render-blocking resources in WordPress.
Best WordPress Plugins to Make Fewer HTTP Requests
If you are looking for “all in one” WordPress plugins to make fewer HTTP requests, we recommend two of the plugins from the tutorial above:
- WP Rocket
- Performance Matters
If well aún deberá evaluar manually su tema y complementos para ver if están realizando demasiadas HTTP solicitudes, estos dos complementos pueden ayudarlo a optimizar todo lo queda en su sitio una vez que haya realized la limpieza.
More HTTP requests = slower site load times. ⏳ Break that cycle with this guide to reducing your demands 📉Click to Tweet Resumen
Cada recurso separado en son site agrega una solicitud HTTP. An image is an HTTP request, a CSS-style hoja is an HTTP request, a source archive is an HTTP request, and so on.
If you are using WordPress, your theme will not be associated with HTTP requests and many complements will also be associated with HTTP requests. También tendrá solicitudes HTTP de cualquier imagen que use y secuencias de commandos de terceros qu’aggregue (como herramientas de análisis ).
Más y/o HTTP requests más great conducirán to a web site más slow. This is the reason why you will commonly see mensajes like “haga menos HTTP solicitudes” or “optimice las HTTP solicitudes” or “avoid chaining critical solicitudes” cuando utiliza herramientas de prueba de velocidad como GTmetrix o PageSpeed Insights.
To reduce the request for HTTP solicitations in your site, you can follow the steps that you detail previously.
¿Aún tienes dudas sobre cómo hacer menos HTTP requests in WordPress? ¡Cuentanos en los commentarios!
Ahorre tiempo, costos y maximice el rendimiento del sitio con:
- Instant support from WordPress alojamiento experts, 24/7.
- Cloudflare enterprise integration.
- Global Audience Alcance with 35 data centers worldwide.
- Optimización con nuestro monitoreo de rendimiento de applications integrado.
Todo eso y mucho más, en un solo plan sin contratos a largo plazo, migraciones asistidas y garantía de devolution de dinero de 30 días. Consult nostros planes o hable con ventas para encontrar el plan adecuado para usted.