Jump to content

combine and minify css files

jploch

By jploch,
in Module/Plugin Development

 Share

Recommended Posts

jploch Sr. Member

jploch

Posted
Posted

Hey folks.
My soon to be released pagebuilder modules has a feature, that it will automatically load css files.
A page can be composed by multiple block items and each block has a template file. For each block that is added to a page, the module also looks for a css file with the same name as the template file and loads it, if it's avalable and not already loaded. This works great and it only loads the css if it is really needed. But I am a bit worried of the performance, since there is a request for each file (if not cached already). Iam not sure if the ProcessWire cache or ProCache can help here?

So now I am looking for a good way to combine the files into one request/file and also enable that file to be cached. The problem I see here is that every page can load different files, or load them in a different order, so even if two pages share most of the same files, the combined files for these pages would be different and a request for each page would be needed, even if the file of one page is already in the cache. Maybe someone has an idea how to optimise this? Do you think it's better to combine the files or just load and cache those smaller files?

Link to comment
Share on other sites
wbmnfktr Hero Member

wbmnfktr

Posted
Posted
20 hours ago, jploch said:

Do you think it's better to combine the files or just load and cache those smaller files?

There a pros and cons for each and every possible way you can think of.

I personally prefer combining and inlining my CSS to have it right away.
In case the amount of CSS is way too much to inline, I only inline critical/base and page specific CSS, while loading CSS for cookie banners or the footer in a separate file.

In terms of multiple separate files HTTP/2 allows parallel downloads so there shouldn't be any render blocking issues that throw off your page speed in a dramatic way. At least not with custom CSS. Bootstrap and UIKIT might be a different story.

For those with ProCache there is a minify option that allows combining multiple CSS files (only files in the <head>) which is a great way to reduce some overhead.

While it depends on how much CSS is generated through your module you might want to run a few tests against https://web.dev/measure/ to check for the best option.

At the end of the day we talk about text files that run through Gzip or brotli and shrink way down in size.

 

20 hours ago, jploch said:

The problem I see here is that every page can load different files, or load them in a different order, so even if two pages share most of the same files, the combined files for these pages would be different and a request for each page would be needed, even if the file of one page is already in the cache.

Well... In case you really want to optimize each and every page down to the bare minimum absolute perfection this would be the way to go. Combining everything into one file would be way more of an overhead. At least in my opinion.

 

  • Like 2
Link to comment
Share on other sites
jploch Sr. Member

jploch

Posted
  • Author
Posted

@wbmnfktr  Thx!

15 hours ago, wbmnfktr said:

I personally prefer combining and inlining my CSS to have it right away.

To be clear, the css my module generates is rendered in a style tag in the docuemnt head, so no file is requested here (that is the major part of the css needed to render the page). But the css files from the templates, which are optionally (only loaded if the developer puts them in the template folder and names them like the template file) are added as links. I think of them as a quick way to set some default styling. Do you think it would be better for performance to inline the content of these css files as well? My concern is that this would create more work for the server to read these files every time the page gets rendered.

15 hours ago, wbmnfktr said:

In terms of multiple separate files HTTP/2 allows parallel downloads so there shouldn't be any render blocking issues that throw off your page speed in a dramatic way. At least not with custom CSS. Bootstrap and UIKIT might be a different story.

It might not be a big problem with HTTP/2. So far the performace seems to be great (100-95 lighthouse score with cache enabled). However I only testet with 4 extra files (files are about 10-15KB). So I can imagine that it would cause some performace loss with more files. But it might not be worth the trouble..

Link to comment
Share on other sites
wbmnfktr Hero Member

wbmnfktr

Posted
Posted
3 hours ago, jploch said:

Do you think it would be better for performance to inline the content of these css files as well?

I'd probably do so but my CSS is most of the time optimized and therefor small enough.
However you decide now I could imagine someone asking for the exact opposite. 
So why not both options and the developer can decide in the module settings how to handle those files.

3 hours ago, jploch said:

My concern is that this would create more work for the server to read these files every time the page gets rendered.

There might be a small delay but nothing to worry about - I guess. How many files are needed to boot up ProcessWire? The server already reads a ton of files.
But sure... things like WireCache or ProCache would be a good option here.

3 hours ago, jploch said:

However I only testet with 4 extra files (files are about 10-15KB).

You could throw a whole bunch of framework CSS at your testing page and add UIKIT and Bootstrap CSS and maybe some more files just to test to the extreme.

 

However we think about solutions, problems, and/or use cases for your module... there will be a few that use it totally different and will probably challenge everything.
Maybe go first with your preferred or the fastest way, add other options later based on requests and ideas from users.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...