Hoe maak je minder HTTP-verzoeken in WordPress & GTmetrix YSlow

U hoeft minder HTTP-verzoeken op uw WordPress-site te doen?


Dit betekent alleen dat u het aantal elementen (verzoeken) op uw site moet verminderen.

Maak minder HTTP-verzoeken

Het combineren van CSS- en JavaScript-bestanden kan helpen, maar er zijn andere optimalisaties die HTTP-verzoeken kunnen verminderen, zoals het selectief uitschakelen van plug-ins die niet op specifieke pagina’s hoeven te worden geladen, het uitschakelen van WooCommerce-scripts en -stijlen op niet-eCommerce-pagina’s of het vermijden van een hoge CPU plug-ins die een groot aantal verzoeken genereren en uw site vertragen.

Minder HTTP-verzoeken doen is een aanbeveling in GTmetrix, Pingdom en andere tools voor het testen van snelheid. De onderstaande aanbevelingen helpen het aantal verzoeken te verminderen en uw site sneller te maken.

1. Combineer CSS Stylesheets + JavaScript

CSS Stylesheets + JavaScript combineren betekent dat u alles in uw CSS-bestanden moet kopiëren / plakken in één enkel bestand. Hierdoor kunnen browsers 1 enkel verzoek om een ​​CSS-bestand indienen in plaats van meerdere verzoeken. De meeste cacheplug-ins hebben een optie om uw CSS + JavaScript-bestanden te combineren.

Stap 1: Zoek in de instellingen van uw cacheplug-in de optie om CSS + JavaScript te combineren en te verkleinen.

Stap 2: Schakel elke instelling één voor één in en test de resultaten in GTmetrix.

Minify Combineer CSS-bestanden

Minify Combineer JavaScript-bestanden

Stap 3: Controleer op zichtbare fouten op uw website. Als je fouten ziet, bekijk dan de broncode, zoek de problematische bestanden en sluit ze uit van je CSS- of JavaScript-verkleiningsinstellingen. Als uw schuifregelaar bijvoorbeeld verdwijnt bij het inschakelen van een bepaalde instelling, controleer dan uw schuifregelaarbestanden in de broncode en sluit het problematische bestand uit. Als je geen fouten ziet, is dit niet nodig.

Als alternatief kunt u uw CSS-bestanden handmatig combineren in WordPress onder Uiterlijk > Thema-editor. U kopieert en plakt de inhoud in alle bestanden in één CSS-bestand.

WordPress CSS-bestanden

2. Schakel plug-ins selectief uit

Veel plug-ins lopen over uw hele site, zelfs op pagina’s waar ze niet nodig zijn.

Contactformulieren, sociaal delen, rich snippet, slider en enkele andere plug-ins hoeven alleen op bepaalde inhoudstypen te worden geladen. Je kunt ze overal elders uitschakelen met Activa opschonen.

Door plug-ins uit te schakelen op pagina’s waar ze niet hoeven te worden geladen, resulteert dit in minder HTTP-verzoeken. Dit is niet beperkt tot plug-ins; scripts en stijlen kunnen ook worden uitgeschakeld op bepaalde pagina’s (bijv. WooCommerce-scripts, stijlen, winkelwagenfragmenten kunnen worden uitgeschakeld op niet-eCommerce-pagina’s).

Stap 1: Installeer Asset CleanUp of Perfmatters (beide laten je selectief plug-ins uitschakelen).

Stap 2: Bewerk een pagina of bericht, scrol omlaag naar het gedeelte Opruimen van items en bekijk welke CSS + JavaScript-bestanden op de pagina worden geladen. Deze kunnen afkomstig zijn van plug-ins, thema’s of externe scripts.

Schakel externe WordPress-scripts uit

Stap 3: Schakel alle plug-ins en verzoeken uit die u niet nodig heeft op die pagina. U kunt ze op één enkele pagina, op uw hele site, per berichttype uitschakelen of RegEx (reguliere expressies) gebruiken om ze op specifieke URL-patronen uit te schakelen. RegEx is alleen inbegrepen bij Perfmatters of Asset CleanUp Pro.

3. Schakel WooCommerce Scripts, Styles, Cart Fragments uit

WooCommerce-sites genereren natuurlijk meer HTTP-verzoeken.

Ze vereisen niet alleen meestal meer plug-ins, maar ze laden ook extra WooCommerce-scripts, stijlen, en winkelwagen fragmenten. Net zoals u plug-ins selectief kunt uitschakelen in de vorige stap, kunt u ook selectief WooCommerce-verzoeken uitschakelen die op uw hele site worden geladen.

Gebruik Asset CleanUp of Perfmatters om deze uit te schakelen op pagina’s waar ze niet hoeven te worden geladen:

