Hur man gör färre HTTP-förfrågningar i WordPress & GTmetrix YSlow

Behöver göra färre HTTP-förfrågningar på din WordPress-webbplats?


Detta betyder bara att du måste minska hur många element (förfrågningar) som laddas på din webbplats.

Gör färre HTTP-förfrågningar

Att kombinera CSS- och JavaScript-filer kan hjälpa, men det finns andra optimeringar som kan minska HTTP-förfrågningar, som att selektivt inaktivera plugins som inte behöver laddas på specifika sidor, inaktivera WooCommerce-skript och stilar på sidor som inte är e-handel eller undvika hög CPU plugins som genererar stort antal förfrågningar och bromsar din webbplats.

Gör färre HTTP-förfrågningar är en rekommendation i GTmetrix, Pingdom och andra hastighetstestverktyg. Rekommendationerna nedan hjälper till att minska förfrågningarna och göra din webbplats snabbare.

1. Kombinera CSS-formatmallar + JavaScript

Kombinera CSS-formatmallar + JavaScript betyder att du måste kopiera / klistra in allt i dina CSS-filer i en enda fil. Detta gör det möjligt för webbläsare att göra en enda begäran om en CSS-fil istället för flera förfrågningar. De flesta cache-plugins har ett alternativ att kombinera dina CSS + JavaScript-filer.

Steg 1: I inställningarna för din cache-plugin hittar du alternativet att kombinera och förminska CSS + JavaScript.

Steg 2: Aktivera varje inställning en åt gången och testresultat i GTmetrix.

Förminska Kombinera CSS-filer

Förminska Kombinera JavaScript-filer

Steg 3: Kontrollera om det finns synliga fel på din webbplats. Om du ser fel kan du se källkoden, hitta problematiska filer och utesluta dem från dina CSS- eller JavaScript-minifieringsinställningar. Om till exempel skjutreglaget försvinner när du aktiverar en viss inställning, kontrollera dina skjutregelfiler i källkoden och uteslut den problematiska filen. Om du inte ser några fel finns det inget behov av detta.

Alternativt kan du manuellt kombinera dina CSS-filer i WordPress under Utseende > Temaeditor. Du skulle bara kopiera och klistra in innehållet i alla filer i en enda CSS-fil.

WordPress CSS-filer

2. Inaktivera plugins selektivt

Många plugins körs över hela webbplatsen, även på sidor där de inte behövs.

Kontaktformulär, social delning, rikt utdrag, skjutreglage och vissa andra plugins behöver bara laddas på vissa innehållstyper. Du kan inaktivera dem överallt annars med Rengöring av tillgångar.

Genom att inaktivera plugins på sidor där de inte behöver laddas resulterar detta i färre HTTP-förfrågningar. Detta är inte begränsat till plugins; skript och stilar kan också inaktiveras på vissa sidor (t.ex. WooCommerce-skript, stilar, vagnsfragment kan inaktiveras på sidor som inte är e-handel).

Steg 1: Installera Asset CleanUp eller Perfmatters (båda låter dig selektivt inaktivera plugins).

Steg 2: Redigera en sida eller ett inlägg, bläddra ner till avsnittet Rengöring av tillgångar och granska vilka CSS + JavaScript-filer som laddas på sidan. Dessa kan vara från plugins, teman eller externa skript.

Inaktivera externa skript för WordPress

Steg 3: Inaktivera alla plugins och förfrågningar du inte behöver på den sidan. Du kan inaktivera dem på en enda sida, på hela webbplatsen, efter posttyp eller använda RegEx (vanliga uttryck) för att inaktivera dem på specifika URL-mönster. RegEx ingår endast i Perfmatters eller Asset CleanUp Pro.

3. Inaktivera WooCommerce-skript, format, vagnsfragment

WooCommerce-webbplatser genererar naturligtvis fler HTTP-förfrågningar.

Inte bara kräver de vanligtvis fler plugins, utan läser också in extra WooCommerce-skript, stilar, och vagn fragment. Precis som att du selektivt kan inaktivera plugins i föregående steg, kan du också selektivt inaktivera WooCommerce-förfrågningar som laddas över hela webbplatsen.

Använd Asset CleanUp eller Perfmatters och inaktivera dessa på sidor där de inte behöver laddas:

