How 17 Lines of Code Improved Shopify.com Loading by 50% - Shopify

5/24/2017

What this post added

Introduced the use of the `<link rel="preload">` directive in the `<head>` element to instruct browsers to download critical resources, such as fonts, earlier in the page load process. This change reduced the time-to-text-paint by 1.2 seconds (50%) and eliminated the Flash of Invisible Text (FOIT) by allowing fonts to download concurrently with CSS, rather than waiting for the DOM and CSSOM to be generated. This approach was chosen over third-party libraries like Google Font Loader or the CSS Font Loading API due to its simplicity and lack of external dependencies.

Read the original post ↗