Sådan hastighedsoptimere du dit website

🎞️ Se videoen hvor jeg giver mine bud på hvordan du kan hastighedsoptimere dit website

Hvorfor er hastighedsoptimering vigtig?

Idag er brugernes tålmodighed meget kortfattet, derfor går det ikke at ens website indlæser en side på 5-6 sek. Det gælder især på mobilen, hvor vi er endnu mere utålmodige.

• Hastighed på ens website giver en god brugeroplevelse
• Brugerne kan hurtigere navigaere rundt på siden og komme i mål
• Google bruger det indirekte some en ranking faktorer (pga. brugervenlighed der giver)

‍

Hvad er hastighedsoptimering?

Hastighedsoptimering er disciplinen af gøre dit website hurtigere, ved at optimere på tekniske indstillinger og foretag ændringer på dit website set-up så brugerne kan indlæse siderne på dit website hurtigere på desktop og mobile devices.

‍

Hvordan arbejder du med hastighedsoptimering?

Indenfor hastighedsoptimering er der rigtig meget man kan gøre for at forbedre sit website, også hvor det kræver en dedikeret udvikler. Så jeg vil komme ind på nogle af de tiltag man selv kan gøre.

‍

1. Billeder

Billeder kan ofte være god ide at kigge om selve fil størrelsen kan optimeres, der er meget forskel på 64kb og 459kb. Især fordi du har ofte flere billeder på dit website.

Et af de første ting du kan ofte kan gøre for at øge hastighed på dit website er at arbejde med det billedmateriale du har på siden, ofte behøver du at ikke have et 1920px billede når det kun anvendes i 800px format som det største. Derfor er det altid en god ide at få billederne ned i de størrelser de skal agerre på websitet.

‍

Her kommer en checkliste for billeder

• Vælg den største størrelse billedet skal vises med
• Eksportere den fra program som JPG eller PNG format fra photshop med min 60% kvalitet
• Anvend en komprimieringsværktøj som tinypng.com til at komprimere filstørrelse endnu mere
• Anvend lazy-loading attributes på dine billeder på dit websites
• Undersøg om der dit CMS muliggøre SRCSET → Læs mere om SRCSET
• Brug en CDN til dit billedematriale for at indlæse hurtigere og anvend WEBP hvis dit CMS tillader dette
• Anvend SVG format for dine ikoner, illustrationer

2. Skrifttyper

Skrifttyper har ofte det problem at man “loader” dem fra eksternt server til fra. eksemplvis google fonts og derefter skal indlæses på siden før de kan vises → Her er der kb. at spare

‍

Hent fontforge her → https://fontforge.org/en-US/

Her kommer en checklist for skrifttyper

• Hent skrifttyper lokalt istedet for ekstern server
• Brug en software som fontforge til at fjerne tegn, glyph som der aldrig vil blive brugt.
• Anvend et komprimieret skrifttype format som WOFF2 Format istedet for TTF
• Indlæs kun de “weights” der er nødvendig, i Webflow er det eks. ikke nødvendigt at hente “700 bold) fordi man kan sætte den som bold dirkete derinde.
• Sæt fallback til sans serif, hvis et tegn ikke findes eller lignede fallback til system skrifttype(det betyder hvis jeg har et tegn som ikke findes vil den indlsæse fra default system font alligevel

Poppins Regular direkte fra google ikke redigeret → 155kb. optimeriet version 11kb

Se en kæmpe forskel på skriftype størrelse, oplevelsen af hastigheden

‍

3. Website scripts og styling

Så kommer vi til eksterne scripts og css styling på sit website, er der ofte også noget at sparre.

En af de elementer der også kan skabe et tungt og langsomt website, er indlæsning af tredjepart scripts og især hvis der nogle der ikke alligevel bruges. Det kunne være eksempelvis:

• Hotjar
• Aktive Plugin eller APPS (men deres funktioner bruges ikke)
• CCS styling fra trejdeparts udbyder som ikke anvendes
• Minimere trejdeparts script
• Minimiere og fjern styling du ikke bruger i dit CSS style sheet
• Minimere og clean up Javascript på dit website

‍

5 tips til forbedre hastigheden på dit website

1. Få styr på billederne

Få styr på dit billedmateriale, størrelser , format, komprimering, lazyload, srcset

2. Få styr på dine fonts

Dowload fonts lokalt, redigere og komprimere i fontforge, indlæs i woff2 format og indlæs lokalt på dit website.

3. Website scripts og css

Rod op i CCS og javascript der indlæses i på sitet og fjern unødvendig javascript og unødvendigt CSSfra stylesheet

4. Vælg en god hostingudbyder

Vælg en god hosting udbyder det er altid et godt sted at starte for at mærke forskel på hastigheden og anvend gerne cache

5. Brug en CDN til uploade billeder

Anvend en CDN hvis de site er internationalt eller hvis du ønsker hurtigere indlæsning af videoer eller billeder på dit site

‍

🧙Du har også altid mulighed for at tage fat i mig, så laver jeg gerne en analyse eller kommer med mine anbefalinger til, hvor i kan gå ind og optimiere hastigheden på jeres website.