CSS

WPO: Din CSS drar laddningstid – så minimerar du den

Har tidigare skrivit inlägg om hur laddningstid inte bara påverkar träffbilden på sökmotorer men även hur den påverkar användarnas interaktion med webbplatsen. Ju mer du kan sänka laddningstiden desto bättre resultat får du, oavsett vilka dina digitala mål är.

Ett av de enklaste knepen man kan använda sig av för att sänka laddningstiden är att komprimera CSSerna på webbplatsen. Genom att komprimera de så kan du spara in många bytes vilket leder till  minskad fördröjning i nätverken, onödig information slipper parsas och exekveras vilket resulterar i mindre laddningstid.

För att komprimera dina CSS:er så kan du antingen använda dig av plugins till WordPress eller av gratistjänster som YUI Compressor och cssmin.js.

Jag testade själv att att slumpvis välja ut två webbplatser, Trygg-Hansa & Nordea, och crunchade deras CSS:er i cssmin.js. Resultatet blev en cirka 20% sänkning av vikten på filerna.

nordea css minify

Nordea kan sänka antalet byte med 21% i en av sina CSS:er

Trygg Hansa CSS Minify

Trygg-Hansa kan också komprimera sina CSS:er med cirka 20%

Snabb matte: 6000 byte sparas * 1 000 000 besökare per vecka = cirka 5,58 GB

Att spara in 5,58 GB i bandbredd kanske inte märks av så mycket utdraget på en vecka, men vid en redan tung belastning och ett tillfälligt stort tryck på webbplatsen (tänk biljettsläpp på Ticnet) så kan de där GB göra en viss skillnad.

Ordlista: Alla dessa förbannade webbakronymer

Har du någonsin suttit på möte med någon som jobbar med webb och är så inrutad i sin egen värld, att det enda som kommer ur munnen på honom är akronymer? Så har min vardag sett ut de senaste åren och nu till min fasa så har jag till slut blivit en akronympladdrare själv.

Tänkte därför skriva ner en liten lista till alla som kanske inte har full koll på alla dessa akronymer som det slängs hit och dit med i branschen. Hoppas den kommer väl till pass.

  • CPA, Cost per action – Kostnaden för när en handling genomförs av en person som kommer via en banner till exempel.
  • CPO, Cost per order – Kostnaden för när en order genomförs. En person trycker till exempel på en banner och via den köper han en bok i den webshop.
  • CPS, Cost per sale – Samma som punkten ovan
  • CPM, Cost per mille – Kostnaden för till exempel tusen bannervisning. Mille = tusen.
  • CPT, Cost per thousand – Samma som punkten ovan
  • CPI, Cost per impression –  Samma som punkten ovan ovan
  • CPC, Cost per click – Kostnaden för varje klick på en annons.
  • CPL, Cost per lead – Kostnaden för för varje lead du får in via annons eller dylikt.
  • CTR, Click through rate – Hur många % av som ser din annons/länk/etc som faktiskt klickar på den.
  • CPT, Cost per time – Kostnaden för att ligga uppe med din annons för en vis tid.
  • CR, Conversion rate – Hur många % som konverterar i ett flöde. Till exempel köpflöden.
  • CMS, Content management system – En innehållsplattform som gör att du enkelt kan jobba och uppdatera exempelvis din webbplats.
  • CSS, Cascade style sheet – Stilmall som styr utseendet på webbplatser. Styr färger, layout, typsnitt etc.
  • PPC, Pay per click – Betalningsmodell, det du faktiskt betalar för varje gång någon trycker på din annons. Google Adwords.
  • PPI, Pay per impression – Betalningsmodell, du betalar per visning. Kostanden är CPI:et.
  • PPL, Pay per lead – Betalningsmodell, du betalar per kvalificerat lead.
  • PPA, Pay per action –  Betalningsmodell, du betalar per genomförd handling.
  • ROI, Return of investment – Den har borde ni alla kunna.
  • SE, Search engine – Sökmotorn, exempelvis Google eller Bing.
  • SEM, Search engine marketing – Sökmotorsmarknadsföring, består av PPC och SEO.
  • SEO, Search engine optimization – Optimering av webbplatsen för sökmotorer.
  • SERP, Search engine result page – Resultatsidan som kommer upp efter att du sökt på en sökmotor
  • SMO, Social media optimization – Optimering av innehåll för att nå ut optimalt via sociala kanaler
  • SMM, Social media marketing – Marknadsföring via och med hjälp av social media
  • KPI, Key Performance Indicator – Nyckelvärden som visar på hur bra du presterar

Det var alla jag kom på för tillfället. Här kan du även ladda ner de som en PDF och plugga på. Kommer du på några fler som jag missat så säg till!

 

Topp fem Google Chrome Extensions

Att hitta en webbläsare som man trivs med är inte lätt, som tur är finns det inte så mycket att välja bland. När du väl lyckats hitta en du kan jobba med så kommer den sekundära utmaningen, tilläggen. Att surfa med en webbläsare utan tillägg är som att cykla på en motionscykel – ok men du kommer ingenstans. Då jag surfar i Google Chrome så tänkte jag lista min topp fem tillägg jag inte klarar mig utan.

  1. MesureIt! – När som kan du dra fram din digitala linjal och mäta pixlarna på sidan. Riktigt bra när du vill ta ett snabbt mått och slippa kolla genom källkoden, CSS:en eller print screena.MeasureIt!
  2. Awesome ScreenShoot – Med jämna mellanrum dock så behöver man ta en screen shoot på det som du surfar på. Då är dags att plocka fram Awesome ScreenShoot. Det tillägget tar inte bara en bild på vad som finns i din läsare just nu men du får chansen att utföra enklare redigeringar också. Du kan bland annat beskära bilden, rita på den och göra delar suddiga innan du sparar den på datan. Sparar otroligt mycket onödig tid då man slipper öppna de i efterhand i Photoshop för den där enkla redigeringen.
  3. FireBug Lite – Ja, det mysiga lilla tillägget vi älskar så mycket finns även till Chrome. Är du utvecklare av något slag känner du till det och om inte så kommer du förmodligen inte känna till det.
  4. Eye Dropper – Det perfekta tillägget när du vill ta reda på vilken färg det egentligen är du tittar på. Fram med pipetten och ta reda de där hexadecimalerna! Sparar både tid och tårar.
    Eye Dropper
  5. SEO Site Tools – SEO är ju inte bara trevligt men viktigt. Firefox har ju haft fördelen med att ha en massa tillägg ju för SEO men nu börjar äntligen Chrome komma ikapp. SEO Site Tools ger dig inte bara siffror på träffbilden i Google men även en överblick på vart alla H-rubriker på din sida är samt konkreta förslag på förbättringsåtgärder och mycket mycket mer. Ett måste för alla som har det minsta SEO intresse.

    SEO Site Tool

    Det var mina fem måsten för Goole Chrome, självklart finns det en oändlig sjö av tillägg som som du hittar på Chromes Extensions webbplats.

     Scroll to top