Asset CleanUp WooCommerce

Als alternatief kunt u Perfmatters deze met 1 klik uitschakelen:

prestmatie optimalisatie van woocommerce

4. Vermijd hoge CPU-plug-ins

Hoge CPU-plug-ins kunnen een heleboel HTTP-verzoeken genereren.

Dit zijn meestal sociaal delen, statistieken (analyse), schuifregelaars, portfolio’s, paginabuilders, kalenders, chat en plug-ins voor contactformulieren. Vermijd in feite elke plug-in die externe verzoeken van externe websites ophaalt, doorlopende processen uitvoert of het laden duurt lang.

Stap 1: Controleer op langzame plug-ins in GTmetrix Waterfall of Query Monitor.

Slow-WordPress-plug-in

Stap 2: Vermijd bekende hoge CPU-plug-ins.

  1. Voeg dit toe
  2. AdSense Click Fraud Monitoring
  3. Alles-in-één evenementenkalender
  4. Backup Buddy
  5. Beaver Builder
  6. Betere WordPress Google XML Sitemaps
  7. Broken Link checker (gebruik Dr. Link Check)
  8. Constant contact voor WordPress
  9. Contactformulier 7
  10. Bekijk alle 65 langzame plug-ins

Stap 3: Vervang langzame plug-ins door snellere, lichtgewicht plug-ins. Onderzoek en testen is vereist.

5. Vervang plug-ins met code

U kunt veel plug-ins vermijden door ze te vervangen door code.

Voorbeelden:

  • Google Fonts: host uw fonts lokaal
  • Google Analytics-trackingcode: handmatig invoegen
  • Inhoudsopgave: ontwerp het handmatig in HTML + CSS
  • Ingesloten tweets of Google Maps: maak in plaats daarvan een screenshot
  • Ingesloten Facebook-widget: vervang deze door de daadwerkelijke Facebook-widget

Consolidatie van plug-ins helpt ook. Een klassiek voorbeeld is het gebruik van WP Rocket, dat wordt geleverd met het lokaal hosten van lettertypen, analyses en Facebook Pixel, lui laden van afbeeldingen en video’s, opschonen van databases, vooraf laden, hartslagcontrole en integratie van zowel Cloudflare als meerdere CDN’s. Bij andere cacheplug-ins (aangezien de meeste van hen deze functies niet hebben), zou je 6-7 extra plug-ins moeten installeren om die snelheidsoptimalisaties te krijgen, wanneer ze ingebouwd zijn in WP Rocket.

6. Elimineer externe scripts

Externe scripts zijn alles dat verzoeken van externe websites ophaalt.

Google Fonts kunnen gecombineerd worden in 1 bestand. Video’s kunnen lui worden geladen en het iframe kan worden vervangen door een voorbeeldafbeelding. Veel scripts kunnen worden geoptimaliseerd, andere niet. Hieronder staan ​​enkele voorbeelden.

  • Google Fonts: combineer lettertypen en host ze lokaal met plug-ins zoals WP Rocket, Autoptimize, OMGF, Self-Hosted Google Fonts en Asset CleanUp.
  • Google Analytics: host trackingcode lokaal in WP Rocket / CAOS Analytics.
  • Google AdSense: laad asynchroon en probeer Cloudflare Rocket Loader.
  • Google Maps: maak een screenshot van de Google Map en voeg een link naar een routebeschrijving toe wanneer mensen op de afbeelding klikken (dit ziet er net zo goed uit als een kaart)!
  • Google Tag Manager: doet meestal meer kwaad dan goed wanneer je meerdere scripts probeert te combineren. Mag alleen worden gebruikt voor grote, niet-geoptimaliseerde sites.
  • Ingesloten video’s: gebruik WP Rocket of WP YouTube Lyte om luie video’s te laden en vervang het iframe door een voorbeeldafbeelding (video’s zijn een erg zwaar element).
  • Ingesloten widgets + berichten: maak screenshots in plaats van ze in te sluiten.
  • Facebook Pixel: WP Rocket kan browsercaching toevoegen aan Facebook Pixel.
  • Gravatars: niets werkte voor mij behalve het uitschakelen van Gravatars (WP Rocket gebruikt ze ook niet op hun blog). Maar je kunt Harrys, FV of de Optimum Gravatar Cache proberen, of probeer uitbreidbare opmerkingen te verbreken of te verbergen.
  • Plug-ins voor sociaal delen: genereer beruchte verzoeken van Facebook, Twitter en sociale netwerken om te vernieuwen zoals tellingen. Probeer een snellere plug-in zoals Sociale pug, Mashsharer, Sociale moduleAddToAny, WP Social Sharing, of Eenvoudig sociaal delen

7. Combineer Google Fonts

