101–110 of 124 posts
We created this as a free tool a while back on TestingBot: https://testingbot.com/free-online-tools/critical-css-genera... . It uses a remote browser to start a Puppeteer session and runs JavaScript code to extract the critical CSS needed for above-the-fold content. We chose Puppeteer because it’s fast to instrument the browser and works well even on JavaScript-heavy sites.
Earlier quoted context omitted.
Well, yes, but also no. It really depends on your website. SPAs can benefit, especially ones that utilize server-side rendering, as they don't have multiple pages anyway. And not all MPAs need to optimize for multi-page navigation either; sometimes websites aren't intended to be heavily navigated, or if they are, common navigation can make use of preloads. This technique is usually combined with preloads so the parse…
I really continue to disagree. SPA's seem like the least likely to benefit of anything at all -- they often don't even have a concept of "below the fold", as they have a workspace-like environment, not a scrolling-document one. And not only is loading time generally less important for them (unlike news articles), but they're used constantly, so the CSS is almost always cached anyways. There are lots of ways to optimi…
The data is most definitely cached if the server sets the cache expiry for the HTML file, so "anti-caching" makes no sense and is completely orthogonal to the optimization.
If the page's critical CSS is small enough you can deliver an HTML page where the initial render a) happens sooner, and b) is a complete Skelton of your layout + initial content. All at the low low price of ~0 additional client-server roundtrips.
Fun fact: facebook inlines a `style` tag and all HTML necessary to render their initial loading screen. It isn't what I would call "above the fold" CSS, but it is what is referred to as "Critical CSS".
Aside: the most popular and most-used SPAs are scrollers: twitter, instagram, facebook, github, etc, so now I wonder if you might be just trolling?
Feels like premature optimisation to me. Are there really cases where the CSS is so complex or the page loads so many resources that this effort is worthwhile? Maybe with the most complex web apps, I guess, but for almost all cases, I would have thought writing clean CSS, HTML, and JavaScript would render this unnecessary or even counterproductive.
I would pay good money for this tool ~12 years ago. We had a site with enormous amounts of CSS that accumulated over the years and it was really unclear which rules are and which aren't critical
Nice one. Would be cool if this also handled responsiveness. The need to dedupe responsive critical styles has made me resort to manually editing all critical stylesheets I've ever made. I also see that this brings in CSS variable definitions (sorry, ~ custom properties ~) and things like that. Since critical CSS's size matters so much, it might be worth giving an option to compile all of that down. > Place your orig…
Earlier quoted context omitted.
That stylesheet application was going to happen anyway, the difference now is that FCP will occur before it. > Browsers are pretty eager at fetching stylesheets even those at the bottom of the page Browsers begin fetching resources as they discover them. For a big enough document, that will mean low placed resources will suffer.
Sure that work is going to happen but often what you see is multiple stylesheets loaded using the async hack which results in multiple style and layout calculations as the browser can coalesce them because it doesn’t know that they’re stylesheets or when they will arrive The whole philosophy of critical styles philosophy being those about the fold is a mistake in my view Far better to adopt approaches like those reco…
Feels like premature optimisation to me. Are there really cases where the CSS is so complex or the page loads so many resources that this effort is worthwhile? Maybe with the most complex web apps, I guess, but for almost all cases, I would have thought writing clean CSS, HTML, and JavaScript would render this unnecessary or even counterproductive.
Feels like premature optimisation to me. Are there really cases where the CSS is so complex or the page loads so many resources that this effort is worthwhile? Maybe with the most complex web apps, I guess, but for almost all cases, I would have thought writing clean CSS, HTML, and JavaScript would render this unnecessary or even counterproductive.
Seriously. When I look at the modern state of front-end development, it's actually fucking bonkers to me. Stuff like Lighthouse has caused people to reach for optimizations that are completely absurd. This might make an arbitrary number go up in test suites, at the cost of massively increasing build complexity and reducing ease of working on the project all for very minimal if any improvement for the hypothetical end…
Feels like premature optimisation to me. Are there really cases where the CSS is so complex or the page loads so many resources that this effort is worthwhile? Maybe with the most complex web apps, I guess, but for almost all cases, I would have thought writing clean CSS, HTML, and JavaScript would render this unnecessary or even counterproductive.
>Feels like premature optimisation to me. To me thinking about how CSS loads is task #1, but I probably have some unique needs. We were losing clients due to our web offering scoring poorly on page speed tests. Page speed being part of how a page is ranked can affect SEO (depending on who you ask), so it is very important to our clients. It's not my job to explain how I think SEO works, it's my job to make our client…
I searched online for tools to extract the critical css of a website for one of my clients, I couldn't find one that did the job so I did so after using Puppeteer locally and then decided to share the solution I used that let's you specify how long to wait after page load to extract the styles; even found a paid one but requested refund after it didn't work. Feedback welcome, it's free for now.
FYI: While a bit of an edge case, as I don’t know why anyone would do this realistically… If a site without CSS is passed, it throws an error.