Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Critical CSS? Not So Fast

csswizardry.com

Post reply on HN
Print view View original

81–90 of 90 posts

Re: Critical CSS? Not So Fast

#81

Post by e12e »

ehnto wrote: post #71
e12e wrote: post #58

Earlier quoted context omitted.

Nothing stops you from layering BEM on top of tailwind via @apply - although I'm not sure if that's a good idea. Maybe if creating a full, custom, design-system using tailwind?

I would say that'd be a Tailwind anti-pattern, since Tailwind exceeds by trying to do away with cascading, and BEM is an attempt to componentize CSS but retain some cascading. Also, if you handed me a project with that approach, I would run for the hills! How would you decide when to use BEM styling and when to use the tailwind classes? It'd be a nightmare.

If you ever use @apply,you need to come up with a name. I prefer a few @aplly classes to meaningless clutter of tailwind detailed styles.

You could of course have a policy to never refractor - but then you might need to enforce alphabetical use of tw classes to more easily keep styles in sync accross your codebase?

Re: Critical CSS? Not So Fast

#82

Post by troysk »

lelandfe wrote: post #79
troysk wrote: post #77

Earlier quoted context omitted.

> You have less CSS than HN, and hardly any JS. This doesn't add anything to the discussion of if this is easy or hard to do – your site will always have a fast FCP, even if you weren't serving with a CDN. Your observations reeks of incompetence. Are you seriously comparing a few bytes difference? The site loads more CSS from https://www.troysk.com/stylesheets/style.css And hardly any JS? Can you even read code? Many…

> Are you seriously comparing a few bytes difference? The site loads more CSS from https://www.troysk.com/stylesheets/style.css Setting aside that you're wrong (your style.css is 1.7kB, HN is 2.2kB), that small difference is kind of my point. Discussions of if a quick FCP is easy or not should be based on a typical site. Tiny, static portfolio sites ain't that. > And hardly any JS? Can you even read code? Your site's…

The numbers are wrong.

Re: Critical CSS? Not So Fast

#83

Post by lelandfe »

troysk wrote: post #82
lelandfe wrote: post #79

Earlier quoted context omitted.

> Are you seriously comparing a few bytes difference? The site loads more CSS from https://www.troysk.com/stylesheets/style.css Setting aside that you're wrong (your style.css is 1.7kB, HN is 2.2kB), that small difference is kind of my point. Discussions of if a quick FCP is easy or not should be based on a typical site. Tiny, static portfolio sites ain't that. > And hardly any JS? Can you even read code? Your site's…

The numbers are wrong.

JS: https://i.imgur.com/C6ir5TL.png

CSS: https://i.imgur.com/sgmlnkF.png

Not sure what you're doing at this point. Are you trying to make the case that your site uses a lot of JS...? The site's entire JS package consists of LoadCSS, some ScrollMagic calls, and a Google Analytics tag.

Re: Critical CSS? Not So Fast

#84

Post by cercatrova »

troysk wrote: post #75
cercatrova wrote: post #54

Earlier quoted context omitted.

I see you haven't used these libraries in at least a few years, because they all have frameworks that work with SEO by server side rendering content. React has NextJS while Vue has NuxtJS.

I have from its days of bleeding edge. They still can't match the speed unless you have huge caching budgets; in my experience.

What speed differentials are you seeing? Since they are server side I don't see any speed differences at all since they just transmit raw HTML and CSS, same as if you would write it by hand.

Re: Critical CSS? Not So Fast

#85

Post by omnimus »

e12e wrote: post #80
omnimus wrote: post #73

Earlier quoted context omitted.

Typical basic example where tailwind fails is styling text and i don't mean styling html generated from user markdown. (that is given - impossible to do with tw) When you have any text on page like a heading - tailwind approach is for you to set ".text-xl .leading-tight .tracking-tight" ok fine. Your designer is then like. "Yeah on mobile the fontsize must be much smaller and thus tracking+leading bigger" (because th…

> Suddenly you are juggling 9 classes that also have some fixed value In my experience, devs using tailwind will happily wait until there are 20+ classes before refactoring - on the surface this seems insane - but if all you're editing is single, re-usable components (eg: "text on a page" is in a custom "article" component) - it's no longer quite as crazy. > Theming is OK to some point (like making dark version) but…

> Again - tailwind isn't for document styling, but for building applications - that happen to feature html and css as implementation details.

And yet it's app developers i know that hate it and don't want to use it (they already have single file components). But agencies making super custom content websites seem to be all over it. https://www.awwwards.com/websites/tailwind/ These websites are css zen gardens if anything.

Re: Critical CSS? Not So Fast

#86

Post by cantSpellSober »

ehnto wrote: post #72
cantSpellSober wrote: post #59

Earlier quoted context omitted.

> Is it [...] pragmatically worthwhile YES! It affects e-commerce conversion rates measurably. Great point by the author: "make sure it’s the right thing to focus on." Hobby site? Don't care about FOUC. E-commerce? It's a game-changer. > The brief flash of your half-styled website is useless to me Not to the rest our users though! Are you on a 3G connection in a third-world country? If not your experience may be not…

