Syllabus Lesson 72 of 156 · Third parties on your own site
Third parties on your own site

Self-host or embed

Why it matters Most third-party embeds have a version you can run yourself, or a way to load them only when a visitor asks. Each swap removes a guest from every page view, often makes the site faster, and rarely costs you anything the visitor would notice.

Back at the cafe: you could have the bakery's van deliver a croissant every time a customer orders one, with the driver noting who ordered. Or you could keep a tray of croissants in your own kitchen. Same croissant, no driver at the counter.

Self-hosting: serving a file (a font, a script, a stats tool) from your own site instead of loading it from someone else's server. The visitor's browser then talks only to you.

Fonts: the easiest win

A font file is just a file. If its licence allows it (most open fonts do; check the licence file), download the .woff2 files, put them on your server and point your CSS (the style sheet that sets how your pages look) at them:

@font-face {
  font-family: "Lato";
  src: url("/static/fonts/lato-regular.woff2") format("woff2");
  font-display: swap;   /* show text at once, swap the font in when ready */
}

Now no font service sees each page view. You also lose nothing on speed. The old argument was "visitors already have the popular font cached from other sites", but major browsers now keep a separate cache per site, so that shared-cache benefit is gone (checked October 2026). Self-hosted fonts are often faster, because the browser needs no extra connection.

Analytics: count visits, not people

You can know which pages are popular without giving every visitor a lifelong ID or sending their visits to another company. Two routes:

  • A self-hosted, cookie-free tool. Several open-source analytics tools run on your own server and count page views without cookies.
  • A tiny counter of your own. One small request per page view to your own server, storing only the page and the day. The next module's second lesson (Lesson 77) shows how floati.life does this, warts included.

Video, maps and chat: load on click

A video player from a video site often loads scripts and sets cookies the moment the page opens, even for visitors who never press play. The fix is a facade.

Facade (click-to-load): a look-alike placeholder you serve yourself, such as a thumbnail image with a play button. Only when the visitor clicks does your page load the real player. Visitors who never click never contact the video site.

The same trick works for maps (show a static picture of the map you saved, with a "Open the interactive map" button) and for chat (a "Chat with us" button that loads the widget on click). Say on the button what will happen: "Loads a player from video.example".

When embedding is the right call

Self-hosting is not free. You become responsible for updates: a self-hosted script with a security bug is your bug to patch. Some things cannot be self-hosted at all; a payment provider's card form must come from the provider. For those, keep the embed, load it only on the pages that need it, and pin it with Subresource Integrity where the provider allows (next lesson).

A common misconception: "a privacy-enhanced embed mode solves it". Such modes usually delay or reduce cookies, but the player still loads from the other company when the page opens, so they still see the visit. A facade means no contact until a click.

Try it On a page of yours (or any site) with an embedded video, open DevTools, Network tab, and reload without touching the video. Look at how many requests go to the video's domain before you press play. That number is what a facade brings to zero.

Recap

  • Self-host fonts: it removes a guest from every page and is usually faster, since browsers no longer share caches between sites.
  • Count visits with a cookie-free, first-party counter instead of a third-party tracker.
  • Use click-to-load facades for video, maps and chat.
  • Keep what must be embedded (like payments) to the pages that need it, and pin it.

Spotted a problem in this lesson? Report it

Code · runs in your browser
Output