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 (link coming soon) 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
- 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.
- 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.
- 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.
- Should be significantly smaller in comparison to the deferred third-party
- 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.
Anyone can propose changes, by making a pull request to this repo. Proposals don't necessarily need to be submitted by the creator.
basics; look in
products to see how the data is structured.