Optimalisering av lastetid på nettsider

Lastetid er viktig. Er sidene trege, blir besøkstallene likedan.

Pingdom har et flott verktøy for å måle lastetid på sidene dine. Der får du også opp flotte tips om hvordan den kan forbedres, og scoren din kan bli høyere. Etter at jeg satte meg ned for å forbedre lastetiden på disse sidene, gikk scoren fra 70-80-ish til 96/100, i tillegg til at lastetiden i seg selv gikk ned til 6-900 ms. Kjekt!

1. Varnish

Som jeg tidligere også har skrevet om, så er web-cache-tjeneren Varnish noe av det bedre som har hendt med internett i nyere tid. "Alle" bruker Varnish nå til dags, og det viser seg å være en enorm avlasting for webtjenere generelt sett. Tidligere har blant annet digi.no skrevet om at de gikk fra 14 webtjenere til 2 etter at de gikk over til Varnish i front, Facebook, VG og WiMP bruker alle Varnish.

Et problem som pingdom-testen gjerne tar tak i, er såkalte cookiless domains. Altså at cookies ikke skal settes på statiske filer. I varnish kan man legge til følgende snutt i vcl_recv-metoden:

    // caching these files is fine
    if (req.http.Accept-Encoding) {
        if (req.url ~ "\.(jpg|png|gif|gz|tgz|bz2|lzma|tbz)(\?.*|)$") {
            remove req.http.Accept-Encoding;
        } elsif (req.http.Accept-Encoding ~ "gzip") {
            set req.http.Accept-Encoding = "gzip";
        } elsif (req.http.Accept-Encoding ~ "deflate") {
            set req.http.Accept-Encoding = "deflate";
        } else {
            remove req.http.Accept-Encoding;
        }
    }

    // Remove cookies and query string for real static files
    if (req.url ~ "^/[^?]+\.(jpeg|jpg|png|gif|ico|js|css|txt|gz|zip|lzma|bz2|tgz|tbz|html|htm)(\?.*|)$") {
        unset req.http.cookie;
        set req.url = regsub(req.url, "\?.*$", "");
    }

2. Nginx – expire/vary-headere og gzip

Nginx er en lettvekter innen webtjenerfeltet. Den er spesielt god på statiske filer, men man like gjerne sette opp CGI for PHP og andre kodespråk også.

Expire-headerne bør være satt til minst én uke frem i tid, og Vary bør være satt til "Accept-Encoding". Gzip-modulen til nginx tar seg av Vary-headeren, og expire er en del av Headers-modulen.

Nginx setter javascript til application/x-javascript som standard, så gzip_types må settes til å akseptere blant annet denne. Under er et eksempel på oppsett man kan ha for en site i nginx som setter cache-utgang på statiske filer til en uke og setter Vary-header for gitte mime-typer. gzip_types er som standard kun satt til text/html.

location ~* \.(js|html|htm|css|png|jpg|jpeg|gif|ico)$ {
    gzip on;
    gzip_vary on;
    gzip_types text/javascript text/css image/jpg image/png image/gif text/plain application/json application/x-javascript application/javascript;
    expires 1w;
    log_not_found off;
}

Det var vel egentlig det. Eller? Kom med flere innspill i kommentarfeltet, da vel!