critical-path-css-demo
Above-the-fold CSS generation + inlining using Critical & Gulp
by addyosmaniApacheConf
Commit activity
Last 12 weeks · 0 commits
Community health
2 of 6 standards met
42
✓README✓License○Contributing○Code of Conduct○Issue Template○PR Template
Recent PRs & issues
Quiet · 1 in progress · Last activity 5y ago
See all on GitHub →
D:\Projects\Criticle CSS Demo\myapp>gulp critical [11:35:20] Requiring external module babel-core/register fs.js:35 } = primordials; ^ ReferenceError: primordials is not defined at fs.js:35:5 at req_ (D:\Projects\Criticle CSS Demo\myapp\node_modules\natives\index.js:143:24) at Object.req [as require] (D:\Projects\Criticle CSS Demo\myapp\node_modules\natives\index.js:55:10) at Object. (D:\Projects\Criticle CSS Demo\myapp\node_modules\vinyl-fs\node_modules\graceful-fs\fs.js:1:37) at Module._compile (internal/modules/cjs/loader.js:1133:30) at Module._extensions..js (internal/modules/cjs/loader.js:1153:10) at Object.require.extensions. [as .js] (D:\Projects\Criticle CSS Demo\myapp\node_modules\babel-register\lib\node.js:152:7) at Module.load (internal/modules/cjs/loader.js:977:32) at Function.Module._load (internal/modules/cjs/loader.js:877:14) at Module.require (internal/modules/cjs/loader.js:1019:19)
A lot going on in this PR, so an explanation is required: Issues: The original documentation example no longer functions as expected because Gulp has evolved. The original code example is outdated. Fixes: Code example and documentation updated to current Gulp best-practice. Code example changed to simplified Bootstrap. Documentation simplified to focus on generic inclusion in existing Gulp project rather than tutorial. Feedback wanted.
Gulp example fails because it uses dest (should be target) and needs an update to meet new Gulp 4 standards. PR incoming.
Recent fixes
Hello I have a recent error while implementing critical in a lando instance. Critical: 2.0.4 Node: 10.22.0 Lando: v3.0.9 Gulp: CLI version: 2.3.0 Local version: 4.0.2 Specific error: (node:4903) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process! /app/node_modules/penthouse/node_modules/puppeteer/.local-chromium/linux-722234/chrome-linux/chrome: error while loading shared libraries: libX11-xcb.so.1: cannot open shared object file: No such file or directory TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md at onClose (/app/node_modules/penthouse/node_modules/puppeteer/lib/Launcher.js:750:14) at Interface.helper.addEventListener (/app/node_modules/penthouse/node_modules/puppeteer/lib/Launcher.js:739:50) at Interface.emit (events.js:203:15) at Interface.EventEmitter.emit (domain.js:466:23) at Interface.close (readline.js:397:8) at Socket.onend (readline.js:173:10) at Socket.emit (events.js:203:15) at Socket.EventEmitter.emit (domain.js:466:23) at endReadableNT (_stream_readable.js:1145:12) at process._tickCallback (internal/process/next_tick.js:63:19) Checkedthe troubleshooting page but mentions a node upgrade but even with the version 12 recommended at least the error still appears. Thanks in advance.
So, i started looking at the two demos (normal page vs page using critical) and obviously the first i did was open the devtools to see the differences... but i noticed a few odd things : P On https://addyosmani.com/critical-path-css-demo/output/normal/ There is a site.css file being requested (returns 404) using loadCSS. There is actually another file named main.css that loads fine and has the styles for the page. On https://addyosmani.com/critical-path-css-demo/output/critical/ Same as before, an orphan site.css. The main.css file doesn't seem to be loaded via loadCSS (which is what the README mentions) but through a simpler js snippet that creates a link element and injects it. So, i just ran the builds again, for the normal page and for the page with the inlined styles and copied the HTML files into the output folder which holds the demo pages. The new HTML files score in pagespeed insights as expected and throw no errors: Normal https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fimagentleman.github.io%2Fcritical-path-css-demo%2Foutput%2Fnormal%2F Critical https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fimagentleman.github.io%2Fcritical-path-css-demo%2Foutput%2Fcritical%2F And the critical example page has inlined styles, loadCSS asynchronously loads main.css and the noscript fallback is present, and the normal example page doesn't have any of the optimizations (no async css via loadCSS, etc). This PR doesn't add anything major but might help avoid some confusion on newcomers (like me : S) to the library that inspect the HTML of the demos to see what it does and how it works.
npm install critical --save-dev fails on this file: node install.js Error log attached. 2017-11-14T16_46_06_456Z-debug.log
Structured data for AI agents
Repository: addyosmani/critical-path-css-demo. Description: Above-the-fold CSS generation + inlining using Critical & Gulp Stars: 534, Forks: 53. Primary language: ApacheConf. Languages: ApacheConf (71.7%), HTML (24.9%), JavaScript (2.5%), CSS (0.9%). License: Apache-2.0. Homepage: "" Open PRs: 1, open issues: 6. Last activity: 5y ago. Community health: 42%. Top contributors: addyosmani, bezoerb, ahmedelgabri, AmmarCodes, robinboehm.