Hur man minskar HTTP / S-förfrågningar i WordPress

Hur man minskar HTTP / S-förfrågningar i WordPress

Här är en berättelse du kommer att älska om du vill påskynda din WordPress-webbplats.


Förra dagen byggde jag en blank webbplats. Jag gick helt ut och lade till WooCommerce, Google Tag Manager, OneSignal, helpdesk, Yoast, live radio (oh ja jag gjorde det), Cookie Notice, sociala medier och en massa andra plugins.

Precis som du var jag böjd av att imponera på mina besökare, eller så tänkte jag. Men då blev det outhärdligt långsamt. Efter mycket ångest sköt jag upp GTMetrix för att spola ut problemet.

Till min oro såg jag detta:

gtmetrix hastighetstestresultat

Var jag imponerad? Helvete till NAW! Jag ville göra ett perfekt A och minska sidbelastningstiden till under två sekunder.

Så jag slog på testen igen, men gissa vad? Fortfarande samma sjukande resultat. Jag var rädd, arg ens. Men jag ger inte upp lätt eftersom den typen är oacceptabel.

Vet du vad jag gjorde härnäst? Jag testade webbplatsen på Pingdom eftersom GTMetrix kan suga det. Men nedan är de dystra resultaten, än en gång:

pingdomverktygets hastighetstestresultat

Jag blev besviken. Den ordspråkiga tornen i mitt kött var de felaktiga HTTP-förfrågningarna eftersom jag kunde fixa många av de andra problemen snabbt.

För att göra saken värre använde jag ett WordPress-tema för e-handel som laddade en miljard element för att bygga hemsidan. I mitt försvar såg det otroligt ut. Vissa användare var överens om att designen var på plats också, så ja, jag tappade inte bara för tricket ��

Men bra visuell design och långsamma hastigheter går inte hand i hand. Jag behövde en lösning och snabbt.

Hur kan jag minska HTTP-förfrågningar på min WordPress-webbplats?

Varje gång du besöker en WordPress-webbplats flyttas mycket data mellan din webbläsare och webbplatsens servrar. Med andra ord gör WordPress HTTP-förfrågningar till olika servrar för att bygga vad användare ser när de laddar din webbplats.

Om din WordPress-webbplats kräver många element att ladda har du fler HTTP-förfrågningar och vice versa. Fler HTTP-förfrågningar innebär en långsam webbplats, dålig användarupplevelse (UX), dåliga SEO-poäng och låga konverteringsgrader.

WordPress-webbplatser är vanligtvis dynamiska, vilket innebär att det krävs många olika delar för att återge din webbplats i en webbläsare. Den goda nyheten är att du kan minska HTTP-förfrågningar och snabba upp din webbplats betydligt.

Och i dagens inlägg lär du dig exakt hur!

Rapporter från GTMetrix och Pingdom visar vanligtvis var problemet ligger. Som sådan kan du testa din webbplats med båda verktygen för att ta reda på de områden du måste förbättra. När dina rapporter är redo, så här reducerar du HTTP / S-förfrågningar och påskyndar din WordPress-webbplats.

Steg 1: Declutter

Killar, om du har mycket saker på din WordPress-webbplats kommer du att ha för många HTTP-förfrågningar. Det är ingen brainer. Det första steget för att minska HTTP-förfrågningar är decluttering.

Med det menar jag att bli av med alla plugins som du inte behöver. WordPress-plugins kommer med många filer, vare sig det är PHP, CSS eller JavaScript (JS). Varje fil som varje plugin avger skapar en HTTP-begäran.

Om du har massor av plugins har du definitivt fler HTTP-förfrågningar. Ju färre plugins, desto färre förfrågningar. Det är helt enkelt.

Vad ska man göra?

Gör en granskning av dina plugins. Vilka plugins måste du ha för att köra din webbplats? Finns det plugins som du inte behöver? Har du plugins som använder tredjepartsservrar? Kan du klara dig utan dessa plugins?

För att minska HTTP-förfrågningar avinstallerar du alla plugins som du inte behöver. Om du ibland behöver ett plugin installerar du det bara när du behöver det. Avinstallera sedan plugin-programmet.

Detsamma gäller WordPress-teman och innehåll som du inte använder. Rengör allt det där. Ta bort allt du inte behöver; det är bra för din webbplats hastighet och säkerhet.

Du kan gå den extra milen och ladda plugins selektivt. Om du till exempel bara behöver kontaktformulär 7 för att ladda på din kontaktsida kan du hindra att andra plugins laddas på den specifika sidan.

