Artikel top billede

(Foto: Computerworld)

Forbedr din Google-rangering med et hurtigere site

Søgemaskineoptimering er ikke længere nok – dit site skal være hurtigt for at nå højt hos Google.

Af Rasmus Elm Rasmussen, Alt om Data

Denne artikel er oprindeligt bragt på Alt om Data. Computerworld overtog i november 2022 Alt om Data. Du kan læse mere om overtagelsen her.

Tror du, at udbredelsen af bredbånd betyder, at du ikke længere skal optimere dit websites hastighed? Tænk om igen. Der er mange grunde til, at det stadig er en god ide at sikre sig, at et site er hurtigt.

En af dem er fremvæksten af mobil netsøgning, fordi webbrugere med smartphones har begrænset båndbredde. En anden er mobilt bredbånd. Hastighederne kan i nogle tilfælde konkurrere med almindeligt bredbånd, men for mange er det meget langsommere at browse.

Den bedste grund til at have et hurtigt site, vi kan finde på, er, at det er med til at bringe en øverst i søgeresultaterne. Google har inddraget indlæsningshastighed i firmaets PageRank-algoritme siden april sidste år. Når man bliver bemærket på nettet, sidder man på flæsket hos Google. Det er en stærk motivering til at forbedre sitets hastighed, og vi har nogle gode, praktiske råd, der gør det nemt at opnå det.

Optimer fotos

Weboptimering drejede sig tidligere altovervejende om grafik, og sådan er det til en vis grad stadig. Hvis man bruger det forkerte format til opgaven eller bruger dårligt komprimerede billeder, kan man føje kilobytes til en side, der kunne være hurtigere og slankere.

Lad os begynde fra grunden. Hvis du vil inddrage fotos, skal du bruge jpeg-formatet. Det er optimeret til fotografiske billeder og fører som regel til mindre filstørrelser med højere kvalitet. Når man optimerer jpeg til nettet, skal man være opmærksom på denne balance.

I Photoshop CS5 skal du vælge ’Save for web and devices’. Vælg ’JPEG medium’ i menuen ’Preset’. Klik på knappen ’2-Up’, så du kan se det oprindelige billede og jpeg-udgaven.

Ved ’Medium’ er komprimeringskvaliteten sat til 30. Flyt ’Quality’-skyderen til venstre for at komprimere billedet yderligere, samtidig med at du holder øje med den oprindelige og den optimerede udgave af billedet. Når du synes, at du har den rette balance mellem kvalitet og filstørrelse, gemmer du filen.

Har du ikke Photoshop? Det gratis billedkonverteringsprogram IrfanView kan noget lignende. Du skal downloade programmet fra hos Irfanview og hente applikationen og dens plugins. Installer begge dele.

Funktionen ’Save for web’ virker på samme måde som Photoshops optimeringsværktøj. Du kan ændre komprimeringsniveauet ved at flytte ’Quality’-skyderen. Du får oplyst dit optimerede billedes størrelse, og et smugkig-vindue viser dig, hvordan det kommer til at se ud.

Png kontra gif

Til andre billeder – illustrationer, bannere, stregtegninger og store farveflader – dur jpeg ikke. Dets komprimeringsalgoritme efterlader synlige fejl. I gamle dage ville man få det råd at bruge gif (Graphic Interchange Format) til den slags filer.

Nu understøtter alle browsere formatet png (Portable Network Graphics), der er fremragende til komprimering. Png-billeder er typisk mellem 10 og 30 procent mindre end tilsvarende gif’er. Brug png til nye billeder i stedet for gif. Og hvis du kan, bør du konvertere dine gamle gif-billeder til png.

Det er bedst at bruge de originale ukomprimerede filer eller oprette nye. Med et maksimalt farveskema på 256 har gif’er aldrig særlig høj opløsning. Funktionerne ’Save for web and devices’ og ’Save for web’ i Photoshop og IrfanView gør det muligt at gemme i png-format.

Skalerede billeder

Her er et trick, der kan barbere kilobytes af og speede op under sideindlæsningen: genbrug af billeder. Der er to fremgangsmåder. Hvis du bruger thumbnails, der linker til større billeder, skal du bruge den samme billedfil. Brug html til at definere billedets størrelse i stedet. Brug de højde- og breddeattributter, der knytter sig til <img>:

<img src=”speedysites.
png”width=”100”height=”50” />
<img src=”speedysites.
png”width=”400”height=”200” />

Det øger dit sites hastighed ved på forhånd at cache billedet på brugerens lokale maskine, så der ikke skal kaldes en ny fil. Det sparer værdifulde sekunder, mens brugerne bevæger sig gennem dit site.

Siderenderingen bliver hurtigere, hvis man specificerer billedstørrelserne, fordi browseren ikke skal ændre indholdsstrømmen, når filen er indlæst. Den ved, hvor megen plads billedet optager, og renderer indholdet i overensstemmelse med denne viden.

