Optimize web fonts loading and rendering with preloading and font-display to improve loading speed 

#FOIT #FOUT #webdevelopment #performance #fontLoadingOptimization
- This video first talks about the problems of FOIT (Flash of invisible text) and the solution to overcome this by using the preloading strategy, &lt link rel="preload" href="" as="font" crossorigin /&gt
- Also, it talks about the problems of FOUT (Flash of unstyled text) and the solution to overcome this by using font-display property of @font-face along with values such as auto | block | swap | fallback | optional in css.
- Concept of critical rendering paths, waterfall steps are also briefly discussed with the help of diagrams and the network tab of the browser.
I also have a blog post about it which can be found here :)
/ optimize-fonts-loading...

Наука