Profil
Dashboard
Logga ut
Innehåll
Kort sammanfattning
- En stor video som startar automatiskt kan belasta sidans viktigaste prestandamätvärden. Den faktiska påverkan måste mätas på den aktuella sidan.
- En videobubbla kan laddas utan att blockera den första visningen, men det garanterar inte att Core Web Vitals förblir oförändrade.
- Skapa ett kort budskap som förklarar vem du är, vad du hjälper till med och vad besökaren bör göra härnäst.
Gör video webbplatsen långsammare?
Det beror på hur videon laddas och visas.
En stor bakgrundsvideo som startar automatiskt kan påverka Core Web Vitals och förbruka mycket data. En videobubbla kan däremot laddas efter sidans viktigaste innehåll. Den exakta filstorleken och påverkan beror på integrationen, videofilen och enheten som används.
Skillnaden ligger framför allt i hur lösningen genomförs.
Prestandaproblem kan uppstå när video eller skript blockerar renderingen, belastar huvudtråden eller flyttar innehåll efter att sidan har visats. Att ett skript använder async eller defer kan minska blockering under inläsningen, men är bara en del av lösningen. Resursprioritering, serversvar, filstorlek, platshållare och tredjepartskod påverkar också LCP, INP och CLS. Kontrollera därför den färdiga sidan med faktiska mätningar.
Mätningar är mer användbara än generella påståenden.
Det finns inga dokumenterade universella siffror för hur många millisekunder en videowidget lägger till på dator eller mobil. Påverkan kan vara liten när skriptet är lätt och videon laddas senare, men större på svagare enheter och långsamma anslutningar. Tunga inbäddade videospelare kan också ladda extra skript och spårning. Jämför sidan före och efter under samma testförhållanden.
Videofilens storlek är fortfarande viktig.
Komprimera videon till den faktiska storlek den ska visas i och använd format som webbläsarna stöder. Mycket hög upplösning behövs sällan i en liten videobubbla. Det finns ingen universell gräns på fem megabyte eller en enda rätt upplösning. Välj kvalitet, längd och bildfrekvens efter målgruppen och testa särskilt på mobil och långsammare anslutningar.
Påverkar widgeten faktiskt mätvärdena för sidhastighet?
En videobubbla kan byggas så att den inte blockerar den första renderingen. Det betyder ändå inte att påverkan på Core Web Vitals automatiskt är noll.
CompleteGreet kan laddas med async och defer så att webbläsaren fortsätter bearbeta sidan medan skriptet hämtas. Andra resurser och tidpunkten för initieringen måste fortfarande bedömas.
Resultatet måste mätas för LCP, INP och CLS på den faktiska sidan och på relevanta enheter.
Googles vägledning om Web Vitals rekommenderar att tredjepartskod inte blockerar viktigt innehåll, men beskriver ingen lösning som garanterar oförändrad prestanda.
En videofil kan vara flera megabyte, medan själva skriptet ofta är betydligt mindre. Den exakta storleken på CompleteGreets resurser måste kontrolleras i webbläsarens nätverksverktyg. Ladda videon först när den behövs och jämför den med andra tunga medier på sidan.
Mobilmätningar kan skilja sig tydligt från mätningar på dator eftersom processor, nätverk och skärmstorlek är annorlunda. Testa båda före publicering.
Vissa plattformar placerar skript i sidhuvudet, medan andra använder slutet av dokumentet eller en hanterad integration. Flytta inte kod utan att följa den aktuella installationsguiden. Kontrollera i stället om skriptet blockerar parsern och om den valda placeringen påverkar funktionen.
#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;
}
}
Exempel på inläsning av CompleteGreet
Sidan kan visas först medan videowidgeten följer senare
Källa: allmänna rekommendationer om webbprestanda. Tiderna i illustrationen är exempel.
Se den statiska översikten ovan för alla detaljer.
Så skapar du din första videopresentation
Börja med budskapet. Skriv några korta meningar om vem du är, vad du hjälper till med och vad besökaren bör göra härnäst. Längden bör avgöras av frågan och sidan, inte av en fast regel på tjugo sekunder.
Spela in med en enhet som ger tydlig bild och ljud. Naturligt ljus kan fungera bra, men det viktigaste är att ansiktet syns och att ljudet är begripligt. Titta mot kameralinsen när du vill tala direkt till tittaren.
Ladda upp filen och använd den rekommenderade integrationen för plattformen. En videobubbla ska placeras där den är relevant och inte täcker navigering, samtycke, formulär eller köpknappar. Om den inte visas ska du kontrollera integrationen och publiceringsinställningarna. Utgå inte från att alla publiceringssystem tillåter samma typ av skript på samma plats.
Placeringen bör väljas utifrån sidan och uppgiften.
Sidor med tydlig avsikt, som pris-, kontakt- och bokningssidor, kan vara bra ställen att testa på. Det betyder inte att de alltid konverterar bäst. Startsidan kan ha mer trafik och ett annat mål. Börja på en sida, definiera en önskad handling och jämför resultaten innan lösningen utökas.
Mät bland annat uppspelningsgrad och slutförda önskade handlingar. Uppspelningsgraden kan säga något om miniatyrbilden och placeringen, medan formulär, köp eller bokningar visar om handlingen faktiskt sker. Visningar räcker inte, men inte heller en enda konverteringsgrad utan ett tillräckligt underlag och jämförbara trafikkällor.
Det finns ingen fast gräns på femhundra besökare eller en vecka som alltid ger tillförlitliga data. Testperioden måste ha tillräckligt med trafik och handlingar för att slumpmässiga variationer inte ska styra resultatet. Ändra budskap, placering eller visningsregler en sak i taget och dokumentera vad som faktiskt ändrades.
Webbplatsägare oroar sig ofta för att video ska ge långsam inläsning och en sämre användarupplevelse.
Avsnitten nedan förklarar hur moderna videolösningar kan påverka Core Web Vitals och varför den färdiga sidan måste mätas i praktiken.
CompleteGreet kan integreras med asynkron och uppskjuten laddning så att webbläsaren kan fortsätta rendera sidan medan skriptet hämtas. Det minskar risken för blockering, men garanterar inte att LCP, INP eller CLS förblir oförändrade. Widgetens platshållare, initiering, videoresurser och samspel med annan tredjepartskod måste också bedömas.
Förstå de tekniska gränserna
Vanliga videoinbäddningar kan belasta huvudtråden eller hämta stora resurser tidigt. En lösning som väntar tills dokumentet är klart kan minska belastningen under den första visningen. Det finns ändå ingen generell garanti för svarstid under hundra millisekunder eftersom resultatet beror på enheten, nätverket och resten av sidan.
Siffror om fler förfrågningar säger inget direkt om serverbelastning eller bandbredd. Mät därför affärsresultat och teknisk prestanda separat. Att videon laddas vid en interaktion kan minska tidig dataförbrukning, men den faktiska nätverkstrafiken måste kontrolleras i den färdiga lösningen.
Videowidgetar gör inte nödvändigtvis en webbplats långsam, men all uppskjuten laddning ger inte heller identiska hastighetsvärden. Använd fältdata och kontrollerade tester före och efter och bedöm om fler förfrågningar väger upp en eventuell teknisk kostnad.
Aktuella priser och planvillkor finns på prissidan. Det går inte att lova att en widget lägger till exakt noll millisekunder vid den första inläsningen.
Vanliga frågor
Skadar en videowidget resultaten för Core Web Vitals?
Det beror på integrationen, videofilen, initieringen och resten av sidan. Async och defer kan minska blockering av parsern, men garanterar inte oförändrade värden för LCP, INP eller CLS. Testa den färdiga sidan med PageSpeed Insights, Lighthouse och helst verkliga fältdata före och efter ändringen.
Hur stor är en vanlig videohälsning jämfört med en YouTube-inbäddning?
Storleken varierar med längd, upplösning, kodek och komprimering. En YouTube-inbäddning kan hämta spelarkod, spårning och andra resurser, medan en egen lösning har andra kostnader. Jämför de faktiska nätverksförfrågningarna och datamängderna på din webbplats i stället för att använda fasta storlekar.
Gör en videobubbla webbplatsen långsammare på mobila enheter?
Den kan påverka mobil prestanda om skriptet, videon eller platshållaren är tung. Fördröjd laddning, anpassade videofiler och en stabil platshållare kan minska påverkan. Testa på verkliga mobila enheter och långsammare anslutningar, inte bara på en snabb dator.
Hjälper eller skadar videoinnehåll rankningen i Google?
Video kan göra sidan mer användbar när den besvarar en relevant fråga, men är ingen genväg till bättre rankning. Se till att det finns tydlig text, lämpliga videodata, god tillgänglighet och snabb inläsning. Synligheten i sökresultaten beror på den samlade kvaliteten och det tekniska genomförandet.
Hur kontrollerar jag snabbast om videowidgeten påverkar sidhastigheten?
Kör samma webbadress genom PageSpeed Insights eller Lighthouse före och efter ändringen med samma testförhållanden. Granska LCP, INP och CLS samt nätverksförfrågningar, arbete på huvudtråden och resurser som blockerar renderingen. Laboratorietester bör kompletteras med fältdata när det är möjligt.
Kan jag ha flera videowidgetar på en sida utan stora prestandaproblem?
Flera widgetar kan fungera, men påverkan beror på om de delar skript, när varje video laddas och hur stora filerna är. Använd ingen fast totalgräns utan mätning. Testa en och flera widgetar på de aktuella enheterna och hämta bara videor när de faktiskt behövs.
Varför sjunker PageSpeed-resultatet när jag lägger till video?
Orsaken kan vara stora filer, tidig nätverkstrafik, mycket JavaScript, instabila platshållare eller synkron laddning. Använd rapportens konkreta resultat för att komprimera rätt resurser, skjuta upp sådant som kan vänta och reservera plats i layouten. Mät igen efter varje ändring i stället för att anta att en enda teknik löser allt.
