Eksterne videoer, dataforbrug og privatliv
Problemstillinger omkring indlejring af eksterne videoer omfatter:
- Unødvendigt dataforbrug: eksterne videoafspiller-scripts og styling indlæses, uanset om den besøgende vælger at afspille videoen eller ej.
- Privatliv og sporing: “Gratis” videohosting som YouTube sporer dine besøgende, uanset om de giver samtykke eller ej.
Der er flere metoder til at løse disse problemer, herunder:
- Du kan selv hoste dine videoer og bruge den indbyggede videoblok i WordPress til at vise dem.
- Aktivér et plugin som Embed Privacy, og få de besøgendes samtykke, før du indlæser tredjeparts-scripts.
Indhold
- Eksterne videoer, dataforbrug og privatliv
- Hvordan hjælper Embed Privacy?
- Blok til indlejring af YouTube-video med overlay
- WordPress.tv til indlejring af video med overlay
- WordPress-videoblok med lokal MP4
- Indlejring af podcasts fra Spotify
- Konklusion på Embed Privacy; hvad jeg har lært
- Den kan aktiveres og deaktiveres efter behov
- Reducerer umiddelbart den første dataoverførsel
- Forbedrer privatlivet betydeligt
- Tilbyder automatisk generering af miniaturebilleder
- Embed Privacy kan tilpasses og udvides
- Fungerer på flersprogede sider, men vær på vagt
- Alternative plugins med lignende functionalitet
- Embed Privacy hjalp til 94% mindre CO2-udledning.
- Bør du installere Embed Privacy til WordPress?
I denne artikel bruger jeg YouTube som eksempel, da YouTube er en almindelig kilde til videoer, og det er nemmere end at skrive “din 3.parts videohosting”. Embed Privacy understøtter alle embeds.
Hvordan hjælper Embed Privacy?
Når du indlejrer en YouTube-video, indlæser WordPress normalt deres eksterne afspillerscript med det samme, når siden indlæses. Embed Privacy sikrer, at der ikke finder nogen kommunikation sted med YouTube, før den besøgende klikker på et overlay med oplysninger om privatlivspolitikken.
Ikke at autoloade spillerscripts reducerede netværkstrafikken med 85%.
I mine tests resulterer et blogindlæg med blot én YouTube-indlejring i, at 1500 KB data overføres, 7 sporingsscripts og 2 cookies sættes. Det er, før jeg klikker på play.
Med Embed Privacy aktiveret blev dataoverførslen i første omgang reduceret til kun 234 KB, ingen sporingsscripts eller cookies. Afspilleren indlæses ikke, før jeg rent faktisk trykker på play. Det er en mærkbar reduktion i dataoverførslen og forbedrer helt sikkert indlæsningstiden, især på langsommere forbindelser.
Trafik med Embed Privacy sammenlignet med lokal hosting
Ved hjælp af tre forskellige WordPress-blokke til indlejring af en video målte jeg de data, der blev overført …
- med Embed Privacy (EP) aktiveret, før der klikkes på play.
- når afspillerscriptet indlæses.
- total, når afspilningen er færdig.
| WordPress Block | Med EP | Afspiller indlæst | Afspilning færdig |
|---|---|---|---|
| YouTube | 234 KB | 1500 KB | 20.8 MB |
| VideoPress | 152 KB | 2000 KB | 24.0 MB |
| Video (self-hosted) | 120 KB | 120 KB | 13.7 MB |
Læg mærke til de 120 KB, som den indbyggede videoblok (self-hosted) fylder. Det er ikke en fejl. Da WordPress’ videoblok blot renderer et HTML-videoelement, er der ikke behov for et ekstra afspillerscript.
Energiomkostningerne ved at servere videoer påvirkes af komprimeringsindstillinger, videotyper og datacentrenes placering. Det er ikke formålet med denne sammenligning at konkludere, om den ene videohostingtjeneste er bedre end den anden, men snarere at demonstrere dataoverførselsbesparelserne og konsekvenserne for privatlivets fred.
Blok til indlejring af YouTube-video med overlay
For at indlejre en YouTube-video klikker du på knappen ⮫ Del i YouTube, kopierer den givne URL og indsætter den i blokeditoren. Blokeditoren identificerer URL’en som en YouTube-video og indsætter en YouTube-indlejringsblok.
Det ville normalt vise videoens miniaturebillede og den røde YouTube-afspilningsknap på den. Når Embed Privacy er aktiveret, vises et pladsholderbillede (“poster”) og et overlay med et link til YouTubes privatlivspolitik.
Det er lettere at forstå, hvis jeg bare viser dig det:
Nu har den besøgende mulighed for at læse og acceptere YouTubes privatlivspolitik, før der sendes data til eller fra YouTube. Det tilføjer ét ekstra klik, det er rigtigt. Men det samtykke skulle du have fået på anden vis, f.eks. i en cookie-popup.
WordPress.tv til indlejring af video med overlay
For at indlejre en video fra Learn.WordPress.org skal du klikke på deleknappen ⮫ i øverste højre hjørne af videoen. Indsæt URL’en i blokeditoren, og en VideoPress-blok indsættes.
Nogle videoer på Learn.WordPress.org bliver serveret af VideoPress.com. Nedenfor er VideoPress-versionen af den samme video, som blev vist tidligere. Det er værd at nævne, at VideoPress-versionen tilbyder korrekte undertekster.
Netop denne screencast, som VideoPress.com står bag, fylder mere end sin YouTube-pendant. Men YouTube viser annoncer. På den anden side bliver din video måske opdaget i højere grad på YouTube.
WordPress-videoblok med lokal MP4
Du kan uploade en video til din hjemmeside, hoste den selv og vise den ved hjælp af WordPress’ videoblok.
På frontenden bruges et HTML-videoelement til at vise videoen. Afspilningsindstillinger som hastighed, billedtekster, fuldskærm og billede-i-billede-tilstand er tilgængelige i alle moderne browsere.
HTML-videoelementet er ikke afhængigt af tredjeparts-scripts. Derfor er størrelserne “side indlæst” og “afspiller indlæst” naturligvis de samme. Den bruger ikke cookies eller sporer dig.
Ulemper ved lokal hosting er få, men vigtige
- Du er nødt til at komprimere din video manuelt.
- Hvis du vil tilbyde forskellige opløsninger, er det mere arbejde for dig.
- Videoer er store, så hostinglager og båndbredde er en faktor.
- Du drager ikke fordel af YouTubes algoritmer til opdagelse af din video.
Personligt vil jeg gerne have fuld kontrol over mit indhold og tilbyde en oplevelse, der respekterer privatlivets fred, så jeg hoster for det meste mine videoer selv.
Native MPEG-4/H.264 video resources and tips
Indlejring af podcasts fra Spotify
Som nævnt støtter embed privacy de fleste, hvis ikke alle, embeds, der er tilgængelige i block-editoren. Nedenfor er nogle eksempler på Spotify-embeds. Fantastiske podcasts i øvrigt; tjek dem ud.
How to analyze your website’s carbon emissions
Get an estimation of your website’s carbon footprint and start reducing it. There are a couple of amazing tools to support us in that mission. Topics in this episode include: What is the carbon footprint of a website? What tools are out there to measure the carbon emissions? Why does each tool claim a different CO2 footprint and how to work with it?
March 2024, The Green the Web podcast
Vitaly Friedman… Cleaner web design for a better environment.
Over the last decade, web pages have become ten times bigger, and up to 80% of the weight of a particular webpage can be waste—content and code that is not required for the page to function. Do web designers and developers simply not care? Vitaly Friedman believes that they do care but that they need better education about accessibility, usability, and sustainability.
January 2024, World Wide Waste with Gerry McGovern
‘Building a Sustainable World Web’, with Michael Andersen
“Michael has been fascinated with problem-solving and using technology for a better world. This led Michael to found ‘Sustainable WWW’ — a non-profit focused on spreading knowledge about sustainable web design and development, as well as authoring the book ‘Sustainable Web Design In 20 Lessons’, published in March 2023.”
February 2024, The EcoSend Podcast
Brugerdefineret styling brugt til Spotify Embed-overlay
For at undgå layoutforskydninger og “brande” overlay-baggrundsfarven med en farve fra podcasten, bruger jeg denne smule CSS nedenfor. Det er helt valgfrit og ikke nødvendigt, for at Embed Privacy kan fungere.
/** Embed Privacy WordPress Spotify Block styling 2024-03-20 **/
/** In the block settings; disable "Resize for smaller devices **/
/* The Spotify iframe is at least 152px high. Make sure our wrapper is too */
.wp-block-embed.is-provider-spotify .wp-block-embed__wrapper,
.wp-block-embed.is-provider-spotify .embed-privacy-overlay {
min-height: 152px;
}
/* Appropriate aspect ratio for the spotify embed */
.wp-block-embed.is-provider-spotify .embed-privacy-container,
.wp-block-embed.is-provider-spotify .embed-privacy-overlay {
aspect-ratio: 96/19;
border-radius: 16px;
}
/* Make the default text color a little brighter for WCAG */
.wp-block-embed.is-provider-spotify .embed-privacy-container a,
.wp-block-embed.is-provider-spotify .embed-privacy-overlay :is(p, label) {
color: #eee;
}
/* Set podcast specific background color, default to spotify inspired */
.wp-block-embed.is-provider-spotify .embed-privacy-container {
background-color: var(--embed-spotify-background-color, #137C38);
filter: drop-shadow(0 4px 4px #0002);
}
/* Make the inactive overlay a little darker */
.wp-block-embed.is-provider-spotify .embed-privacy-overlay {
background-color: rgba(0, 0, 0, 0.2);
}
/* Unset the hover overlay, revealing podcast specific background */
.wp-block-embed.is-provider-spotify .embed-privacy-overlay:hover {
background-color: rgba(0, 0, 0, 0);
}
/* The overlay gets less tall, so reduce spacing. */
.wp-block-embed.is-provider-spotify .embed-privacy-overlay {
padding: var(--wp--preset--spacing--30, 0.67rem);
font-size: var(--wp--preset--font-size--small, small);
line-height: var(--wp--preset--spacing--50, 1.5rem);
--theme-content-spacing: var(--wp--preset--spacing--20, 0.44rem);
}
/* Shrink the logo and margins due to smaller container */
.wp-block-embed.is-provider-spotify .embed-privacy-logo {
height: var(--wp--preset--font-size--medium, 1.5em);
margin-bottom: var(--wp--preset--spacing--20, 0.44rem);
}
/* The "always load" checkbox has the smallest font size */
.wp-block-embed.is-provider-spotify .embed-privacy-input-wrapper {
font-size: var(--wp--preset--font-size--x-small, x-small);
}
/* Wrap any caption below the Spotify figure in a balanced way (optional) */
.wp-block-embed.is-provider-spotify figcaption {
text-wrap: balance;
}
/** Embed Privacy hidden screen reader text colors triggers contrast warning **/
/** The Button is hidden by other means, so reset the colors to pass wcag **/
:where(.embed-privacy-container) .screen-reader-text {
color: black;
background: white;
}
/** Podcast series specific background colors (optional) **/
/** Set the appropriate is-provider-spotify--[podcast] class on Spotify block **/
/** Green The Web by Sandy Dähnert **/
.wp-block-embed.is-provider-spotify--greentheweb {
--embed-spotify-background-color: #083830;
}
/** The World Wide Waste via HCD podcast **/
.wp-block-embed.is-provider-spotify--worldwidewaste {
--embed-spotify-background-color: #080070;
}
/** The EcoSend podcast **/
.wp-block-embed.is-provider-spotify--ecosend {
--embed-spotify-background-color: #1C8259;
}Konklusion på Embed Privacy; hvad jeg har lært
Den kan aktiveres og deaktiveres efter behov
Husk på, at Embed Privacy-pluginet blot tilføjer funktionalitet til de almindelige Embed-blokke. Det tilbyder ikke en ny privacy-forbedret blok, som du kan bruge. Det betyder, at du kan aktivere Embed Privacy på et eksisterende site og høste fordelene med det samme – og deaktivere det, hvis du ikke kan lide det eller er ved at fejlfinde noget.
Reducerer umiddelbart den første dataoverførsel
Ved ikke at indlæse tredjeparts player-scripts eller sporingskode sparer man netværkstrafik. Hvis den besøgende vælger at afspille videoen, vil scripts naturligvis blive indlæst.
Forbedrer privatlivet betydeligt
Almindelige indlejringer deler data om besøgende med YouTube og dets modparter med det samme. Embed Privacy eliminerer det, indtil den besøgende aktivt trykker play. Privatlivspolitikken er let tilgængelig, så man kan træffe en informeret beslutning.
Tilbyder automatisk generering af miniaturebilleder
Thumbnails, eller posterbilleder, oprettes automatisk for visse populære videoudbydere, herunder YouTube og Vimeo. For andre kan der vælges et manuelt uploadet billede.
Automatisk komprimering af autogenererede miniaturebilleder
Thumbnails gemmes i /wp-content/uploads/embed-privacy. Disse er dårligt optimerede, så hvis du bruger et automatiseret plugin til komprimering, som EWWW, så overvej at tilføje denne URL til listen over mapper, der skal optimeres.
Embed Privacy kan tilpasses og udvides
Alle WordPress oEmbed understøttes fra start, og du kan tilpasse overlay-tekst, overlay-baggrund og link til privatlivspolitikken.
Fungerer på flersprogede sider, men vær på vagt
Plugins som PolyLang giver dig mulighed for at oprette indhold på flere sprog. Embed Privacy understøtter det fuldt ud, du kan f.eks. linke til en engelsk privatlivspolitik for engelske indlejringer og danske privatlivspolitikker for danske indlejringer.
Sørg for at redigere Embed Privacy-indstillingerne til det rigtige sprog; ellers vil det korrekte embed-overlay ikke blive aktiveret. Spørg ikke, hvordan jeg ved det.
Alternative plugins med lignende functionalitet
Et andet plugin med lignende funktionalitet er Better Core Video Embeds af HighRise Digital. Deres adskiller sig, så vidt jeg kan se, ved at den ikke linker til privatlivspolitikker i overlayet – noget du dog kunne gøre i billedteksten – og at den understøtter upload af thumbnails manuelt til hver videoblok. Den understøtter YouTube, Vimeo eller Daily Motion, hvilket måske er nok for dig.
Et tredje venligt plugin er Lazy Embed fra Beleaf. Det understøtter YouTube, Vimeo og Dailymotion. Det er et simpelt plugin, som jeg varmt anbefaler dig at tjekke ud, især hvis du ikke har brug for andre indlejringskilder, indstillinger og derfor potentiel kompleksitet, der følger med Embed Privacy…
Google even recommends such a practice now! As part of the audits that Lighthouse runs on a site when it is tested, Lighthouse will check for third-party embeds and recommend that a facade be added for supported embeds to improve the performance.
Lazy Embed by Beleaf
Embed Privacy hjalp til 94% mindre CO2-udledning.
Ifølge Beacon er CO2-udledningen pr. visning af netop denne side:
- 1239 milligram CO2 som standard, energiklasse F
- 77 milligram CO2 med Embed Privacy, energiklasse A+
Det gælder selvfølgelig kun, så længe videoerne ikke afspilles.
Bør du installere Embed Privacy til WordPress?
Hvis du indlejrer noget? Ja, giv det helt sikkert en chance. Forudkonfigureret ud af boksen fungerer det med enhver indlejring i WordPress. Du behøver ikke at redigere dine indlejringer på nogen måde. Performanceforbedringer og forbedringer af privatlivets fred er imponerende. Og hvis du alligevel ikke kan lide det, kan du bare deaktivere det. Det efterlader ingen spor.
