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!

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.

Les mer om denne elskverdige løsningen

Syntax-highlighting i WordPress

WordPress sin editor er ikke så veldig snill når det kommer til å lime inn kildekode direkte i den, med mindre du bruker den rene HTML-editoren. Så fort du bytter tilbake til visuell-editor, blir blant annet < og > byttet ut med HTML-entiteter for disse tegnene, noe som gjør det relativt vanskelig å legge ut ren kildekode.

Men! Det er alltid et innstikk som fikser problemet. I dette tilfellet prøvde jeg først Creyon, men problemet vedvarte. Før jeg så fant et innlegg i WordPress sin Codex, som viste til en løsning brukt på wordpress.com og som finnes som et eget tillegg: Syntax Highlighter Evolved. All kode limt inn mellom kodesnuttene blir ikke påvirket av TinyMCEs tåpelige omformattering.

Har du prøvd den og er fornøyd?

Fjern Google+-knapp fra Google Reader

Google Reader

Bare jeg som har irritert meg over at Google Reader har blitt enda tregere etter at de la til +1-knappen sin? Strengt tatt øker lastetiden for de fleste sider betraktelig så fort man legger til både Facebok, Twitter og Google+-knapper, og i hvert fall når det skal legges til en knapp på hver nyhetssak i RSS-leseren.

Løsningen falt på AdBlock-tillegget i Chrome og et lite custom-filter:

||plusone.google.com/*$domain=google.com,subdocument

"||" betyr at den matcher alt før "plusone.google.com", altså både http og https.

Dollartegnet ($) skiller av reglene og definerer starten på ekstrafiltrene, som da er domain og subdocument. domain=google.com setter restriksjon på hvilket domene denne regelen skal gjelde for (vil ikke slå av +1-knappen for hele internett hos meg) og subdocument betyr at den ikke laster inn iframes fra plusone.google.com.

EDIT: Regelen fører til at Google AdSense slutter å fungere. Legg inn en exception-regel for google.com/adsense for at det skal fungere igjen:

@@||google.com/adsense

Verre var det ikke. Eller har du tips til hvordan regelen kan bli enda bedre? For eksempel så den kun gjelder for google.com/reader? Kommenter, takk.

Qualcomm Gobi 2000 + Ubuntu = sant


Jeg kjøpte nylig en Thinkpad Edge 13" med innebygdt 3G- og GPS-modul av typen Qualcomm Gobi 2000.

På de neste sidene går jeg gjennom man installerer driverne, setter opp mobilt bredbånd, integrerer den med Wammu/gnome-phone-manager så man kan sende SMS (og eventuelt ringe) og hvordan slå av PIN-koden. Jeg har også lekt litt med GPS-en som sitter i maskinen, men ikke nok til at jeg får det med i denne posten. Det får bli en sak for seg selv 🙂

Se de neste sidene for mer info.

Fikse plutselige problemer med hvilemodus/suspend i Ubuntu

For en ukes tid siden sluttet plutselig hvilemodus på laptopen å fungere , noe som slo meg som veldig uforutsett og merkelig. Ubuntu gjorde nødvendige forberedelser til å gå i hvilemodus og til slutt begynte også hvilemoduslampen å blinke slik den pleier, men skjermen sluknet aldri og stod bare og viste teksten som fortalte hva den gjorde, og CPU-viften gikk fremdeles.

Den daværende kjernen var 2.6.38-10-generic-pae, og når jeg prøvde den forrige, 2.6.38-8-generic-pae, fungerte hvilemodus igjen, noe som gjorde at jeg litt raskt konkluderte med at det var kjernen som var problemet. Jeg fant også en bug som så ut til å passe.

Siden jeg ikke ga meg helt der, fordypte jeg meg litt mer (les: googlet mer), og kom frem til en bug som passet perfekt, som viste seg å være relatert til Virtualbox, som jeg tilfeldigvis også installerte siste versjon av (4.1) rundt samme tidspunkt som hvilemodus sluttet å fungere.

I Virtualbox sin bugtracker var også denne bugen rapportert, og det var en foreslått fiks der. For mitt vedkommende og maskin fungerte den utmerket, og jeg gjengir den i sin helhet her.

Rediger/opprett filen /etc/pm/config.d/unload_modules (som root) og legg inn følgende linje

SUSPEND_MODULES="$SUSPEND_MODULES vboxdrv vboxnetflt vboxnetadp vboxpci "

Pass også på å få med deg anførselstegnene og det siste mellomrommet i linjen der.

Alexander Karlstad. Blogger hovedsakelig om Linux og sånt.

Optimization WordPress Plugins & Solutions by W3 EDGE