{"id":47072,"date":"2022-11-09T16:42:39","date_gmt":"2022-11-09T16:42:39","guid":{"rendered":"https:\/\/kinqsta.com\/se\/?p=47072&preview=true&preview_id=47072"},"modified":"2022-11-14T16:31:21","modified_gmt":"2022-11-14T16:31:21","slug":"brotli-komprimering","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/se\/blog\/brotli-komprimering\/","title":{"rendered":"Brotli-komprimering: Ett snabbt alternativ till GZIP-komprimering"},"content":{"rendered":"

Hastigheten \u00e4r viktig f\u00f6r alla webbplatser. I webbens str\u00e4van efter snabba laddningstider s\u00e5 finns det ett antal olika tekniker som hj\u00e4lper oss. Ett tillv\u00e4gag\u00e5ngss\u00e4tt \u00e4r att minimera den underliggande koden som din webbplats anv\u00e4nder utan att p\u00e5verka hur den fungerar. GZIP-komprimering \u00e4r ett s\u00e4tt att g\u00f6ra detta p\u00e5, men Brotli-komprimering<\/a> \u00e4r en alternativ ny metod som v\u00e4cker alltmer uppm\u00e4rksamhet.<\/p>\n

Det \u00e4r en l\u00f6sning som utvecklats av Google<\/a> och som ser ut att erbjuda ett antal f\u00f6rdelar j\u00e4mf\u00f6rt med (samt ett alternativ till) GZIP-komprimering. Detaljerna i den h\u00e4r artikeln kommer att g\u00e5 igenom vad denna teknik erbjuder i detalj. Brotli-komprimering \u00e4r dock snabb och effektiv, vilket egentligen \u00e4r tillr\u00e4ckligt med information.<\/p>\n

Kolla in v\u00e5r videoguide om Brotli-komprimering<\/a><\/h3>\n

<\/kinsta-video><\/p>\n

I den h\u00e4r guiden s\u00e5 ska vi titta p\u00e5 Brotli-komprimering och visa hur du kan kontrollera om din webbplats anv\u00e4nder den och hur du aktiverar den om det kr\u00e4vs. Vi ska allra f\u00f6rst placera Brotli inom komprimeringsalgoritmen och tala om varf\u00f6r du b\u00f6r anv\u00e4nda den framf\u00f6r andra l\u00f6sningar.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Datakomprimering f\u00f6r webben<\/h2>\n

I sin mest grundl\u00e4ggande form s\u00e5 tar datakomprimering koden f\u00f6r en webbplats eller app och minimerar filstorleken. Detta ger dig l\u00e4ttare filer att flytta runt p\u00e5 webben och minskar tiden<\/a> som det tar att ladda och rendera en webbplats. Du kommer att uppt\u00e4cka att det finns m\u00e5nga olika s\u00e4tt att komprimera data beroende p\u00e5 vilken filtyp som du arbetar med.<\/p>\n

Ett vanligt s\u00e4tt \u00e4r ”minifiering” Detta inneb\u00e4r att en algoritm tar bort en del \u00f6verfl\u00f6diga element fr\u00e5n koden p\u00e5 din webbplats. Tanken \u00e4r att aspekter som indrag, kommentarer, vitrymder med mera \u00f6kar filstorleken och d\u00e4rmed laddningstiderna<\/a>.<\/p>\n\n

Att ta bort dessa element p\u00e5verkar inte anv\u00e4ndarupplevelsen (UX) i de flesta situationer. Det g\u00f6r<\/i> dock saker och ting mer okomplicerade f\u00f6r de datorer som m\u00e5ste kompilera och rendera koden. Ta exempelvis den h\u00e4r kodsviten:<\/p>\n

define( 'WP_INSTALLING', true );\n\n\/** Sets up the WordPress Environment. *\/\nrequire __DIR__ . '\/wp-load.php';\nrequire __DIR__ . '\/wp-blog-header.php';\nif ( ! is_multisite() ) {\n  wp_redirect( wp_registration_url() );\n  die();\n}\n\n$valid_error_codes = array( 'already_active', 'blog_taken' );<\/code><\/pre>\n
Ovanst\u00e5ende kod anv\u00e4nder element som mellanslag och v\u00e4ndtecken f\u00f6r att g\u00f6ra den l\u00e4sbar f\u00f6r m\u00e4nniskor, men en dator beh\u00f6ver inte dessa element f\u00f6r att f\u00f6rst\u00e5 k\u00e4rnkoden. Dessa partier av vitrymder och radbrytningar tar dessutom upp v\u00e4rdefullt utrymme som, om de tas bort, kan ge dig en prestandaf\u00f6rst\u00e4rkning.<\/p>\n
Om du minimerar den h\u00e4r koden s\u00e5 ser den helt annorlunda ut:<\/p>\n
define( 'WP_INSTALLING', true ); \/** Sets up the WordPress Environment. *\n\/ require __DIR__ . '\/wp-load.php';\nrequire __DIR__ . '\/wp-blog-header.php';\nif ( ! is_multisite() ) {\n  wp_redirect( wp_registration_url() );\n  die();\n}\n\n$valid_error_codes = array( 'already_active', 'blog_taken' );<\/code><\/pre>\n
Grunddragen i vad den h\u00e4r koden g\u00f6r \u00e4r dock fortfarande desamma.<\/p>\n
Du kommer att uppt\u00e4cka att andra filtyper har s\u00e4tt att komprimera data. Bilder kr\u00e4ver exempelvis ofta mycket komprimering f\u00f6r att minska storleken utan att sj\u00e4lva bilden f\u00f6rs\u00e4mras:<\/p>\n
\"Ett
Ett exempel p\u00e5 en optimerad bild.<\/figcaption><\/figure>\n
GZIP-komprimering<\/a> \u00e4r ett standardiserat s\u00e4tt att minimera storleken p\u00e5 paket av filer – t\u00e4nk p\u00e5 paket som ZIP eller Linux .tar<\/code>. Men det har hittills inte funnits n\u00e5gra riktiga alternativ. Vi kommer att prata mer om varf\u00f6r ett alternativ borde finnas senare, men f\u00f6rst s\u00e5 ska vi presentera GZIP:s ”konkurrent”<\/p>\n
Brotli-komprimering<\/h2>\n
I ett n\u00f6tskal s\u00e5 \u00e4r Brotli en algoritm f\u00f6r datakomprimering. Om detta vore allt som vi hade att s\u00e4ga s\u00e5 skulle det dock inte finnas n\u00e5gon anledning att unders\u00f6ka den.<\/p>\n
Den ger en ”f\u00f6rlustfri” komprimering och har utvecklats av Google under en MIT-licens<\/a>. F\u00f6retaget ligger ofta i framkant n\u00e4r det g\u00e4ller teknik som fr\u00e4mjar webben. Det \u00e4r med andra ord ingen \u00f6verraskning att Brotli ser ut att ta det som GZIP g\u00f6r, f\u00f6rb\u00e4ttra detta och erbjuda en b\u00e4ttre upplevelse f\u00f6r anv\u00e4ndare och webbplatser.<\/p>\n
Brotli-komprimering anv\u00e4nder samma grundl\u00e4ggande k\u00e4rntekniker som GZIP-komprimering, n\u00e4mligen:<\/p>\n