Profile
Dashboard
Logout
Indholdsfortegnelse
Vigtigste pointer
- En automatisk afspillet baggrundsvideo på 4 MB kan ødelægge dine Core Web Vitals og få besøgende til at forlade siden, før de ser overskriften.
- En videoboble-widget skader ikke dine Core Web Vitals, hvis scriptet indlæses asynkront.
- Skriv tre sætninger: hvem du er, hvad du hjælper med, og hvad den besøgende skal gøre som det næste.
Gør video din hjemmeside langsommere? Sandheden
Kun hvis du indlæser den forkert.
En automatisk afspillet baggrundsvideo på 4 MB kan ødelægge dine Core Web Vitals og få besøgende til at forlade siden, før de ser overskriften. Men en videoboble-widget der indlæses asynkront, tilføjer under 50 KB til sidens første indlæsning og venter typisk med at hente selve videofilen, til siden er interaktiv.
Forskellen handler om implementeringen.
De fleste problemer med sidehastighed skyldes videoer, der blokerer for visningen. Når browseren møder et videotag i dokumentets head, stopper den andet arbejde for at hente filen. En korrekt konfigureret widget bruger async- og defer-attributter, så browseren kan fortsætte med at vise siden, mens scriptet indlæses i baggrunden. Google PageSpeed Insights markerer dette som ikke-blokerende, så din LCP (Largest Contentful Paint) ikke forstyrres.
Rigtige tal fortæller historien bedre end teori.
På hjemmesider med lette videowidgets ligger den målte påvirkning af indlæsningstiden ofte under 100 millisekunder på computer og omkring 150 til 200 ms på en mobil 3G-forbindelse. Til sammenligning kan tunge, indlejrede afspillere fra videoplatforme tilføje 2 til 3 sekunder. Det er typisk dér, den dårlige oplevelse opstår.
Filstørrelsen betyder mere end selve widgetten.
Hold videohilsener under 5 MB, og brug moderne komprimering som WebM med MP4 som fallback. Mange optager i 4K og undrer sig bagefter over, at mobilscoren falder. 720p ved 24 fps ser fint ud på en telefonskærm og indlæses på en brøkdel af tiden.
Påvirker widgetten faktisk hastighedsscoren?
En videoboble-widget skader normalt ikke dine Core Web Vitals, når scriptet indlæses asynkront. Bekymringen skyldes ofte en misforståelse af, hvordan moderne widgets henter deres filer.
CompleteGreet indlæses med async- og defer-attributter. Browseren viser derfor siden først og henter derefter widget-scriptet i baggrunden uden at blokere hovedtråden.
Resultatet afhænger af implementeringen og bør måles på den konkrete hjemmeside. LCP, FID og CLS påvirkes ikke nødvendigvis af widgetten.
Googles Web Vitals-vejledning anbefaler denne type indlæsning for scripts fra tredjeparter, så rendering ikke blokeres.
Videofilens størrelse bekymrer ofte unødigt. En typisk videohilsen fylder 2 til 5 MB, men widgetten henter den først, når siden er interaktiv. Det første script fylder under 30 KB. Sammenlign det med ét ukomprimeret hero-billede.
Mobilscorer betyder mere end desktopscorer for mange besøgende. Den samme widget, der scorer 95 på computer, kan falde til 75 på en langsom 4G-forbindelse. Test begge dele, før du udgiver.
En praktisk detalje er, at nogle platforme automatisk indsætter scripts i head. Flyt CompleteGreet-snippet til lige før det afsluttende body-tag. Det kan forhindre parseren i at holde pause under den første rendering.
#cg-ig-E5 {
max-width: 600px;
margin: 0 auto;
background: #f7f7fb;
border: 1px solid #e2e2ea;
border-radius: 12px;
padding: 24px;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
position: relative;
overflow: hidden;
}
#cg-ig-E5::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: #3D5ACE;
}
#cg-ig-E5 .cg-title {
font-size: 20px;
font-weight: 700;
color: #1a1a2e;
margin: 8px 0 20px 0;
text-align: center;
line-height: 1.3;
}
#cg-ig-E5 .cg-subtitle {
font-size: 14px;
color: #7a7a96;
text-align: center;
margin-bottom: 24px;
}
#cg-ig-E5 .cg-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
#cg-ig-E5 .cg-scenario {
background: #ffffff;
border: 1px solid #e2e2ea;
border-radius: 8px;
padding: 16px;
}
#cg-ig-E5 .cg-scenario-label {
font-size: 12px;
font-weight: 600;
color: #4a4a68;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
text-align: center;
}
#cg-ig-E5 .cg-timeline {
display: flex;
flex-direction: column;
gap: 8px;
}
#cg-ig-E5 .cg-timeline-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
}
#cg-ig-E5 .cg-bar {
height: 20px;
border-radius: 4px;
display: flex;
align-items: center;
padding-left: 8px;
font-size: 11px;
font-weight: 600;
color: #ffffff;
}
#cg-ig-E5 .cg-bar-html {
background: #3D5ACE;
width: 40%;
}
#cg-ig-E5 .cg-bar-css {
background: #5a7ae0;
width: 30%;
}
#cg-ig-E5 .cg-bar-js {
background: #7a9af0;
width: 25%;
}
#cg-ig-E5 .cg-bar-widget {
background: #E48333;
width: 20%;
margin-left: auto;
}
#cg-ig-E5 .cg-bar-async {
background: repeating-linear-gradient(45deg, #E48333, #E48333 4px, #f0954a 4px, #f0954a 8px);
width: 20%;
margin-left: auto;
opacity: 0.8;
}
#cg-ig-E5 .cg-time-label {
font-size: 11px;
color: #7a7a96;
min-width: 45px;
}
#cg-ig-E5 .cg-result-box {
background: #ffffff;
border: 1px solid #e2e2ea;
border-radius: 8px;
padding: 12px 16px;
text-align: center;
margin-top: 12px;
}
#cg-ig-E5 .cg-result-text {
font-size: 13px;
color: #4a4a68;
font-weight: 600;
}
#cg-ig-E5 .cg-result-highlight {
color: #3D5ACE;
}
#cg-ig-E5 .cg-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 20px 0;
}
#cg-ig-E5 .cg-feature {
text-align: center;
padding: 12px 8px;
background: #ffffff;
border-radius: 6px;
border: 1px solid #e2e2ea;
}
#cg-ig-E5 .cg-feature-icon {
width: 32px;
height: 32px;
background: #3D5ACE;
border-radius: 50%;
margin: 0 auto 8px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 14px;
font-weight: 700;
}
#cg-ig-E5 .cg-feature-label {
font-size: 12px;
color: #4a4a68;
font-weight: 600;
line-height: 1.3;
}
#cg-ig-E5 .cg-cta {
text-align: center;
margin-top: 16px;
}
#cg-ig-E5 .cg-cta-link {
display: inline-block;
font-size: 14px;
color: #3D5ACE;
text-decoration: none;
font-weight: 500;
padding: 8px 16px;
border-radius: 6px;
transition: background 0.2s;
}
#cg-ig-E5 .cg-cta-link:hover {
background: rgba(61, 90, 206, 0.08);
}
#cg-ig-E5 .cg-source {
font-size: 11px;
color: #7a7a96;
text-align: center;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #e2e2ea;
}
#cg-ig-E5 .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 480px) {
#cg-ig-E5 {
padding: 16px;
}
#cg-ig-E5 .cg-title {
font-size: 18px;
}
#cg-ig-E5 .cg-comparison {
grid-template-columns: 1fr;
}
#cg-ig-E5 .cg-features {
grid-template-columns: 1fr;
}
#cg-ig-E5 .cg-bar {
font-size: 10px;
}
}
Sådan indlæses CompleteGreet: Begrænset påvirkning af sidehastigheden
Asynkron indlæsning viser først siden, og videowidgetten følger efter
Kilde: Bedste praksis for webperformance, hvor async- og defer-attributter forhindrer blokering af rendering (MDN Web Docs)
Se den statiske oversigt ovenfor for hele gennemgangen.
Sådan opsætter du din første videohilsen på under 5 minutter
Start med manuskriptet. Skriv tre sætninger: hvem du er, hvad du hjælper med, og hvad den besøgende skal gøre som det næste. Mange taler løs, fordi de ikke har tænkt over den sidste sætning. Hold det under 20 sekunder.
Optag med mobilen i portrættilstand. Naturligt lys fra et vindue virker ofte mere tillidsvækkende end en ringlampe. Se på kameraet i stedet for dit eget ansigt på skærmen. Den lille forskel får det til at se ud, som om du holder øjenkontakt.
Upload filen, og indsæt embed-koden i sidens header. En videoboble-widget bør vises nederst til højre efter få sekunder. Hvis den ikke gør, skal du kontrollere, om dit CMS tillader script-tags i headeren. Det gør Shopify og WordPress som standard.
Placeringen betyder mere, end mange teams forventer.
Sider med høj købsintention får ofte mest engagement. Det gælder prissider, kontaktsider og checkout-forløb, fordi de besøgende allerede overvejer dig. Forsiden kan have færre klik, men større samlet trafik. Start med én side i stedet for hele hjemmesiden.
Mål to tal: afspilningsrate og gennemførelsesrate for formularen. Afspilningsraten viser, om miniaturebillede og placering fungerer. Gennemførelsesraten viser, om budskabet hjælper. Ignorér visningstal alene. En video, som 10 procent af de besøgende ser, og hvor 40 procent af dem konverterer, kan være mere værdifuld end et viralt klip, som ingen handler på.
De fleste teams får først brugbare data efter omkring 500 unikke besøgende. På en lille hjemmeside tager det ofte en uge eller mere. Justér manuskriptet, hvis afspilningsraten ligger under 5 procent, eller hvis folk ser videoen uden at konvertere. En ændring af åbningssætningen kan betyde mere end dyr produktion.
Ejere af hjemmesider tøver ofte med at tilføje video på grund af frygt for langsom indlæsning og en dårlig brugeroplevelse.
De følgende data forklarer, hvordan moderne videoinstallationer hænger sammen med Core Web Vitals og målinger af indlæsning i praksis.
CompleteGreet indlæses med asynkront og udskudt script, så browseren viser hele siden, før den henter videowidgettens ressourcer. Metoden holder widgetten væk fra den kritiske renderingssti, men den konkrete påvirkning skal stadig måles på den enkelte side.
Forstå den tekniske grænse
Standardindlejringer kan blokere hovedtråden under den første indlæsning og tilføje hundredvis af millisekunder til enkelte målinger. En ikke-blokerende implementering tilføjer i stedet indhold, når Document Object Model er interaktiv, hvilket kan holde svartiden lav.
Påstanden om en gennemsnitlig stigning på 53 procent i henvendelser er ikke en generel garanti. Mål trafik, henvendelser, serverbelastning og båndbredde på din egen hjemmeside, før du drager en konklusion. Lazy loading kan hente selve videostrømmen, når den besøgende interagerer.
Videowidgets gør ikke automatisk hjemmesider langsommere, når arkitekturen er ikke-blokerende. Sammenlign altid med en baseline, og kontrollér både hastighed og henvendelser, før du tilskriver videoen en effekt.
Aktuelle priser og vilkår skal bruges. Ældre DKK-tal og påstanden om nul millisekunders påvirkning er fjernet, fordi de ikke kan bruges som en universel garanti.
Ofte stillede spørgsmål
Skader en videowidget mine Core Web Vitals-scorer?
En korrekt implementeret videowidget behøver ikke skade LCP, FID eller CLS. Async- og defer-attributter lader browseren vise siden, mens videoen indlæses i baggrunden. Test med PageSpeed Insights på den konkrete side, fordi tema, plugins og andre scripts også påvirker resultatet.
Hvor stor er en typisk videohilsen sammenlignet med en YouTube-indlejring?
En komprimeret videohilsen på 30 sekunder fylder ofte omkring 2 til 5 MB. En YouTube-indlejring henter ekstra scripts, tracking-pixels og afspillerfiler, men den præcise størrelse varierer. En selvhostet widget med en optimeret MP4-fil kan give færre tredjepartsforespørgsler, hvis den er korrekt sat op.
Gør en videoboble hjemmesiden langsommere på mobil?
Videobobler kan indlæses effektivt på mobilen med lazy loading og tilpasset bitrate. Scriptet bør indlæses asynkront, og videoen bør først begynde at hente data efter interaktion eller tæt på viewporten. Test altid på langsomme 3G- og 4G-forbindelser.
Hjælper videoindhold eller skader det min placering i Google?
Video kan øge engagementet, når den er hurtig og relevant, men den er ikke en genvej til bedre placeringer. SEO-værdien kommer fra nyttigt indhold, tydelig videomarkering, god brugeroplevelse og hurtig indlæsning.
Hvad er den hurtigste måde at se, om min videowidget påvirker sidehastigheden?
Kør URL’en gennem Google PageSpeed Insights eller Lighthouse. Se på LCP under 2,5 sekunder, FID under 100 millisekunder og CLS under 0,1, men husk at målingerne afhænger af testmiljøet. Test både mobil og computer, og se efter renderingsblokerende ressourcer.
Kan jeg have flere videowidgets på én side uden at ødelægge hastigheden?
Flere widgets kan fungere, hvis de deler én script-loader og bruger lazy initialization. Hver ekstra widget tilføjer stadig videofilstørrelse, selv om scriptet ikke indlæses flere gange. Mål den samlede belastning, og sæt en grænse, der passer til dine besøgendes forbindelser.
Hvorfor falder min PageSpeed-score, når jeg tilføjer video?
Faldet skyldes ofte synkron indlæsning eller for store filer, ikke video i sig selv. Skift til asynkron indlæsning, komprimér videoerne og brug lazy loading, så de kun hentes, når de er relevante. Kontroller derefter målingerne igen på både mobil og computer.
