Need help with NPM

Melody Scott
Melody Scott used Ask the Experts™
on
I'm working on https://renalmeals.com. I used Google Chrome audit on it. One of the things it recommends is:
"For stylesheets, consider splitting up your styles into different files, organized by media query, and then adding a media attribute to each stylesheet link. When loading a page, the browser only blocks the first paint to retrieve the stylesheets that match the user's device. See Render-Blocking CSS to learn more. Build tools like critical can help you extract and inline critical CSS."

I'm pretty new at npm. No, I'm VERY new at NPM. I managed to install it using $ npm i -D critical@latest. Now I want to do this, below.  And I'm stumped. Can someone give me more specific instructions? Thanks!

Generate and inline critical-path CSS
Basic usage:

critical.generate({
  inline: true,
  base: 'test/',
  src: 'index.html',
  target: 'index-critical.html',
  width: 1300,
  height: 900,
});
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2016

Commented:
npm is a package management system that has zip to do with creating a critical path for css.
try this online tool https://jonassebastianohlsson.com/criticalpathcssgenerator/
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Take a look at this link
https://www.npmjs.com/package/critical#cli

You can do this with the CLI

cat test/fixture/index.html | critical --base test/fixture --inline > index.critical.html

Open in new window

The JSON config file you created above should be in the same folder - that is where you tell critical how to evaluate the page you are giving it.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
I'm pretty new at npm. No, I'm VERY new at NPM. I managed to install it using
Just to clarify some points
NPM - Node Package Manager - is a tool that comes with Node.js - it is used for adding packages to your dev environment. It does not play a role in the critical operation other than to do the installation.
After that it is up to critical to do the rest.

Just clearing this up as your question talks about doing something with NPM and you not knowing about NPM - NPM is just an installation tool for maintaining packages on your system.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Ah.. thanks!! WIll look at it tomorrow, thanks for clearing that up!!

Author

Commented:
Thanks for the lesson!

Author

Commented:
I made a change to the solution, as Julian answered my question more directly and fully. Thanks.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial