Vad är HTTP2? Den enda guiden du behöver för att skapa en snabbare WordPress-webbplats

HTTP / 2 I maj 2015 tillkännagavs att specifikationen för HTTP2 hade slutförts och släppts. HTTP2-erbjudanden betydande prestandafördelar till vilken webbplats som helst, så med tanke på att majoriteten av webbplatserna drivs av WordPress var det bara en tidsfråga innan vi behövde veta hur vi skulle ställa in den och vad som är HTTP2.

Så här är vi med en komplett guide och / eller handledning om vad HTTP2 är, varför du bör aktivera HTTP2 på din webbplats, vad är fördelarna och slutligen - hur man faktiskt gör det.

 

Så låt oss börja med de första sakerna.

Vad är HTTP2?

HTTP2 är den senaste versionen av HTTP (HyperText Transfer Protocol) som har optimerats på ett sådant sätt att din webbplats laddas mycket snabbare, utan extra ansträngning från din sida. När du väl har konfigurerat HTTP2 finns det inget behov av sådana optimeringar som minifiering, kombination och andra hack som vi brukade utföra tidigare - dessa är inbyggda direkt i själva protokollet.

(På CollectiveRay, vi gillar att göra våra webbplatser vackert och snabbt!) 

Innan vi faktiskt går ner till HTTP2, låt oss titta lite tillbaka på HTTP och varför en ny version av HTTP var nödvändig.

Vad är HTTP?

HyperText Transfer Protocol (aka HTTP) är helt enkelt ett sätt genom vilket din webbläsare kommunicerar med webbservern på den webbplats du besöker.

Det finns många sätt på vilka två (eller fler) maskiner kommunicerar via Internet. HTTP är den som används för att surfa på webbplatser. Med ökningen av sådana webbplatser som YouTube och Twitch som bär mycket trafik via HTTP, är detta protokoll fortfarande en som bär mest trafik. Det är definitivt det som är mest "synligt" eftersom det är inblandat i all webbsökning.

När allt kommer omkring, hur många gånger skriver du https: // varje dag?

http

Utan att gå in för mycket i detalj används HTTP-protokollet av besökarens webbläsare för att begära allt innehåll på en webbplats.

Konversationen går ungefär så här:

webbläsare: Hej server på www.collectiveray.com - kan du ge mig innehållet på denna webbplats?

server: Hej webbläsare, detta är HTML -innehållet på www.collectiveray.com

<html xmlns: og="https://ogp.me/ns#" xmlns: fb="https://www.facebook.com/2008/fbml" lang="sv" dir="ltr" klass='com_content vy-artikeln itemid-388 j35 mm-svävar'>

...

webbläsare: Bra, nu ser jag att jag också behöver innehållet i dessa js-filer: collectiveray. Js, jquery.min.js, jQuery-ui.min.js ... och även innehållet i dessa filer: styles.css, jquery.min.css, ... Skicka mig även följande bilder: favicon.ico, logo.jpg, blog-header.jpg, annons1.jpg, ...

server:

  1. Här är innehållet i filen collectiveray. Js
  2. Och här är innehållet i filen jquery.min.js
  3. Och här är jQuery-ui.min.js
  4. ...
  1. och här är bilden footer-icon.jpg ...

Verkligen och riktigt spelar servern och webbläsaren digital tennis med data från webbplatsen du besöker.

Var och en från servern skickar en liten del av webbplatsen. Detta fortsätter att hända tills allt innehåll skickas från webbplatsservern till webbläsaren.

En annan mycket bra analogi som har använts för att beskriva HTTP1 är att en servitör hämtar drycker från baren och bara får en drink varje gång de besöker baren.

http11

Naturligtvis är den här metoden att få en "sak" i taget inte väldigt effektiv, och här börjar problemen med HTTP ...

Nätet har vuxit snabbare än möjligheterna för HTTP

HTTP har funnits under mycket lång tid. När det var genomtänkt och skapat var internet en helt annan plats.

Bandbredd mättes i bitar, inte tiotals megabit. Följaktligen, för att vara användbara, gjordes webbplatser främst av text och hyperlänkar. Bilderna var få och långt ifrån.

Spola framåt till modern tid.

Webbplatser, teman och alla typer av funktioner har gjort webbplatser tyngre och tyngre när det gäller resurser. Din genomsnittliga webbplats innehåller hundratals olika filer och bilder.

