- How to avoid layout shifts
- TypeScript or JavaScript import
- Caution: Chromium does not play video on any device
How to avoid layout shifts
Common root causes of layout shifting and how to fix them.
Custom web fonts and @font-face
Use font-display: optional; to avoid layout shifting when using custom web fonts (@font-face).
Images without specified size
When possible, specify the size of the image by defining its width and height. This will allow the browser to preserve the space and render the image when it’s ready without recalculating the layout and position of elements on the page (reflow).
TypeScript or JavaScript import
When working with TypeScript or JavaScript code, verify if some of your imports are unused or unneeded. For example, when you only need the Bootstrap Dropdown feature, instead of importing the whole Bootstrap using import 'bootstrap'; you could use import 'bootstrap/js/dist/dropdown';
Caution: Chromium does not play video on any device
Chromium does not include non-free codecs (H.264, which is common in non-Google videos) by default. YouTube uses VP8 or VP9, and they are free codecs, so they are supported in Chromium out of the box. Same about audio codecs, like AAC. Widevine, a DRM library (used to prevent media piracy), is not included with Chromium by default. Whenever videos employ one of those out of the box, Chromium will not be able to play them.