Det skulle vara fantastiskt, håller du inte med? Och att tro att du bara behöver Tillbehör CleanUp WordPress-plugin.

WP Asset CleanUp WordPress-plugin

Plugin är enkel att använda och ganska effektiv. Eller som utvecklaren uttrycker det:

“Asset CleanUp” skannar din sida och upptäcker alla tillgångar som laddas. Allt du behöver göra när du redigerar en sida / inlägg är bara att välja CSS / JS som inte är nödvändigt att ladda, på detta sätt minskar uppblåsningen.

Rensa upp din installation redan hombre; bli av med skräp – kommentar spam ingår. Åh ja, eliminera trasiga länkar och optimera din databas medan du också är där. Detta är viktiga områden att tänka på när det gäller att öka din webbplatshastighet går, men jag tappar.

Låt oss gå tillbaka till att minska HTTP-förfrågningar.

Steg 2: Optimera bilder

En webbplats utan bilder är väl tråkig. De säger att en bild talar tusen ord, och det är coolt. Men varje bild står för en HTTP-begäran. För att lägga till salt till skador är bilder högst bland element som tar lång tid att ladda.

Vi kan ändå inte ignorera det faktum att de flesta WordPress-teman (läsa webbplatser) förlitar sig på bilder och många bilder för den delen. Så, mot bakgrund av detta, hur kan du minska HTTP-förfrågningar genom att optimera dina bilder?

För det första, bli av med alla bilder du inte använder. Var hänsynslös; bli av med all den uppblåstheten – du behöver inte den. Efter det, komprimera och optimera bilder för att ta bort onödiga fildata.

WP-komprimeringsplugin

Info & nedladdningVisa demonstrationen

Det finns ett antal plugins att välja mellan, men vi gillar verkligen WP Compress. Även om det är en premiumtjänst, gör den kraftfulla autooptimeringen av bilder, förlustfri komprimering, molnbehandling för att minska din serverbelastning, WebP-bildstöd, automatisk ändring av storlek och mer gör investeringen väl värd det (kolla in vår recension för att lära dig mer). Dessutom kan du ange med 100 bilder gratis – så du kan åtminstone ge det ett försök.

Optimering av bilder minskar inte dina HTTP-förfrågningar i sig, men det minskar storleken på dina bildfiler, vilket innebär bättre sidhastigheter längs linjen.

Alternativt för att minska HTTP-förfrågningar, utnyttja kraften i CSS-bildsprites. För de oinitierade är en sprite en samling bilder som läggs in i en enda bildfil.

Sedan använder du CSS-tricks, du kan välja vilken del av bilden som ska visas. Men hur minskar detta HTTP-förfrågningar? Här är en analogi.

Säg att du behövde fem bilder på din hemsida. För att ladda din webbplats kommer din WordPress-installation att göra fem resor till servern för att få bilderna. Om du nu lägger alla de fem bilderna i en enda bildfil (sprite) kommer din WordPress-installation bara att göra en resa.

Ser du vart jag ska med det här? Ju färre resor, desto mindre HTTP-förfrågningar. Det bästa är att du inte behöver svettas för att skapa och implementera CSS-bildsprider. Du kan använda ett verktyg som t.ex. CSS Sprite Generator. Det är enkelt att implementera CSS-bildspriter, förutsatt att du vet hur du går runt CSS.

Proffstips: Du kan glömma allt om CSS-bildsprider om din webbplats använder HTTP / 2 som stöder asynkron laddning av bilder och skript. GTMetrix tar inte hänsyn till HTTP / 2 när du gör resultat, så oroa dig inte om det verkar som om dina bilder skapar massor av HTTP-förfrågningar.

Men jag säger: Om CSS-bildsprites kan minska HTTP-förfrågningar avsevärt på din webbplats, och du vet hur du implementerar detsamma, gå till det och slå de extra sekunderna från din sidladdningstid. Oavsett om du har HTTP / 2 eller inte.

När allt kommer omkring krävs en enda bildfil en enda HTTP-begäran. Tio separata bilder behöver 10 HTTP-förfrågningar och så vidare. Jag vet att du får driva.

Steg 3: Kombinera och förminska HTML, CSS och JavaScript

Huvudorsaken till många HTTP-förfrågningar på min WordPress-webbplats var externa CSS- och JavaScript-filer. Japp, jag kämpade med 43 JS-skript och 22 CSS-filer. Det är en enorm 66 HTTP-begäran.