Tillbehör CleanUp WooCommerce

Alternativt låter Perfmatters dig inaktivera dessa med 1 klick:

perfmatters woocommerce optimering

4. Undvik plugins med hög CPU

Hög CPU-plugins kan generera massor av HTTP-förfrågningar.

Dessa är vanligtvis social delning, statistik (analys), reglage, portföljer, sidbyggare, kalendrar, chat och kontaktformulär plugins. I grund och botten undviker du plugin som drar externa förfrågningar från webbplatser utanför, kör pågående processer eller bara tar lång tid att ladda.

Steg 1: Kontrollera om det finns långsamma plugins i GTmetrix Waterfall eller Fråga Monitor.

Slow-Wordpress-plugin

Steg 2: Undvik kända plugins med hög CPU.

  1. Lägg till detta
  2. AdSense Click Fraud Monitoring
  3. Allt-i-ett-händelsekalender
  4. Backup Buddy
  5. Beaver Builder
  6. Bättre WordPress Google XML-webbplatskartor
  7. Bruten länkkontroll (använd Dr. Link Check)
  8. Ständig kontakt för WordPress
  9. Kontaktformulär 7
  10. Visa alla 65 Slow Plugins

Steg 3: Byt ut långsamma plugins med snabbare, lätta plugins. Forskning och testning krävs.

5. Byt ut plugins med kod

Du kan undvika många plugins genom att ersätta dem med kod.

Exempel:

  • Google-teckensnitt: värd dina teckensnitt lokalt
  • Google Analytics spårningskod: sätt in manuellt
  • Innehållsförteckning: design det manuellt i HTML + CSS
  • Inbäddade tweets eller Google Maps: ta en skärmdump istället
  • Inbyggd Facebook-widget: ersätt med en faktisk Facebook-widget

Konsolidera plugins hjälper också. Ett klassiskt exempel är att använda WP Rocket som kommer med värdsteckensnitt, analys och Facebook Pixel lokalt, lata laddning av bilder + videor, databasrensning, förbelastning, hjärtslagskontroll och integration av både Cloudflare och flera CDN: er. Med andra cache-pluginprogram (eftersom de flesta av dem inte har dessa funktioner), måste du installera 6-7 extra plugins för att få dessa hastighetsoptimeringar, när de är inbyggda i WP Rocket.

6. Eliminera externa skript

Externa skript är allt som drar förfrågningar från webbplatser utanför.

Google-teckensnitt kan kombineras till en fil. Videor kan vara lata laddade och iframe ersättas med en förhandsvisningsbild. Många skript kan optimeras, andra inte. Nedan följer några exempel.

  • Google-teckensnitt: kombinera teckensnitt och värd dem lokalt med hjälp av plugins som WP Rocket, Autoptimize, OMGF, Google-typsnitt som är värd för själv och Asset CleanUp.
  • Google Analytics: värdspårningskod lokalt i WP Rocket / CAOS Analytics.
  • Google AdSense: ladda asynkront och prova Cloudflare Rocket Loader.
  • Google kartor: ta en sceenshot av Google Map och inkludera en länk till vägbeskrivningen när folk klickar på bilden (det ser lika bra ut som en karta)!
  • Google Tag Manager: brukar göra mer skada än nytta när man försöker kombinera flera skript. Bör endast användas för stora, opimiserade webbplatser.
  • Inbäddade videor: använd WP Rocket eller WP YouTube Lyte för att lata ladda videor och ersätta iframe med en förhandsvisningsbild (videor är ett mycket tungt element).
  • Inbyggda widgets + inlägg: ta skärmdumpar istället för att bädda in dem.
  • Facebook Pixel: WP Rocket kan lägga till webbläsarens cache till Facebook Pixel.
  • Gravatars: ingenting fungerade för mig förutom att inaktivera Gravatars (WP Rocket använder inte heller dem på deras blogg). Men du kan prova Harrys, FV eller Optimum Gravatar Cache, eller prova att bryta eller dölja utvidgbara kommentarer.
  • Sociala delning plugins: genererar ökänt förfrågningar från Facebook, Twitter och sociala nätverk för att uppdatera som räkningar. Prova en snabbare plugin som Social mops, Mashsharer, Social snapMark, WP Social Sharing, eller Lätt social andel

