Asset Optimization

[sync-by-unito]

Aliasing away unused modules, chunking strategy changes

• Inline logo (svg) vs. external request
• Exact dimensions or aspect-ratio if image must be external (to avoid layout reflow)
• Conversion of SfIcon from inline svg to svg sprite (applies to max dom depth and overall dom size)

┆Attachments: Screenshot 2022-02-23 at 16.42.13.png

[sync-by-unito]

➤ Marcin Kwiatkowski commented:

Georgiy Slobodenyuk could you also take a look at fonts loading? I am wondering if there is a space for optimizations.

Thanks,

Marcin

[sync-by-unito]

➤ Oleksandr Dievytskyi commented:

Marcin Kwiatkowski Created PR #628 ( https://github.com/vuestorefront/magento2/pull/628|smart-link )

Please take a look if you like this implementation. Also changes should be tested in real environment

[sync-by-unito]

➤ Marcin Kwiatkowski commented:

Oleksandr Dievytskyi could you also optimize fonts?

This plugin https://www.npmjs.com/package/google-fonts-webpack-plugin ( https://www.npmjs.com/package/google-fonts-webpack-plugin|smart-link ) allows to download fonts from Google to webpack build folder.

We are going to use CDN for static files and I assume that using fonts from our CDN can have a big impact on performance.

Thanks,

Marcin

[sync-by-unito]

➤ Marcin Kwiatkowski commented:

Hi, Oleksandr Dievytskyi can you also add SVG sprite for Footer social icons?

[sync-by-unito]

➤ Oleksandr Dievytskyi commented:

Hi, Marcin Kwiatkowski! Yes, sure!

[sync-by-unito]

➤ Marcin Kwiatkowski commented:

I marked it as done. Font optimization will be done in a separate ticket.