Webbplatser som behöver använda hundratals resurser är dagens ordning.

Om du till exempel planerar att skapa en WordPress-medlemswebbplats använder du den här guiden skriven av CollectiveRay, du behöver medlemskapsteman, plugins och massor av andra resurser, som alla behöver olika resurser för att kunna fungera korrekt.

För att komplicera sakerna begär varje webbplats information från flera olika servrar för alla typer av tredjepartsskript (till exempel Google Analytics-skript, Facebook-delningsknappar, Google Ads eller AdSense, e-postmarknadsföring och alla andra plattformar).

Mängden gånger en webbläsare behöver för att hämta filer från webbserverns behov behöver växa och växa. 

Detta är inte ett problem i sig, även om det ständigt ökande antalet filer innebär att storleken på data som laddas ner fortsätter att växa och växa.

Detta innebär att den stora mängden data som ska laddas ner blir större och större. Detta gör lastning av webbplatser i allmänhet långsammare.

För att göra saken värre är det en att skapa en anslutning mellan webbläsaren och servern tekniskt dyr drift och tar tid. Eftersom antalet olika resurser som krävs på en webbplats ökar, ökar också tiden det tar att ladda en webbplats.

Detta beror på att med HTTP-version 1, varje gång en ny fil behövs, måste en ny (dyr) anslutning skapas.

Det innebär att webbplatser som ville ladda snabbt måste genomgå en hel optimeringsövning.

Hur man gör en webbplats snabbare (pre-HTTP2-version)

Som kan ses genom vårt enkla exempel hade HTTP v1 ett antal begränsningar med tanke på nätets nuvarande tillstånd, vilket resulterade i att webbplatser blev långsamma. Nu har du förmodligen sett hundratals artiklar som visar hur du gör din WordPress-webbplatsen snabbare.

Vi har en sådan artikel också själva för som WordPress-utvecklare, vi jagar alltid behovet av hastighet - och vi är bara glada när vi får A-hastighetsbetyg.

För övrigt har vi massor av olika artiklar för dem som vill lära sig om WordPress, kolla in avsnittet om självstudier Collectiveray.

Vad de flesta av dessa artiklar som försöker påskynda WordPress är att hitta ett sätt att kringgå begränsningarna för HTTP1. De utför lösningar för att säkerställa att webbplatserna inte saktas ner av alla dessa anslutningar.

Det var därför det fanns ett så stort behov av HTTP2, inte bara för WordPress utan för alla andra webbplatser där ute. Något måste göras för att hantera HTTP1: s inneboende problem (både i webbläsaren och på webbservernivån).

Så vad var lösningarna / lösningarna för att göra en webbplats med HTTP v1 snabbare? Vi hänvisade vanligtvis till dem som Minska, återanvändning, Återvinna. För mer förklaring till det, föreslår vi att du läser vår artikel om hur du gör webbplatser snabbare ovan.

  1. Skapa en lätt webbplats som använder en minimal mängd JS-, CSS- och bildfiler
  2. Minska antalet förfrågningar för olika CSS-filer och JS-filer genom att kombinera så många av dessa filer som möjligt (minska förfrågningar genom kombination av filer)
  3. Minska antalet förfrågningar om bilder med skapa en bild som kombinerar dem alla i en och använder CSS sprites
  4. Ta bort eventuella extra plugins (för att minska antalet bilder, CSS-filer och JS-filer de lägger till på webbplatsen)
  5. Komprimera de uppgifter som krävs så att den är mindre i storlek (och därmed snabbare att transportera) (t.ex. skulle du vanligtvis göra det aktivera WordPress GZIP-komprimering för att göra storleken på data som behöver överföras, mindre)
  6. Utnyttja webbläsarens cachning i WordPress med ett plugin, så att om en användare besöker din webbplats igen inom en kort tidsram, kommer de inte att hämta samma filer igen
  7. Andra handlingar...

I grund och botten ville vi minska antalet separata förfrågningar mellan servern och webbläsaren. Vi ville också minska storleken på dessa förfrågningar.

Optimera webbplatsen http1 genom att minimera http-förfrågningar

Så hur förbättrar HTTP / 2 allt detta?

Ange HTTP / 2

HTTP / 2 skrevs för att åtgärda dessa inneboende problem. Ett av de främsta målen för HTTP2 är att

Minska latens för att förbättra sidhämtningshastigheten i webbläsare. (Källa: WikiPedia)

