Hurtig hjemmeside
– og andre fokuspunkter for WebdK

Fokus og hvordan jeg tænker i forhold til CMS / hjemmesider:

Hurtig hjemmeside med unikt WordPress tema

Alle hjemmesider opsættes i WebdK’s eget WordPress tema, der konstant opdateres og forbedres.
Udviklingen af temaet har følgende sigte:

1. Hastighed
2. Mobile first / 100% responsive
3. Enkelt og stilfuldt
4. Simpelt
5. Nyeste web standarder

Need for speed & Keep it simple – Hastighedsoptimering

En engelsk overskrift er måske lidt plat og så med en reference til et kendt computerspil, men den rammer meget præcist, hvad jeg mener er vigtigst for langt de fleste hjemmesider i dag.

Hastigheden på hvor hurtig din hjemmeside loader, er i dag en meget vigtig faktor for de besøgende. 
På en måde lidt sjovt, at vi med de hurtigere og hurtigere internetforbindelser vægter hastighed, som en vigtig faktor for vores vurdering af hjemmesiden. 
Det der er sket, er at vi som brugere har en forventning til hvordan alt digital skal virke, og det er kort sagt “nemt og problemløst”. 
Du kender det sikkert fra din computer og de mange programmer du bruger, eller fra din smartphone, smart TV og ja siderne på internettet – “det skal bare virker!”. Derfor behovet for en hurtig hjemmeside. Hastighedsoptimering er blevet “Big Business” og et vigtigt fokuspunkt for mange firmaer.

Google er af samme “mening” mht. den hurtige hjemmeside

Ja Google har præcis samme krav til din hjemmeside som brugerne, det skal gå hurtigt, for at vi “gider at beskæftige os med dig”. En hurtig hjemmeside er ikke kun for mennesker!
Derfor har Google lavet et simpelt online redskab til at test din hjemmesides loadhastighed. Her få du et klart indblik i, hvordan Google bedømmer din hjemmeside. Med den information bliver arbejdet helt konkret og målrettes 100%.

Test din hjemmeside med PageSpeed Insights

Brugernes behov

Googles need for speed er faktisk grundet i brugernes behov for det samme. Google er kun interesseret i at vise os de bedste sider i søgeresultatet (SERP), og derfor er hastighed (page load time) blevet en meget vigtig faktor for Google og dermed for SEO.

Udover PageSpeed Insights vil jeg anbefale GTmetrix til at samle data på sidens hastighed. Der er sammenfald i data fra de to online ydelser, men de har samtidig begge deres fordele og svagheder. Derfor giver de tilsammen et mere retvisende billede af, hvad og hvordan arbejdet med hjemmesiden skal udføres!

Test din hjemmeside med GTmetrix

Keep it simple

Ja og her er der faktisk tale om 2 fokuspunkter.
Den første er at kildekoden (html) skal være så simpel som mulig. Det er med til at holde load tiden nede, og samtidig sikre at fremtidig ændringer og fejlretning bliver så smertefri som mulige. 
Har du på et tidspunkt prøvet at lave hjemmesider med Divi Builder eller lignende page builder til wordpress, og har set kildekoden den laver, ved du lidt om hvad problematikken er. Det er for mange næsten umuligt at gennemskue html strukturen, og det på trods af, at html er det mest simple kodesprog der findes! 

På en almindelig side med tekst og billeder, skal der ikke være et utal af html container inde i hinanden (<div><div>...</div></div>), men en simpel ren kode der “fremhæver” teksten frem for koderne. En hurtig hjemmeside er kodet i en enkle struktur, helt modsat hvad Divi Builder o.a. WordPress builder fylder vores kildekode med!

Få funktioner

Et andet vigtig fokus er, at holde antallet af funktionaliteter ned på et minimum. 
Tanken om at den samme ny hjemmeside skal kunne alt, er efter min mening ofte en stor fejl. Selvfølgelig er der undtagelser, hvor meget funktionalitet er nødvendig, men langt hovedparten af hjemmesider i dag, ville være bedre tjent med at benytte eksterne udbyder til funktioner som, booking, billetsalg, intranet og lign. ressourcekrævende funktionaliteter.

