Sidehastighet på budsjett: Kostnadseffektive måter å øke nettstedets ytelse

Sidehastighet på budsjett

Som Core Web Vitals-konsulent får jeg mange forskjellige forespørsler om støtte til sidehastighet. Og ja, noen ganger er det ikke et stort budsjett. Hvis det er tilfellet, må jeg være enda mer effektiv med tiden min og kun utføre optimaliseringer med høy gevinst og lav innsats. I denne artikkelen utforsker vi praktiske, kostnadseffektive strategier for å heve nettstedets ytelse og levere en sømløs user experience.

Core Web Vitals TIP: Den mest budsjettvennlige tjenesten jeg tilbyr er 2-timers Core Web Vitals-støtte! På 2 timer hjelper jeg deg med å sette opp en effektiv strategi som fikser de mest presserende problemene og gir deg mest mulig valuta for pengene!

Bestill nå!

Finn ut hva problemene er først

Når vi optimaliserer nettytelse på et budsjett, må vi være helt sikre på at vi optimaliserer så effektivt som mulig. Det betyr at vi først må vite hva det virkelige problemet er.

Vi kan bruke den utmerkede og gratis PageSpeed Insights til å hente CrUX-dataene. CrUX-dataene er den eneste datakilden som betyr noe, ettersom det er datakilden Google bruker.

CrUX-data bestått!

CrUX-data ikke bestått!

Under CrUX-poengsummen vil du se en Lighthouse-revisjon. 

La meg være tydelig om Lighthouse-revisjonen! På dette tidspunktet bryr vi oss ikke om Lighthouse. Hvorfor? Fordi den ikke måler Core Web Vitals. Jada, Lighthouse er et fantastisk testverktøy og du kan gjerne utforske alle forslagene, men siden vi er på et budsjett bryr vi oss om å bestå Core Web Vitals. Vi bryr oss ikke om å bestå syntetiske tester akkurat nå!

Tilbake til CrUX-dataene. Her er noen retningslinjer å følge hvis du er på et budsjett! Begynn å undersøke Core Web Vitals i denne nøyaktige rekkefølgen og fokuser på disse problemene først!

• Hvis du feiler på Time to First Byte, fiks det først!
• Hvis du feiler på First Contentful Paint, fiks render-blokkerende ressurser (utsett skript og optimaliser stiler)
• Hvis du feiler på Largest Contentful Paint, prioriter ressursene du trenger for den LCP-en (som fonter eller bilder)
• Hvis du feiler på CLS, legg til bredde og høyde på alle bilder, finn og fjern CSS-overganger og reserver plass for sent rendrede elementer (som annonser, produktfiltre osv.)
• Hvis du feiler på Interaction to Next Paint, bruker du mest sannsynlig for mye JavaScript på feil tidspunkt. Fjern unødvendige skript/utvidelser, bruk et RUM-verktøy som CoreDash for å finne de tregeste skriptene

Optimalisering av bilder på en ansvarlig måte

Bilder bidrar til Core Web Vitals på flere forskjellige måter. De er ofte de største bidragsyterne til nettsidestørrelse. Ved å utnytte effektive bildekomprimeringsteknikker og bruke moderne bildeformater som WebP, kan nettstedseiere opprettholde visuell kvalitet samtidig som lastetidene reduseres betydelig. Mange ganger vil bilder bli Largest Contentful Paint-elementet. Det betyr at vi må prioritere de viktige LCP-bildene og nedprioritere mindre viktige bilder og bilder under folden.

1. Konverter bilder til WebP gratis

Det finnes mange gratis verktøy, løsninger og utvidelser tilgjengelig som lar deg konvertere bilder til nyere, raskere og mer moderne formater som WebP. For WordPress for eksempel vil jeg anbefale den utmerkede og gratis WebP Express

2. Implementer Lazy loading

Lazy loading vil signalisere til nettleseren at et bilde ikke skal lastes inn før det er (nesten) i det synlige viewportet (den synlige delen av siden). Hvis du har 15 bilder på en side og bare 3 er i den synlige delen av siden, kan du trygt legge til loading="lazy" på bildene som ikke er i det synlige viewportet. 

Det er 2 måter å løse dette på. Den første er å aktivere lazy loading i CMS-et ditt. Dette vil legge til lazy loading på alle bilder. Deretter kan du konsultere dokumentasjonen for hvordan du fjerner lazy loading for bildene som er synlige og viktige. Den andre måten er å manuelt legge til loading="lazy" på bilder under folden.

