Treg nettside?

Slik får du god nok fart på din WordPress nettside

En treg nettside bruker maks 3 sekunder på å sende gjestene dine videre til konkurrenten. Farten på din nettside er derfor viktig. I denne artikkelen skal jeg knuse noen myter om raske nettsider. Samt at du får litt forståelse i hva som skaper topp ytelse.

Denne siden er ikke en detaljert guide – men en introduksjon for å forstå helheten, forsøkt forklart for ikke-tekniske-personer. Mer avanserte brukere kan få noe nytte ut av dette. Eller hoppe over og lese en litt mer teknisk artikkel om ytelse i WordPress.

Nettsidens ytelse og omsetning henger sammen

Konvertering er et begrep vi benytter når en bruker har utført en ønsket handling. Typisk kjøpt en vare i en nettbutikk. Andelen av de besøkende som utfører en slik handling kalles for konverteringsrate, og måles i prosent.I følge en større undersøkelse fra Portent så har en rask nettside, med innlastingstid på 1 sekund 3 ganger så mange konverteringer som en nettside som bruker 5 sekunder. ¹På 1000 besøkende vil det for en gjennomsnittlig nettside utgjøre forskjellen på 10 og 30 salg.For mange er dette forskjellen på å feile og lykkes.Generelt sett er tommelfingerregelen å holde nettsidens ytelse under 3 sekunder. Samtidig ser vi at det er en markant forskjell mellom 1 sekund og 3 sekunder også.Kilde: ¹ https://www.portent.com/

Hvor kan du måle ytelsen?

PageSpeed Insights [lenke]– Google sin egen utviklerside har en test hvor du limer inn lenken til nettsiden du ønsker å teste. Du kan også teste individuelle sider.

Merk at det er kun Datamaskin-resultatet som har reelle tall. Mobilversjonen emulerer i en lab-måling et tregere mobilnett enn vi har i Norge.

Dermed er det viktig at du måler på din egen mobil og gjerne fra forskjellige modeller.

Nei perfekt fart er ikke nødvendig

Fart er for mange utviklere en besettelse. Det er også en kilde til frustrasjon. Vi får også kunder som er ekstremt opphengt i fart og ytelse – fordi man har hørt et fart og ytelse er viktig.

Det er riktig at det er viktig, men perfeksjon er for mange unødvendig. Fort nok, er godt nok.

Det handler aller mest om å være bedre enn konkurrentene.

Holder du nettsiden over 90 poeng (av 100) så er det bra. Men når noe ikke er perfekt, så er det årsaken som er interessant. Av og til må man inngå forlik mellom ytelse og funksjon. Av og til er det viktige feil som bør rettes opp.

Det handler også om tidsbruk, for å gå det siste steget fra 95 til en perfekt 100, så må ofte en utvikler legge ned mye innsats i å tilpasse både nettsiden og serveren.

Slik får du raske nettsider i WordPress

Vår egen nettside handler om WordPress (CMS) – Her kan du få råd om du skal velge publiseringsløsning (CMS).

Temaet her er derfor spisset mot WordPress-brukere.

WordPress får ofte kritikk for å være en treg CMS-løsning. Sammenlignet med håndkode og headless CMS m.m. – Denne nettsiden kjører på WordPress, og det perfekte resultatet fra bildet øverst, er oppnådd på denne nettsiden.

Knust myte nummer 1: WordPress er tregt.

“It’s Not The Plane, It’s The Pilot.”

Vanlige feil mange gjør

Vi ser ofte at mange har installert mer enn 1 sidebygger, og at man bruker et tema (utseende) som ikke passer sammen med resten. Dette skaper ofte konflikter og problemer for ytelsen.

1. Bruk en god server

Formel 1 biler egner seg dårlig på grusveger. Bruk et optimalisert for WordPress Webhotell. En god server kan tilgi mange feil. Webhotellet skal være raskt nok, og tilpasset ditt behov.

Svært mange nettsider kjøer på for dårlig servere, og drar ned ytelsen for å spare noen en hundrelapp eller to i måneden.

En rimelig webserver er ok for lek og læring. En live nettside som du skal tjene penger på vil raskt tjene inn den ekstra kostnaden.

Serveren bør stå slik til at den ikke har voldsom lang vei til dine kunder. Servere på fastlands Europa eller i Norge er best. Selv lyset bruker 0,13 sekunder rundt jorda, så serveren trenger ikke stå i Amerika.

2. Bruk riktig sidebygger / tema

En sidebygger er et grensesnitt hvor du kan dra og slippe inn, eller plassere elementer som er ferdig kodet, klart for å tilpasser på farger og marger.

Du har kanskje hørt om Elementor, WP Bakery, Beaver Builder, Divi og Thrive Architect? Eller kanskje om Gutenberg, som er WordPress sin egen variant. Dette er alle forskjellige sidebyggere, og det er mye diskusjon om hvilken som er best. Felles for alle, er at de er raskere enn å håndkode kildekoden. Her kan det være forskjell på sekunder og timer i produksjon.

Kritikken mot sidebyggere er at de genererer for mye kode – og blir trege. Også her handler det mye om utvikleren – man kan unngå å bruke for mye kode, man kan bruke verktøy som rydder opp – og til slutt handler det ikke om mengden kode, men om resultatet.

Denne nettsiden er laget med Elementor Pro og yter helt topp.

Knust myte nr 2: Elementor er tregt og full av unødvendig kode.

