5 sätt att förbättra din webbplats sidhastighet med HTTP / 2
Annons
HyperText Transfer Protocol version 2, eller HTTP / 2, är den senaste standarden för HTTP. Uppdateringarna till protokollet kommer att förbättra webbtrafikens hastighet, effektivitet och säkerhet. Men övergången är inte automatisk.
Denna artikel syftar till att ge dig lite inblick i vad HTTP / 2 betyder för dig och hur du konfigurerar din webbplats eller server för att dra nytta av de nya funktionerna.
Vad HTTP / 2 betyder för dig
För vanliga användare är ändringarna från HTTP / 1.1 till HTTP / 2 ganska osynliga.
Alla webbläsare kräver ett giltigt certifikat för Transport Layer Security (TLS) för att betjäna webbplatser via HTTP / 2. Så utöver snabbare sidbelastning kommer det också att öka säkerheten på webbplatsen.
För webbdesigners och ägare kan HTTP / 2 förbättra din webbplats belastningshastighet på alla enheter.
Varje modern webbläsare stöder redan den nya protokollstandarden (även om dessa mobila webbläsare inte stöder HTTP / 2). I fall där webbläsaren eller servern inte stöder HTTP / 2 kommer HTTP / 1.1-standarden dock att användas automatiskt.
Hur påverkar HTTP / 2 webbplatsdesign?
Ändringarna som introducerats i HTTP / 2 kommer att påverka hur vi optimerar webbplatser och servrar för effektivitet och hastighet.
Nya funktioner introducerade i HTTP / 2 gör att vi kan bortse från många av HTTP / 1: s lösningar och optimeringstekniker. Detta inkluderar inte längre inlining av skript till HTML eller kombination av filer för att minska serverförfrågningar. Domänavskärmning är inte längre användbar.
I vissa fall kommer dessa lösningar till och med att påverka din sidhastighet negativt om det serveras HTTP / 2.
Majoriteten av internettrafiken är mobilbaserad, så tänk på mobila internethastigheter och håll dina mediefiler små och optimerade för dessa enheter. Du bör också fortsätta att minifiera din JavaScript (JS), HTML och CSS.
Om du inte är säker på varför du ska minifiera dina filer skulle en bra start vara vår artikel om hur och varför du ska minifiera din JavaScript. JavaScript-kompressorer: Hur och varför minifiera dina JS JavaScript-kompressorer: Hur och varför minifiera din JS Minifiering av javascript är ett sätt att påskynda webbplatsens svarstider, och lyckligtvis för dig är det en enkel process. I dag ska jag visa allt du behöver veta. Läs mer
HTTP-koncept du borde veta
Om du inte känner till villkoren som hänvisas till i den här artikeln, här är en snabb introduktion
Inlining Script är att lägga till JavaScript direkt i ett HTML-dokument med taggen. I HTML / 1.1 blir detta av med små JavaScript-filer och kommer att minska serverförfrågningar och ladda skript snabbare.
Att minska antalet filer är inte längre så stort problem för sidhastighet i HTTP / 2 tack vare Multiplexing, Stream Prioritization och Server Push .
Multiplexing är en ny funktion i HTML / 2 som möjliggör flera dataströmmar över en enda TCP-anslutning (Transmission Control Protocol).
Dataströmmar är en HTML / 2-term som används för dubbelriktad dataströmmar. Vi kan prioritera varje ström tack vare deras unika identifierare, vilket hjälper oss att optimera datalagring.
Strömprioritering är en annan ny funktion i HTML / 2. Detta ger oss möjligheten att berätta för en server att fördela resurser och bandbredd till prioriterade dataströmmar . På så sätt säkerställs optimal leverans av högprioriterat innehåll till kunder.
Domänavskärmning är att dela webbplatsresurser över flera webbplatser eller domäner för att komma runt den begränsning av nedladdning samtidigt i HTML / 1.1.
I HTML / 2 kommer Multiplexing och Server Push att göra nedladdningar samtidigt snabbare och effektivare än Domain Sharding . Det finns faktiskt inget stöd för att använda dessa funktioner på flera domäner.
Server Push tillåter en server att skicka flera svar för en enda klientbegäran. Kort sagt kan servern göra antaganden om vilka filer en webbläsare behöver för att ladda en sida, utan att webbläsaren specifikt begär dem.
Vi kommer nu att fokusera på några av de ändringar som webbplatsägare bör göra för att optimera webbplatser för HTTP / 2. För en djupare inblick i dessa begrepp, läs vår tidigare artikel: "Vad är HTTP / 2 och hur påverkar det Internet: s framtid? Vad är HTTP / 2 och hur påverkar det Internet: s framtid? Vad är HTTP / 2 och hur påverkar det Internet: s framtid? Internet kommer att bli effektivare tack vare ankomsten av HTTP / 2. Men vad är det och hur förbättras det på HTTP? Läs mer ".
5 Webbplatsändringar som ska göras för HTTP / 2-optimering
De viktigaste förändringarna som du bör vara medvetna om som webbplatsägare är relaterade till hur man hanterar webbplatsresurser. Specifikt när det gäller hur din webbplats server kommer att prata med en webbläsare och hur filerna levereras.
Nedan är de vanligaste ändringarna du bör titta på för att optimera din webbplats för HTTP / 2.
1. Kombinera inte ditt CSS eller JavaScript
Du bör inte längre sammanfoga eller kombinera dina webbplatsresurser. I HTTP / 1.1 kommer detta att minska antalet HTTP-förfrågningar och filer som behövs för att ladda ner för att visa din webbplats.
Varje HTTP-begäran lägger till latens, så att HTTP / 1.1 är ofta mer effektivt att ladda ner en enda fil än att ladda ner flera filer. Färre filer hjälper också till att komma runt gränsen för samtidiga nedladdningar i HTTP / 1.1.
Eftersom HTTP / 2 tillåter flera nedladdningar utan flera serverförfrågningar är antalet filer mindre viktigt när du optimerar för hastighet. Kombinerat med caching är specifika filer bättre i HTTP / 2.
I själva verket tillåter mer specifika filer att betjäna det mesta av din webbplats från ditt innehållsleveransnätverk (CDN) och användarens webbläsarcache. Det betyder också att webbläsaren inte behöver ladda ner och analysera en enda stor fil från din server när du gör mindre justeringar till din webbplats.
2. Skriv inte in skript i HTML
Att bädda in CSS- och JS-filer i ditt HTML-dokument kommer att förbättra din sidhastighetshastighet i HTTP / 1.1. Liksom med att kombinera filer kommer det att reducera filantal och serverförfrågningar.
Om du lägger in skript i HTML när du använder HTTP / 2 kommer du att minska din sidhastighetsoptimering från cachning genom att ta bort en webbläsares förmåga att cache-tillgångar individuellt.
Det kommer också att bryta alla förbättringar från Stream Prioritering, eftersom allt inbäddat skript och innehåll får samma prioritetsnivå som ditt HTML-innehåll.
I stället för att föra in tillgångar för att minska HTTP-förfrågningar, dra fördel av multiplexing och server push. Detta gör att webbläsare kan ladda ner fler resurser med färre begäran och förbättra sidans belastningshastighet.
Kort sagt, håll dina resurser separata och små när det är möjligt.
3. Sluta använda CSS Image Sprites
Image Sprites är bilder som består av många mindre bilder (som ovan). CSS anger sedan vilka delar av bilden som ska visas.
Som med de flesta HTTP / 1.1-lösningar använder vi bildspriter delvis för att minska serverförfrågningar. I HTTP / 2 kan du säkert använda separata bilder utan att påverka sidans belastningshastighet negativt.
Mindre filer kommer att ladda ner snabbare och mer effektivt tack vare multiplexing och server push.
4. Använd inte domänavskärmning
Domänavskärmning används för att kringgå de samtidiga nedladdningsbegränsningarna i HTTP / 1. Denna begränsning är vanligtvis mellan fyra och åtta per domän och ställs in av webbläsare delvis för att minska DDOS-attacker.
Att skydda din webbplats över fyra domäner, till exempel, kan teoretiskt tjäna resurser under en fjärdedel av tiden i HTTP / 1.1.
Domänavskärmning är inte längre nödvändig tack vare HTTP / 2: s multiplexering.
Observera att webbläsare inte kan dra fördel av multiplexering och parallella nedladdningar över flera domäner i HTTP / 2. Skärmning kommer också att bryta HTTP / 2s strömprioritering, vilket ytterligare minskar fördelarna med att använda HTTP / 2.
5. Dra fördel av Server Push
Kanske den mest betydande förbättringen av HTTP / 2 är server push.
I HTTP / 1.1, när du begär att se en sida, skickar servern HTML-dokumentet först. Din webbläsare börjar sedan analysera detta och begär separat CSS-, JS- och mediefiler som det hänvisas till i dokumentet.
I HTTP / 2 möjliggör server push en server att driva nödvändiga resurser till en webbläsare utan en separat begäran om dem. Detta inkluderar CSS- och JavaScript-filer, liksom media, och kommer att minska HTTP-förfrågningar och påskynda sidbelastningen.
Smashing Magazine har en stor omfattande guide för HTTP / 2: s server push med inblick i hur det fungerar och hur man aktiverar det.
Så konfigurerar du din server för HTTP / 2
De flesta serverimplementeringar stöder redan HTTP / 2. Men om du använder en delad värd måste du kontrollera med din serveradministratör om de har aktiverat HTTP / 2. Om du är nyfiken har GitHub en lista över serverimplementeringar som stöder HTTP / 2.
Nginx-servrar har ursprungligt stöd för HTTP / 2, medan du kanske måste konfigurera Apache-servrar för att aktivera HTTP / 2-stöd.
Om din webbplats är HTTPS aktiverad, (ett HTTP / 2-krav) kan du kontrollera om din webbplats levereras med HTTP / 2 på http2.pro. Som sagt, om du använder Cloudflare som ditt CDN, kommer allt innehåll från deras servrar att serveras via HTTP / 2 utan att du behöver göra några ändringar.
WordPress-specifika värdar kommer ibland att begränsa de konfigurationsändringar du kan göra, särskilt i deras lägre nivåtjänster. Som sagt rekommenderar vi Bluehost för dina WordPress-webbplatser. Bluehost erbjuder gratis SSL och CDN och kommer att tjäna dina webbplatser via HTTP / 2.
HTTP / 2 är bara det första steget
HTTP / 2 är en enorm förbättring jämfört med den tidigare standarden, och du bör nu ha lite inblick i fördelarna du kan få genom att implementera den.
Aktiverade webbplatser kommer att ladda snabbare och vara säkrare, vilket också ökar din sökrankning. HTTP / 3 är redan på väg, och att konfigurera din webbplats för HTTP / 2 kommer att göra ditt eventuella hopp till HTTP / 3 mycket smidigare.
Utöver att ställa in din webbplats för HTTP / 2, bör du också använda överväga dessa sätt för att göra din webbplats ladda snabbare 7 sätt att göra din webbplats eller bloggbelastning snabbare för besökare 7 sätt att göra din webbplats eller bloggbelastning snabbare för besökare Här är några bästa tips för att påskynda din webbplats och se till att dina besökare håller sig. Läs mer .
Utforska mer om: HTTP / 2, webbutveckling.
