Above-the-fold CSS generation + inlining using Critical & Gulp
by addyosmaniApacheConf
Last 12 weeks · 0 commits
2 of 6 standards met
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)
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.
Repository: addyosmani/critical-path-css-demo. Description: Above-the-fold CSS generation + inlining using Critical & Gulp Stars: 537, Forks: 54. 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: 4y ago. Community health: 42%. Top contributors: addyosmani, bezoerb, ahmedelgabri, AmmarCodes, robinboehm.
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.
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.