Tirsdag, november 7, 2017 - 10:41

5 Gode råd til en hurtigere hjemmeside

Hurtig hjemmeside = bedre konvertering

Hvorfor skal min hjemmeside være hurtigere? Er hastighedsoptimering nødvendigt?

Det er egentlig ret enkelt. Jo hurtigere din hjemmeside er, desto gladere besøgende har du. Hastighedsoptimering af din hjemmeside, giver yderst mærkbare forbedringer i brugeroplevelser, konverteringsrater og i sidste ende salg. En langsom hjemmeside, koster kort sagt rigtig mange kunder. Folk er utålmodige, og du har ganske enkelt ikke råd til, at din side er langsom!

For at illustrere vigtigheden af, at ens hjemmeside er så hurtig som muligt, starter jeg lige med at vise disse 3 grafer.

change_in_bounce_rate_by_landing_page_speed | pic2url

pages_per_visit_falloff_by_landing_page_speed

På begge grafer ses den tydelige sammenhæng mellem hastigheden på din landingpage, bounce rate og antal viste sider pr. besøg. Endnu tydeligere ses det på den næste graf, her viser det sig hvor stor effekt sidens hastighed har på konverteringen:

change_in_bounce_rate_by_landing_page_speed | pic2url

Som du kan se, skal der ikke gå mange sekunder før din konverteringsrate falder med over 50%! 

Bum. Men der er faktisk et par "easy wins" - du behøver ikke hyre et stort udvikler-team for at få en hurtigere side. Læs med her - nu kommer de 5 gode råd.

 

1. Komprimer dine billeder og grafikfiler

Her er et hurtigt faktum: Jo mindre filer, desto hurtigere hjemmeside. Hastighedsoptimering begynder med komprimering af billeder. De er noget af det der fylder mest på en hjemmeside, og samtidig er noget af det der kan komprimeres og optimeres mest på. 

Alle billeder og grafikker skal hentes ned på brugerens pc, før de vises på hjemmesiden. Billeder i jpg- og png-format kan være meget store, og selv gif-grafikker kan stille unødvendigt store krav til brugerens båndbredde og computerspecifikationer. Typisk er der 30-70 grafikfiler på en side, så her er der virkelig meget at hente i forhold til hastighedsoptimering!

Fjern også metadata fra dine billeder. Metadata er tekst information, der ligger i filen. Det indeholder bl.a. information om hvilket kamera der er brugt til at tage billedet, lukkehastighed, ISO - alt muligt, som sjældent er relevant for et billede der bruges på en hjemmeside. 

Når du uploader billeder til picee, komprimeres de automatisk, så de er klar til brug på din hjemmeside. Derudover fjernes metadata, da det som sagt også ligger og fylder unødigt. 

 

2. Skalér dine billeder korrekt

En anden yderst vigtig ting, er at dine billeder er skaleret korrekt. Hvis f.eks. du har et billede på en artikel, som skal fylde 700 px i bredden, så skal man ikke bruge et billede der er 2000 px bredt, og bare give det den ønskede bredde i HTML eller CSS. Gør du det, så hentes et 2000 px billede ned. 

Det fylder selvsagt langt mere, end hvis du har skaleret billedet til kun at være de 700 px. Jo større forskel der er på det originale billede, i forhold til det skalerede, jo mere er der at hente.

Når du uploader billeder til picee, kan du vælge hvordan de skal skaleres, så de er klar til brug på din hjemmeside. 

Her kan du se et billede, på det højre er der anvendt både komprimering og skalering! Noget af en forskel, ikke?

 

3. Cachelagring i browser

Cachelagring i browseren, betyder at man fortæller brugerens browser, at den skal gemme filerne lokalt, og i hvor lang tid. Det betyder at de samme billeder kun skal hentes ned en enkelt gang, selvom brugeren klikker på mange sider. 

Et klassisk eksempel kunne være et stort baggrundsbillede. I stedet for at brugerens browser skal hente det ned, hver gang der klikkes på en side, så hentes det kun første gang. Når brugeren så skifter side, eller besøger siden på et senere tidspunkt, tjekker browseren om der er en ny version af filen. Er der ikke det, hentes det fra brugerens egen pc. Det betyder en meget hurtigere side, og mindre belastning på serveren. 

Denne optimeringsmulighed kræver at du selv konfigurerer cachelagring. Alternativt kan du lade dine billeder ligge hos picee, og bruger den direkte url som src i dine billeder. Her er det nemlig sat op på forhånd.

For en god ordens skyld, vil jeg give et eksempel på korrekt opsat cachelagring - her er den konfiguration jeg bruger i pecee's .htaccess fil:

# Requires mod_expires to be enabled.
<IfModule mod_expires.c>
  # Enable expirations.
  ExpiresActive On

  # Cache all files for 2 weeks after access (A).
  ExpiresDefault A1209600
  <FilesMatch "\.(jpg|jpeg|png|gif|swf)$"> Header set Cache-Control "max-age=604800, public" </FilesMatch>
  <FilesMatch \.php$>
    # Do not allow PHP scripts to be cached unless they explicitly send cache
    # headers themselves. Otherwise all scripts would have to overwrite the
    # headers set by mod_expires if they want another caching behavior. This may
    # fail if an error occurs early in the bootstrap process, and it may cause
    # problems if a non-Drupal PHP file is installed in a subdirectory.
    ExpiresActive Off
  </FilesMatch>
</IfModule>

 

4. Brug CDN (Content Delivery Network)

CDN - Hvad er nu det? CDN er et netværk af servere, strategisk placeret rundt omkring i verden. Blandt andet i Danmark. Serveren har en cached version af filer, som leveres til brugerne. Det betyder at din server ikke skal bruge kraft på den del - også her er der rigtig meget at hente. 

Jeg kan komme med nogen rå tal fra picee:
Lige nu leverer jeg over 40.000 requests dagligt - altså mere end 14 millioner requests årligt!
93% af disse requests leveres gennem CDN - og belaster altså ikke mine servere.
Det betyder at jeg kun bruger serverkraft og traffik på 7% af det jeg leverer herfra. Det må siges at være noget der rykker.

Denne oprimeringsmulighed kræver at du enten selv konfigurerer CDN, eller lader dine billeder ligge hos picee, og bruger den direkte url som src i dine billeder. Her er det nemlig også sat op på forhånd. Men da billederne hentes gennem vores server, sparer du 100% båndbredde og serverkraft på dem.

 

5. Test hastigheden på din side

Din side skal som tommelfingerregel indlæses på under 2 sekunder - gerne nede omkring 1 sekund. Gør den ikke det, vil du miste brugere på det hver dag! Se derfor at få testet din sides hastighed - meget af din svartid kan reduceres ved at følge ovenstående råd. 

Her er mine favoritværktøjer til at teste hastighed:

Det var alt for nu. Den nemmeste løsning er klart at bruge picee - prøv det, og se mærk forskellen.

Forfatter: Jesper Bender

Jesper Benders billede

Jeg er CIO og driftansvarlig for NPinvestor A/S koncernen, hvor jeg har været i snart 10 år. Jeg arbejder til dagligt med alt inden for drift af serverere, ISO 27001 og ISO 27002, udvikling, markedsføring, grafisk arbejde og diverse andre IT relaterede opgaver.

Jeg har startet siden picee som et sideprojekt, da jeg synes der var behov for et bedre værktøj til optimering og deling af billeder. Kontakt mig gerne gennem siden her, hvis du har ris/ros eller forslag til forbedringer.