7. Kombinera Google-teckensnitt

Google-teckensnitt kan kombineras för att generera en begäran istället för flera förfrågningar.

Google-fonts-GTmetrix

Följande plugins har alternativ för att optimera Google-teckensnitt:

  • WP-raket
  • Rengöring av tillgångar
  • Autoptimize
  • OMGF

Den bästa metoden är dock att vara värd för Google-teckensnitt lokalt. Detta innebär att du laddar ner dina teckensnitt direkt från webbplatsen Google Teckensnitt medan du är minimal med antalet teckensnitt och teckensnittvikter. Använd sedan ett verktyg som Transfonter eller konvertera teckensnitten till teckensnittsfiler på webben. Du kommer sedan att ladda upp de nya webbfontfilerna till din wp-content / uploads-mapp, lägga till det anpassade teckensnittet i CSS och testa teckensnittet för att se till att det fungerar. Återigen, se den länken för en fullständig handledning.

Transfonter-Google-Font-konvertering

7. Förminska HTML, CSS, JavaScript

Minifiering av filer görs vanligtvis av din cache-plugin (se steg 1).

Men ibland kan detta bryta din webbplats. I det här fallet måste du testa varje inställning en efter en, kontrollera om det finns problematiska filer i källkoden och sedan utesluta dessa filer från minifiering med din cache-plugin. Om du inte ser synliga fel behöver du inte göra det.

8. Optimera CSS-leverans

Detta bör fixa render-blockerande resurser objekt i PageSpeed ​​Insights.

WP Rocket, Autoptimize och andra liknande plugins bör ha ett alternativ för att optimera CSS-leverans. Gå bara in i dina inställningar och se till att du har aktiverat detta, och det borde fixa det.

Optimera CSS-leverans

9. Uppskjut / ladda kombinerade JavaScript-filer asynkront

Asynkron JavaScript betyder att filerna laddas efter sidan är klar med nedladdningen.

Detta kan göras med WP Rocket eller Async JavaScript och borde fixa ta bort renderingsblockerande Javascript-objekt. Async JavaScript ger dig full kontroll över vilka skript du vill lägga till ett ‘async’ eller ‘skjuta’ attribut till, medan WP Rocket avviker JavaScript automatiskt med ett klick.

JavaScript-filer

10. Lazy Load Videos

Inbyggda videor är en extern resurs som genererar HTTP-förfrågningar.

Det kan ta 2+ sekunder att ladda! Du kan inte helt eliminera dessa försena inläsningen av videor tills användare bläddrar nedåt (lat belastning) och klickar på play-knappen (light embed).

Du har ett par alternativ här: du kan använda WP Rocket för att aktivera lat laddning och ersätta YouTube iframe med förhandsvisningsbilden. Men om du inte har WP Rocket kan du antingen prova WP YouTube Lyte-plugin eller följ detta handledning om lätta YouTube-inbäddningar. Båda fungerar bra.

Här är ett exempel (och en bra video om WordPress Speed):

11. Lägg till ett CDN

CDN: er kan hjälpa till att göra färre HTTP-förfrågningar.

Istället för att låta din ursprungsserver svara på en förfrågan kommer CDN: s datacenter att ladda om bandbredd samtidigt som belastningen på originalservern lättas upp. Cloudflare är gratis, så det är en bra idé.

Flera CDN: er = fler datacenter = snabbare leverans av innehåll och mer avlastning av resurser. Många människor börjar med Cloudflare och undersöker så småningom StackPath när de använder flera CDN: er (jag använder för närvarande båda). KeyCDN är också bra. Detta kallas en “kedja” av CDN: er.

Ställa in flera CDN: er
Med Cloudflare tilldelar de dig två namngivare som du ändrar i ditt domänregister. Med andra CDN: s som StackPath och KeyCDN tilldelar de dig en CDN-URL som du klistrar in i CDN URL-fältet i din cache-plugin (de flesta har det) eller använder CDN Enabler.

Flera CDN: er

12. Minimera omdirigeringar

Onödiga omdirigeringar kan orsaka extra HTTP-förfrågningar.

