Web Performance Made Easy - Google I/O 2018 edition
At Google IO 2018, we presented a roundup of tools, libraries and optimization techniques that make improving web performance easier. Here we explain them using The Oodles Theater app. We also talk about our experiments with predictive loading and the new Guess.js initiative.
Introduction to variable fonts on the web
A new font specification that can significantly reduce font file sizes
Fast playback with audio and video preload
How to accelerate your media playback by actively preloading resources.
Speed up service worker with navigation preloads
Navigation preload lets you overcome service worker startup time by making requests in parallel.
IntersectionObserver's coming into view
IntersectionObservers let you know when an observed element enters or exits the browser's viewport.
Avoid large, complex layouts and layout thrashing
Layout is where the browser figures out the geometric information for elements - their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element. The process is called Layout in Chrome.
Reduce the scope and complexity of style calculations
JavaScript is often the trigger for visual changes. Sometimes that's directly through style manipulations, and sometimes it's calculations that will result in visual changes, like searching or sorting some data. Badly-timed or long-running JavaScript can be a common cause of performance issues, and you should look to minimize its impact where you can.