Resource Loading and Rendering Demos

Using this project

This is the Glitch has a variety of similar, simple pages, to demonstrate resource loading and rending of the browser, and how these can be influence by various new features.

The following demos are available:

• Base page - base demo
• sync and defer attributes on <script> elements - sync demo
• Resource Hints (dns-prefetch, preconnect, prefetch, or prerender) - preconnect demo
• Preload directives (rel="preload") - preload demo
• Font Display options (font-display="swap") - font display block demo
• Height and Width on images - img width and height demo
• Native Lazy Loading (loading="lazy") - lazy loading demo
• Early Hints (103 HTTP status code) - no demo currently
• Priority Hints (fetchpriority="high") - priority hints demo
• Blocking attribute (blocking="render") - blocking render demo

They should be run on WebPageTest, or in the browser with caching turned off, and compared to the base demo.