Du måste titta på din GTmetrix-rapport för att se vad som orsakar det här felet. Genereras det av ett externt skript eller plugin på din webbplats? Har du försökt att optimera det skriptet eller leta efter en mer lätt plugin? Beror det på att du har ändrat din domänversion till icke-WWW eller HTTPS men inte har uppdaterat alla länkar / bilder på din webbplats för att återspegla den nya versionen?

Minimera omdirigeringsfel

Vanliga orsaker

  • Dåliga plugins
  • Externa skript
  • Bytes till WWW vs icke-WWW men har inte uppdaterade länkar
  • Ändrade till HTTPS kontra icke-HTTPS men har inte uppdaterade länkar

13. Optimera bilder

För att minska HTTP-förfrågningar orsakade av bilder finns det tre primära sätt att optimera bilder:

Servera skalade bilder: ändra storlek på stora bilder för att bli mindre. GTmetrix berättar vilka bilder som är för stora och rätt dimensioner de ska beskäras / ändras till. Försök skapa ett fönster för bilddimension genom att mäta dimensionerna på dina skjutreglage, bloggbilder i full bredd, widgets och andra områden på din webbplats. Se sedan till att ändra storlek på bilderna till rätt dimensioner innan du laddar upp dem. Om du gör det borde du aldrig ha visat skalade bildfel.

Optimera bilder (Lossless Compression): använd ett plugin som ShortPixel (rekommenderas), Smush eller Imagify för att komprimera bilder. Även om dessa insticksprogram säger förlustlösa kan du ibland märka en liten kvalitetsförlust. Det är därför det är bäst att säkerhetskopiera dina bilder och testa ett par av dem innan du optimerar alla bilder på din webbplats för att se till att du är nöjd med kvaliteten.

Ange bilddimensioner: lägg till en bredd + höjd till bildens HTML eller CSS. Detta görs automatiskt i Visual Editor, men inte anpassad HTML, vissa sidbyggare och eventuellt andra områden på din WordPress-webbplats. GTmetrix visar dig vilka bilder som har dessa fel och ger dig rätt dimensioner. För att åtgärda felet måste du hitta bilden i din WordPress-instrumentpanel, redigera HTML eller CSS och sedan lägga till bredden + höjden.

Behöver fortfarande göra färre HTTP-förfrågningar?

Om du fortfarande behöver hjälp, lämna mig en kommentar. De WordPress påskynda Facebook-gruppen är också bra, eller så kan du anställa oss för WordPress-hastighetstjänster med före + efter GTmetrix-rapporter.

WordPress påskynda Facebook-gruppen

Vanliga frågor

&# X1f680; Vad som orsakar HTTP-förfrågningar?

HTTP-förfrågningar är allt som skapar en förfrågan till servern (till exempel en enda bild skapar en begäran). GTmetrix’s Waterfall-flik beskriver alla begärningar som laddas på en sida.

&# X1f680; Vad är 5 saker du kan för att minska HTTP-förfrågningar?

5 enkla saker du kan göra är att kombinera CSS + JavaScript-filer, lata laddningsbilder och videor, undvika vår lista över höga CPU-plugins, selektiv inaktivera plugins från vissa sidor / inlägg med Perfmatters eller Asset CleanUp och optimera dina teckensnitt.

&# X1f680; Kommer ett cache-plugin att minska HTTP-förfrågningar?

Ja, en bra cache-plugin bör hjälpa till att minifiera och kombinera filer, samt minska HTTP-förfrågningar när de konfigureras korrekt. Jag har handledning för nästan varje cache-plugin.

&# X1f680; Kommer fixering av andra GTmetrix-objekt att minska HTTP-förfrågningar?

Ja, i många fall kommer det särskilt att minifiera och kombinera filer, eliminera omdirigeringsfel och använda ett CDN kan också hjälpa.

&# X1f680; Vilket cache-plugin minskar HTTP-begäran mest och hur man konfigurerar det?

Jag rekommenderar WP Rocket som rankades som nr 1 i de flesta Facebook-enkäter och har fler hastighetsoptimeringsfunktioner än de flesta cache-plugins, varför det vanligtvis ger bättre poäng och laddningstider i GTmetrix. Kolla in min handledning om hur du konfigurerar WP Rocket-inställningarna.

Tack för att du läser :)

Skål,
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