SMART HJEMMESIDE

Vi gør det nemmere for dig. Så kan du bruge tiden på andet end hovedbrud.

28. aug. 2017

Hastighedsoptimering

HastighedsoptimeringHastighedsoptimering er et stykke arbejde, der skal udføres for at få din hjemmeside til at loade hurtigere. Både for brugeroplevelsen, men også for at opnå bedre placeringer i Google.

Dette er ikke en komplet guide til at hastighedsoptimere dit website, men nogle overordnede punkter, der skal hjælpe dig på vej.

Googles søgerobotter får bedre vilkår, når dit site skal indekseres og derved opnår du hurtigere indeksering og i nogle tilfælde også indeksering af artikler længere inde i hierarkiet på hjemmesiden.

-Hastighedsoptimering af hjemmesiden er altså for at give dine brugere en bedre oplevelse og er med til at give dig bedre placering i Google.

Hvis det skal gøres ordentligt, kan du tage udgangspunkt i de emner, der er beskrevet neden for. Men du får ikke alt foræret her. Dette giver dig en fornemmelse for, hvor du skal gøre din indsats, men jeg går ikke så meget i dybden, at dette kan betegnes som facitliste.
Ønsker du selv at give dig i kast med at optimere din hjemmesides hastighed, så er der mange artikler på nettet, der går i dybden med de enkelte emner. Hver af disse artikler har vel omtrent samme længde som denne. Dog, berør de kun et emne ad gangen.

Så der er nok at tage fat på!

Læs denne, hvis du vil have overblikket og få en idé om, hvad der skal til. Og kontakt os, hvis du ønsker, at vi skal få taget hånd om din hjemmeside.
Vi arbejder i de mest gængse Content Management Systemer (CMS)som WordPress, og vil naturligvis prøve, at hjælpe dig videre til en ekspert, hvis din side er lavet i et CMS vi ikke er stærke i.

Kontroller hastigheden