I am confused, are you for or against FOUC? Or for optimizing against it? My core industry is e-commerce, have been doing it for over a decade. Our fastest sites are the fully cached, single CSS file sites. You get sent a small amount of CSS and HTML, and you are off to the races. Javascript comes later, and is not necessary to operate the site until checkout. What kills a sites speed for us is usually shitty CDNs an…

I'm against FOUC when it matters, and for optimizing CSS when it's the right thing to focus on.

On hobby sites it doesn't matter. On high volume e-commerce it does.

Re: Critical CSS? Not So Fast

#87

Post by youngtaff »

lelandfe wrote: post #44
youngtaff wrote: post #32

Earlier quoted context omitted.

Not necessarily just for content above the fold there is more than one way to split between critical and non-critical e.g. styles for initial page render vs those used on interaction (for a popup menu for example)

https://web.dev/extract-critical-css/ > Critical CSS is a technique that extracts the CSS for above-the-fold content in order to render content to the user as fast as possible. You can decide to put whatever you want into the style tag, but "critical CSS" explicitly refers to above the fold.

> You can decide to put whatever you want into the style tag, but "critical CSS" explicitly refers to above the fold.

The Web Dev article might decide to define Critical CSS as about the fold but there are at least three ways of looking at Critical CSS

- Styles needed for above the fold

- Styles needed to layout a skeleton, and main content to avoid layout shifts

- Styles needed to layout the whole page

Above the fold is an arbitrary definition because it varies by device with different styles being required for different viewport sizes (at least)

The approach of scanning the rendering the page to see what styles are needed then extracting them into inline styles might work for small unchanging sites but it just doesn't scale

The only way I've seen sites maintain Critical Styles over time is to have a strong design system / patter library so they know what styles are needed to render the page and then split the styles between those needed for first render, and those needed on user interaction

Re: Critical CSS? Not So Fast

#88

Post by youngtaff »

troysk wrote: post #51
youngtaff wrote: post #30

Earlier quoted context omitted.

The process in the article you link to for critical CSS doesn’t work in the real world as it becomes impossible to maintain This script they use to load the async JS can also be racey and it’s far better to put the link to noncritical styles at the bottom of the page

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…

Calculating the critical path in the build process doesn't scale in my experience - retailers with 10,000s products, publishers for 10,000 articles

Re: Critical CSS? Not So Fast

#89

Post by lelandfe »

youngtaff wrote: post #87
lelandfe wrote: post #44

Earlier quoted context omitted.

https://web.dev/extract-critical-css/ > Critical CSS is a technique that extracts the CSS for above-the-fold content in order to render content to the user as fast as possible. You can decide to put whatever you want into the style tag, but "critical CSS" explicitly refers to above the fold.

> You can decide to put whatever you want into the style tag, but "critical CSS" explicitly refers to above the fold. The Web Dev article might decide to define Critical CSS as about the fold but there are at least three ways of looking at Critical CSS - Styles needed for above the fold - Styles needed to layout a skeleton, and main content to avoid layout shifts - Styles needed to layout the whole page Above the fol…

Addy Osmani's Critical package

> Critical extracts & inlines critical-path (above-the-fold) CSS from HTML

https://github.com/addyosmani/critical

Penthouse, the OG of Critical CSS generators

> Penthouse will return the critical CSS needed to perfectly render the above the fold content of the page

https://github.com/pocketjoso/penthouse

> Above the fold is an arbitrary definition because it varies by device

I mean, sure. But your critical path of CSS is never going to mean the whole page (unless it's a very short page). And skeleton components is objectively a completely different thing. Having definitions, even if "arbitrary," are important.

Re: Critical CSS? Not So Fast

#90

Post by youngtaff »

lelandfe wrote: post #89
youngtaff wrote: post #87

Earlier quoted context omitted.

> You can decide to put whatever you want into the style tag, but "critical CSS" explicitly refers to above the fold. The Web Dev article might decide to define Critical CSS as about the fold but there are at least three ways of looking at Critical CSS - Styles needed for above the fold - Styles needed to layout a skeleton, and main content to avoid layout shifts - Styles needed to layout the whole page Above the fol…

Addy Osmani's Critical package > Critical extracts & inlines critical-path (above-the-fold) CSS from HTML https://github.com/addyosmani/critical Penthouse, the OG of Critical CSS generators > Penthouse will return the critical CSS needed to perfectly render the above the fold content of the page https://github.com/pocketjoso/penthouse > Above the fold is an arbitrary definition because it varies by device I mean, sur…

I didn't mention skeleton components, I said 'lay out a skeleton and main content'

I'm well aware of Addy and Jonas' work…

In my experience trying to just extract and maintain ATF styles is impractical at scale as there 1,000s of viewport sizes, and large sites often have 10,000 pages – I've seen many a team try it and abandon it for something more realistic

I've used a broad definition of Critical CSS for a long time and will continue to do so as the narrow definition is impractical at scale IMV

Post reply on HN