Erik Söderholm

Digital journalist

Tre sätt att få turbofart på sajten

Hastighet är allt – åtminstone på nätet. Efter bara några sekunder har besökaren tröttnat och hoppat vidare till nästa sajt. Här är tre bra tips som sparade halva laddtiden på min sajt.

Publicerat 2014-08-08

Tänk hur många miljarder kronor som hade gått till spillo om shoppingsajterna var långsamma. Orkar du vänta tio sekunder på att sidan laddas? Verkligen inte. Och det vet förstås e-handlarna, som hela tiden anpassar koden för att kapa laddtiderna.

Att skala bort viktiga sekundrar är oftast inget som görs i efterhand, snabbheten måste byggas in från början i sajten. Åtminstone enligt Patrick Hamann. Han jobbar på brittiska The Guardian och har lyckats få ned laddtiden till under 1 000 millisekunder. Imponerande för en stor nyhetssajt.

Han presenterar hur han gjort i en film på Vimeo. Jag har tagit ut tre delar av presentationen och applicerat dem på min egen sajt.

Först och främst mätte jag upp laddtiden hos Pingdom. Den blev 780 sekunder för mobilsajten (m.eriksoderholm.se, som du kommer till automatiskt om du har en mobil, men inte en surfplatta).

1. Bilder

Det visade sig att bilderna tog absolut längst tid att ladda. Jag gjorde en snabbfix och installerade Timthumb, som är ett smart verktyg för att webbläsaren inte ska behöva läsa in en större bild än vad som egentligen behövs. Jag styr hur bilden ska visas med två variabler: bildens bredd och bildens kvalitet. Jag satte kvaliteten på 70% vilket borde räcka.

I nästa steg kommer jag också göra jpeg-bilderna progressiva för att göra sidan ännu effektivare.

2. Cache

Jag har inget avancerat cache-system på min sajt, men med hjälp av några rader kod i .htaccess-filen har jag ändå sparat in en del tid. Nu cachas bilder, Javascript-filer och CSS-filer längre än tidigare.

3. CSS

CSS-filen styr ju hur allt ser ut på sidan och sedan några månader har jag minifierat min CSS-fil – alltså tagit bort alla onödiga mellanslag och andra konstigheter som slöar ned filen. Det gör större skillnad än du tror.

Men själva inläsningen av CSS-filen tar ändå en stund, och då stoppas laddningen av resten av sidan. Här kom Patrick Hamann med en intressant lösning. Den allra viktigaste CSS-koden, som rör det som användaren först ser ("above the fold", eller innan användaren börjar scrolla) ligger inte i CSS-filen utan direkt i HTML-filen, i taggen <head>.

Det tar emot att lägga CSS-koden "inline", alltså direkt i HTML-filen. Så gjorde jag ju för tio år sedan! Men faktum är att det funkar. Sidan kan ladda och de viktigaste stilmallarna är redan inlästa. Användaren kan börja läsa på sidan, och även om allt inte ser ut exakt som det ska dröjer det inte länge förrän allt ser bra ut. Hela CSS-filen läses sedan in längst ned på sidan med hjälp av Javascript:

<script>
      var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = 'minify.php';
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(cb);
      else window.addEventListener('load', cb);
    </script>
(På raden med l.href kommer alltså själva CSS-filen som ska läsas in, en minifierad PHP-fil i mitt fall.)

Som sagt, ett kontroversiellt knep och på längre sikt hoppas jag det dyker upp bättre webbläsarstöd för kod som snabbar upp sajten. I HTTP 2.0 börjar det hända grejer på allvar och det är verkligen på tiden, eftersom Google älskar snabba sajter mer än långsamma.

Resultatet? 340 millisekunder, med mätpunkt från Amsterdam. Åtta timmars arbete lönade sig! Jag har gjort ändringarna även på vanliga sajten för desktop men där blev skillnaden inte riktigt lika stor.

Nästa steg blir att förbättra sökoptimeringen.

Och så bildbeviset...

Blogginlägg
2016-02-22

9 sätt att jobba smartare och effektivare

2015-08-15

Nya bilinbrottskartan – så gjorde jag granskningen

2015-04-07

Första recensionerna av nya Apple Watch

2015-03-21

Interaktiv karta: Se när Sverige byter däck

2015-03-20

Så fixade jag ett mediacenter för 350 spänn

Projekt & artiklar

