Message Boards
Critical css. How extract critical css java? How run NPM module into java?
Nikita Laitinen, modified 3 Years ago.
Critical css. How extract critical css java? How run NPM module into java?
Junior Member Posts: 44 Join Date: 12/18/19 Recent Posts
Hello!
I have a problem, and I hope you could help me
I'd like to implement a critical CSS feature on the Liferay website. There are a few open-source tools like https://github.com/addyosmani/critical-path-css-tools , https://github.com/addyosmani/critical to extract CSS from the full CSS file to the HTML page first screen (when the user open site). If I have this I will be able to insert the critical style inline into the head tag and load other CSS (main CSS file) in async mode. It is necessary to improve site speed
Has anybody done it before?? Maybe you know existing modules for java or other ways how to achieve my goal?
I have the idea
Write the filter module. Catch the page every time is loaded and extract critical css for the page and insert it into it.
But the problem is I can't write full module (create DOM, analyze it, analyze css, and extract css ) it is difficult. So it would be good to use the npm module but how??
I use Liferay 7.0
Thank you!
I have a problem, and I hope you could help me
I'd like to implement a critical CSS feature on the Liferay website. There are a few open-source tools like https://github.com/addyosmani/critical-path-css-tools , https://github.com/addyosmani/critical to extract CSS from the full CSS file to the HTML page first screen (when the user open site). If I have this I will be able to insert the critical style inline into the head tag and load other CSS (main CSS file) in async mode. It is necessary to improve site speed
Has anybody done it before?? Maybe you know existing modules for java or other ways how to achieve my goal?
I have the idea
Write the filter module. Catch the page every time is loaded and extract critical css for the page and insert it into it.
But the problem is I can't write full module (create DOM, analyze it, analyze css, and extract css ) it is difficult. So it would be good to use the npm module but how??
I use Liferay 7.0
Thank you!
Hisham Khartoum, modified 3 Years ago.
RE: Critical css. How extract critical css java? How run NPM module into j
New Member Posts: 3 Join Date: 9/6/20 Recent Posts
Hi, I saw your post and red the topics. Can u tell what is your problems and why your trying to use Critical CSS with liferay?
Maybe I can suggest some other ways.
Maybe I can suggest some other ways.
Nikita Laitinen, modified 3 Years ago.
RE: Critical css. How extract critical css java? How run NPM module into j
Junior Member Posts: 44 Join Date: 12/18/19 Recent Posts
The problem is getting styles. (need to use npm tool to extract critical css on the fly ). By default liferay does not have this option
Christoph Rabel, modified 3 Years ago.
RE: Critical css. How extract critical css java? How run NPM module into j
Liferay Legend Posts: 1554 Join Date: 9/24/09 Recent Posts
Hmm. Never tried it, but it is an interesting question.
It is a bit tricky since Liferay adds a lot of stuff dynamically. But most(if not all) of the relevant css should be in the theme. So, you probably would have to include the critical css tools into the gulp build to create the file. Now that you have the file, you need to inject it into the theme. Maybe you can do that directly using a freemarker include directive?
https://freemarker.apache.org/docs/ref_directive_include.html
I guess, that should work, but maybe not. If that doesn't work, you could create a service that loads the file from the jar/war file and injects it into the theme header. It depends a bit on your Liferay version, but you could implement a template context contributor and call it from the header or inject it directly using a dynamic include.
https://help.liferay.com/hc/en-us/articles/360018170931-Template-Context-Contributor
https://help.liferay.com/hc/en-us/articles/360017881132-Customizing-JSPs-with-Dynamic-Includes
It is a bit tricky since Liferay adds a lot of stuff dynamically. But most(if not all) of the relevant css should be in the theme. So, you probably would have to include the critical css tools into the gulp build to create the file. Now that you have the file, you need to inject it into the theme. Maybe you can do that directly using a freemarker include directive?
https://freemarker.apache.org/docs/ref_directive_include.html
I guess, that should work, but maybe not. If that doesn't work, you could create a service that loads the file from the jar/war file and injects it into the theme header. It depends a bit on your Liferay version, but you could implement a template context contributor and call it from the header or inject it directly using a dynamic include.
https://help.liferay.com/hc/en-us/articles/360018170931-Template-Context-Contributor
https://help.liferay.com/hc/en-us/articles/360017881132-Customizing-JSPs-with-Dynamic-Includes
Nikita Laitinen, modified 3 Years ago.
RE: Critical css. How extract critical css java? How run NPM module into j
Junior Member Posts: 44 Join Date: 12/18/19 Recent Posts
yes, you are right. But the problem is we have a lot of pages with different structures (html css). Each page can be updated by content admins so critical styles should be recalculated each time when a page is updated. It would be good to extract unique critical for the page on the fly without preparing it on the build process of theme
Nikita Laitinen, modified 3 Years ago.
RE: Critical css. How extract critical css java? How run NPM module into j
Junior Member Posts: 44 Join Date: 12/18/19 Recent Posts
in the theme we have one single css file other lfieray css stuff we don't load.
So input data is simple. It is just an existing single css file and HTML page
Another question is it possible to run npm module into for example liferay service or filter?
So input data is simple. It is just an existing single css file and HTML page
Another question is it possible to run npm module into for example liferay service or filter?
Christoph Rabel, modified 3 Years ago.
RE: Critical css. How extract critical css java? How run NPM module into j
Liferay Legend Posts: 1554 Join Date: 9/24/09 Recent Posts
Have you tested/measured that? I mean, starting npm on every page load will probably kill the performance of the system. With caching, maybe, but I simply wouldn't go down that road.
I understand the idea for "static" builds, that you create the critical css once and then just use it, but doing it on the fly? I am highly doubtful of that?
But yes, it is probably possible to run npm in a filter or module or something. But I really would NOT do that. That can't be good for performance.
You are trying to do something really complicated here and any win in performance is doubtful. Possible, yes, but it will be really tricky. You will have to install node on the server, feed it the relevant css in a filter or something and inject it into the page. The tricky part starts with "Which css files/files are relevant?". How does this behave with the Liferay senna library? I bet, weird things will happen and if you need to disable senna, it will probably again cost you more then you win.
You also probably have to cache it because running npm will take a couple of seconds. Of course, you will need to find a way to clear the cache.
I understand the idea for "static" builds, that you create the critical css once and then just use it, but doing it on the fly? I am highly doubtful of that?
But yes, it is probably possible to run npm in a filter or module or something. But I really would NOT do that. That can't be good for performance.
You are trying to do something really complicated here and any win in performance is doubtful. Possible, yes, but it will be really tricky. You will have to install node on the server, feed it the relevant css in a filter or something and inject it into the page. The tricky part starts with "Which css files/files are relevant?". How does this behave with the Liferay senna library? I bet, weird things will happen and if you need to disable senna, it will probably again cost you more then you win.
You also probably have to cache it because running npm will take a couple of seconds. Of course, you will need to find a way to clear the cache.
Nikita Laitinen, modified 3 Years ago.
RE: Critical css. How extract critical css java? How run NPM module into j
Junior Member Posts: 44 Join Date: 12/18/19 Recent Posts
Oh, sounds like it is really difficult. I will think about it. Thank you for your help!