Skip to content

Latest commit

 

History

History
46 lines (32 loc) · 2.46 KB

facades.md

File metadata and controls

46 lines (32 loc) · 2.46 KB

Facade data in third-party-web

In addition to identifying entities, third-party-web also includes data on entities' products, and available alternative libraries for products known as facades. A third-party product is a third-party resource that is included on a page associated with a specific integration/SDK/API, for example: a YouTube embed iframe. A facade is a frontend element which looks similar to the actual product and lazily loads it upon user interaction. It's expected to be significantly more lightweight/faster. For example: lite-youtube-embed.

Lighthouse 7.0 has a new audit that identifies third-party embeds that can be lazy loaded with a facade. The Lighthouse audit is powered by the facade data in third-party-web.

Criteria for adding a new facade

Basic functionality

  • Loads a frontend "component" which looks like the actual third-party embed.
  • After some user interaction (click, mouseover, etc), component replaces itself with the actual third-party embed.

Well Maintained

  • The projects issues and contributions are managed responsibly. Bugs are handled swiftly (e.g within 60 days of filing).
  • Is already used in production, ideally by users other than the creator.

Orthogonal

  • The facade handles a use case not covered by existing facades. For example: a lite-youtube clone isn't differentiated, but a react port of lite-youtube would work.

Small Payload

  • Should be significantly smaller in comparison to the deferred third-party product.
    • The JS/CSS/image/etc payload should be the minimum size necessary to mimic the product. (A rough rule of thumb is a facade should be < 10% of the product it's mimicking)
    • We'd expect the facade to score 99+ in Lighthouse if it's tested on an otherwise-blank page.
    • Any required images should be as small as is reasonable. Using blurred, low-res, or SQIP techniques may be advantageous.

Submission Process

Anyone can propose changes, by making a pull request to this repo. Proposals don't necessarily need to be submitted by the creator.

Read contributing for basics; look in data/entities.js for products to see how the data is structured.