Hastighed er vigtig for ethvert websted. I webets stræben efter hurtige indlæsningstider har vi en række forskellige teknologier til hjælp. En tilgang er at minimere den underliggende kode, som dit websted vil bruge, uden at det påvirker dets funktion. GZIP-komprimering er en måde at gøre dette på, men Brotli-komprimering er en alternativ, nyudviklet metode, som kræver opmærksomhed.
Det er en Google-udviklet løsning, der ser ud til at give en række fordele i forhold til (samt et alternativ til) GZIP-komprimering. Detaljerne i denne artikel vil gå ind på præcis, hvad teknologien tilbyder, men Brotli-komprimering er hurtig og effektiv – hvilket opfylder alle de krav, du har brug for for at undersøge den.
Tjek vores videoguide til Brotli-komprimering
I denne vejledning vil vi se på Brotli-komprimering og vise dig, hvordan du tjekker, om dit websted bruger den, og hvordan du aktiverer den, hvis du har brug for det. Først vil vi placere Brotli inden for komprimeringsalgoritmeområdet og tale om, hvorfor du vil bruge den frem for andre løsninger.
Datakomprimering til internettet
I sin mest grundlæggende form tager datakomprimering koden til et websted eller en app og minimerer filstørrelsen. Dette giver dig lettere filer at flytte rundt på nettet og reducerer den tid, det tager at indlæse og gengive et websted. Du vil opdage, at der er mange måder at komprimere data på, afhængigt af hvilken filtype du arbejder med.
En almindelig metode er “minificering.” Her fjerner en algoritme nogle af de overflødige elementer fra dit websteds kode. Ideen er, at aspekter som indrykninger, kommentarer, whitespace og andet vil øge filstørrelsen og dermed indlæsningstiden.
Fjernelse af disse elementer påvirker ikke brugeroplevelsen (UX) i de fleste situationer. Det gør dog tingene mere overskuelige for de computere, der skal kompilere og gengive koden. Tag f.eks. denne kodesuite:
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' );Ovenstående kode bruger elementer som spacing og vogne for at gøre den læsbar for mennesker, men en computer har ikke brug for disse elementer for at forstå kernekoden. Desuden optager disse partier af whitespace og linjeskift kostbar plads, som, hvis de fjernes, kan give dig et ydelsesmæssigt løft.
Hvis du minimerer denne kode, ser den helt anderledes ud:
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' );Det grundlæggende i det, som denne kode gør, er dog stadig det samme.
Du vil opdage, at andre filtyper har måder at komprimere data på. For eksempel kræver billeder ofte en masse komprimering for at reducere størrelsen uden stor forringelse af selve billedet:
GZIP-komprimering er en standardmetode til at minimere størrelsen af bundter af filer – tænk på pakker som ZIP eller Linux .tar bundter. Men indtil nu har der ikke været nogen reelle alternativer. Vi vil senere tale mere om, hvorfor der bør findes et alternativ, men lad os først præsentere dig for GZIP’s “konkurrent.”
Brotli-komprimering
I en nøddeskal er Brotli en datakomprimeringsalgoritme. Men hvis det var alt, hvad vi havde at sige, ville der ikke være nogen grund til at undersøge den.
Den giver “lossless” komprimering og er udviklet af Google under en MIT-licens. Virksomheden er ofte på forkant med teknologi til fremme af internettet, så det er ikke overraskende, at Brotli ser ud til at tage det, som GZIP gør, forbedre det og tilbyde en forbedret oplevelse til brugere og websteder.
Brotli-komprimering anvender de samme grundlæggende kerneteknologier som GZIP-komprimering, nemlig:
- LZ77-algoritmen
- Huffman-kodning og -afkodning
Hvis man kombinerer disse to teknologier, får man faktisk DEFLATE -formatet, der tjener som grundlag for både GZIP- og Brotli-komprimering. Det er noget vi går ekstremt i dybden med i vores indlæg om GZIP-komprimering.
Kort sagt kører ukomprimerede filer gennem LZ77- og Huffman-algoritmerne som en del af DEFLATE -processen for at komprimere dem til et Brotli-format. Derfra vil en INFLATE -proces dekomprimere filerne igen, når det er nødvendigt.
Selv om Brotli i øjeblikket er GZIP’s største konkurrent, findes der andre lignende teknologier, som også anvender DEFLATE. I næste afsnit vil vi tale om, hvad der gør, at Brotli skiller sig ud.
Brotli-komprimering vs. GZIP-komprimering
Som nævnt bruger både Brotli og GZIP metoden DEFLATE til at komprimere (og dekomprimere) data. Dette kan forvirre mange mennesker, fordi dette alene ikke berettiger et skift.
Google bygger imidlertid oven på DEFLATE for at tilbyde forbedrede teknikker og komprimere data til en større og hurtigere standard.
Sådan bruger Brotli ordbøger til at forbedre datakomprimering
Et teknisk aspekt af datakomprimeringsformater er den måde, hvorpå Brotli-komprimering bruger eksisterende kendt sprog og tekst i data-vordbøger til at anvende sin algoritme.
Udviklere vil bruge en ordbog med nøgle-værdipar til at gemme data, da det er effektivt, fleksibelt og skalerbart. Her er, hvordan en PHP-ordbog (kaldet et “array”) ville se ud:
$cats = get_categories(
array(
'taxonomy' => 'link_category',
'hierarchical' => 0,
'include' => $link_cat,
)
);Mens GZIP ikke bruger ordbøger, bruger Brotli to.
Brotli’s statiske ordbog
Den første er en statisk (dvs. foruddefineret) ordbog med almindelige kodeudtryk, der fungerer som reference for HTML-, CSS- og JavaScript-teksten.
Der er over 13.000 ord på seks forskellige sprog, og Brotli vil bruge disse som referencer til punkter i koden. Det er ikke en nøjagtig analogi, men det svarer til den måde, hvorpå en WordPress-hooks refererer til en større kodesuite.
Som sådan behøver encoderen ikke at gennemgå koden byte for byte. I stedet kan den handle på referencerne, trække definitionen fra ordbogen og gå videre til den næste.
Du vil også opdage, at der er reelle sætninger i ordbogen samt kode, som ikke ofte ville blive komprimeret. Dette hjælper nogle tags som f.eks. <HTML> og parametre som f.eks. type="text/javascript" med at tage noget komprimering og give dig nogle større gevinster.
Der er også nogle “transformationer” i ordbogen: delvise, ufuldstændige og andre typer sætninger, der med et nyt præfiks, suffiks eller kasus bliver til et helt nyt ord – f.eks. “Work”, der bliver til “Working” eller “html” til “HTML.”
Brotli’s dynamiske ordbog
Den dynamiske ordbog analyserer indhold og kode ved kilden, hvilket er godt for mindre enheder, men ikke så godt for større filer. Den kaldes også for et “sliding window” og kan være op til 16 MB stor. Det er her, at komprimeringsalgoritmen “cacher” nogle af de nyeste data for at kunne henvise til dem. Det er ultradynamisk, idet det konstant ændres.
Hvis man sammenligner dette med GZIP’s sliding window på ca. 32 KB, vil man se, at mulighederne for parsing og komprimering i realtid er enorme. Faktisk bruger de fleste typiske praksis et Brotli-sliding window på omkring 4 MB, hvilket stadig er gigantisk sammenlignet med konkurrerende algoritmer.
Brotli-komprimering vs. GZIP-komprimering: Ydelse og support
Når det drejer sig om rene brugertal, er GZIP-komprimering stadig nummer et. Brotli-komprimering bliver dog brugt mere og mere hver dag. Dette skyldes til dels de store browseres bredere vedtagelse af foranstaltningerne; fremkomsten af Chromium-baserede browsere hjælper også.
Se vores videoguide til Brotli-komprimering vs. GZIP-komprimering
Webstedet Can I Use… registrerer, hvilke teknologier browsere anvender, og giver en slags historik. Dette websted bemærker, at over 95% af browserne bruger Brotli-komprimering i øjeblikket, herunder alle større versioner.
I vores artikel om GZIP-komprimering bemærkede vi en benchmark-test, hvor Brotli havde et bedre kompressionsforhold sammenlignet med konkurrerende algoritmer, men faldt bagud med hensyn til komprimerings- og dekomprimeringstid:
Squash Benchmark-testene viser dog en anden historie – en mere nuanceret historie. Den virkelige pointe er, at Brotli i det store og hele er mere fleksibel end GZIP med et generelt højere kompressionsforhold.
Her er en opsummering af Squash Benchmarks’ resultater:
- Brotli har et bedre kompressionsforhold (dvs. den producerer mindre komprimerede filer) på alle kompressionsniveauer.
- GZIP slår Brotli på hastighed det meste af tiden, men det niveau, du komprimerer på, har betydning for de resultater, du får.
Paul Calvanos opdeling giver yderligere detaljer, men det vigtigste er, at Brotli har brug for mere CPU-kraft for at give en større filkomprimeringsfaktor. Dette viser sig både på det højeste og det laveste komprimeringsniveau. Cloudflares benchmarking understøtter dette: meget mindre filer med tættere sammenlignelige komprimeringshastighedstal.
Tænk også på, at nogle testværktøjer som Pingdom og nogle content delivery networks (CDN’er) endnu ikke understøtter Brotli. Dette kan forvrænge de data, som andre indsamler om, hvordan Brotli fungerer. Du kan se “falske negative resultater”, hvis du udfører test: højere tal for sidehastighed, som ignorerer den filkomprimering, du anvender.
Fordele ved Brotli-komprimering
Der er indtil videre mange oplysninger at tage til sig om Brotli-komprimering. Vi kan dog opsummere det, du skal vide om, hvorfor du bør vælge Brotli frem for GZIP:
- Den tager den samme teknologi som GZIP bruger og forbedrer den med moderne metoder.
- Brotli’s ordbogsbaserede parsing betyder, at den kan komprimere flere af dine filer på et dybere niveau.
- Mens Brotli har brug for mere computerkraft sammenlignet med GZIP, betyder resultaterne mindre filer.
- På de komprimeringsniveauer, som de fleste webhoteller bruger – noget i mellemklassen såsom niveau fire eller fem – klarer Brotli sig bedre end GZIP uden at få problemer.
- Du vil opdage, at Brotli har næsten universel understøttelse på tværs af browsere, hvis ikke nogle af de benchmark-værktøjer, du er vant til.
- Brotli er gratis at bruge og open source. Det er en fordel, hvis du bruger et Brotli-kompatibelt CDN, f.eks. Cloudflare.
Det er værd at bemærke, at Cloudflare bruger Brotli-komprimering på alle sine servere. Faktisk bruger den en modificeret og optimeret version af Brotli for at give dig yderligere gevinster med hensyn til hastighed og levering af filer.
Fordi Kinsta tilbyder Cloudflare-integration på alle abonnementer, bruger alle hostede websteder Brotli som standard. Dette er blot én af grundene til, at Kinsta er en af de markedsledende og bedste hostingudbydere.
Sådan tjekker du, om dit websted bruger Brotli-komprimering
Fordi Brotli-komprimering ikke er standard endnu (selv om det næsten er der), vil du sandsynligvis gerne vide, om dit websted bruger det. Der er et par måder at finde ud af det på.
1. Brug et online værktøj
Den enkleste måde at kontrollere, om dit websted bruger Brotli-komprimering, er ved hjælp af et onlineværktøj. Der er et par stykker at vælge imellem, men du vil have noget, der er hurtigt og enkelt at bruge, og som også giver dig en masse oplysninger om din opsætning.
Gift of Speed er vores valg til at tjekke, om der er Brotli-komprimering.
Den vil afgøre, om dit websted bruger GZIP, Brotli eller slet ingen komprimering, og give et par andre målinger, så du kan beslutte, hvad du skal gøre som det næste. Disse målinger giver vigtig indsigt, fordi du ikke kun ønsker at overveje, om dit webstedsserver bruger den rigtige “smag” af komprimering.
Der er mange elementer, der udgør et websted, og endda biblioteker og afhængigheder fra tredjeparter. Du vælger måske at servere dem ved hjælp af et CDN, og hvis det er tilfældet, skal dette også anvende Brotli-komprimering for at opnå den bedst mulige ydeevne.
Hvis du bruger Gift Of Speed til at teste individuelle aktiver, kan du tage et kig på Server-værdien for at se, hvordan det serveres.
Alle Kinsta-websteder bruger det Cloudflare-drevne Kinsta CDN. Som sådan vil hvert websted også bruge Brotli-komprimering i hele kæden og serverarkitekturen.
2. Tjek ved hjælp af din browsers udviklerværktøjer
De fleste udviklere vil vide, at en browser tilbyder nogle fantastiske værktøjer til at hjælpe dig med alle mulige webrelaterede undersøgelser og fejlfinding. Et hurtigt tjek, du kan foretage, er, om dit websted (eller et bestemt aktiv) bruger Brotli-komprimering.
I alle større browsere som Brave, Edge, Firefox eller Chrome kan du gå til skærmen Network > All (Netværk > Alle).
I første omgang vil du ikke se noget, der vedrører indholdsoverskrifter – du skal vælge et aktiv eller en anmodning fra venstre side. Hvis du bliver ved med at kigge og rulle nedad på listen, vil du se et panel blive åbnet, der som standard viser oplysninger om Headers.
Her skal du rulle nedad i output, indtil du ser linjen content-encoding: br:
Kort sagt: Hvis du ser content-encoding: br, fortæller det dig, at Brotli er aktiveret for det pågældende websted.
Sådan aktiverer du Brotli-komprimering for dit websted
I disse sidste par afsnit viser vi dig en række forskellige måder at aktivere Brotli-komprimering for dit websted på. Den første vil være den tilgang, vi anbefaler til de fleste WordPress-websteder, der ikke bruger Kinsta – og den sidste er det, vi anbefaler til alle websteder, der læser den første tilgang!
1. Brug et WordPress-plugin
Stort set alle WordPress-websteder vil bruge mindst ét plugin – ofte flere afhængigt af den funktionalitet, som webstedet har brug for. Caching er et anvendelsesområde for plugins, og der findes masser af dem. Det er dog ikke alle, der lader dig aktivere Brotli-komprimering, så du skal vælge klogt og være forberedt på at skifte din foretrukne løsning.
Inden du foretager ændringer på et websted, skal du huske at lave en fuld backup, hvis du har brug for at gendanne senere. Til denne metode vil vi bruge W3 Total Cache, fordi det er ligetil at finde den rigtige indstilling.
Du skal gå til siden Performance > Browser Cache i WordPress:
Denne skærm viser to indstillinger. Den du vil vælge er Enable HTTP (brotli) Compression (Aktiver HTTP-komprimering):
Dette vil dog ikke være egnet til alle websteder og situationer. Kinsta optimerer for eksempel sin server til hurtig, højtydende og pålidelig hosting. Som sådan er der en række plugins, som du ikke vil få brug for, og nogle andre er endda forbudt at bruge på Kinsta-websteder.
I disse tilfælde skal du vælge en anden fremgangsmåde.
2. Aktiver Brotli på serveren
Når det kommer til valg af servertype, er Nginx vs. Apache en langvarig kamp, som førstnævnte (for nu) vinder. Uanset hvad kan begge servertyper aktivere Brotli-komprimering, og der er forskellige fremgangsmåder for hver af dem.
Før du kigger på den manuelle tilgang, er der et par forudsætninger, som du bør kende:
- Du skal forstå, hvordan du får adgang til dine konfigurationsfiler for din specifikke server.
- Kendskab til kommandolinjen vil være en fordel, især når det drejer sig om Apache-servere. For at kunne køre kommandoer skal du være root-bruger med
sudo-privilegier. - Du har muligvis brug for en teksteditor, men til hurtige ændringer som denne bør det være fint nok.
- I nogle tilfælde skal du bruge dine loginoplysninger som en Secure Shell (SSH)-bruger på selve serveren. Du kan finde disse i dit hosting dashboard, eller du kan kontakte support for at spørge.
Hvis du er i tvivl om den manuelle fremgangsmåde, anbefaler vi, at du ser på en anden mulighed, eller at du kontakter din vært for at få hjælp. Uanset hvad vil vi give en kort oversigt over processen for hver server efter tur, og vi starter med Nginx.
Nginx
For at aktivere Brotli-komprimering på Nginx-servere skal du først finde filen nginx.conf. Den vil være en af et par steder:
/usr/local/nginx/conf/etc/nginx/usr/local/etc/nginx
Når du har filen åben, skal du tilføje følgende nederst i filen:
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;Denne suite vil aktivere Brotli og bruge den til at servere statiske filer. Indstillingen brotli_comp_level kan du ændre afhængigt af dit brugsscenarie og dine behov. Højere tal giver bedre komprimering afbalanceret med et mindre performant websted.
Apache
Fordi Apache er fleksibel, når det gælder konfigurationer, kan du aktivere Brotli-komprimering uden alt for meget besvær.
For at gøre dette skal du følge disse trin:
- Log ind på din server ved hjælp af en kommandoprompt eller et Terminal-program som en root
sudo-bruger. - Kør kommandoen
a2enmod brotlifor at slå komprimeringen til. - I enten Apache VirtualHost eller i din serverkonfiguration skal du tilføje linjen
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascriptfor at indstille de rigtige filtyper, du ønsker at komprimere.
Du kan ændre niveauet af Brotli-komprimering, som du tilbyder, ved hjælp af linjen BrotliCompressionQuality LEVEL-NUMBER . Du skal dog erstatte “LEVEL-NUMBER”-pladsholderen med et tal mellem 1-11.
3. Brug en understøttende webhost
Den mest enkle måde at aktivere Brotli-komprimering for dit websted på er at sikre, at din vært gør det som standard. Kinsta tilbyder Brotli-komprimering som standard takket være integrationen med Cloudflare’s CDN.
Kinsta CDN er drevet af Cloudflares infrastruktur på alle abonnementer – så hvert websted bruger Brotli-komprimering uden at du behøver at aktivere det.
Du skal kontrollere, om din valgte vært tilbyder Brotli-komprimering, og på hvilket niveau du skal konfigurere den. For at kunne køre det mest performante, stabile og sikre websted er god hosting afgørende.
Opsummering
Datakomprimering er en nødvendig komponent i forbindelse med udvikling og brug af det moderne web. Filstørrelser kan skyde i vejret på grund af de rige og komplekse filtyper, du bruger til at stykke et websted sammen. De har alle brug for en eller anden form for komprimering.
Den typiske fremgangsmåde har hidtil været GZIP, men der er en spiller på banen.
Brotli-komprimering baserer sin teknologi på det samme grundlag som GZIP, men indeholder nogle ydelsesforbedrende fordele. Som vi diskuterede, bruger den konteksttilknytning til at behandle en komprimeringsanmodning hurtigere og en ordbog, der bruger dynamisk population. Dette er meget større end det, som GZIP kan tilbyde, og det giver også mobilbrugere mulighed for at drage fordel af komprimeringen.
Den gode nyhed er, at alle Kinsta-websteder kan drage fordel af Brotli-komprimering på grund af vores unikke Cloudflare-integration. Det betyder, at dit Kinsta-hostede websted er hurtigere end konkurrenterne, der bruger GZIP, og at det indlæses hurtigt for dem, der bruger mindre enheder.
Har du spørgsmål om Brotli-komprimering? Du er velkommen til at spørge løs i kommentarfeltet nedenfor!
Han er en selvlært webudvikler, skribent, skaber og en stor beundrer af Free and Open Source Software (FOSS). Udover teknologi, er han begejstret for videnskab, filosofi, fotografi, kunst, katte og mad. Lær mere om ham på hans hjemmeside, og kontakt Salman på X.
Skriv et svar