Google Fonts kunnen worden gecombineerd om 1 verzoek te genereren in plaats van meerdere verzoeken.

Google-lettertypen-GTmetrix

De volgende plug-ins hebben opties voor het optimaliseren van Google-lettertypen:

  • WP Rocket
  • Activa opschonen
  • Autoptimiseren
  • OMGF

De beste methode is echter om Google Fonts lokaal te hosten. Dit houdt in dat u uw lettertypen rechtstreeks downloadt van de Google Fonts-website terwijl u minimaal bent met het aantal lettertypen en lettertypegewichten. Gebruik vervolgens een tool zoals Transfonter of converteer de lettertypen naar weblettertypebestanden. Vervolgens uploadt u de nieuwe weblettertypebestanden naar uw map wp-content / uploads, voegt u het aangepaste lettertype toe aan CSS en test u het lettertype om te controleren of het werkt. Nogmaals, zie die link voor een volledige tutorial.

Transfonter-Google-Font-Conversion

7. Verklein HTML, CSS, JavaScript

Bestanden verkleinen wordt meestal gedaan door uw cacheplug-in (zie stap 1).

Maar soms kan dit uw website kapot maken. In dit geval moet u elke instelling één voor één testen, controleren op problematische bestanden in de broncode en die bestanden vervolgens uitsluiten van verkleining met uw cacheplug-in. Als u geen zichtbare fouten ziet, hoeft u dit niet te doen.

8. Optimaliseer CSS-levering

Dit zou de render-blokkerende bronnen item in PageSpeed ​​Insights.

WP Rocket, Autoptimize en andere vergelijkbare plug-ins zouden een optie moeten hebben om de CSS-levering te optimaliseren. Ga gewoon naar je instellingen en zorg ervoor dat je dit hebt ingeschakeld, en het zou het moeten repareren.

Optimaliseer CSS-levering

9. Stel gecombineerde JavaScript-bestanden asynchroon uit / laad deze

Asynchroon JavaScript betekent dat de bestanden worden geladen na de pagina is klaar met downloaden.

Dit kan gedaan worden met WP Rocket of Async JavaScript en zou de verwijder JavaScript-item dat de weergave blokkeert. Async JavaScript geeft u volledige controle over welke scripts u een ‘async’ of ‘uitstel ‘kenmerk wilt toevoegen, terwijl WP Rocket JavaScript automatisch met één klik uitstelt.

JavaScript-bestanden

10. Luie video’s laden

Ingesloten video’s zijn externe bronnen die HTTP-verzoeken genereren.

Het kan 2+ seconden duren om te laden! Hoewel u deze niet volledig kunt elimineren, kunt u dat wel het laden van video’s vertragen totdat gebruikers naar beneden scrollen (luie belasting) en op de afspeelknop klikken (lichte insluiting).

Je hebt hier een paar opties: je kunt WP Rocket gebruiken om lui laden in te schakelen en het YouTube-iframe te vervangen door de voorbeeldafbeelding. Maar als je geen WP Rocket hebt, kun je de WP YouTube Lyte-plug-in of volg dit tutorial over lichte YouTube-insluitingen. Beiden werken goed.

Hier is een voorbeeld (en een geweldige video over WordPress Speed):

11. Voeg een CDN toe

CDN’s kunnen helpen om minder HTTP-verzoeken te doen.

In plaats van ervoor te zorgen dat uw oorspronkelijke server reageert op een verzoek, zullen de datacenters van een CDN de bandbreedte ontlasten en de belasting van de oorspronkelijke server verlichten. Cloudflare is gratis, dus het is een goed idee.

Meerdere CDN’s = meer datacenters = snellere levering van inhoud en meer offloading van middelen. Veel mensen beginnen met Cloudflare en kijken uiteindelijk naar StackPath wanneer ze meerdere CDN’s gebruiken (ik gebruik beide momenteel). KeyCDN is ook goed. Dit wordt een “ketting” van CDN’s genoemd.

Meerdere CDN’s instellen
Met Cloudflare wijzen ze je 2 naamsevers toe die je in je domeinregister wijzigt. Met andere CDN’s zoals StackPath en KeyCDN, wijzen ze u een CDN-URL toe die u in het CDN-URL-veld in uw cacheplug-in plakt (de meesten hebben het) of CDN Enabler gebruiken.

Meerdere CDN's

12. Minimaliseer omleidingen

Onnodige omleidingen kunnen extra HTTP-verzoeken veroorzaken.

U moet uw GTmetrix-rapport bekijken om te zien wat deze fout veroorzaakt. Wordt het gegenereerd door een extern script of plug-in op uw site? Heb je geprobeerd dat script te optimaliseren of op zoek naar een lichtere plug-in? Is het omdat u uw domeinversie heeft gewijzigd in niet-WWW of HTTPS, maar niet alle links / afbeeldingen op uw site heeft bijgewerkt om de nieuwe versie weer te geven?

