Reduce unused css - Githubissues

akramsarkis commented 4 weeks ago

[ ] Reduce unused css

Acceptance testing

[ ] Check on https://pagespeed.web.dev/ the performances mobile and then desktop

jfayad commented 4 weeks ago

the results we saw were on https://pagespeed.web.dev/analysis/https-www-geeks-solutions-saas-notifications/pqfjuv77cx?form_factor=mobile

akramsarkis commented 3 weeks ago

@mahfouzhseineweev don't forget that this needs to be tested as well on site not using meta sections so please when done to add an archived version of the library on geeks website dev, like this I can test there as well

akramsarkis commented 3 weeks ago

@mahfouzhseineweev

I tested on geeks website the page https://geeks-front.k8s-dev.geeks.solutions/RandD

Before I tested

As you can see below :

Reduce css ressources not used was showing 94 like on. prod
Reduce css ressources size was showing 17 like on prod

After the fix is done, here what we have:

Reduce css ressources not used is showing 96
Reduce css ressources size is showing 17

mahfouzhseineweev commented 2 weeks ago

The update I performed was for the wysiwyg css and it only took 1h. However, when I was done with it I had to setup geeks website and install the library update on it then I had a discussion with Akram after I installed it on geeks website about the broken display which I ended up updating the library to fix it as the problem was coming from the edit mode enhancement and so we can it ship it with v1.0.12 without fixing it. This is why the issue took more time than expected.

@jfayad For the issue itself I believe the work that can be done for it is already done, however there is an update that could enhance the css and the scripts unused further but it requires us to rework the library (rewrite the codes by creating sub components and organize the main sections.vue file and move the css codes into the sub components related) and this update might take more than a day and it is a breaking change update.

jfayad commented 2 weeks ago

The update I performed was for the wysiwyg css and it only took 1h. However, when I was done with it I had to setup geeks website and install the library update on it then I had a discussion with Akram after I installed it on geeks website about the broken display which I ended up updating the library to fix it as the problem was coming from the edit mode enhancement and so we can it ship it with v1.0.12 without fixing it. This is why the issue took more time than expected.

@jfayad For the issue itself I believe the work that can be done for it is already done, however there is an update that could enhance the css and the scripts unused further but it requires us to rework the library (rewrite the codes by creating sub components and organize the main sections.vue file and move the css codes into the sub components related) and this update might take more than a day and it is a breaking change update.

This work is to be done on the library level or on the sections of the host project themselves ?

mahfouzhseineweev commented 2 weeks ago

@jfayad Library level, the main index.vue file of Sections

jfayad commented 2 weeks ago

@mahfouzhseineweev then please file the issue(s) that would be required to achieve this result so we can schedule them for later on

mahfouzhseineweev commented 2 weeks ago

@jfayad Done https://github.com/Geeks-Solutions/nuxt-sections/issues/79

Geeks-Solutions / nuxt-sections

Reduce unused css #73

Acceptance testing