Etikettarkiv: firebug

Snabbare sajt gillas av Google och mobilsurfare

I och med att de flesta sitter på snabba bredband både på jobbet och hemma kanske det känns ointressant att optimera din webbsida för få upp hastigheten. Men innan du lugnt lutar dig tillbaka med de argumenten i ryggen så finns det två viktiga saker att tänka på:

  1. En allt högre andel av allt surfande sker via mobilt internet. Antingen direkt i mobiltelefoner, eller med en dator uppkopplad via en dongel eller mobil. Och även om utbyggnaden av snabba mobila nät fortgår så är det antagligen långt borta innan man har en riktigt tillfredställande uppkoppling mer än i tätbebyggda områden.
  2. Google värderar sedan ett tag tillbaka hastigheten på webbsidor när de indexerar och rankar sökresulteten. En snabbare sida = högre ranking.

Det finns mycket man kan göra för att påverka laddtiderna på en webbsida. Vi har t ex Autobahn som är optimerat för att skyffla statisk material i otroliga hastigheter. Så se till att du har allt ditt statiska material (såsom bilder, css-filer, html-filer på Autobahn).

Ett bra verktyg för att luska ut vad du kan fila på för att få din sida rappare är Google Page Speed. Detta är ett plugin till Firebug, som i sin tur är ett plugin till Firefox. Page speed analyserar din sida, bilder, script, html-kod, css och berättar för dig vad som är överflödigt, vad som kan lösas på ett effektivare sätt osv.

Vad använder du för knep/verktyg för att göra din sida snabbare?

Firefox-plugins för utvecklare

Webbläsaren Firefox är hemsidebyggarens bästa vän. Med sin närmast oändliga mängd insticksprogram finns det en hel del godbitar du bör känna till. Nedan listar jag mina absoluta favoriter – ett gäng ”must haves” för alla som vill effektivisera sitt arbete, eller bara få en djupare förståelse av hur en hemsida är uppbyggd.

HTML Validator

Ladda hem.

002-html-01.pngFör att din hemsida skall fungera problemfritt i både dagens och framtidens webbläsare så måste den validera – dvs följa W3Cs standarder, varav en av de viktigaste är HTML. Ett enkelt sätt att kontrollera detta är med insticksprogrammet HTML Validator. Varje gång du besöker en sida så kontrollerar den huruvida koden är korrekt och visar dig resultatet med en liten ikon i webbläsarens nedre högra hörn. Dubbelklicka på ikonen för att få fram källkoden och markeringar om eventuella fel.

Web Developer

Ladda hem.

Insticksprogrammet Web Developer erbjuder dig en hel flora med smarta funktioner för att undersöka hur hemsidor är uppbyggda och hur de beter sig. Bland annat låter den dig validera JavaScript, ändra webbläsarens fönsterstorlek till vanliga skärmupplösningar, markera ut HTML-objekt när du för muspekaren över dem, visa sidan utan CSS, utan bilder eller utan JavaScript, stänga av cookies och mycket, mycket mer.

Firebug

Ladda hem.

002-firebug-01.pngFirebug låter dig inspektera och i realtid editera din HTML-kod, CSS-kod och JavaScript direkt genom webbläsaren. Bland annat kan föra muspekaren över en hemsidas element och direkt få fram den del i HTML-koden som byggt upp det elementet, med tillhörande CSS-inställningar. Gillar du inte vad du ser kan du ändra koden och direkt se resultatet. Felsökning deluxe och ren magi.