Minimaliseer omleidingsfouten

Algemene oorzaken

  • Slechte plug-ins
  • Externe scripts
  • Gewijzigd in WWW versus niet-WWW, maar de links zijn niet geüpdatet
  • Gewijzigd in HTTPS versus niet-HTTPS maar heeft de links niet bijgewerkt

13. Optimaliseer afbeeldingen

Om HTTP-verzoeken veroorzaakt door afbeeldingen te verminderen, zijn er 3 primaire manieren om afbeeldingen te optimaliseren:

Serveer geschaalde afbeeldingen: formaat van grote afbeeldingen verkleinen. GTmetrix vertelt u welke afbeeldingen te groot zijn en naar de juiste afmetingen waarnaar ze moeten worden bijgesneden / verkleind. Probeer een spiekvel voor afbeeldingsdimensies te maken door de afmetingen van uw schuifregelaars, blogafbeeldingen over de volledige breedte, widgets en andere delen van uw website te meten. Zorg er vervolgens voor dat u de afmetingen van afbeeldingen wijzigt naar de juiste afmetingen voordat u ze uploadt. Als u dit doet, mag u nooit geschaalde afbeeldingsfouten hebben weergegeven.

Afbeeldingen optimaliseren (compressie zonder verlies): gebruik een plug-in zoals ShortPixel (aanbevolen), Smush of Imagify om afbeeldingen te comprimeren. Hoewel deze plug-ins verliesloos zeggen, merkt u soms een klein kwaliteitsverlies. Daarom is het het beste om een ​​back-up van uw afbeeldingen te maken en er een paar te testen voordat u alle afbeeldingen op uw website in bulk optimaliseert, om er zeker van te zijn dat u tevreden bent met de kwaliteit.

Geef afbeeldingsafmetingen op: voeg een breedte + hoogte toe aan de HTML of CSS van de afbeelding. Dit wordt automatisch gedaan in de Visual Editor, maar niet in aangepaste HTML, sommige paginabuilders en mogelijk andere delen van uw WordPress-site. GTmetrix laat u zien welke afbeeldingen deze fouten bevatten en geeft u de juiste afmetingen. Om de fout op te lossen, moet u de afbeelding in uw WordPress-dashboard lokaliseren, de HTML of CSS bewerken en vervolgens de breedte + hoogte toevoegen.

Moet nog steeds minder HTTP-verzoeken indienen?

Als je nog steeds hulp nodig hebt, laat me een reactie achter. De WordPress versnelt Facebook-groep is ook nuttig, of u kunt ons inhuren voor WordPress-snelheidsservices met vóór + na GTmetrix-rapporten.

WordPress versnelt Facebook-groep

Veel Gestelde Vragen

&# x1f680; Wat veroorzaakt HTTP-verzoeken?

HTTP-verzoeken zijn alles wat een verzoek naar de server maakt (bijvoorbeeld, een enkele afbeelding creëert 1 verzoek). Het tabblad Waterval van GTmetrix vertelt u dat alle verzoeken op een pagina worden geladen.

&# x1f680; Wat zijn 5 dingen die u kunt doen om HTTP-verzoeken te verminderen?

5 eenvoudige dingen die u kunt doen zijn CSS + JavaScript-bestanden combineren, luie afbeeldingen en video’s laden, onze lijst met plug-ins met hoge CPU vermijden, plug-ins van bepaalde pagina’s / berichten selectief uitschakelen met Perfmatters of Asset CleanUp en uw lettertypen optimaliseren.

&# x1f680; Zal een cache-plug-in helpen bij het verminderen van HTTP-verzoeken?

Ja, een goede cacheplug-in zou moeten helpen bij het verkleinen en combineren van bestanden, en het verminderen van HTTP-verzoeken indien correct geconfigureerd. Ik heb tutorials voor bijna elke cache-plug-in.

&# x1f680; Zal het repareren van andere GTmetrix-items HTTP-verzoeken verminderen??

Ja, in veel gevallen zal het vooral bestanden verkleinen en combineren, omleidingsfouten elimineren en het gebruik van een CDN kan ook helpen.

&# x1f680; Welke cacheplug-in vermindert HTTP-verzoeken het meest en hoe deze te configureren?

Ik raad WP Rocket aan, dat in de meeste Facebook-peilingen als beste werd beoordeeld en meer functies voor snelheidsoptimalisatie heeft dan de meeste cacheplug-ins, daarom levert het meestal betere scores en laadtijden op in GTmetrix. Bekijk mijn tutorial over het configureren van de WP Rocket-instellingen.

Bedankt voor het lezen :)

Proost,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map