5 måder at forbedre dit websteds sidehastighed ved hjælp af HTTP / 2
Reklame
HyperText Transfer Protocol version 2 eller HTTP / 2 er den nyeste standard for HTTP. Opdateringerne til protokollen vil forbedre webtrafikens hastighed, effektivitet og sikkerhed. Overgangen er dog ikke automatisk.
Denne artikel sigter mod at give dig en vis indsigt i, hvad HTTP / 2 betyder for dig, og hvordan du konfigurerer dit websted eller din server til at drage fordel af de nye funktioner.
Hvad HTTP / 2 betyder for dig
For regelmæssige brugere vil ændringerne fra HTTP / 1.1 til HTTP / 2 være temmelig usynlige.
Alle browsere kræver et gyldigt Transport Layer Security (TLS) -certifikat for at tjene websteder via HTTP / 2. Så ud over hurtigere indlæsning af sider vil der også være en stigning i webstedssikkerhed.
For webdesignere og ejere kan HTTP / 2 forbedre dit websteds belastningshastighed på tværs af alle enheder.
Hver moderne browser understøtter allerede den nye protokollstandard (selvom disse mobile browsere ikke understøtter HTTP / 2). I tilfælde, hvor browseren eller serveren ikke understøtter HTTP / 2, bruges HTTP / 1.1-standarden dog automatisk.
Hvordan påvirker HTTP / 2 webstedsdesign?
Ændringerne introduceret i HTTP / 2 vil påvirke, hvordan vi optimerer websteder og servere for effektivitet og hastighed.
Nye funktioner introduceret i HTTP / 2 giver os mulighed for at se bort fra mange af HTTP / 1's løsninger og optimeringsteknikker. Dette inkluderer ikke længere at indlæse scripts til HTML eller at kombinere filer for at reducere serveranmodninger. Domæneskærning er heller ikke længere nyttigt.
I nogle tilfælde vil disse løsninger endda have en negativ indflydelse på din sides hastighed, hvis det serveres HTTP / 2.
Størstedelen af internettrafikken er mobilbaseret, så overvej mobile internethastigheder, og hold dine mediefiler små og optimerede til disse enheder. Du skal også fortsætte med at minimere din JavaScript (JS), HTML og CSS.
Hvis du ikke er sikker på, hvorfor du skal mindske dine filer, ville vores artikel være en god start om, hvordan og hvorfor minivere din JavaScript. JavaScript-kompressorer: Hvordan og hvorfor man skal minimere dine JS JavaScript-kompressorer: Hvordan og hvorfor man skal mindske din JS Minifisering af dit javascript er en måde at fremskynde websitetens svartider, og heldigvis for dig er det en nem proces. I dag viser jeg dig alt hvad du har brug for at vide. Læs mere
HTTP-koncepter, du burde vide
I tilfælde af at du ikke kender de vilkår, der er nævnt i denne artikel, her er en hurtig introduktion
Inlining Script er at tilføje JavaScript direkte til et HTML-dokument med tagget. I HTML / 1.1 slipper dette af små JavaScript-filer og reducerer serveranmodninger og indlæser scripts hurtigere.
At reducere antallet af filer er ikke længere så stort problem for siderhastighed i HTTP / 2 takket være Multiplexing, Stream Prioritering og Server Push .
Multiplexing er en ny funktion i HTML / 2, der giver mulighed for flere datastrømme via en enkelt TCP-forbindelse (Transmission Control Protocol).
Datastrømme er et HTML / 2-udtryk, der bruges til tovejsstrømme af data. Vi kan prioritere hver strøm takket være deres unikke identifikator, som vil hjælpe os med at optimere datalevering.
Streamprioritering er en anden ny funktion i HTML / 2. Dette giver os muligheden for at fortælle en server at allokere ressourcer og båndbredde til prioriterede datastrømme . Dermed sikres optimal levering af højt prioriteret indhold til klienter.
Domain Sharding er handlingen ved at opdele webstedsressourcer på flere websteder eller domæner for at omgå den samtidige downloadbegrænsning i HTML / 1.1.
I HTML / 2 gør Multiplexing og Server Push samtidige downloads hurtigere og mere effektive end Domain Sharding . Faktisk er der i øjeblikket ingen support til at bruge disse funktioner på tværs af flere domæner.
Server Push giver en server mulighed for at sende flere svar til en enkelt klientanmodning. Kort sagt kan serveren antage, hvilke filer en browser har brug for at indlæse en side, uden at browseren specifikt anmoder om dem.
Vi vil nu fokusere på nogle af de ændringer, som webstedsejere skal foretage for at optimere websteder til HTTP / 2. For en dybere indsigt i disse koncepter skal du læse vores tidligere artikel: “Hvad er HTTP / 2 og hvordan påvirker det Internets fremtid? Hvad er HTTP / 2, og hvordan påvirker det Internets fremtid? Hvad er HTTP / 2, og hvordan påvirker det Internets fremtid? Internettet er indstillet til at blive mere effektivt takket være ankomsten af HTTP / 2. Men hvad er det, og hvordan forbedres det på HTTP? Læs mere ".
5 Ændringer på websted, der skal foretages til HTTP / 2-optimering
De vigtigste ændringer, du skal være opmærksomme på som websteejer, er relateret til, hvordan man håndterer webstedsressourcer. Specifikt med hensyn til, hvordan dit websteds server vil tale med en browser, og hvordan filerne leveres.
Nedenfor er de mest almindelige ændringer, du skal se på for at optimere dit websted med HTTP / 2.
1. Kombiner ikke din CSS eller JavaScript
Du skal ikke længere sammenkæde eller kombinere dine webstedsressourcer. I HTTP / 1.1 vil dette reducere antallet af HTTP-anmodninger, og filer, der skal downloades for at få vist dit websted.
Hver HTTP-anmodning tilføjer latens, så ved HTTP / 1.1 er det ofte mere effektivt at downloade en fil end at downloade flere filer. Færre filer hjælper også med at komme rundt om grænsen til samtidige downloads i HTTP / 1.1.
Da HTTP / 2 tillader flere downloads uden flere serveranmodninger, er antallet af filer mindre vigtigt, når du optimerer for hastighed. Kombineret med cache er specifikke filer bedre i HTTP / 2.
Faktisk giver mere specifikke filer dig mulighed for at tjene det meste af dit websted fra dit Content Delivery Network (CDN) og brugerens browser-cache. Det betyder også, at browseren ikke behøver at downloade og analysere en enkelt stor fil fra din server, når du opretter mindre justeringer til dit websted.
2. Inline ikke scripts i HTML
Indlejring af CSS- og JS-filer i dit HTML-dokument forbedrer din sidehastighedshastighed i HTTP / 1.1. Som med at kombinere filer vil det reducere filnumre og serveranmodninger.
Indlænding af scripts i HTML, når du bruger HTTP / 2, reducerer optimering af din sidehastighed fra cache ved at fjerne en browsers evne til at cache-aktiver individuelt.
Det vil også bryde enhver forbedring fra strømprioritering, da alt indbygget script og indhold får det samme prioritetsniveau som dit HTML-indhold.
I stedet for at indlæse aktiver for at reducere HTTP-anmodninger, kan du drage fordel af multiplexing og server push. Dette gør det muligt for browsere at downloade flere ressourcer med færre anmodninger og forbedre din sides belastningshastighed.
Kort sagt, hold dine ressourcer adskilt og små, når det er muligt.
3. Stop med at bruge CSS Image Sprites
Image Sprites er billeder, der består af mange mindre billeder (som ovenstående). CSS specificerer derefter hvilke sektioner af billedet, der skal vises.
Som med de fleste HTTP / 1.1-løsninger, bruger vi billedsprites til dels for at reducere serveranmodninger. I HTTP / 2 kan du med sikkerhed bruge separate billeder uden at påvirke din sides belastningshastighed negativt.
Mindre filer downloades hurtigere og mere effektivt takket være multiplexing og server push.
4. Brug ikke domæneskærmning
Domæneskærring bruges til at omgå de samtidige downloadbegrænsninger i HTTP / 1. Denne begrænsning er normalt mellem fire og otte pr. Domæne og er indstillet af browsere til dels for at reducere DDOS-angreb.
Afskærmning af dit websted på tværs af fire domæner, for eksempel, kan teoretisk tjene ressourcer i en fjerdedel af tiden i HTTP / 1.1.
Domæneskærning er ikke længere nødvendigt takket være HTTP / 2s multiplexing.
Bemærk, at browsere ikke kan drage fordel af multiplexing og parallelle downloads på tværs af flere domæner i HTTP / 2. Afskærmning vil også bryde HTTP / 2s strømprioritering, hvilket yderligere reducerer fordelene ved at bruge HTTP / 2.
5. Udnyt Server Push
Den største forbedring af HTTP / 2 er muligvis server push.
Når du anmoder om at se en side i HTTP / 1.1, sender serveren HTML-dokumentet først. Din browser begynder derefter at analysere dette og anmode separat om CSS-, JS- og mediefiler, der er omtalt i dokumentet.
I HTTP / 2 gør server-push en server mulighed for at skubbe de nødvendige ressourcer til en browser uden en separat anmodning om dem. Dette inkluderer CSS- og JavaScript-filer såvel som medier og vil reducere HTTP-anmodninger og fremskynde indlæsning af sider.
Smashing Magazine har en stor omfattende guide til HTTP / 2's server push med indsigt i, hvordan det fungerer, og hvordan man aktiverer det.
Sådan konfigureres din server til HTTP / 2
De fleste serverimplementeringer understøtter allerede HTTP / 2. Hvis du bruger en delt vært, skal du imidlertid tjekke med din serveradministrator, hvis de har aktiveret HTTP / 2. Hvis du er nysgerrig, har GitHub en liste over serverimplementeringer, der understøtter HTTP / 2.
Nginx-servere har oprindelig support til HTTP / 2, mens du muligvis skal konfigurere Apache-servere for at aktivere HTTP / 2-support.
Hvis dit websted er HTTPS aktiveret (et HTTP / 2-krav), kan du kontrollere, om dit websted er leveret med HTTP / 2 på http2.pro. Når det er sagt, hvis du bruger Cloudflare som dit CDN, serveres noget indhold fra deres servere via HTTP / 2 uden at du behøver at foretage nogen ændringer.
WordPress-specifikke værter begrænser undertiden de konfigurationsændringer, du kan foretage, især i deres lavere niveau-tjenester. Når det er sagt, anbefaler vi Bluehost til dine WordPress-websteder. Bluehost tilbyder gratis SSL og CDN og tjener dine websteder via HTTP / 2.
HTTP / 2 er bare det første trin
HTTP / 2 er en enorm forbedring af den forrige standard, og du skal nu have en vis indsigt i de fordele, du kan få ved at implementere den.
Aktiverede websteder vil indlæses hurtigere og være mere sikre, hvilket også vil øge dit søgeplacering. HTTP / 3 er allerede på vej, og at konfigurere dit websted til HTTP / 2 vil gøre dit eventuelle spring til HTTP / 3 meget glattere.
Ud over opsætning af dit websted til HTTP / 2, bør du også overveje disse måder til at få dit websted til at indlæse hurtigere 7 måder at gøre dit websted eller blogbelastning hurtigere for besøgende 7 måder at gøre dit websted eller blogbelastning hurtigere for besøgende Her er nogle top tip til at fremskynde dit websted og sikre, at dine besøgende holder sig rundt. Læs mere .
Udforsk mere om: HTTP / 2, Webudvikling.