Det tager tid at indlæse lyd, video, animation og flash, og disse ting bør derfor begrænses mest muligt. Selv hvis medierne ligger på et andet site, for eksempel Soundcloud til audio eller YouTube til video, er det den samlede sideindlæsning, Google måler, uanset om sagerne ligger på din server eller ej.

Det er svært for os at bede dig droppe multimedier på dine sider – videoklip er nu nettets hyppigst delte indhold – men vi har ingen betænkeligheder ved at sige, at du skal skille dig af med flash, gif-animationer og autoplaying-lyd. Animerede knapper er meget 2005-agtige, og hjemmesider, der spiller lyd, var allerede gammeldags, da den første dotcom-boble brast.

Reducer multimedier, hvor du kan, ved at levere rene tekstlinks til materialet i stedet for at indlejre filer. Hvis du lægger videoer på, bør du nøjes med en pr. side. Hvis du hyppigt lægger videoer på en blog, bør du reducere antallet på forsiden til en.

Når det gælder audio, er der én brug af flash, vi kan acceptere. Gå ind på Internet Archive og opret en konto. Så snart du er logget på, kan du uploade audiofiler ved hjælp af knappen ’Share’. Opret en afspilningsliste, og brug den flashkode, der bliver genereret, til at indlejre sitets mp3-afspiller i din side. Den indeholder links til dine mp3-medier, men musikken bliver ikke indlæst, før nogle vælger et nummer og klikker på ’Play’.

Stil og indhold

Godt organiseret opmarkering sætter gang i sideindlæsningen. Det vil sige, at man normalt skal holde sig til kode, der er W3C-kompatibel, og den adskiller form fra indhold. Du kan tjekke din kode – html og css – med W3C’s valideringssuite.

Vi er sikre på, at du allerede bruger css til at formatere og layoute sider. Hvis du vil have optimal hastighed, skal du passe på ikke at blande css-eksekveringstyper. Undgå så vidt muligt inline-css, og flyt i stedet den slags formateringsinformation til et eksternt css.

Eksterne css’er bør deklareres i toppen af dokumentet ved hjælp af taggen <link>. Hvis du bruger flere css-deklarationer, skal du samle dem i en gruppe:

<link rel=”stylesheet”type=”text/
css”href=”stylesheet1.css”/>
<link rel=”stylesheet”type=”text/
css”href=”stylesheet2.css”/>

Når du indlæser eksterne JavaScript-filer, skal du placere dem efter css-deklarationer. Din browser kan foretage flere forbindelser, men når den møder en <script>-tag, holder den op med at downloade alt andet, indtil det eksterne JavaScript er blevet læst og eksekveret. Derfor skal du placere disse deklarationer lige før </head>-taggen:

<script type=”text/
javascript”scr=”script1.js”/>
<script type=”text/
javascript”scr=”script2.js”/>
</head>

Css-stenografi

Det tager tid for browseren at gnave sig igennem css-egenskaber. Derfor bør man reducere antallet af attributter for at sætte fart i renderingen. Begynd med at skære ned på variant-egenskaberne. Egenskaber som ”page”, ”border”, ”font” og ”margin” kan for eksempel samles i en deklaration:

Element { margin: 10 auto auto 10;}

Den gør det samme som:

Element {
margin-top: 10;
margin-right: auto;
margin-bottom: auto;
margin-left: 10;
}

Michael Leigebers CSS Shorthand Cheat Sheet er fremragende. Den kan man få gratis på Scriptiny.

Gå til http://google.com, og meld dig til tjenesten. Du får en stump JavaScript-kode, som du skal sætte ind på alle de sider, Google skal spore. Hvis du bruger et cms som WordPress, skal du placere den i dit sites skabelon i stedet. Vi placerer den i bunden af footer.php før taggen </body>.

Kør Google Analytics i mindst en uge for at samle anvendelig statistik. Gå så tilbage i Analytics for at se sitets indgangssider. Vælg ’Content’ i sidepanelet, og klik på ’Top landing pages’.

Nu får du en nyttig liste over de sider, som folk først besøger på dit site. Du kan også vælge ’Content by title’ og få en brugervenlig liste over de mest populære sider. Derefter kan du hastighedsoptimere disse sider.

Google Page Speed er en række værktøjer, der kan analysere dit site, finde eventuelle flaskehalse og foreslå løsninger. Hovedapplikationen er en plugin – et værktøj, der kræver, at Firefox med FireBug er installeret.

Når du har føjet den til din browser, skal du gå til det site, du vil optimere, og klikke på ’Analyse Performance’. Værktøjet tjekker dine sider og kommer med forslag til forbedring af indlæsningstiderne. Hvad kunne være nemmere?

Svaret på det spørgsmål er server-udgaven af værktøjet. Når den er aktiv på en Apache 2 HTTPD-server, genskriver mod_pagespeed din kode i flugten og gør det nemmere og hurtigere at parse, når den kommer frem til browseren. Hent dem begge på http://code.google.com/speed/page-speed.

[themepacific_accordion]
[themepacific_accordion_section title="Fakta"]

Det skal du bruge ...

[/themepacific_accordion_section]
[/themepacific_accordion]