Du kan tjekke, hvor hurtigt siden loader og få vist din sides “performance grade” med Pingdom Tool ( Link: https://tools.pingdom.com/ ).

Performance grade skal helst over de 80. Vil man endnu højere op, så er der mange design- og funktionselementer, der skal udelades, hvilket igen kan gøre brugeroplevelsen ringere.

Hastigheden / Loadtiden på en almindelig hjemmeside skal ligge på 1 -1,2 sekund. Det kan være svært at optimere nok til, at siden opnår den hastighed, men med den rette indsats er det, i de fleste tilfælde ikke umuligt. Det skal, ligesom det ovenstående, overvejes i forhold til brugeroplevelsen.
Loadtiden øges for hver design-element du ønsker at have. Så husk, at overvej værdien af at have eksempelvis slideshow med store billeder, kontra den tid, der lægges til load af siden.

-På Pingdom Tools kan du se, hvilke elementer, der er længst tid om at loade.

Områder der kan optimeres

Når vi taler hastighedsoptimering er følgende områder nogle, der kan arbejdes med:

  • Cache
  • CDN (Content Delivery Network)
  • Komprimering af filer (html, js, css)
  • Databaseoptimering
  • Grafik optimeringsværktøj
  • Font, installation af font på hjemmeside
    • Websikre fonte er hurtigst
  • Server ressourcer

Cache

Cache kan deles op i nogle forskellige områder.

Herunder:

  • Cache plugin (Typisk til et CMS som WordPress eller Joomla)
  • Browser Caching
  • Server Caching (Meget teknisk, som vi ikke kommer nærmere ind på)

Cache plugin

Et cache plugin gør din hjemmeside hurtigere, ved at samle eksternt hentede filer til en. Det kan være filer, der indeholder kode til design af en, eller flere elementer på hjemmesiden – en CSS fil. Det kan også være filer, der indeholder kode, der håndtere forskellige funktioner på hjemmesiden.

Ved at disse samles til en enkelt fil (en for design, og en for funktioner), øges hastigheden da det tager tid at åbne og lukke filer for serveren, hvor hjemmesiden ligger.

Det installerede plugin kan typisk tilpasses til, hvad man med fordel kan komprimere, og hvad, der skal udelades. Altså ikke dermed sagt, at der kan til og fravælges filer, men der er gerne nogle muligheder, for at vælge en bestemt opsætning i det enkelte plugin, der så til- eller fravælger for dig. Eksempelvis er det ikke alt, der ønskes cached i en webshop, da det vil gå ud over funktioner i det dynamiske data.

Browser caching

Når en hjemmeside loades på din computer, så bruger du en internet-browser (InternetExplorer, Firefox, Chrome osv.). I denne browser gemmes ligeledes billeder og øvrigt indhold. Det gør, at det gemte indhold ikke skal downloades igen fra serveren.

Ved at sætte de rigtige headere på statiske sider. Altså sider, der ikke ændres, vil disse sider gemmes på brugerens computer.

Denne hastighedsoptimering, vil naturligvis kun være aktuel på sider, der har mange tilbagevendende brugere. Hvor ovenstående, Cache plugin, gemmer filerne på serveren, til glæde for alle besøgende.

Server Caching

Server Caching er et alt for stort og komplekst emne at tage fat i her. Det bruges ofte på sider med rigtig meget trafik.

CDN, Content Delivery Network

Et CDN er en kraftig caching server, der ligesom browser caching, optimerer hastigheden på din hjemmeside ved at gemme statiske, komprimerede filer, så de kan åbnes hurtigt. Et CDN kan vise sig nyttig, når man henvender sig til brugere over hele kloden, men giver også en stor effekt lokalt, da indhold gemmes i netværket af kraftige proxy servere, der loader indhold fra den server, der er nærmest brugeren.

Afhængig af, hvilken server man er hosted på, kan et CDN være med til at nedbringe omkostningerne, på at drive serveren. Hvis du altså betaler for trafik-forbrug. Det, der loades fra et CDN belaster nemlig ikke din server.I de fleste tilfælde bliver dette kun aktuelt, hvis du har ekstremt mange besøgende på hjemmesiden.

Den højere hastighed giver en bedre brugeroplevelse og er med til at forbedre dine placeringer i Google. Ved det, at netværket af proxy servere sender dit indhold ud til brugerne, via den server, der er nærmest, får de altså indholdet hurtigere.

Kapaciteten på et CDN er meget stor og vil derfor kunne levere hjemmesider, med meget load, altså mange besøgende, til rigtig mange på samme tid uden, at hastigheden forringes.

Komprimering af filer

Det er nævnt ovenfor, men en del af det, at hastighedsoptimere på hjemmesiden er at komprimere filer. Gøre så de fylder mindst muligt og, at der skal loades færrest muligt filer.

En af de mest benyttede metoder er det, der hedder gzip komprimering.

Den måde en hjemmeside er bygget op på, når man har et cms som WordPress, Joomla eller andet – Ja, vel egentlig også, hvis man bygger sin hjemmeside i HTML, er en masse filer, der indeholder kode.
Den kode er jo lavet, så os, mennesker, har let ved at læse og gennemskue, hvad der står. Det er med andre ord sat pænt op, med linjeafstand, indrykning og så videre.
Alt det, unødige plads, eller mellemrum, afstande og linjeskift, er ikke andet end spild, når det skal læses af en server, der afvikler kode til nettet.
Derfor gør komprimeringen det, at det hele samles på en linje.

Derudover så er koden lavet af en masse gentagelser, der med fordel kan krympes sammen.
Lad mig lave et eksempel:

Du har noget kode, der består af: AAA BBBB CCCCC

I gZip “motoren” bliver denne linje lavet om til 3A 4B 5C

Dette, sammen med at filen laves på en linje gør så, at den nye fil (Den gamle eksisterer stadig og- eller kan føres tilbage igennem systemet igen) fylder op mod 50% mindre end originalen.

Så er hastigheden jo øget markant, hvis der bare er 5 eller 10 filer, der kan komprimeres.

Dette er naturligvis et tænkt eksempel, for at forklare princippet bag. Det er meget mere komplekst, hvad der egentlig sker. Men kogt ned til noget forståeligt, er det nogenlunde som ovenstående eksempel.

Vigtigt at nævnte, så skal serveren, hvor hjemmesiden ligger, være klar til at håndtere gZip. Ellers kan du sidde og lave, eller få lavet en masse, der ikke har nogen effekt.

Kontroller om din side er klar til gZip her: https://checkgzipcompression.com/

Databaseoptimering

Til en hjemmeside, der er lavet i et cms, er der altid en bagvedliggende database, der indeholder data om indhold, brugere og meget andet.Når hjemmesiden forbinder til databasen, er det vigtigt, at denne er optimeret, så data hentes så let som muligt.

Og jo tungere, altså jo mere data, der ligger i din database, jo længere tid taget det at hente det ønskede data ud af den.

Tag for eksempel WordPress, eller Joomla. Når du redigerer en side, eller en artikel, så gemmes der en revision af artiklen, så du kan genskabe en side efter en hvilken som helst ønsket rettelse, tilbage i tiden – WordPress gemmer automatisk op til 25 revisioner. Disse optager en masse databaseplads og gør databasen tungere.

Der findes funktioner i nogle af de forskellige udvidelser til at rydde op i databasen og bl.a. slette de gamle revisioner.

Har du 50 artikler, der hver er revideret 10 gange, ligger der altså 500 artikler i databasen.

Hyppig oprydning af databasen er vigtigt, hvis der er meget aktivitet, udskiftning og tilføjelse af indhold på hjemmesiden.

Grafik optimering

Små billeder fylder, i sagens natur, mindre end store billeder. Men når hjemmesiden også skal se flot ud, med skarpe, flotte billeder så kan billederne også blive for små. Så det handler op at uploade billeder i den rette, minimumsstørrelse til hjemmesiden, når man redigerer.

Det kan let kontrolleres på din computer, hvilken størrelse et billede har og kan så formindskes til det passende (Man skal ikke forstørre et billede – Så bliver det uskarpt og “grynet”).

Vil man ikke selv begynde på dette, enten af tidsmæssige, eller tekniske årsager, så kan man heldigvis få et værktøj, der klarer det for dig, når du uploader (Men husk, at du så har flere størrelser billeder til at ligge og fylde, samt henvisninger til disse i databasen).

Bruger man, som eksempel et lille (thumbnail) billede og et stort billede, til visning af produkt eller lignende, så bør billederne ligge i hver sin størrelse. Bruger man kun en størrelse, så bør øvrige billeder fjernes fra sitet.

Optimering af Fonte (Skrifttyper)

Når man vælger skrifttypen, der skal bruges på hjemmesiden, er det vigtigt at vælge nogle webfonts / Web sikre fonts. For eksempel fra Google Font biblioteket.

Der findes forskellige formater af fonte, der ikke nødvendigvis er brugbar i alle browsere. Disse typer er WOFF2, WOFF, EOT, og TTF. Nogen af disse har gzip komprimering indbygget, andre skal have det installeret.

Er din hjemmeside på flere sprog, er det vigtigt at finde en Font, der er brugbar, altså indeholder eventuelle specialtegn osv., på det eller de ønskede sprog.

… Men alt dette har jo ikke noget med hastighed at gøre ?
Jo, for det at vælge den rigtige font, er også at vælge en font, der kan optimeres, så filerne loader hurtigere, fylder mindre og samlet set bidrager til hjemmesidens hastighed.
Nogle font typer indeholder 30+ optimerede varianter, af en enkelt font, der så automatisk vælges som den mest brugbare til den browser, der nu bruges til at surfe på din hjemmeside.
Det kan godt betale sig at udspecificere, i sin kode, hvor den enkelte font skal loades fra, i hver sin “style” (Normal, bold, italic). Og dette gerne fra en lokal mappe.
For en god ordens skyld, kan der defineres nogle typer, der skal bruges til ældre browsere.

Selve kodningen af dette kommer jeg ikke ind på her. Det er mere avanceret og bør næsten have sin egen artikel.

Server ressourcer

Når man har sin hjemmeside på et standard webhotel, er det oftest på en delt server. Altså en server, hvor man deler ressourcer med mange andre hjemmesider.
Det er i mange tilfælde godt og så er det oftest billigere, end at have sine egne ressourcer, på sin egen server.

Men har man mange besøgende og en webshop, eller andet større system, så vil man ofte få mere ud af at have sin egen.
På sin egen server, kan man også få tildelt mere, når behovet er der.

– Det er ofte muligt at opgradere løbende, når behovet opstår, på sin egen server

Her er de letteste parametre at skrue på, sådan noget som RAM, CPU og fri plads på harddisk til en eventuel Swap fil.
Swap filen en en fil på harddisken, der bruges som midlertidig opbevaring af data, der ikke bruges af RAM.
Ved at benytte en swap fil, kan man udnytte mere hukommelse (RAM), end der er installeret og derved arbejder hurtigere.

Dog skal man passe på, at pladsen på harddisken ikke bliver for lille. For det kan gå meget ud over hastigheden, hvis Swap filen ikke har plads til at vokse.

Konklusion

Der er rigtig mange parametre at skrue på, når man hastighedsoptimerer på sin hjemmeside.
Derfor er det også vigtig, at man tager en ting ad gangen og gør det ordenligt. Har man fået “skruet” forkert på en parameter, så kan den, i værste fald, gøre siden langsommere. Altså stik modsat af, hvad vi ønsker 🙂

Få en professionel til at gøre det for dig. Invester det, der skal bruges for at få din side op i højeste gear.
Det giver dig bedre placeringer i Google, hvis siden spiller og er hastigheden er i top. Og ikke mindst, så giver det dine kunder en meget bedre brugeroplevelse.

Ønsker du hjælp til optimering? Så kontakt os på 27 22 28 96, eller bliv ringet op: