Large general css file

One such service is PurifyCSS. It is, however, far from flawless and would need some trial & error on your part.

Thanks a lot, I'll try.

Hello,
i tried using PurifyCSS. The file size has shrunk a lot but I can't see the menu bar in the header. How come?
I attach the file in question and the css modified with PurifyCSS.

Hi Fabio,

We can check the issue on the live site, in this case provide a link to the page with the issue.
But also try to use any other minifying tool.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Hella,
here is a link with the cleaned up css file https://www.fs68.it/purifycss/index.html and with the original css file
https://www.fs68.it/index.html, (the site is still under construction).

Hi Fabio,

Looks like it indeed took out the needed CSS line that makes the menu not transparent. Please use another minifier.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Fabio,

It took me quite some time to figure out a good way to do this. It is indeed very important as pagespeed scores are reduced due to the 1.3 M nicepage.css file.
purgecss (purgecss.com) makes the css files even smaller.
You do get the same issue as with purify css, the transparent menu.
This can however be fixed easily by placing the following piece of css under the existing css in the shrinked nicepage.css file. This should probably also work for purifycss. Hope this helps you and others with the same issue.

.u-responsive-xxl .u-menu,
.u-responsive-xl .u-menu,
.u-responsive-lg .u-menu,
.u-responsive-md .u-menu,
.u-responsive-sm .u-menu,
.u-responsive-xs .u-menu {
opacity: 1;
}

Toon

Thanks Toon.

You can add this parameter to tell purgecss to keep those classes in nicepage.css:
--safelist u-responsive-xxl u-responsive-xl u-responsive-lg u-responsive-md u-responsive-sm u-responsive-xs

Without this parameter, purgecss will remove those as they're not defined in any css file but are actually made up in nicepage.js by adding a suffix to "u-responsive-"

Now, I wish there were a way to clean up the html files that contain spurious css classes.

Last edited 23 March 2022 by cimperia

I tried UnCSS and PurgeCSS with the --safelist options listed by @cimperia and found that there were still problems with the menu bar, with the selected page not highlighted.

I was weighing up the reduction of nicepage.css from ~1.3MB to ~133kB against time to test and fix similar issues and started wondering what the outcome would be with gzip.

Turns out gzip reduced nicepage.css to ~110kB with a decompression time of 10ms on my machine. To me, that is a win, as it is good enough for my use cases and I don't have to worry about whether I've deleted classes that I actually need.

But still, Nicepage, it would be good to have a tree shaking feature to get rid of the unused code and compress further (to ~23kB!).

Better will be if the team include a Critical CSS generation when exporting themes and templates.
Nicepage generation css code have to be improved as soon as possible.

Last edited 17 August 2022 by WEB DESIGN STUDIO

Better will be if the team include a Critical CSS generation when exporting themes and templates.
Nicepage generation css code have to be improved as soon as possible.

Yes, you're right.

I think a lot can be improved. Aside from CSS tree shaking, they can also save another 80kb by removing jQuery (it was a QoL improvement back in the day, but these days you can use ES6+).