Laddhybriderna ger enormt stor osäkerhet i hur mycket utsläppen minskar Recharge granskar: Nu har det hänt – elbilar körs längre än bensinbilar i Sverige Recharge granskar: Nu kan du "optimera" din elbil eller laddhybrid för längre räckvidd – men du riskerar garantin Lista: Här är elbilarna där du kommer längst per krona Svenska AdBlue-piraterna säljer fuskbox till lastbilar – och den går igenom besiktningen Recharge granskar: Därför har elbilsförsäljningen i Danmark havererat fullständigt Recharge granskar: Därför kan elbilar vara dyrare att försäkra än fossilbilar Nästan alla elbilsägare skulle göra om köpet – men Tesla är inte bäst Begagnade miljöbilar vräks ut ur Sverige – exporteras till utlandet Testa själv: Så snabbt kommer du fram med Hyperloop Kritikerna har fel – det behövs inte mer än en simpel skärm i Tesla Model 3 Därför är trådlös laddning mycket viktigare än de flesta tror för elbilsomställningen Årets Bil utsedd – knappt en miljöbil i sikte 6 anledningar till att energimiljardären har fel – elbilar är framtiden och Tesla riskerar INTE konkurs Räckvidden framför allt – eller ställer vi fel frågor om nya elbilar? Miljösmart, ja – men det kommer inte alltid vara tokbilligt att köra elbil Det är egentligen på landsbygden som elbilarna passar bäst Detta säger jag till alla elbilsskeptiker – funkar nästan varje gång Efter dödskraschen: "Lösningen är inte att stoppa utvecklingen – snarare tvärt om" Succé eller konkurs – Tesla vinner i vilket fall BMW betalar inte rasslande kamkedjor automatiskt – trots ARN:s beslut Skrotningsklassad Mercedes låg ute på annons hos auktoriserad säljare Toyota Prius säljer bra – så länge bensinpriset är högt Bilrån drabbar inte bara lyxbilsägare – detta gäller om du blir rånad Läsarna hyllar sina elbilar: "Jag är oförskämt nöjd" BMW fälls för kamkedjehaveri i dieselmotor – kostar 50.000 Ägarna berättar: Nya bilar allt snålare – men inte så mycket roligare BMW svarar på kritiken: "Vi prövar saken internt" Försäkringsbolagen känner till Volkswagens dåliga kvalitet Volkswagen svarar på kritiken: "Det är förstås olyckligt" Bilhandlare slutar sälja vissa Volkswagen- och Audimodeller: "Orkar inte med eländet" Vi köper allt fler bilar – men kör allt mindre Här är bilhandlarna som fuskat med momsen – och dömts Unik karta: Här sker bilinbrotten – kolla läget i din kommun Car2go-bilarna kör med vinterdäck på sommaren – det är du som får betala Så fuskar bilhandlarna – struntar i moms och skruvar mätarna Trots siffrorna: "Tycker polisen gör ett bra jobb" Bilhandlarnas åtta vanligaste knep Unik grafik: 185 viltolyckor – varje dag Handlare säljer bilar med olagliga lån Lista: Här är fartkamerorna som fångar flest Så många fastnar i fartkamerorna Läsarna tycker till om bilhandlarna Bilhandlarna med bäst service – enligt köparna Bilhandlarna utnyttjar inte nätet Många bilhandlare svarar inte på mejl Polisen krockar – för dina skattepengar Så får polisen köra – och inte köra Unik karta: Här sker flest bilinbrott Så undviker du bilinbrott Polisen: "Bilinbrotten har minskat dramatiskt" Läsarna berättar om bilinbrotten

Om mig

Jag är digital redaktör på Auto Motor & Sport och Recharge. Jag har en kandidatexamen i journalistik från Mittuniversitetet i Sundsvall och jobbar gärna med datajournalistik och visualiseringar.

Jag skapade min första hemsida i stolpig HTML-kod när jag var tolv. Sedan dess har jag lärt mig CSS, PHP, Javascript, MySQL och en del annat nyttigt. Den här sajten är byggd i mitt eget publiceringssystem eCMS.

Jag jobbar i Sublime Text och Coda och versionshanteringsprogrammet SourceTree. Jag borrar gärna ner mig i avancerade Excelark och gräver runt i Open Refine. Jag använder också grafikbiblioteket D3.js, InDesign, Photoshop, Illustrator och Audacity. Experimenterar med en del PHP-ramverk, Final Cut och Motion, Python, Xcode och Swift.

Kontakt

Mejla mig gärna på eriksdh snabel-a gmail punkt com, följ mig på Twitter eller läs mina artiklar på Auto Motor & Sport och Recharge.