Shopify / Dawn's way of loading stylesheets and optimisation

[Danh11]

I've always wondered about the way the stylesheets are loaded in Dawn. Sometimes they're loaded with <link> element, and sometimes with the stylesheet_tag liquid tag.

I noticed the rich-text section styling being loaded quite late, causing the element width to change in the DOM upon loading (specifically the max width). It's loading the stylesheet with the following:

<link rel="stylesheet" href="{{ 'section-rich-text.css' | asset_url }}" media="print" onload="this.media='all'">

The flash of unstyled element is being caused by the onload attribute. It's not loading the stylesheet until the page is loaded (for screens at least). 

I played around and tested different load methods of the <link> tag without the media type, and also using a liquid stylesheet_tag. Both these methods loaded the stylesheet fast enough to not see the flash of unstyled element. Makes sense that these two methods result in the same outcome seeing the stylesheet_tag is inserting a standard <link> tag.

This brings me to my question.. Why use the media type in the tag? Why wait until the page is loaded? I'm going to take a guess and assume it's to do with reducing the size of the age and getting the initial page load as fast as possible. Maybe Shopify are thinking you most likely won't have a rich-text block in the viewport on page load, so it can sacrifice the load time of its stylesheet. If a few sections employ this technique, it could reduce the initial load by a nice fraction, but at the expense of DOM shift if one of these elements is in view on load.

I should add that I was only getting this when making a save on the theme.liquid file, where it would probably reload a bunch more than just a normal browser refresh where cache might be utilised.