Fix bad CLS score on main product when video is the featured media

[ludoboludo]

Why are these changes introduced?

Fixes #1165

What approach did you take?

There are 80 lines of CSS in component-deferred-media.css which were loaded asynchronously on main-product.iquid and a few other files.

I've changed it so the asset is loaded right away so that if some of the first medias are videos then it won't cause any CLS issues.

Before and after lighthouse scores on mobile:

Other considerations

A few other files do call that file asynchronously, so that problem might happen there as well but because it's section it's not possible for us to say if they're going to be the first thing loading at the top of the page or not.

Here is the list of places:

• collage.liquid
• featured-product.liquid

Testing steps/scenarios

• You can try and load main locally, remove the dynamic checkout button and go to the Test 3D models, video product which is showing on the home page and feat. collection, using lighthouse in the inspect tool. Test for mobile and desktop.
• Then do the same thing on this test theme/branch to compare the results.
• Test other products to make sure it hasn't impacted in any way their performance.

Demo links

• Store
• Editor

Checklist

• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[andrewetchen]

• You can try and load main locally, remove the dynamic checkout button and go to the Test 3D models, video product which is showing on the home page and feat. collection, using lighthouse in the inspect tool. Test for mobile and desktop.
• Then do the same thing on this test theme/branch to compare the results.
• Test other products to make sure it hasn't impacted in any way their performance.

The score improved by roughly the same margin that your referenced in your screenshots. I tested on desktop and mobile and compared the latest main against your branch 👍🏼