och introducerar följande förbättringar

  • är binär, istället för text
  • är fullständigt multiplexerat, istället för att ordnas och blockeras
  • kan därför använda en anslutning för parallellism
  • använder huvudkomprimering för att minska omkostnader
  • tillåter servrar att "trycka" svar proaktivt i klientcacheminnet

Vänta, va? Oroa dig inte - låt oss försöka förklara detta lite enklare.

  1. Binär istället för text: detta är något som gör överföring och analys av data mycket mer effektiv. Binär dataöverföring är också mycket less utsatt för fel. Textdata är avsedda som livsmedel. Binär data är utformad för maskinkonsumtion, att använda binärt för överföring av data är i sig snabbare.

  2. Helt multiplexerat: igen, helt enkelt uttryckt, med HTTP var problemet att varje anslutning var benägen att blockera de anslutningar som måste hända efter det. Föreställ dig själv i kön för att komma in i din favoritsportmatch, men i stället för att ha flera ingångspunkter hade du bara 1 turnstile. Du kan föreställa dig att saker kan bli väldigt långsamma. Multiplexing gör att flera filer och förfrågningar kan överföras samtidigt. I fotbollsmatchsexemplet, i stället för att en person går in i taget, har vi 10 grindar, med 10 vändkors som går in tillsammans.

  3. Använd en anslutning för parallellitet: som vi nämnde tidigare, när en anslutning är dyr att skapa om du fortsätter att skapa och stänga den för varje resurs du behöver, kommer du att skapa ett allvarligt overheadproblem. Multiplexing gör att samma anslutning kan återanvändas om och om igen. Föreställ dig anslutningen som ett rör genom vilket data fortsätter att strömma tills du inte har mer data. Observera också att för alla webbplatser kommer du vanligtvis att webbläsaren pratar med flera webbservrar för olika tredjepartsskript och resurser (Facebook-delningsskript, Twitter, Google Analytics, Annonsnätverk etc.) Har en anslutning för var och en av dessa är effektivare.

  4. Sidhuvudkomprimering är också ett annat effektivt sätt att ta bort flera av omkostnaderna förknippade med att behöva hämta flera olika resurser från samma eller flera webbservrar. Återigen, typiskt snarare än att behöva utföra flera fram och tillbaka resor, är en resa vanligtvis tillräcklig.

  5. Tillåter servrar att driva resurser proaktivt: detta är ett sätt som servern snarare än väntar på att klientens webbläsare ska begära olika resurser enligt vårt första exempel, proaktivt kommer att skicka resurser som webbläsaren så småningom kommer att behöva eller be om. Detta kallas HTTP / 2 Server push.

Om vi ​​var tvungna att gå tillbaka till analogin med servitören som tog en drink i taget, är den största fördelen att servitören nu använder en dryckesbricka för att ta alla dryckerna tillsammans. Och de tar också drycker från baren som de sannolikt behöver när de är på restaurangen.

http vs http2

Vad är SPDY? (aka Speedy)

Innan HTTP2 faktiskt föddes hade någon annan faktiskt försökt åtgärda problemen med HTTP. Detta var ett forskningsprojekt av ett par Google-ingenjörer, som hade försökt fixa några av problemen med HTTP1.1.

SPDY mål var att

  • Tillåt multiplexering för att tillåta samtidiga förfrågningar - lösa därmed problem med latens skapad genom att ha flera anslutningar
  • Prioritera resurser som de viktigaste resurserna på en webbplats som skickas först
  • Komprimera HTTP-rubriker för att förbättra effektiviteten enligt ovan
  • Implementera server push som diskuterats ovan också

I en första blogg som släpptes av ingenjörerna som skrev protokollet hävdades det att det skulle göra det gör webben två gånger snabbare. Även om både stora webbläsare och stora webbservrar stödde SPDY, fanns det lite verkligt antagande.

Forskningen var dock avgörande för den eventuella utgåvan av HTTP2, eftersom det första utkastet till HTTP2 använde SPDY som sin arbetsbas.

Vad måste jag göra för att aktivera HTTP / 2?

Innan du aktiverar HTTP2 måste du veta vilka konsekvenser det har på din webbplats.

Vilka webbläsare stöder HTTP / 2?

Från och med i skrivande stund stöder de mest populära klientwebbläsarna fullt ut HTTP/2. FireFox, Chrome och webbläsare baserade på Blink (dvs. Opera och Yandex) stöder HTTP2. Microsoft Edge stöder också HTTP2 Apple stöder det också på Safari. Statistik från sådana webbplatser som Kan jag använda? visar att det nuvarande stödet för global distribution är mer än 95%. 

