Kategorier
Tips og triks

Synaptics (touchpad) tweaking

Touchpad og TrackPoint på Lenovo ThinkPad
Kategorier
Tips og triks

Optimalisering av lastetid på nettsider

Lastetid for denne bloggen etter optimaliseringen(e)

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!

Kategorier
Utvikling

Javascript-templates (og AJAX-lasting med jQuery)

Mustasjen er i anmarsj, og ikke bare i ansiktet til hipstere. Mustache er et rammeverk for templates, eller maler, som også er tilgjengelig i Javascript. Det tillater deg enkelt og greit å definere strenger med HTML og forskjellige tagger for å representere variabler. Veldig greit om du er glad i å bruke massevis av $(‘foo’).append(‘lang HTML-kode her’).

Enda bedre er det selvfølgelig når man bare kan laste inn templates med AJAX og dermed kunne ha et lite lager med templates liggende. Mustache støtter i tillegg seksjoner, og med rett bruk kan du faktisk klare deg med en enkelt fil.