Need help with NPM
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,
});
"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,
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I'm pretty new at npm. No, I'm VERY new at NPM. I managed to install it usingJust 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.
ASKER
Ah.. thanks!! WIll look at it tomorrow, thanks for clearing that up!!
ASKER
Thanks for the lesson!
ASKER
I made a change to the solution, as Julian answered my question more directly and fully. Thanks.
try this online tool https://jonassebastianohlsson.com/criticalpathcssgenerator/