Om webbläsaren inte stöder HTTP2, och webbplatsen stöder HTTP2, kommer det att finnas en graciös återgång till HTTP1, så det är absolut inget problem för någon besökare om du aktiverar HTTP / 2. Det kan bara finnas fördelar.

kan jag använda http2

Vilka servrar stöder HTTP / 2

Apache, Nginx, LiteSpeed, IIS och mest populära serverimplementeringar stöder HTTP / 2 - du kan kontrollera om din favoritwebbserver eller webbservern du använder har stöd för http2 här.

Om du kan använda HTTP2 beror dock på om ditt webbhotell har aktiverat detta. Så du måste bekräfta den faktiska tillgängligheten av HTTP / 2 med ditt webbhotell. Bilden nedan är en lista över servrar som stöder http / 2. 

http2-serverstöd

Enkelt uttryckt, om din webbplats för närvarande stöder HTTP / 2 beror helt på ditt webbhotell eller servern där du är värd för din webbplats. Vi använder InMotion-värd (och här är vår InMotion värdrecension och i huvudsak hur vår VPS biljettpriser), som har stött HTTP2 fullt ut i ett antal år nu.

Men vi använder också StackPath för att tjäna våra resurser, som också stöder HTTP / 2.

De flesta webbhotell stöder idag HTTP2 på sina servrar, så detta borde inte vara en oro.

Du kan använda detta verktyg från KeyCDN för att avgöra om din webbplats för närvarande har stöd för HTTP / 2. Detta HTTP / 2-test kan berätta om du behöver utföra ytterligare åtgärder eller inte.

Din webbplats måste vara säker för att HTTP2 ska kunna aktiveras

För närvarande stöder alla webbläsare där ute endast krypterad HTTP2.

Det betyder att för att din webbplats ska kunna stödja HTTP / 2 måste du ha din webbplats serverad över en säker (TLS / SSL) anslutning. Vi har gått igenom detta ganska djupt i vår artikel om ställa in ett säkert WordPress-certifikat på din server.

För att sammanfatta dock

  1. Säkra webbplatser får en SEO-rankningssignalökning
  2. De skyddar data som överförs till och från webbplatsen (särskilt viktigt för lösenord, kreditkortsuppgifter och andra känsliga uppgifter)
  3. Det finns en stark rörelse mot fullständiga säkra webbplatser, och om du inte implementerar säkerhet på din webbplats kommer din webbplats säkert att vara kvar

Du måste skaffa ett säkert certifikat via ditt webbhotellföretag. Värdföretag som I rörelse låta dig använda ett delat certifikat, men om du vill använda det med din domän rekommenderas det starkt att du köper ditt eget certifikat. 

Behöver du hjälp med din webbplats?

Hyra en kontrollerad webbplatsexpert för så lite som $ 65. Registrera dig idag för att börja chatta gratis.

Chatta med en expert

Andra webbplatser som WordPress.com (i motsats till WordPress.org) - läs om skillnaden här - ge redan säkra certifikat.

Installation av certifikatet är något som vanligtvis görs av din värdserver. Det är en engångs sak, så du behöver inte oroa dig.

När det är klart måste du helt enkelt utföra en 301 permanent omdirigering via din .htaccess-fil.

Än en gång värdar som InMotion-värd kan hantera allt detta åt dig, om du inte är benägen att göra denna typ av teknisk tweaking själv (vilket har lite risk för stillestånd om du inte gör rätt).

Finns det ett plugin som jag kan använda för HTTP2?

Vi nämnde en av fördelarna med att använda HTTP2 för att vara möjligheten att utföra en server-push av objekt som kommer att behövas av webbläsaren. Detta är naturligtvis något som måste göras på CMS-nivå, så detta behöver stöd från WordPress eller din favorit CMS.

Även om detta ännu inte stöds på kärnnivå, kan du justera dina teman eller plugins så att de implementerar möjligheten att skicka en 

Link:<...> rel="prefetch"

rubrik för varje efterföljande skript och stil när WordPress matar ut dem till sidkällan.

Om du vill göra din webbplats snabbare i allmänhet, möjliggöra prefetch och andra kommandon för att göra din webbplats snabb, rekommenderar vi starkt WP Rocket - ett premium-plugin som kraftigt ökar hastigheten på din webbplats. Om du vill ha ett gratis plugin kan du använda detta

