Komprimera resurs med gzip

I Googles verktyg för webbansvariga visar de under fliken Labs och alternativet Webbplatsens prestanda lite statistik över hur lång tid det tagit att hämta hem sidor från webbplatsen. Mina sidor ligger ganska bra till, men det är säkert ändå nyttigt att tänka till om man kan göra förbättringar.

De ger själva tips på förbättringar. Föreslår till exempel att jag ska ha en extern css-fil i stället för två, vilket jag inte så gärna vill. De föreslår också att jag ska komprimera css-filerna med gzip.

Brukar ni komprimera css-filer och anser ni att det skulle vara en tydlig förbättring? Jag känner mig tveksam, det är inga skrymmande css-filer. Det står att jag skulle minska överföringens storlek med 12 kB om jag komprimerar båda filerna. Är det inte en försumbar ändring? Eller skulle det ändå ha ett värde?

Om jag skulle göra det så får väl css-filen ett nytt namn när den är komprimerad (det var ett tag sedan jag använde gzip). Ska jag då bara helt enkelt ändra sökvägen på html-sidorna till det nya namnet?

Har du Apache 1.3 eller Apache 2.x?

Har du Apache 1.3 så ska du använda mod_gzip men om du har Apache 2 ska du istället använda mod_deflate. Detta gör du i .htaccess.

Nej, det påverkar inte filnamnen.

På N.nu så skickar jag själv html, js och css som gzip.

Tack för snabbt svar!

Jag tolkar dit svar som att du anser att det gör en märkbar skillnad att komprimera filerna!?

Mvh Christina

Du kan ju enkelt se i Google Page Speed för Firebub hur många KB du tjänar. Endast 12.4KiB för lawebb.se vilket inte var mycket alls så knappt lönt om du inte har mycket besökare.

Däremot så se till att du sätter expire headers på ditt statiska innehåll - mycket vitkigare.

Tusen tack!

Mvh Christina

När vi pratar optimering kan jag ge lite tips.

1) Som nämns tidigare i tråden bör man komprimera sina filer, inte bara CSSen. Detta för att filer innehåller massa blanka tecken och radbrytningar (som är helt onödiga). Man bör också slå ihop filer, detta kan du göra med en minify (tex http://code.google.com/p/minify/), som även brukar komprimera.

2) Man bör också göra så få requests som möjligt. En webbläsare kan max läsa 5 (tror jag det var) objekt samtidigt. DVS, har du 6 bilder så laddas 5 samtidigt och den sista får vänta tills någon annan är klar.
Detta löser man med en minify (som sagt) för filer och en imagemap för bilder.

3) Som Jim säger är expires på headers viktigt. Det berättar för webbläsaren att den kan spara vissa grejer så den slipper hämta om det vid nästa sidladdnnig.
Så här sätter du expires: http://www.googlehemsida.se/wiki/.ht...g_till_expires

4) Sätt javascript sist i html-filen och css först.

5) Gör få databasanrop och cacha gärna vanliga anrop.

6) Jag kan också tipsa om firefox pluginet Yslow.

Tack så jättemycket för dessa tips!!

Jag har nu lagt in expires på headers och det verkar fungera bra!

Övriga av dina tips, Hermano, ska jag fortsätta titta på.

Tusen tack igen!

Mvh Christina

Har nu använt mig av expire i några månader. Problemet är när en html-sida uppdateras, att få den senaste versionen att synas utan att behöva klicka på "uppdatera" i webbläsaren.

Tidigare skrev jag:
ExpiresByType text/html "access plus 1 day"

Nu har jag ändrat till:
ExpiresByType text/html "modification plus 1 day"

men tycker fortfarande det verkar vara problem att se senaste versionen vid uppdatering...

Är det viktiga, för att snabba upp nedladdning av en hemsida, att sätta expire (t ex en vecka) på bilder som tar längre tid att ladda ner? Eller anser ni att det är viktigt även på html-filer? Hur skriver ni i så fall, för att uppdateringar ska slå igenom utan att besökaren behöver klicka på "uppdatera" i webbläsaren?

Mvh Christina

Hej Christina,

Om du uppdaterar dina HTML sidor, har många återkommande besökare och det är viktigt att dina besökare ser senaste versionen av dina HTML sidor så är det inte alls bra att sätta expires headers på dessa.

Prova istället att ändra till:

Kod:

---

<filesmatch "\.(ico|jpg|jpeg|png|gif|js|css|swf)$">
ExpiresActive on

# One year in the future
ExpiresDefault "access plus 1 year"

Header set Cache-Control "public"

# Turn off ETags as those are now not anymore necessary
Header unset ETag
FileETag None

</filesmatch>

---

Med andra ord så sätter det 1 år på alla bilder, javascript, swf och css-filer. Om du sedan behöver ändra på någon av dessa så ändra filnamnet.

Jag kommer blogga om detta senare, om någon månad eller så när jag får tid.

Tack, det låter klokt att inte ha expire alls på html-sidor för min del.

Tack för tipset på kod.

Citat:

---

Ursprungligen postat av Jim Westergren

Hej Christina,

Om du uppdaterar dina HTML sidor, har många återkommande besökare och det är viktigt att dina besökare ser senaste versionen av dina HTML sidor så är det inte alls bra att sätta expires headers på dessa.

Prova istället att ändra till:

Kod:

---

<filesmatch "\.(ico|jpg|jpeg|png|gif|js|css|swf)$">
ExpiresActive on

# One year in the future
ExpiresDefault "access plus 1 year"

Header set Cache-Control "public"

# Turn off ETags as those are now not anymore necessary
Header unset ETag
FileETag None

</filesmatch>

---

Med andra ord så sätter det 1 år på alla bilder, javascript, swf och css-filer. Om du sedan behöver ändra på någon av dessa så ändra filnamnet.

Jag kommer blogga om detta senare, om någon månad eller så när jag får tid.

---

Bra svar. Jag vill tillägga/förtydliga att man inte behöver ändra filnamnet utan bara urlen.
Om du ska importera en CSS mall skriver man vanligen:

HTML-kod:

---

<link rel="stylesheet" type="text/css" href="/includes/css/main.css" />

---

Man behöver inte döpa om main.css till tex main2.css utan man kan bara skriva:

HTML-kod:

---

<link rel="stylesheet" type="text/css" href="/includes/css/main.css?version=2" />

---

Parametern på slutet har (vanligen) ingen betydelse för något annat än att se till att en ny version av cssen cachas och används.

Tack!