Hastigheten är viktig för alla webbplatser. I webbens strävan efter snabba laddningstider så finns det ett antal olika tekniker som hjälper oss. Ett tillvägagångssätt är att minimera den underliggande koden som din webbplats använder utan att påverka hur den fungerar. GZIP-komprimering är ett sätt att göra detta på, men Brotli-komprimering är en alternativ ny metod som väcker alltmer uppmärksamhet.
Det är en lösning som utvecklats av Google och som ser ut att erbjuda ett antal fördelar jämfört med (samt ett alternativ till) GZIP-komprimering. Detaljerna i den här artikeln kommer att gå igenom vad denna teknik erbjuder i detalj. Brotli-komprimering är dock snabb och effektiv, vilket egentligen är tillräckligt med information.
Kolla in vår videoguide om Brotli-komprimering
I den här guiden så ska vi titta på Brotli-komprimering och visa hur du kan kontrollera om din webbplats använder den och hur du aktiverar den om det krävs. Vi ska allra först placera Brotli inom komprimeringsalgoritmen och tala om varför du bör använda den framför andra lösningar.
Datakomprimering för webben
I sin mest grundläggande form så tar datakomprimering koden för en webbplats eller app och minimerar filstorleken. Detta ger dig lättare filer att flytta runt på webben och minskar tiden som det tar att ladda och rendera en webbplats. Du kommer att upptäcka att det finns många olika sätt att komprimera data beroende på vilken filtyp som du arbetar med.
Ett vanligt sätt är ”minifiering” Detta innebär att en algoritm tar bort en del överflödiga element från koden på din webbplats. Tanken är att aspekter som indrag, kommentarer, vitrymder med mera ökar filstorleken och därmed laddningstiderna.
Att ta bort dessa element påverkar inte användarupplevelsen (UX) i de flesta situationer. Det gör dock saker och ting mer okomplicerade för de datorer som måste kompilera och rendera koden. Ta exempelvis den här kodsviten:
define( 'WP_INSTALLING', true );
/** Sets up the WordPress Environment. */
require __DIR__ . '/wp-load.php';
require __DIR__ . '/wp-blog-header.php';
if ( ! is_multisite() ) {
wp_redirect( wp_registration_url() );
die();
}
$valid_error_codes = array( 'already_active', 'blog_taken' );Ovanstående kod använder element som mellanslag och vändtecken för att göra den läsbar för människor, men en dator behöver inte dessa element för att förstå kärnkoden. Dessa partier av vitrymder och radbrytningar tar dessutom upp värdefullt utrymme som, om de tas bort, kan ge dig en prestandaförstärkning.
Om du minimerar den här koden så ser den helt annorlunda ut:
define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. *
/ require __DIR__ . '/wp-load.php';
require __DIR__ . '/wp-blog-header.php';
if ( ! is_multisite() ) {
wp_redirect( wp_registration_url() );
die();
}
$valid_error_codes = array( 'already_active', 'blog_taken' );Grunddragen i vad den här koden gör är dock fortfarande desamma.
Du kommer att upptäcka att andra filtyper har sätt att komprimera data. Bilder kräver exempelvis ofta mycket komprimering för att minska storleken utan att själva bilden försämras:
GZIP-komprimering är ett standardiserat sätt att minimera storleken på paket av filer – tänk på paket som ZIP eller Linux .tar. Men det har hittills inte funnits några riktiga alternativ. Vi kommer att prata mer om varför ett alternativ borde finnas senare, men först så ska vi presentera GZIP:s ”konkurrent”
Brotli-komprimering
I ett nötskal så är Brotli en algoritm för datakomprimering. Om detta vore allt som vi hade att säga så skulle det dock inte finnas någon anledning att undersöka den.
Den ger en ”förlustfri” komprimering och har utvecklats av Google under en MIT-licens. Företaget ligger ofta i framkant när det gäller teknik som främjar webben. Det är med andra ord ingen överraskning att Brotli ser ut att ta det som GZIP gör, förbättra detta och erbjuda en bättre upplevelse för användare och webbplatser.
Brotli-komprimering använder samma grundläggande kärntekniker som GZIP-komprimering, nämligen:
- LZ77-algoritmen
- Huffman-kodning och avkodning
Om man kombinerar dessa två tekniker så får man faktiskt formatet DEFLATE som fungerar som en grund för både GZIP- och Brotli-komprimering. Detta är något som vi går in på extremt djupt i vårt inlägg om GZIP-komprimering.
I korthet så går okomprimerade filer genom LZ77- och Huffman-algoritmerna som en del av DEFLATE -processen för att de ska komprimeras till ett Brotli-format. Därefter kommer en INFLATE -process att dekomprimera filerna igen vid behov.
Även om Brotli för närvarande är GZIP:s främsta utmanare så finns det andra liknande tekniker som också använder DEFLATE. I nästa avsnitt så kommer vi att tala om vad som gör att Brotli sticker ut.
Brotli-komprimering jämfört med GZIP-komprimering
Som vi redan har nämnt så använder både Brotli och GZIP metoden DEFLATE för att komprimera (och dekomprimera) data. Detta kan förvirra många människor, eftersom detta i sig inte motiverar en övergång.
Google bygger dock på DEFLATE för att erbjuda förbättrade tekniker och komprimera data till en högre och snabbare standard.
Hur Brotli använder ordböcker för att förbättra datakomprimeringen
En teknisk aspekt av datakomprimeringsformatet är att Brotli-komprimeringen nyttjar ett befintligt känt språk och känd text i dataförteckningar för att använda sin algoritm.
Utvecklare kommer att använda en ordbok med nyckel-värdepar för att lagra data, eftersom det är effektivt, flexibelt och skalbart. Så här skulle en PHP-ordbok (kallad ”array”) se ut:
$cats = get_categories(
array(
'taxonomy' => 'link_category',
'hierarchical' => 0,
'include' => $link_cat,
)
);GZIP nyttjar ingen ordbok medan Brotli nyttjar två stycken.
Brotlis statiska ordbok
Den första är en statisk (dvs. fördefinierad) ordbok med vanliga kodtermer som fungerar som en referens för HTML-, CSS- och JavaScript-texten.
Det finns över 13 000 ord på sex olika språk, och Brotli använder dessa som referenser till punkter i koden. Det är inte en exakt analogi, men det liknar sättet som en WordPress-krok refererar till en större kodsvit.
På så sätt behöver kodaren inte sålla igenom koden byte för byte. Man kan istället agera på referenserna, hämta definitionen från ordboken och gå vidare till nästa.
Du kommer även att upptäcka att det finns verkliga fraser i ordboken samt kod som inte komprimeras så ofta. Detta hjälper vissa taggar som <HTML> och parametrar som type="text/javascript" att ta emot en del komprimering och ge dig större vinster.
Det finns även en del ”omvandlingar” i ordlistan: partiella, ofullständiga och andra typer av fraser som med ett nytt prefix, suffix eller kasus blir ett helt nytt ord – exempelvis ”Work” som omvandlas till ”Working” eller ”html” till ”HTML”
Brotli’s dynamiska ordbok
Den dynamiska ordboken analyserar innehåll och kod vid källan. Detta är bra för mindre enheter, men inte lika bra för större filer. Det kallas även för ett ”glidande fönster” och kan vara upp till 16 MB stort. Det är här som komprimeringsalgoritmen ”fångar in” en del av de senaste uppgifterna för att kunna referera till dem. Det är ultradynamiskt eftersom det ständigt förändras.
Om man jämför detta med GZIP:s glidande fönster på cirka 32 KB så ser man att möjligheterna till analys och komprimering i realtid är enorma. Faktum är att de flesta typiska metoderna använder ett Brotli-glidfönster på cirka 4 MB, vilket fortfarande är enormt jämfört med konkurrerande algoritmer.
Brotli-komprimering jämfört med GZIP-komprimering: Prestanda och stöd
När det gäller rena användarsiffror så är GZIP-komprimering fortfarande nummer ett. Brotli-komprimering används dock mer och mer för varje dag. Detta beror delvis på att de stora webbläsarna har vidtagit fler åtgärder för att införa den, men även de Chromium-baserade webbläsarna har bidragit till detta.
Kolla in vår videoguide om Brotli-komprimering vs GZIP-komprimering
Webbplatsen Can I Use… registrerar vilken teknik som webbläsarna använder och ger en slags historik. På denna webbplats så kan man se att över 95 % av webbläsarna använder Brotli-komprimering i dagsläget, inklusive alla större versioner.
I vår artikel om GZIP-komprimering så noterade vi ett riktmärkestest där Brotli hade ett bättre komprimeringsförhållande jämfört med konkurrerande algoritmer, men hamnade på efterkälken när det gäller komprimerings- och dekomprimeringstid:
Squash Riktmärkestesterna visar dock en annan historia – en mer nyanserad bild. Den verkliga slutsatsen är att Brotli på det stora hela är mer flexibelt än GZIP, med ett generellt sett högre komprimeringsförhållande.
Här är en sammanfattning av Squash’s riktmärkesresultat:
- Brotli har ett bättre komprimeringsförhållande (dvs. producerar mindre storlek på komprimerade filer) när det gäller alla komprimeringsnivåer.
- Även om GZIP för det mesta slår Brotli i fråga om hastighet, så spelar nivån som du komprimerar på en roll för vilka resultat som du får se.
Paul Calvano’s sammanställning ger ytterligare detaljer, men kärnan är att Brotli behöver mer CPU-kraft för att ge en högre filkomprimeringsfaktor. Detta visar sig både på de högsta och lägsta komprimeringsnivåerna. Cloudflare’s riktmärkestester bekräftar detta: mycket mindre filer, med nästan jämförbara komprimeringshastighetssiffror.
Tänk även på att vissa testverktyg som Pingdom och vissa innehållsleveransnätverk (CDN) ännu inte stöder Brotli. Detta kan snedvrida de uppgifter som andra samlar in om hur Brotli fungerar. Du kan möta ”falska negativa” resultat om du utför tester: högre siffror för sidhastighet som ignorerar din nyttjade filkomprimering.
Fördelar med Brotli-komprimering
Det finns mycket information att ta till sig om Brotli-komprimering. Vi kan dock sammanfatta varför du bör välja Brotli framför GZIP:
- Brotli tar samma teknik som GZIP använder och förbättrar den med moderna metoder.
- Brotli’s ordboksbaserade analysering innebär att den kan komprimera fler av dina filer på en djupare nivå.
- Även om Brotli behöver mer beräkningskraft jämfört med GZIP så innebär resultaten mindre filer.
- På de komprimeringsnivåer som de flesta hosting-leverantörer använder – något i mellanklassen som nivå fyra eller fem – så presterar Brotli bättre än GZIP utan att svettas.
- Du kommer att upptäcka att Brotli nästan har ett universellt stöd i alla webbläsare, om än inte i vissa av de riktmärkesverktyg som du är van vid.
- Brotli är kostnadsfritt att använda och har öppen källkod. Detta är en fördel om du använder ett Brotli-kompatibelt CDN, exempelvis Cloudflare.
Det är värt att notera att Cloudflare använder Brotli-komprimering på alla sina servrar. Faktum är att de använder en modifierad och optimerad version av Brotli för att ge dig ytterligare vinster när det gäller hastighet och filleverans.
Eftersom Kinsta erbjuder en Cloudflare-integrering i alla planer så använder varje hostad webbplats Brotli som standard. Detta är bara en anledning till att Kinsta är en av branschens marknadsledande och bästa hosting-leverantörer.
Så här kontrollerar du om din webbplats använder Brotli-komprimering
Eftersom Brotli-komprimering ännu inte är standard (även om den nästan är det) så vill du förmodligen veta om din webbplats använder den. Det finns några sätt att ta reda på detta.
1. Använd ett online-verktyg
Det enklaste sättet att kontrollera om din webbplats använder Brotli-komprimering är att använda ett onlineverktyg. Det finns flera att välja mellan, men du bör ha något som är snabbt och enkelt att använda och som även ger dig en massa information om din installation.
Gift of Speed är vårt val för att kontrollera Brotli-komprimering.
Den kommer att avgöra om din webbplats använder GZIP, Brotli eller ingen komprimering alls. Du får även några andra mätvärden som hjälper dig att bestämma vad du ska göra härnäst. Dessa mätvärden ger viktiga insikter, eftersom du inte bara bör ta hänsyn till om servern på din webbplats använder rätt ”typ” av komprimering.
Det finns många element som utgör en webbplats, även bibliotek och beroenden från tredje part. Du kanske väljer att servera dem med hjälp av ett CDN, och i så fall så måste även detta använda Brotli-komprimering för bästa möjliga prestanda.
Om du använder Gift Of Speed för att testa enskilda tillgångar så kan du ta en titt på Server-värdet för att se hur det serveras.
Alla Kinsta-webbplatser använder det Cloudflare-drivna Kinsta CDN: et. Detta gör att varje webbplats även nyttjar Brotli-komprimering i hela kedjan och serverarkitekturen.
2. Kontrollera med hjälp av webbläsarens utvecklingsverktyg
De flesta utvecklare vet att en webbläsare erbjuder några fantastiska verktyg för att hjälpa dig med alla typer av webbrelaterade undersökningar och felsökningar. En snabb kontroll som du kan göra är om din webbplats (eller en specifik tillgång) använder Brotli-komprimering.
För alla större webbläsare som Brave, Edge, Firefox eller Chrome så kan du gå till skärmen Nätverk > Alla.
Till att börja med så ser du inget som rör innehållsrubriken – du måste välja en tillgång eller begäran från vänster. Om du fortsätter att leta och bläddra neråt i listan så öppnas en panel med information om rubriker som standard.
Scrolla nedåt i resultatet tills du ser raden content-encoding: br:
Kort sagt: Om du ser content-encoding: br, så betyder detta att Brotli är aktiverat för den webbplatsen.
Så här aktiverar du Brotli-komprimering för din webbplats
I de här sista avsnitten så kommer vi att visa dig ett antal olika sätt att aktivera Brotli-komprimering för din webbplats. Det första kommer att vara det tillvägagångssätt som vi rekommenderar för de flesta WordPress-webbplatser som inte använder Kinsta – och det sista är vad vi rekommenderar för alla webbplatser som läser det första tillvägagångssättet!
1. Använd ett WordPress-plugin
Så gott som varje WordPress-webbplats kommer att använda minst ett plugin – ofta fler beroende på vilken funktionalitet som webbplatsen behöver. Cachelagring är ett användningsområde för plugins, och det finns många sådana. Alla låter dig dock inte aktivera Brotli-komprimering, så du måste välja klokt och vara beredd på att byta från din favoritlösning.
Innan du gör några ändringar på en webbplats så ska du komma ihåg att göra en fullständig säkerhetskopia om du behöver återställa senare. För den här metoden så använder vi W3 Total Cache eftersom det är enkelt att hitta rätt inställning.
Du måste gå till sidan Prestanda > Webbläsar Cache i WordPress:
Denna skärm visar två inställningar. Den du ska välja är Aktivera HTTP (brotli) Komprimering:
Detta kommer dock inte att vara lämpligt för alla webbplatser och situationer. Kinsta optimerar exempelvis sin server för en snabb, högpresterande och pålitlig hosting. Som sådan så finns det ett antal plugins som du inte behöver, och vissa andra är till och med förbjudna att använda på Kinsta-webbplatser.
I dessa fall så bör du välja ett annat tillvägagångssätt.
2. Aktivera Brotli på servern
När det gäller val av servertyp så är Nginx vs Apache en långvarig kamp som (för tillfället) vinns av den förstnämnda. Oavsett detta så kan båda servertyperna aktivera Brotli-komprimering, och det finns olika tillvägagångssätt för var och en av dem.
Innan du tittar på det manuella tillvägagångssättet så finns det några förutsättningar som du bör känna till:
- Du bör förstå hur du får tillgång till konfigurationsfilerna för din specifika server.
- Kunskaper om kommandoraden kommer att vara till fördel, särskilt när det gäller Apache-servrar. För att kunna köra kommandon så måste du vara en root-användare med
sudo-privilegier. - Du kan behöva en textredigerare, men för snabba ändringar som denna så bör du klara dig bra.
- I vissa fall så behöver du dina inloggningsuppgifter som användare av Secure Shell (SSH) på själva servern. Du kan hitta dessa i din kontrollpanel för hostingen, eller kontakta supporten för att fråga.
Om du är tveksam till det manuella tillvägagångssättet så rekommenderar vi att du tittar på ett annat alternativ eller att du kontaktar din host för att få hjälp. Oavsett vilket så kommer vi att ge dig en kort översikt över processen för varje server i tur och ordning, och vi börjar med Nginx.
Nginx
För att aktivera Brotli-komprimering på Nginx-servrar så måste du först hitta filen nginx.conf. Den kommer att finnas på en av några få platser:
/usr/local/nginx/conf/etc/nginx/usr/local/etc/nginx
När du har öppnat filen så lägger du till följande längst ner:
brotli on;
brotli_static on;
brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance.
brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;Den här sviten aktiverar Brotli och använder den för att servera statiska filer. Inställningen brotli_comp_level gör att du kan ändra nivå beroende på ditt användningsområde och dina behov. Högre siffror ger bättre komprimering men en sämre presterande webbplats.
Apache
Eftersom Apache är flexibelt när det gäller konfigurationer så kan du aktivera Brotli-komprimering utan alltför mycket krångel.
För att göra detta så följer du de här stegen:
- Logga in på din server med hjälp av en kommandotolk eller ett terminalprogram som root
sudo-användare. - Kör kommandot
a2enmod brotliför att aktivera komprimeringen. - I antingen Apache VirtualHost eller i din serverkonfiguration så lägger du till raden
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascriptför att ställa in de filtyper som du vill komprimera.
Apache stöder inte statisk komprimering, men du kan ändra nivån på Brotli-komprimeringen med hjälp av raden BrotliCompressionQuality LEVEL-NUMBER . Du måste dock ersätta platshållaren ”LEVEL-NUMBER” med en siffra mellan 1-11.
3. Använd en stödjande hosting-leverantör
Det enklaste sättet att aktivera Brotli-komprimering för din webbplats är att se till att din hosting-leverantör gör detta som standard. Kinsta erbjuder Brotli-komprimering tack vare integreringen med Cloudflare’s CDN.
Kinsta CDN drivs av Cloudflare’s infrastruktur i alla planer – så varje webbplats använder Brotli-komprimering utan att du behöver aktivera den.
Du bör kontrollera om din valda host erbjuder Brotli-komprimering och till vilken nivå som du behöver konfigurera den. För att kunna köra den mest prestandarika, stabila och säkra webbplatsen så är det viktigt att ha en bra hosting-leverantör.
Sammanfattning
Datakomprimering är en nödvändig komponent för att utveckla och använda den moderna webben. Filstorlekarna kan skjuta i höjden på grund av de rika och komplexa filtyper som du använder för att sätta ihop en webbplats. Alla dessa behöver någon form av komprimering.
Den typiska metoden har hittills varit GZIP, men det finns ett nytt snille i klassen.
Brotli-komprimering bygger på samma teknik som GZIP, men inkluderar några prestandaförbättrande fördelar. Som vi diskuterade så använder den kontextmappning för att behandla en komprimeringsbegäran snabbare, och en ordbok som använder dynamisk population. Detta är mycket bättre än vad GZIP kan erbjuda, och låter även mobila användare dra nytta av komprimeringen.
Den goda nyheten är att varje Kinsta-webbplats kan dra nytta av Brotli-komprimering tack vare vår unika Cloudflare-integrering. Detta innebär att din Kinsta-hostade webbplats är snabbare än konkurrenternas som använder GZIP och laddas snabbt för dem som använder mindre enheter.
Har du några frågor om Brotli-komprimering? Fråga gärna i kommentarsfältet nedan!
Salman Ravoof är en självlärd webbutvecklare, författare, skapare och en stor beundrare av fri och öppen källkod (FOSS). Förutom teknik är han intresserad av vetenskap, filosofi, fotografi, konst, katter och mat. Lär dig mer om honom på hans hemsida och kontakta Salman på X.
Lämna ett svar