<img loading="lazy" src="image.jpg">

3. Konfigurer fetchpriority for bilder

Ved å legge til fetchpriority = "high" på en bildetag kan vi signalisere til nettleseren at dette bildet er viktigere enn andre bilder og bør lastes ned med høy fetchpriority. Og selv om jeg er klar over at det finnes bedre metoder som inkluderer forhåndslasting av bilder og 103 early hints, er det å sette fetchpriority enkelt, raskt og effektivt! Prosessen er enkel: bare identifiser det viktigste bildet på siden din, rediger malen for selve siden og legg til fetchpriority = "high på bildet". Dette vil se omtrent slik ut

<img fetchpriority="high" src="image.jpg">

2. Utnytt nettleserbufring for konsistens

Hvis du bruker budsjettvennlig hosting, er sjansen stor for at webserveren ikke er optimalt konfigurert. En av feilene jeg regelmessig kommer over er feilkonfigurert nettleserbufring.  Nettleserbufring lar hyppig brukte ressurser som bilder, skript og stilark lagres lokalt, noe som reduserer lastetider for tilbakevendende besøkende. Konfigurer bufringsheadere for å finne en balanse mellom optimal ytelse og sikre at brukerne får de siste innholdsoppdateringene.

Hvis du bruker Apache som webserver, opprett ganske enkelt en fil kalt .htaccess i rotkatalogen til nettstedet ditt og legg til disse linjene

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|webp|gif|css|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Cache-Control "max-age=172800, public, must-revalidate"
  </IfModule>
</FilesMatch>

Hvis du bruker en annen webserver som NGINX, vennligst kontakt hostingleverandøren din og vis dem denne artikkelen!

3. Vurder et gratis eller budsjettvennlig CDN som CloudFlare

Utforsk fordelene med Content Delivery Networks for å distribuere statisk innhold over servere verden over. Mens premium CDN-er tilbyr avanserte funksjoner, kan selv de gratis eller budsjettvennlige alternativene fortsatt gi et betydelig løft i sidehastighet og pålitelighet.

På gratisplanen:

På gratisplanen får du mye av det «gode» som 

1. Superrask DNS. CloudFlare DNS-serverne er gratis og vil sannsynligvis utkonkurrere DNS-serverne til din budsjettvennlige hostingleverandør. Bare av den grunn er det en god idé å bytte til CloudFlare 
2. HTTP/3. CloudFlare bruker de nyeste protokollene og de raskeste komprimeringsmetodene. Uten å gå for mye i detalj kan du være trygg på at dette vil øke nettverkshastigheten din med minst 10%.
3. Konsistent nettleserbufring. CloudFlare har en ganske sterk historikk når det gjelder bufring av statiske ressurser. Standardkonfigurasjonen er sannsynligvis bedre enn det du har nå!
4. Edge-bufring for statiske ressurser. CloudFlare vil bufre versjoner av dine statiske ressurser som bilder, skript og CSS-filer og levere dem direkte til sluttbrukeren fra sitt edge-nettverk. Dette eliminerer behovet for rundturer til opprinnelsesserveren din.
5. Rocket loader. Rocket loader vil utsette lasting av skript og håndtere alle komplikasjoner som oppstår. Rocket loader er en grov metode, men hvis du ikke er i stand til å utsette skript manuelt, vil dette sannsynligvis forbedre paint-metrikker som Largest Contentful Paint.

På Pro-planen

En av de første tingene jeg alltid sier når jeg ser en gratis CloudFlare-plan er «gå pro!». Hvis $25 er noe du har råd til og er villig til å bruke på et raskere nettsted, bør du sannsynligvis vurdere det.

1. Alle gratisfunksjonene. Selvfølgelig kommer Pro-planen med alle gratisfunksjonene.
2. CloudFlare APO for WordPress. APO for WordPress er en komplett løsning som vil bufre sidene dine på edge-nettverket hvis besøkende ikke er logget inn. Dette kan øke Time to First Byte enormt. 
3. Tapsfri og tapsbringende bildeoptimalisering. En av hovedfordelene med å bruke pro-versjonen av CloudFlare er bildeoptimaliseringen. CloudFlare vil konvertere og bufre bilder i WebP-format og kun levere dem til besøkende som aksepterer disse formatene.

4. Selvhost så mye du kan!

En annen enkel og effektiv optimalisering er selvhosting av «statiske ressurser». På mange nettsteder er statiske ressurser hostet på eksterne CDN-er (ikke forveksle dette med ditt eget CDN). For eksempel er jQuery hostet på  https://code.jquery.com/,  Bootstrap er hostet på https://cdn.jsdelivr.net og fontene dine er hostet på https://fonts.googleapis.com. Jeg forstår appellen, disse CDN-ene presenterer seg selv som enkle og raske, men å bruke dem er faktisk en ganske dårlig idé og vil bremse nettstedet ditt!

Ideen om å bruke et delt CDN for denne typen filer var fornuftig den gang nettlesere fortsatt kunne dele disse filene på tvers av nettsteder. De dagene er forbi. Resultatet er at en ny besøkende alltid må laste ned den statiske filen, og den trenger en ny tilkobling til en ny server for hver fil. Og disse nye tilkoblingene til disse nye serverne kan ta mye ekstra tid.

Løsningen er å selvhoste disse tredjepartsfilene. Å gjøre dette er enkelt, bare last ned filen, plasser den på serveren din og endre referansen til denne filen.

5. Asynkron skriptlasting

En stor flaskehals kan være «blokkerende skript» i hodet på siden. Disse skriptene kan noen ganger forsinke lastingen av siden med opptil 20 sekunder! Å utsette disse skriptene er ikke vanskelig i det hele tatt. Bare legg til defer på script-taggen og du er ferdig. Hvis du kan, gjør dette! Rediger malen og endre skriptet ditt slik

<!-- old blocking script tag -->
<script src="script.js"></script>

<!-- new deferred script tag -->
<script defer src="script.js"></script>

Men det er fallgruver! Å legge til defer på script-tagger kan forårsake alle slags problemer og avhengighetsfeil. Og siden du er på et budsjett, må jeg anta at du ikke har midler til å ansette en JavaScript-ekspert for å fikse alle problemene som kan oppstå. Så vennligst prøv å utsette skriptene dine og sjekk for feil (trykk Ctrl-Shift-I i Chrome og sjekk konsoll-fanen). Hvis det ikke er noen problemer etter testing ... er du en av de heldige få! Hvis det er problemer, bør du sannsynligvis ty til en av følgende løsninger:

Bruk Rocket loader 

Som diskutert vil gratisversjonen av CloudFlare gi deg tilgang til Rocket Loader. Dette vil utsette alle skriptene på en side. Det er på ingen måte perfekt, men mesteparten av tiden vil det gjøre en ganske god jobb.

Bruk en utvidelse

De fleste CMS-baserte nettsteder har et stort utvidelsesbibliotek. Det finnes mange utvidelser der ute som lar deg utsette JavaScript og håndtere alle komplikasjonene som kan komme med å utsette skript.

6. Bufring, bufring, bufring!

Når du er på et budsjett og ikke ønsker å bruke mye på hosting, er bufring en av de mest effektive måtene å øke hastigheten på et nettsted. Bufring er spesielt effektivt mot høy Time to First Byte. Bufring kan gjøres på forskjellige nivåer. 

Klientside-bufring: Konfigurer webserveren din til å instruere nettleseren om å bufre så mange statiske ressurser som mulig. Dette vil redusere belastningen på serveren din.

Object Cache:  Object cache kan brukes til å lagre data som kan være beregningsmessig dyrt å regenerere, som resultatet av komplekse databasespørringer. Be hostingleverandøren din om å installere Redis eller Memcached.

Full Page Cache: Hvis du bruker et CMS, vil du sannsynligvis legge til en full sidebufring på nettstedet ditt. For WordPress er gode alternativer WP Fastest Cache eller WP Core Web Vitals

7. Ta strategiske hostingvalg

Når det gjelder hosting, lønner det seg å sammenligne, og den dyreste hosten er ikke alltid den raskeste. Generelt ser du etter en hostingplan som er optimalisert for ditt CMS, fordi den som kan litt av alt, kan ingenting skikkelig!  Søk etter leverandører som tilbyr optimaliserte servere. Et strategisk hostingvalg kan utgjøre en betydelig forskjell i nettstedshastighet.

8. Kontinuerlig overvåking og analyse

Implementer en robust overvåkingsstrategi med rimelige verktøy som [url =https://coredash.app]CoreDash[/url] Revider nettstedets ytelse regelmessig for å identifisere nye optimaliseringsmuligheter og sikre konsekvente hastighetsforbedringer.