WordPress make fewer http requests

New Page

  1. House
  2. Resource Center
  3. Blog
  4. Website speed
  5. 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

hacer menos solicitudes http

Shares

Circle

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.

To download

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.

Contents

  1. What are HTTP requests?
  2. Why is it important to reduce HTTP requests?
  3. How to see and analyze your site’s HTTP requests
  4. How to Optimize and Make Fewer HTTP Requests in WordPress
  5. 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.

NEW-Suganthan-Mohanadasan-150x150Suganthan Mohanadasan by @Suganthanmn View plans What are HTTP requests?

When you create a website, it has many different parts. You have the various image files that you use on a page, the CSS style sheets that control how the content looks, the JavaScript files that add all those cool features, and so on.

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?

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.

See packages

ACE_CTA_cdn-limit-update-illu

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:

Example of gtmetrix results for a prueba website

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:

Example of waterfall chart from gtmetrix

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:

http requests in gtmetrix

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:

buscando requests from woocommerce in gtmetrix

This way you can see if the plugins you are using are adding a lot of HTTP requests (especially slow loading requests).

KA_logo

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

Joe_CTA

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 :

  • Supprimez les requêtes HTTP. Si possible, vous devez supprimer complètement toutes les requêtes HTTP inutiles. Par exemple, si vous avez un plugin qui n’ajoute aucune valeur à votre site et charge ses propres CSS et JavaScript, supprimez complètement ce plugin pour vous débarrasser de toutes ses 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:

buscar complementos in gtmetrixHow 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) :

busque el complemento AddThis que muestre seis de sus propias HTTP solicitations

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.

Free download

How to Speed ​​Up WordPress Site

  • Page 1
  • generic-page
  • generic-page
  • page 2

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 Administered Script and the Perfmatters Add-inThe 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.

Some examples:

  • 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.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:

  1. Upload the images you want to combine into the tool.
  2. L’outil vous donnera ensuite un fichier image combiné, ainsi qu’un code CSS pour chaque image que vous avez téléchargée.
  3. Téléchargez le fichier image combiné sur votre site WordPress.
  4. 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.

10. Combine CSS and JavaScript Files

Between your WordPress theme and your plugins, your site is probably going to be loading multiple CSS stylesheets and JavaScript files, which means multiple HTTP requests just for the browser to download the CSS and JavaScript it needs to render the page.

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.

Many WordPress caching plugins include functionality for combining CSS and JavaScript files. For example, WP Rocket, which you can use at Kinsta, lets you activate both with just a few clicks.

Go to the File Optimization tab in WP Rocket settings. Next, enable minification, then combine the files:

How to Combine CSS and JavaScript in WP RocketHow to Combine CSS and JavaScript in WP Rocket

For a more in-depth look, check out our comprehensive WP Rocket guide.

You can also use Autoptimize to combine CSS and JavaScript files. To combine files, go to Settings → Auto-Optimize and choose options for:

  • 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.

Basically, if you’re hosting at Kinsta, you might not need to do this step to improve your page load times. This is because Kinsta customers can access code minification functionality right in their MyKinsta dashboard. This will help boost overall optimization by allowing customers to enable automatic CSS and JavaScript minification with a single click.

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.

11. Defer Render-Blocking JavaScript

Deferring render-blocking JavaScript does not eliminate HTTP requests per se. However, it optimizes their loading, which can have the same effect on your site’s perceived loading 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.

Google Google Ubersetzer

Google Translator from Google

Google Traduction


Video WordPress make fewer http requests

Related Posts

Free chat room code for my website

Contents1 How to set up a free chat room on the website.2 3 comentarios2.1 Trackbacks/Pingbacks2.2 Submit a Comment Cancel reply3 How to Create a Chat Room Website…

Background image full screen css

Contents1 Cómo – Full Page Image1.1 Example1.2 Example2 CSS background image tamaño tutorial: how to codify a complete page background image3 Perfect Full Page Background Image3.1 Méthode CSS géniale,…

WordPress leverage browser caching

Contents1 Aproveche el almacenamiento in hidden del navegador1.1 Will it works for my website?1.2 Where are plugin options1.3 Some JavaScript files still display under Leverage Browser Caching1.4…

WordPress post to facebook page

Contents1 How to Automatically Post to Facebook from WordPress1.1 Download Now: How to Launch a WordPress Website [Free Guide + Checklist]1.2 1. Create an IFTTT account.1.3 2….

Download images from wordpress media library

Contents1 How to export your WordPress media library1.1 Download maintenant : How to launch a WordPress website [Free Guide + Checklist]1.2 How to export your WordPress media…

WordPress single post template

Contents1 How to Create Custom Unique Post Templates in WordPress2 Post Template Files2.1 author.php2.2 Fecha.php3 Handbook navigation4 How to Create Custom Single Post Templates in WordPress5 Video…