Introduksjon
Du kan konfigurere sidecaching, aktivere objektcaching med Redis og velge et minimalistisk tema, for så å undergrave mye av dette arbeidet ved å laste opp en bildefil på 4 MB som hero-bilde.
Bilder er vanligvis det som opptar mest plass på en WordPress-side. Uten optimalisering kan ett enkelt mobilbilde inneholde mer data enn hele sidens HTML, CSS og JavaScript til sammen. Hvis du så ganger dette opp på en produktside med seks bilder, en porteføljeside med tjue eller et blogginnlegg med flere framhevede bilder, så kan nettstedet ditt plutselig ha blitt en tungvekter hver gang det lastes inn.
Bildeoptimalisering er en av de enkleste måtene å forbedre ytelsen på, og det meste av dette skjer før du i det hele tatt åpner WordPress. Vi starter med noen gode vaner før opplasting som sikrer at bildene vil lastes raskt, før vi går videre til medieinnstillingene i AccelerateWP for optimalisering på serversiden med STW WordPress-hosting.
Hvorfor er bilder problemet?
Et moderne smarttelefon-kamera tar bilder som er 4000–6000 piksler brede og har en filstørrelse på 3–8 MB. Dette egner seg utmerket hvis du skal trykke en plakat, men det er altfor stort for en nettside.
Innholdsområdet på nettstedet ditt er vanligvis maks 1200 piksler bredt. Et hero-bilde i full bredde kan kreve 1920 piksler. Det er ingenting på nettstedet ditt som trenger et bilde på 6000 piksler. Men hvis du laster opp et slikt bilde uten å endre størrelsen, lagrer WordPress originalen og genererer flere mindre versjoner automatisk. Originalen vil fortsatt vises i enkelte sammenhenger, og selv de genererte versjonene kan være større enn nødvendig.
I tillegg til filstørrelsen spiller også komprimering inn. Et JPEG-bilde rett fra kameraet er ofte bare minimalt komprimert for å bevare fleksibiliteten for redigering. Når du skal bruke det til visning på nettet kan du imidlertid komprimere det mye mer uten synlig tap av kvalitet. Forskjellen mellom “ser perfekt ut på skjermen” og “ser perfekt ut på skjermen med halve filstørrelsen” er bare en liten justering av komprimeringsinnstillingene.
Og så er det formatet. JPEG har vært standardformatet på nettet i flere tiår, men nyere formater som WebP gir samme bildekvalitet med mye mindre filer. De fleste nettlesere har støttet WebP i flere år.
Å fikse disse tre tingene før du laster opp bildene er den aller mest effektive måten å optimalisere dem på.
Arbeidsflyten før opplasting
Gjør følgende til en vane hver gang du skal legge til bilder i WordPress.
Trinn 1 — Tilpass bildestørrelsen til nettbruk
Før du endrer komprimering eller format bør du endre størrelsen på bildet til den maksimale bredden det skal vises med.
| Bruksscenario | Anbefalt bredde |
|---|---|
| Hero-/bannerbilde (full bredde) | 1920 px |
| Toppbilde til blogginnlegg | 1200 px |
| Bilde i innholdet (i tekstkolonne) | 800-1000 px |
| Miniatyrbilde eller kort | 400-600 px |
| Logo | Vanligvis under 300 px |
Dette er ikke fastlåste regler. Poenget er å ha en omtrentlig idé om hvor bredt bildet skal vises på skjermen, og tilpasse størrelsen deretter. Et bloggbilde på 1200 piksler trenger ikke leveres i en oppløsning på 4000 piksler.
De fleste bilderedigeringsprogrammer håndterer dette. Photoshop, GIMP, Affinity Photo og til og med de innebygde bildeappene i Windows og macOS kan endre størrelsen på et bilde på få sekunder. Åpne bildet, endre til ønsket bredde (med uendret forhold mellom høyde og bredde), og lagre.
Trinn 2 — Komprimer bildet
Komprimering reduserer filstørrelsen ved å fjerne visuell informasjon som menneskeøyet ikke oppfatter i noen særlig grad. For fotografier er tapsbasert komprimering med en kvalitet på 80–85 % det optimale kompromisset. Filen blir betydelig mindre, men forskjellen er usynlig ved visning i skjermoppløsning.
Gratis verktøy som er gode til dette:
- Squoosh er Googles nettleserbaserte verktøy. Dra bildet inn, juster kvaliteten, sammenlign før og etter, og last ned. Støtter JPEG, PNG, WebP og AVIF.
- TinyPNG støtter komprimering av PNG- og JPEG-filer med dra og slipp. Enkelt og effektivt.
- GIMP og Affinity Photo gir full kontroll over innstillingene for kvalitet på det eksporterte bildet.
Hvis du skal behandle mange bilder samtidig, kan desktop-verktøy som ImageOptim (macOS) eller FileOptimizer (Windows) komprimere en hel mappe i én omgang.
Trinn 3 — Velg riktig format
| Format | Best for | Grunn |
|---|---|---|
| WebP | De fleste bilder på nettet | Mindre filer enn JPEG med tilsvarende kvalitet. Støttes av alle moderne nettlesere. |
| JPEG | Fotografier, når bred kompatibilitet er viktig | Universell støtte. Fortsatt et trygt alternativ. |
| PNG | Grafikk med gjennomsiktig bakgrunn, logoer, tekstoverlegg | Tapsfri. Større filer enn WebP, men nødvendig for skarpe konturer og gjennomsiktige elementer. |
| SVG | Logoer, ikoner, enkle illustrasjoner | Vektorformat. Kan skaleres til hvilken som helst størrelse uten tap av kvalitet. Svært små filstørrelser for enkle former. |
| AVIF | Maksimal komprimering for støttede nettlesere | Enda mindre enn WebP. Støttes av stadig flere nettlesere. |
For de fleste WordPress-nettsteder egner WebP seg best som standard. Hvis du bruker Squoosh, bør du eksportere som WebP med en kvalitet på 80 %. Filen blir vanligvis 30–50 % mindre enn den opprinnelige JPEG-filen.
Konkret eksempel
Du har et bilde fra telefonen din med en oppløsning på 4032 x 3024 piksler og en filstørrelse på 5,2 MB:
- Endre størrelsen til 1200 piksler i bredden (for et blogginnlegg). Filstørrelsen blir redusert til omtrent 1,5 MB.
- Eksporter som WebP med kvalitetsnivå 80 i Squoosh. Filstørrelsen reduseres til omtrent 80–150 KB.
- Last opp til WordPress.
Reduksjonen fra 5,2 MB til under 150 KB er på 97 %, men bildet vil se identisk ut på skjermen.
Gi bildefilene gode navn
Når du først er i gang med å forberede bildene dine bør du gi filene nye navn. IMG_8847.jpg gir ikke søkemotorene noen som helst nyttig informasjon. handlagde-keramiske-vaser-oslo.webp forteller dem hva bildet viser.
Bruk små bokstaver, skill ordene med bindestrek og beskriv motivet i bildet. La filnavnet være kort, men konkret. Dette bidrar til bedre synlighet i bildesøk, og gjør det dessuten enklere for deg selv å administrere mediebiblioteket ditt etter hvert som det blir mer omfattende.
Alt-tekst
Alle bilder du laster opp til WordPress bør ha såkalt alt-tekst (alternativ tekst). Dette tjener to formål:
- Tilgjengelighet. Skjermlesere vil lese opp alt-teksten for brukere som ikke kan se bildet. Uten alt-teksten får disse brukerne ingen informasjon ut av bildet.
- SEO. Søkemotorer bruker alt-tekst for å forstå hva bildet viser. Det bidrar til synligheten din i bildesøk.
Lag alt-tekster som angir bildenes innhold, ikke funksjon. Du kan skrive alt-teksten enten når du laster opp bildet i mediebiblioteket i WordPress, eller når du setter det inn på en side eller i et innlegg. Feltet for alt-tekst vises i detaljpanelet for vedlegg på høyre side av medieopplasteren.
Hva gjør WordPress etter opplasting?
Når du laster opp et bilde vil WordPress automatisk generere flere størrelser. Det opprettes en miniatyr, en mellomstor, en stor og en fullstørrelsesversjon. Temaet og utvidelsene dine kan legge til ytterligere størrelser i tillegg til disse.
WordPress bruker attributtet srcset i HTML-koden på siden din for å la nettleseren velge den mest passende størrelsen for leserens skjerm. En mobiltelefon kan få 600 px-versjonen, mens en datamaskin får 1200 px-versjonen. Dette er innebygd og fungerer uten manuell konfigurasjon.
Forarbeidet ditt før opplastingen gjør dette systemet mer effektivt. Hvis du laster opp et bilde med riktig størrelse og komprimering vil alle versjonene WordPress genererer ha samme kvalitet. Hvis du laster opp et ukomprimert originalbilde på 6000 piksler vil derimot alle genererte versjoner inneholde overflødige data.
Medieinnstillinger i AccelerateWP på STW WordPress-hosting
Alle STWs abonnementer på WordPress-hosting inkluderer AccelerateWP. Her finner du en egen Media-side med innstillinger for utsatt innlasting, bildedimensjoner, fonter og bildeoptimalisering på serversiden.
Gå til AccelerateWP → Media i sidepanelet i WordPress-kontrollpanelet.
LazyLoad
LazyLoad utsetter innlastingen av bilder, CSS-bakgrunnsbilder og iframes til de er i ferd med å komme inn i brukerens visningsområde. I stedet for å laste inn alle bildene på siden når den først åpnes, laster nettleseren bare inn bildene etter hvert som brukeren blar nedover mot dem.
Dette styres av tre avkryssingsbokser:
- Aktiver for bilder anvender funksjonen på vanlige
<img>-koder - Aktiver for CSS-bakgrunnsbilder omfatter bilder som er angitt via CSS (hero-seksjoner, dekorative bakgrunner)
- Aktiver for iframes og videoer utsetter også lastingen av innebygde videoer og iframes til de blir synlige
Ingen av de tre valgene er merket av som standard. På de fleste nettsteder er det lurt å aktivere LazyLoad for bilder. Det reduserer den innledende størrelsen på siden og forbedrer Largest Contentful Paint-resultatene, spesielt på sider der det er mange bilder under det synlige feltet.
I feltet Ekskluderte bilder eller iframes kan du angi bilder som alltid skal lastes inn umiddelbart. Hvis for eksempel hero-bildet ditt blir lastet inn med LazyLoad (slik at det ser tomt ut en kort stund når du åpner siden), kan du legge til filnavnet eller CSS-klassen i denne ekskluderingslisten.
Bildedimensjoner
Avkryssingsboksen Legg til manglende bilde-dimensjoner legger til attributtene width og height for bilder i HTML-koden din som mangler disse. Uten disse attributtene vet ikke nettleseren hvor mye plass et bilde trenger før det er ferdig lastet inn. Dette fører til layoutforskyvninger, slik at innholdet kan “hoppe rundt” etter hvert som bildene dukker opp.
Hvis du aktiverer denne funksjonen forbedrer det CLS-verdien (Cumulative Layout Shift), som er en av Googles Core Web Vitals. Dette er en innstilling som trygt kan aktiveres på de fleste nettsteder.
Fonter
Her vises to innstillinger knyttet til skrifttyper:
- Forhåndsinnlasting av skrifttyper gir nettleseren beskjed om å begynne å laste ned skrifttypene som vises på skjermen umiddelbart, før den oppdager dem i CSS-filen. Dette kan redusere forsinkelser i tekstvisningen.
- Selvhosting av Google Fonts laster ned Google Fonts og leverer dem fra din egen server i stedet for å hente dem fra Googles CDN. Dette reduserer antall eksterne tilkoblinger og forhindrer potensielle personvernproblemer knyttet til innlasting av skrifttyper fra tredjeparter. Hvis temaet ditt bruker Google Fonts er det lurt å aktivere denne funksjonen.
Bildeoptimalisering
Nederst på siden styrer avmerkingsboksen Aktiver bildeoptimalisering komprimering og formatkonvertering av bilder på serversiden. Dette omtalte vi i del 13.
AccelerateWP komprimerer automatisk bilder på serveren og leverer neste generasjons formater (som WebP) når det er mulig. I merknaden under står det: “To disable this feature, use AccelerateWP UI in hosting control panel”. Dette innebærer at den administreres på servernivå.
Denne serverbaserte optimaliseringen fungerer som et sikkerhetsnett. Den fanger opp bilder som er lastet opp uten forhåndsoptimalisering og forbedrer dem automatisk. Forhåndsoptimalisering gir deg fortsatt større kontroll over kvalitetsinnstillingene, men når denne funksjonen er aktivert, vil ingen bilder slippe gjennom helt uten optimalisering.
Hvis du benytter delt hosting
Hvis du ikke planlegger å bruke AccelerateWP, kan to alternative utvidelser være til hjelp:
- ShortPixel (en gratis versjon er tilgjengelig) komprimerer bilder ved opplasting og kan optimalisere flere eksisterende bilder i én omgang. Tjenesten støtter konvertering til WebP og tilbyr komprimeringsmoduser både med og uten tap.
- Imagify (har også en gratis versjon) fungerer på lignende måte, med automatisk komprimering ved opplasting og masseoptimalisering av eksisterende bilder. Tjenesten kan integreres med WP Rocket hvis du bruker denne cache-utvidelsen.
Begge fungerer slik at bildene dine sendes til en ekstern komprimeringstjeneste, og originalene erstattes med optimaliserte versjoner. Gratisversjonene inkluderer et rimelig antall bilder per måned.
Rådene om forberedelser før opplasting gjelder fortsatt. Optimalisering via en utvidelse forbedrer det du laster opp, men å laste opp et WebP-bilde med riktig størrelse og 80 % kvalitet gir deg et bedre utgangspunkt enn å laste opp et JPEG-bilde på 6000 piksler og håpe at en utvidelse skal fikse det.
Konklusjon
Bildeoptimalisering er det nærmeste du kommer gratis ytelsesforbedring. Det meste av arbeidet gjøres allerede før du åpner WordPress. Endre dimensjonene til ønsket bredde, komprimer til et OK kvalitetsnivå, eksporter som WebP, gi filen et beskrivende navn og legg til alt-tekst etter opplasting. En rutine som tar maks fem minutter per bilde kan spare flere sekunder i lastetid per side.
På STW WordPress-hosting fungerer AccelerateWP som et sikkerhetsnett på serversiden, med automatisk bildeoptimalisering og funksjoner for utsatt innlasting. På delt hosting kan utvidelser som ShortPixel eller Imagify fylle den samme rollen.
I den neste veiledningen tar vi for oss den siste hovedårsaken til tregere nettsider: CSS- og JavaScript-filer.
Neste trinn: