Spring til indhold
Hvad skal vi kigge på?
Serie · læs i rækkefølge

Core Web Vitals og PageSpeed

13 dele om anbefalingerne i Google PageSpeed Insights: hvad de betyder, og hvordan du retter dem. Start med den, din egen test viser.

13dele
106minutters læsning
Start med del 1
  1. Del 1Se på tiden, ikke scoren: en PageSpeed-rapport i et browservindue, hvor en tidslinje med markøren 2,5 s fylder mere end scorecirklen, og fanerne Mobil og Desktop.Google PageSpeed Insights test – Alt om PageSpeed InsightsGoogle PageSpeed Insights - Hvad er det, hvad betyder det og hvordan kan man få en grøn score. Første del af en række indlæg som vil dække det19 min · 4. oktober 2015
  2. Del 2Sænk serverens svartid: en server med PHP 8 og en rodet database sender den første byte ad en stiplet linje mærket TTFB til et ventende browservindue, med et grønt cache-lag imellem.Reducer serverens svartid – Google PageSpeed Insights – Optimer svartidenGoogle PageSpeed Insights slår rimelig hårdt ned på dårlige svartider. Men hvorfor, og hvad er det egentlig der gør at man har en langsom svartid?5 min · 4. oktober 2015
  3. Del 3Scripts der blokerer siden: en gul blok mærket head spærrer et halvt tegnet browservindue, mens to grønne scripts mærket async og defer hentes ved siden af.Fjern gengivelsesblokerende JavaScript og CSS fra indholdet over skillelinjenJavaScript og CSS er kanon, og noget som virkelig kan skabe nogle gode ting på en hjemmeside. Men ved du om du reelt fjerner gengivelsesblokerende JavaScript, e …7 min · 7. oktober 2015
  4. Del 4Hvad er Core Web Vitals? Et browservindue med tre kort: LCP for det største indhold, der bliver tegnet, INP for svar på et klik og CLS for layout, der hopper.Core Web Vitals – Hvad er det for noget?Lær hvad Core Web Vitals er, hvordan Google måler LCP, INP og CLS, og få en praktisk metode til at optimere din hjemmeside med konkrete tekniske forbedringer, i …17 min · 29. september 2023
  5. Del 5Smid ubrugt JavaScript ud: en stak script-filer, hvor de gule plader mærket ubrugt ryger i en kasse, og kun tynde grønne .js-filer når frem til browservinduet.Reducer antallet af JavaScript, som ikke brugesSådan finder og fjerner du unødvendig JavaScript-kode. Google PageSpeed Insights siger ofte: Reducer antallet af JavaScripts, som ikke bruges.4 min · 2. oktober 2023
  6. Del 6Færre lag i din DOM: et browservindue med et dybt gult træ af div i div i fem lag ved siden af et fladt grønt træ med kun to lag.Undgå en overdreven DOM-størrelse – Google PageSpeed InsightsDOM størrelse er noget som ikke ret mange tænker over kan have en indflydelse på hastigheden. Men det har nu engang indflydelse på hjemmesidens hastighed, at DO …4 min · 6. oktober 2023
  7. Del 7Skalér billedet til pladsen: et kæmpe PNG-billede bliver beskåret og skaleret til et lille WebP, der passer præcist i billedfeltet i browservinduet.Brug korrekte billedstørrelser – skalér dine billeder så de passerBilleder i den rigtige størrelse gør din hjemmeside hurtigere. Her er 7 tips til at skalere og komprimere dine billeder.6 min · 10. oktober 2023
  8. Del 8Vis teksten med det samme: et browservindue hvor tekst mangler som gule omrids, mens en woff2-fontfil hentes tidligt via en grøn pil mærket swap.Sørg for, at tekst forbliver synlig under indlæsning af webfontEn fejl som falder ind under FCP og LCP når vi snakker PageSpeed Insights. Læs videre, og find ud af hvorfor og hvordan du retter det.Oplever du at teksten blin …5 min · 17. marts 2024
  9. Del 9Pak filerne med Brotli: tykke kodefiler presses sammen til en Gzip-pakke og en endnu mindre Brotli-pakke, der sendes til et browservindue.Gzip komprimering og Brotli komprimeringHvad er forskellen på Gzip og Brotli, og hvordan slår du Brotli til på WordPress, Apache eller via Cloudflare? Test også din egen hjemmeside.3 min · 22. marts 2024
  10. Del 10Giv billedet faste mål: i det ene browservindue skubber et billede teksten ned, i det andet er pladsen reserveret med målestreger for width og height.Billedelementerne har ikke eksplicit width og heightAt specificere width og height attributter på billedelementer er en nem måde at gøre siden hurtigere og mere stabil på.4 min · 14. juni 2024
  11. Del 11Færre eksterne scripts: et browservindue med kabler til analyse, reklamer, kommentarer, sociale medier og tags, hvor reklamekablet er filtret og et script er hentet ind som async.Reducer virkningen af tredjepartskode – PageSpeed Insights hjælpGoogle PageSpeed Insights viser: Reducer virkningen af tredjepartskode. Henviser de til den indvirkning, tredjepartsscripts og biblioteker kan have på en hjemme …6 min · 14. juni 2024
  12. Del 12Udskyd billeder under folden: et browservindue med færdige billeder øverst, en stiplet linje mærket folden og tomme billedfelter nedenunder, der først hentes med lazy.Udskyd billeder, der ikke er på skærmenAlle bruger i dag billeder på deres hjemmesider, men glemmer i mange tilfælde at udskyde billeder der ikke er på skærmen (på engelsk: Defer offscreen images). M …8 min · 2. oktober 2024
  13. Del 13Byg til mobilen først: en smartphone med siden i én kolonne, burger-menu og en stor knap i tommelfingerområdet foran et browservindue, med pladerne 2,5 s og HTTP/3.Mobiloptimering – sådan gør du din hjemmeside mobilvenligDin hjemmeside skal virke på mobilen. Mere end halvdelen af al trafik kommer fra mobiler, så det betyder meget, hvor godt din side virker på telefoner og tablet …18 min · 7. januar 2025
Når du vil have hjælp

Ydelser inden for emnet

Hastighedsoptimering af hjemmeside med garanti for en hurtig hjemmesideBliver din hjemmeside ikke hurtigere, betaler du ikke. Udvikler siden 1995, hjemmesider siden 1996. Se målte før/efter-resultater. Ring 38 6 …WordPress hastighedsoptimeringFå hjælp til WordPress hastighedsoptimering med fokus på tema, plugins, database, cache, billeder og server. Hurtigere hjemmeside og bedre u …WooCommerce hastighedsoptimeringFå hjælp til WooCommerce hastighedsoptimering af webshops med tunge plugins, filtre, variationer, flersprog, checkout og komplekse integrati …