Kolla in WP Rocket för att göra din webbplats snabbare

Detta tar faktiskt ytterligare fördelar av de funktioner som aktiveras av HTTP / 2.

Slutlig rekommendation

Så du är här för att du ville göra din webbplats snabbare genom att placera HTTP2 på rätt sätt? 

Detta är bara en av många sätt att göra din webbplats snabbare. Förutom den här tekniken måste du göra en massa andra optimeringar om du vill göra din webbplats snabbare, t.ex.

  • Implementera ett sidcaching-plugin
  • Aktivera cachning på PHP-nivå, t.ex. OpCache
  • Optimera bilder för prestanda
  • Aktivera ett CDN (gratis eller på annat sätt)
  • Aktivera webbläsarcaching och gzip-komprimering
  • Optimera Google-teckensnitt
  • Aktivera DNS-förhämtning
  • Aktivera bildladdning
  • Aktivera minifiering och sammanfogning
  • etc etc

Låter som en massa arbete, eller hur? Det är!

At CollectiveRay, vi spenderar ibland flera dagar arbetar med att driva vår webbplats bara några bråkdelar av en sekund snabbare. Detta beror på att vår webbplats körs på Joomla, så vi har inte många plugins som är tillgängliga för andra populära CMS-alternativ som WordPress.

Till exempel för våra kunder installerar vi alltid WP Rocket. På de webbplatser där det installeras får vi dem alltid att ladda på under 3 sekunder, med typiska resultat att webbplatsen laddas på under 1 sekund.

Hastighetstest före efter

Skönheten i det, dock att vi inte behöver utföra något av det manuella arbete som vi brukade göra tidigare, så vi spara timmar av tid och frustration, och vi får utmärkta resultat att starta.

Kolla in WP Rocket för att göra din webbplats snabb 

Vanliga frågor

Ska jag använda HTTP2?

Ja, du bör aktivera och använda HTTP2 på din webbplats om du kan. HTTP2 gör din webbplats snabbare och det finns absolut inga nackdelar jämfört med HTTP-version 1. Även om en klient använder en gammal webbläsare som inte stöder HTTP2, finns det en graciös återgång till HTTP.

Vad är skillnaden mellan HTTP och HTTP2?

Det finns ett antal skillnader och förbättringar mellan HTTP och HTTP2. HTTP2 är binärt, i stället för textmässigt gör det i sig snabbare. Det är helt multiplexerat, istället för att ordnas och blockeras, så flera anslutningar kan användas samtidigt. Den använder komprimering av rubriker för att minska omkostnaderna och tillåter servrar att "skjuta" svar proaktivt in i klientcacheminnet. Alla dessa förbättringar gör HTTP2 mycket snabbare än HTTP.

Kräver HTTP2 SSL?

Ja, HTTP2 stöds endast i krypterat läge, så din webbplats behöver också implementera säkra SSL / TLS-certifikat för att kunna använda HTTP2.

Stöder webbläsare HTTP2?

Över 95% av de webbläsare som används idag stöder HTTP2. Även om webbläsaren inte stöder HTTP2 kommer det att finnas en graciös återgång till HTTP.

 

 

Slutsats: Låt oss göra webben snabbare med HTTP2 

At CollectiveRay, vi har alltid fixat till att göra våra webbplatser snabba. HTTP2 är en utveckling och en revolution på samma gång, och vi hoppas verkligen att den här artikeln hjälper dig att gå vidare mot din installation av WordPress HTTP2.

Lämna en kommentar nedan och berätta för oss vad du vill veta mer.

 

Behöver du hjälp med att göra saker? Prova dessa topprankade prisvärda spelningar på Fiverr!

fiverr-logotyp

Klicka här för att hitta experter på WordPress-hastighetsoptimering.

Klicka här för att skapa en fullständig WordPress-webbplats.

 

Om författaren
David Attard
Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/
David har arbetat i eller runt online / digital industrin under de senaste 18 åren. Han har stor erfarenhet av mjukvaru- och webbdesignindustrin med WordPress, Joomla och nischer som omger dem. Som digital konsult fokuserar han på att hjälpa företag att få en konkurrensfördel med en kombination av deras webbplats och digitala plattformar som finns idag.

En sak till... Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? ;-)
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!

Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.

Författare Utvalda på:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och många fler ...