penthouse
critical
Our great sponsors
penthouse | critical | |
---|---|---|
5 | 10 | |
2,617 | 9,934 | |
- | - | |
0.0 | 7.1 | |
4 months ago | about 1 month ago | |
HTML | JavaScript | |
MIT License | Apache License 2.0 |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
penthouse
-
Extracting and using Critical CSS on my Eleventy site
It is a wrapper around Penthouse, the original critical path CSS generator, and performs two additional functions:
-
Critical CSS? Not So Fast
It is easy with a little automation :). In the build process, adding a step to calculate critical path css helps. This should probably be the last step and run on production post deploy. The calculated CSS is stored in redis which will be appended in the head for subsequent requests. This tool had inspired me to build this process at multiple orgs I have worked with https://github.com/pocketjoso/penthouse.
Agree on the async JS part but I guess browser makers will solve it soon.
-
CSS Deep
pocketjoso/penthouse - Generate critical css for your urls
-
Force include classes in critical CSS
Critical CSS uses as its engine penthouse which has in turn a lot of configuration options. One of them, is forceInclude.
critical
-
Frontend developers: stop moving things that I’m about to click on
CLS is a pain in the arse. Extract your critical CSS and inline it https://github.com/addyosmani/critical although doing critical CSS badly makes things worse.
-
Google Page Speed Insights and Magento 2
There is a tool that allows generating critical CSS and determining which CSS is critical and which is not. It helps to separate it into files, and there is also an npm package for that.
-
Critical CSS? Not So Fast
I am a fan of CSSWizardry and yet I find this post misleading. The examples shown are ways NOT to do frontend performance engineering.
The current best performant way to load JS is asynchronously as documented at https://web.dev/efficiently-load-third-party-javascript/.
And the best way to load CSS is with Critical Path CSS + Async CSS as documented at https://web.dev/defer-non-critical-css/.
The easiest way to generate Critical CSS is https://github.com/addyosmani/critical where you may suggest multiple resolutions.
I have found https://github.com/addyosmani/critical-path-css-tools to be a great resource to master critical path CSS which improves page render speeds. It helps build fast rendering sites, sometimes even sub-second renders given you have a low latency backend.
-
Using Vite with Critical CSS in a way that supports users with JavaScript disabled or unavailable
A while ago I'd noticed that the version (or configuration) of the Critical packaged used by my Netlify build plugin was missing that fallback, so I manually added it to my Eleventy template, no big deal.
-
3 tips that improve landing page speed
Defer or async css/js files — Don’t make leads wait for unnecessary files to download before showing something. In the case of CSS, there are a few tools for in-lining only what’s above-the-fold into your html.
-
My web performance journey with Nuxt, Storyblok & Netlify
Consider automating the process of extracting and inlining "Above the Fold" CSS using the Critical tool.
-
Force include classes in critical CSS
Critical CSS build by Addy Osmani is a useful library that extracts and inlines critical-path CSS in HTML pages.
What are some alternatives?
Nuxt.js - Nuxt is an intuitive and extendable way to create type-safe, performant and production-grade full-stack web apps and websites with Vue 3. [Moved to: https://github.com/nuxt/nuxt]
purgecss - Remove unused CSS
terser - 🗜 JavaScript parser, mangler and compressor toolkit for ES6+
lighthouse - Automated auditing, performance metrics, and best practices for the web.
article-extractor - To extract main article from given URL with Node.js
Compass - Compass is no longer actively maintained. Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain.
haste-perch - Create dynamic HTML easy in the browser using declarative notation
lite-youtube-embed - A faster youtube embed.
vue-lazyload - A Vue.js plugin for lazyload your Image or Component in your application.
squoosh - Make images smaller using best-in-class codecs, right in the browser.
card - :credit_card: make your credit card form better in one line of code
css-loaders - A collection of loading spinners animated with CSS