Av cirka 130 HTTP-förfrågningar stod externa CSS- och JavaScript-förfrågningar för cirka 51% av problemet! Det är bara löjligt. Tack, GTMetrix, slå min knytnäve.

Om jag kombinerar och förminskar dessa 44 JS- och 22 CSS-filer kan jag minska mina HTTP-förfrågningar avsevärt, webbplatsens storlek och tiden det tar att ladda. Men vad handlar det här om att “kombinera” och “minifiera” affärer?

Enligt Raelene Morey of Words by Birds (jag är ett stort fan ��), minifiering är processen att “… ta bort onödiga tecken, som kommentarer, formatering, vitrum och nya rader från HTML-, CSS- och JavaScript-filer som inte är nödvändiga för kod att utföra. ”

Minifiering minskar filstorleken genom att eliminera alla andra tecken för att bara lämna koden. Men om du har 66+ externa skript kommer minifiering inte mycket för att minimera HTTP-förfrågningar. För det måste du kombinera dina CSS- och JavaScript-filer.

Återigen säger Raelene:

Att kombinera filer är under tiden precis som det låter. Om din webbsida till exempel laddar 5 externa CSS-filer och 5 externa JavaScript-filer, om du kombinerar din CSS och JavaScript till en enda separat fil skulle varje resultera i bara två förfrågningar istället för 10.

Förstår du? Jag hoppas det verkligen. Om du kombinerar filer minskar HTTP-förfrågningar. Minifiering, å andra sidan, minskar filstorleken. Kombinera de två och du dödar två fåglar med samma sten.

Finns det plugins? Ja självklart!

WP Rocket WordPress Cache Plugin

Info & nedladdning Visa demonstrationen

Det finns massor av WordPress-plugins för att kombinera och minifiera dina filer. Ett bra exempel är WP Rocket-plugin. Det är i grunden en av de bästa cache-plugin-programmen som erbjuder funktioner för att kombinera och minifiera filer med några få klick.

En annan populär (och fri) är alternativet Autoptimize plugin.

Förresten, när du är på det, minska antalet externa CSS-filer och JS-skript? Till exempel, och vi nämner inte namn här, behöver du verkligen en kommentarplattform från tredje part? Behöver du ett live radio plugin?

Det spelar ingen roll vad jag säger, eliminera alla externa skript och filer du inte behöver.

Steg 4: Justera Render-Blocking CSS- och JavaScript-filer

I vissa fall kan det inte vara ett alternativ att kombinera filer, särskilt för tredjepartsfiler och skript som ofta ändras. I sådana fall kan du skjuta upp lastningen av sådana tillgångar. HTTP / 2 stöder asynkron laddning av filer, vilket innebär att alla filer laddas samtidigt.

Om du av någon anledning inte har asynkron laddning pågår (kanske du inte använder HTTP / 2, eller så är skripten inte asynkrona) kan dessa filer bromsa din webbplats betydligt.

Tänk på att dina webbsidor laddas uppifrån och ned. Om du har renderande-blockerande CSS och JS högst upp på din sida kommer webbläsaren att sluta ladda tills filerna har laddats helt. Som sådan kommer användarna att se en tom sida tills skripten laddas, vilket tar tid.

På vilket sätt? Flytta alla renderblockerande skript från toppen till botten av din webbsida. Men var försiktig här; du behöver inte flytta alla skript till botten. Jag säger detta eftersom din sida kan behöva CSS och JS för att leverera en noggrant engagerande upplevelse.

Om du skjuter upp några CSS- eller JavaScript-filer kan dina användare se en förvrängd version av din webbsida tills sidan laddas helt, vilket är precis motsatsen till vad du vill uppnå.

Så bara skjuta upp skript som inte är nödvändiga för att sidan ska laddas. På så sätt väntar dina användare inte i åldrar på att din sida laddas. Varför? Eftersom du behöver färre HTTP-förfrågningar för att leverera ditt meddelande.

Det minskar inte HTTP-förfrågningar i sig (eftersom alla skript och filer laddas så småningom), men det minskar antalet HTTP-förfrågningar som behövs för att återge din sida.

Det är mycket som lat laddning för bilder; bilden laddas bara när den ligger i visningsområdet, inte när resten (och de viktigaste delarna) på sidan laddas.

Förresten, att fixa renderingsblockerande CSS & JS kan avslöja filer och skript som du inte behöver för att bygga en webbsida.

