Forum How do I...?

Prince runs very slowly with large CSS file

zach.langner
I'm having trouble quickly rendering an html file that references a 15MB css file (CustomColorsCss.css). I've removed pretty much everything in the html file except for a few css references and just enough to show the styles are being applied. Unfortunately prince is taking 30+ minutes to render the pdf. This seems extremely slow since Chrome is able to load and process the same file in seconds. Is there anything I can do to speed this up without changing the css file? Below is the log from prince showing the timing:

Tue Mar 26 16:42:28 2019: ---- begin
Tue Mar 26 16:42:28 2019: loading document: C:\SourceControl\OAS\IM.NET3.0\WebApi\OAS.WebApi\OAS.WebApi.Test\bin\Debug\App_Data\Prince\license\license.dat
Tue Mar 26 16:42:28 2019: Loading document...
Tue Mar 26 16:42:28 2019: loading HTML5 input: test-local.html
Tue Mar 26 16:42:28 2019: loading document: test-local.html
Tue Mar 26 16:42:28 2019: Applying style sheets...
Tue Mar 26 16:42:28 2019: loading style sheet: small.css
Tue Mar 26 16:42:28 2019: loading style sheet: CustomColorsCss.css
Tue Mar 26 16:42:29 2019: loading style sheet: https://gist.githubusercontent.com/eirikbakke/1059266/raw/d81dba46c76169c2b253de0baed790677883c221/gistfile1.css
Tue Mar 26 17:13:10 2019: https://gist.githubusercontent.com/eirikbakke/1059266/raw/d81dba46c76169c2b253de0baed790677883c221/gistfile1.css: warning: unexpected CSS MIME type 'text/plain'
Tue Mar 26 17:13:10 2019: Preparing document...
Tue Mar 26 17:13:10 2019: Converting document...
Tue Mar 26 17:13:10 2019: used font: Times New Roman, Regular
Tue Mar 26 17:13:10 2019: finished: success
Tue Mar 26 17:13:10 2019: ---- end
  1. test.zip620.3 kB
    a simple html, large css, and result pdf
mikeday
A 15Mb CSS file? We will take a look! :D
dauwhe
So you really might have tables nested seven deep? Wow!

table.oasGroupingTable table.oasGroupingTable table.oasGroupingTable table.oasGroupingTable table.oasGroupingTable table.oasGroupingTable table.oasGroupingTable.entity.product-1189105 > thead>tr>td>p span.oasColorBlock
zach.langner
Yes, the use case is for a tool that allows users to create reports by dragging and nesting different components. Really the nesting depth isn't limited but we don't expect anyone to go deeper than the css allows.

It's worth noting this css is much simpler (and smaller) if we could use css variables, unfortunately Prince doesn't support them yet.
mikeday
Another good reason for us to support CSS variables, then!
mikeday
It seems that we can speed this up to about 2 seconds, the fix will be included in the next release of Prince.
zach.langner
Wow! That's fantastic mikeday. Is there an estimated date for the next release?
mikeday
Hopefully we can release a build next week.
mikeday
The latest build includes a fix for this, although please note that the Windows setup packages haven't been updated yet, just the ZIP files.
mikeday
This speedup has also been included in Prince 12.5.
zach.langner
Thanks Mike, I'll grab 12.5 and start testing with it.