Jeg har selv arbejdet på mange store hjemmesider, som hen over årene blev mere og mere indviklet, efterhånden som ny funktionalitet blev tilføjet. Ofte er tankegangen fra firmaet eller organisationen der ejer hjemmesiden, at det må være smartere og ikke mindst billigere, at samle det hele i et stort system. Det der desværre ofte sker, er at de bygger sig “en kolos på lerfødder”. Når de efter nogle få år eksempelvis ønsker et nyt design til hjemmesiden er processen så meget mere krævende og dermed voldsom dyrere.

Helt nyt CMS kan være komplekst … men nødvendigt

Endnu større problem opstår når ønsket er at skifte CMS. Nu er det ikke bare en simpel hjemmeside med tekster og billeder, men samtidig et nyt intranet, booking system, billetsalg og meget meget mere der skal skiftes på en og samme tid.

Jeg kender flere firmaer og organisationer der meget gerne vil skifte fra Drupal til WordPress hjemmeside, men hvor kompleksiteten på den gamle Drupal hjemmeside er så omfattende, at det praktisk taget er en uoverskuelig omlægning. En omlægning som derfor udskydes i det uendelige, eller lige indtil det gamle CMS ikke længere opdateres!

Pas på med de GRATIS hjemmesider – du får hvad du betaler for!

Mange benytter i dag en af de gratis hjemmesider, hvilket jeg sagtens kan forstå, hvis man har bruge for en side til et lille “hygge projekt“.
Du har sikkert set, og er blevet lokket af online reklamer som: “bedste gratis hjemmeside”, “lav din egen hjemmeside gratis“, “billig hjemmeside” o.lign. MEN – det er vigtigt at forstå, at som med næsten alt andet her i livet så “får du hvad du betaler for” – og alt for ofte er det IKKE en hurtig hjemmeside!
Er du i tvivl om, hvad det rigtige valg for dig og dit projekt vil være, er du altid meget velkommen til at kontakte mig.

Lav din egen hjemmeside

Vil du selv lave din hjemmeside, og den skal være hurtig, er her en hurtig og kort opskrift:

Brug altid en hurtig host (webhotel)

Vælg aldrig et webhotel pågrund af pris, men analysere hvad der er vigtig for dig. Hastighed, lagerplads, support etc.

WordPress

Selvfølgelig vil jeg her anbefale WordPress, da det er forholdsvis nemt at opsætte med en hurtig load hastighed.
Vælg et simpelt tema og benyt et cache plugin som WP Super Cache og et plugin som Autoptimize til at skire at du kun har 1 css kald og 1 javascript kald. Derudover skal alle dine billeder være optimere og gerne i WebP format.

Html tags o.a. du nemt kan implementere for at forøge hastigheden

decoding="async"
decoding kan have værdierne: "sync", "async" og "auto"

Værdien "sync" fortæller browseren at den skal hente billedet før den viser / loader indholdet til brugeren.
Værdien "async" som her er den interessante, giver browseren besked om, at den skal vente med at hente billedet til efter at siden er loaded.
Ved den sidste værdi "auto", som samtidig er default i alle browsere så derfor behøver du aldrig skrive denne værdi, giver du browseren beskeden om, at den selv må bestemme i hvilken rækkefølge billedet skal hentes.
eksempel: <img src="mit-billede.webp" alt="Mit billede" decoding="async" />

loading=”lazy”

Ved at tilføje loading="lazy" til billeder, fortæller du browseren, at billedet først skal hentes, når der er brug for det. Typisk et billede der viser længere nede på siden og som først er synligt, efter brugere har scrollet ned. Først når billedet er i den synlige del af skærmen hentes billedet.
Derfor giver som regel ikke menig at benytte dette tag til bannerbilleder der vises øverst på siden!
eksempel: <img src="mit-billede.webp" alt="Mit billede" loading="lazy" />

Lazy loading kan også benyttes til andre HTML elementer end billeder for at opnå en hurtig hjemmeside. Eksempelvis har jeg kodet et plugin, der benytter denne strategi ved Youtube videoer, hvilket giver et kæmpe boost i hastighed, så siden forvandles til en lynhurtig hjemmeside selv med tunge Youtube film.