Fordelen med en sidebygger er tid spart i utviklingen. Om du vil legge 100.000 kroner til i prosjektet, så får man nok håndkodet mye – men også håndkode er avhengig av kvaliteten til hen som trykker på tastaturet. Når man klarer å få god nok ytelse, uten håndkode, så er det penger vel spart.

3. Velg programtillegg (plugins) med omhu

WooCommerce er et programtillegg for WordPress som du bør ha for å lage nettbutikk.

I kartoteket til WordPress er det over 55.000 programtillegg til alle mulige formål. ²

Det er ikke alle disse utvidelsene som er gode, sikre eller kompatible med akkurat din løsning.

For å få perfekt resultat på vår egen side, måtte vi finjustere, teste og tilpasse på innstillinger både på server og i WordPress.

Mange av utvidelsene er utdaterte eller blir ikke lenger oppdatert, slik at når WordPress oppdateres, så er det fare for at noe ikke lenger virker som det skal.

Kvaliteten på utvidelsen er også en risiko. Hvem som helst kan lage hva som helst.

Det er også gode løsninger som ikke er veldig kompatible når begge er tilstede samtidig.

Men den mest vanlige feilen er bruk av alt for mange utvidelser og ukritisk bruk av dette. Har du f.eks RankMath for SEO, så trenger du ikke en egen plugin for viderekobling eller 404 logging, det finnes allerede.

Når det gjelder «for mye kode» så er den skyldige ofte å finne blant programtilleggene.

Kilde:
² https://kinsta.com/blog/wordpress-statistics/

4. Bruk mellomlagring av data (Cache)

Nå blir det så fort teknisk at det beste rådet, er å bruke en utvikler som vet hva dette er – og hvordan man setter det opp for best ytelse. Både på server og i WordPress.

Kort fortalt er mellomlagring en metode for å levere innhold raskere mellom din nettleser og serveren hvor en nettside er lagret.

For eksempel kan nettleseren din lagre skrifttypen som er i bruk her, når du besøker en nettside som bruker samme skrifttype, senere vil den hente den fra nettleseren din, i stedet fra en server, som potensielt er på andre siden av kloden. Kortreist data med andre ord.

Vanlige feil mange gjør

Man laster ned en tilfeldig cache utvidelse, aktiverer den og rører ikke innstillingene. Eller man slår på alt, også det som gjør vondt verre.

Valget av hvilken utvidelse du skal bruke her, kan også være avhengig av hvilken server du har, og hva som er på serveren.

5. Tilpass designet til ytelsen du ønsker

Hva som er på nettsiden er viktig. Video, store bilder, mange bilder, mange grafiske elementer. Jo større og lengre nettsiden blir, jo tregere går det, og du må enten kompensere med en topp trimmet server, eller velge å tone noe ned.

En nettside er som et sett med legoklosser, hvor du henter en og en bit, og bygger de sammen. Om den viktigste biten hentes til slutt, så får du ikke bygget skikkelig før alt er hentet.

Har du et stort legosett, med mange biter, blir det mange turer frem og tilbake i eska, og det tar lengre tid å bli ferdig med legosettet – akkurat slik er det også med nettsider.

Det kan være lurt å dele opp et større tema, på flere sider.

Uten å bli for teknisk kan vi grovt sett kalle en legoklosse for DOM, og du vil oppleve når du tester nettsider, at DOM størrelsen er for stor. (Lenken legges på til en forklaring, fordi dette er noe mange selvlærte webutviklere bør kunne mer om)

Men for vanlige folk, handler det om å ikke trykke for mange forskjellige elementer inn på samme side.

"and transfer sizes small"

Og siden alle bitene skal trykkes igjennom kabler, og er avhengig av kablenes og luftsignalenes kapasitet, så er det også anbefalt at man holder alle disse delene små.

Komprimer Bilder: Filstørrelsen på bilder er viktig. Det er 98% sjanse for at dette er feil, eller for dårlig på din nettside. Når vi optimaliserer en nettside, så er komprimering av bilder omtrent standard.

Resten er innstillinger på servernivå (GZIP) og i Cache-utvidelsen. Minify – hvor man krymper filstørrelsen på HTML-koden, JavaScript og CSS filene. Egentlig fjerner man kommentarer, mellomrom og andre små overflødigheter, som gjør at filene leveres raskere igjennom flaskehalsene.

6. Innse når du trenger hjelp

Har din nettside en score på 80 eller lavere, og du ikke forstår alt som skrives her, da trenger du hjelp, fordi en god nettside er mer synlig i søkeresultatene hos Google.

Du får mer salg, til flere. Det er ofte grunn nok til å ta grep.

Men alt handler om kompromiss, og beslutninger fattet på kunnskap. Det er ok å senke farten, om det betyr at du får på plass en kritisk funksjon som for eksempel å sikre nettsiden.

Det er ok om bildene har høy kvalitet, om du er fotograf som skal vise fram kunst.

Fart er ikke alt, nytteverdien er også viktig. Den som venter på noe godt…

En treg nettside har mange kilder

En treg nettside har mange kilder. WordPress og Elementor, gjerne i kombinasjon omtales av mange som en sirup-løsning.

Utfordringen er at det er ikke mange utviklere som ser helheten. Og detaljene i helheten må henge sammen.

Kunsten å lage nettsider har blitt så brukervennlig og enkelt – at «alle» kan gjøre det, men det er ikke alle som forstår teknologien, og sammenhengen.

Trenger du WordPress hjelp, så er det bare å ta kontakt.

Om du liker å lese om dette temaet, så har jeg skrevet 10 vanlige feil du gjør med din nettside og om du vil ta et dypdykk ned i WordPress ytelse, så er en litt mer avansert versjon her.