Om det till exempel tar lång tid att ladda vissa externa sociala delande JS-skript kan du skjuta upp det. Dessutom kan du eliminera det och bygga social delning i ditt tema.

Du kommer att eliminera HTTP-förfrågningar och påskynda din webbplats samtidigt som du behåller samma funktionalitet. Jag förstår att kodningsfunktioner i ditt tema är en hög beställning för de flesta nybörjare, så kolla med en avancerad WP-användare eller utvecklare.

Som ett alternativ kan du använda WP Rocket-plugin för att fixa renderblockerande skript, men var försiktig. Läs dokumentationen för dem, eftersom du kan bryta din webbplats enkelt om du krossar saker.

Finns det gratisalternativ? Självklart! Vi arbetar med WordPress, kommer du ihåg? Du kan använda Async JavaScript, bland andra plugins.

Steg 5: Använd cache och CDN

Visste du att cache och CDN: er kan minska dina HTTP-förfrågningar? Det verkar inte som ett faktum till en början, men när du överväger vad som händer bakom kulisserna kan du använda cache och CDN till din fördel.

Caching innebär att lagra statiska filer i en webbläsare så att användare inte laddar ner filerna vid efterföljande besök. Säg att du har ett cache-plugin, och användaren laddar ner cache-innehållet vid sitt första besök.

Vid efterföljande besök gör din webbplats inte förfrågningar till servern. Istället kommer det att tjäna de cachade resurserna från webbläsaren, minska HTTP-förfrågningar och öka din webbplatshastighet.

En CDN (eller CINNEHÅLL Delivery Network) är ett nätverk av servrar placerade runt om i världen. En CDN använder cache också, men för ännu snabbare hastigheter tjänar CDN-leverantören din cachad innehåll från en server som är närmast besökaren.

Kortera avstånd betyder snabbare innehållsleverans, och cachning innebär att din webbplats inte behöver ladda ner samma innehåll från den centrala servern igen. Är det vettigt för dig?

Cloudflare CDN-plugin

Och bäst av allt finns det ett antal gratis CDN-alternativ (eller åtminstone gratisversioner så att du bokstavligen kan se skillnaden det gör). Hos WPExplorer använder vi och rekommenderar CLoudflare, men välj det CDN som du tycker fungerar bäst för dig.

Bonus: Se till att HTTP / 2 stöds

Du kanske gör allt för att minska HTTP-förfrågningar, men din webbhotell kan vara orsaken till dina elände. Bli inte förvånad; frågar och tänker, som – i denna tid och ålder – använder allt annat än HTTP / 2?

Du vet förmodligen inte ens vad HTTP / 2 handlar om. Tja, för det första stöder HTTP / 2 asynkron laddning av filer, bland annat. Det har andra fördelar jämfört med HTTP 1.0, men det är en lektion för en annan dag.

Om du använder HTTP 1.0 eller lägre kommer du att märka ett betydande antal HTTP-förfrågningar.

Var inte snabb att bedöma; Jag har sett webbhotellleverantörer som fortfarande använder HTTP 1.0 och äldre versioner av PHP. Ja, även med de uppenbara fördelarna med HTTP / 2 och PHP 7. Jag bluffar inte ens; några av deras kunder kommer till mig när några av deras plugins inte fungerar, och det är irriterande!

Men, varför? Det faktum att vissa webbhotellleverantörer inte besväras av att PHP 5.6 avskrivs och har säkerhetsproblem är bara något annat. Och om de inte stöder HTTP / 2, är det verkligen en deal-breaker för dig.

KeyCDN HTTP / 2-test

Kontakta din värd eller använd KeyCDN: s verktyg för att kontrollera om din server stöder HTTP / 2. Den bästa webbhotellen stöder HTTP / 2 och den senaste versionen av PHP. Om din värd släpar i båda fallen, be dem att uppgradera eller välja en bättre webbhotell.

Sista ord

Att minska HTTP-förfrågningar på din WordPress-webbplats handlar om att eliminera saker du inte behöver. Om du har många saker på din WordPress-webbplats kommer du att ha många HTTP-förfrågningar och relativt långsamma sidhastigheter.

För att minska HTTP-förfrågningar, declutter din webbplats, optimera bilder, fixa render-blockerande skript, använda cache och se till att din värd stöder HTTP / 2. Förutom detta, sträva efter att skapa enkla och rena webbplatser som inte behöver massor av tillgångar att ladda.

Om du har frågor, vänligen meddela oss i kommentarsektionen nedan. Skål till snabbare webbplatser och en stor framtid framöver!

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