9 ms·

> Then there’s users begging Google to allow them to use more than 50kb of CSS. Yes, most site’s CSS is bloated. But 50kb is an absurdly small, arbitrary limit.

> Then there’s users begging Google to allow them to use more than 50kb of CSS. Yes, most site’s CSS is bloated. But 50kb is an absurdly small, arbitrary limit. I think for static articles 50kb should be plenty. The linked page itself uses only 35kb and a third of that is fontawesome. And 32kb of that is actually unused without javascript enabled. So the site only uses 3kb, but 50kb is absurdly small? This site (Hacker News) gets by with 2 kb.

Fjolsvith 8y ago
Does this site run on AMP?
- ceejayoz 8y ago
  What in AMP would make HN need 50+ KB instead of 2 KB of CSS?
ehsankia 8y ago
The whole of jQuery minified is 30kb. Why you would ever need 50kb for a single AMP page is beyond me.
- ars 8y ago
  It's mostly just long class names and things like that. If you minified the css along with the html you could get it significantly smaller. Also using individual css properties instead of combining them using the shorthand syntax, I assume any minifier would do that as well. Of course it's probably really hard to do because some class names are en/dis-abled in javascript and the names have to stay.
- dmitriid 8y ago
  There are no AMP pages that weigh less than 1MB. However, since Google aggressively preloads most of that data while you search, it gives you the illusion of AMP pages being lightweight. Non-AMP pages? Oh, Google will happily penalize them even if they perform better.
underwater 8y ago
A given page may only need a dozen kilobytes of CSS, but the combined amount that covers any possible page might be higher. For example a news article might have a video player, audio player, image carousel, map, data tables, scroll away images, etc. Normally a page could insert a link for a global CSS document, or have a document corresponding to each feature (video.css, audio.css). AMP doesn't allow this, you have to inline the styles into a single style block in the head of the document. The only way to do this if you have a site with a long tail of features is to track which elements are rendered and then before flushing the page calculate which styles should be inlined. AMP's approach is workable, but is at odds with how most sites and frameworks use CSS, and means the web framework and static resource build pipeline have to be redesigned around AMP constraints. And in the worse case, you'll discover than some content combinations happen to trip the 50k limit anyway, and silently fail.
- thethirdone 8y ago
  > A given page may only need a dozen kilobytes of CSS I think you would be challenged to find a single page that needed that much; please give an example if you have one. Most single page articles I have tested use less than 5kb. codepen.com uses like 6 kb on load of a new pen. gmail.com completely loads with 5kb and doesn't load more. > For example a news article might have a video player, audio player, image carousel, map, data tables, scroll away images, etc. This is definitely a concern, but 50kb is high enough that you should be able to fit custom css for everything you mentioned. I think 10x what most single pages use is pretty reasonable, and certainly not "an absurdly small, arbitrary limit". A significant portion of time is spent calculating styles from css so keeping it small is a real bonus to load times. > AMP's approach is workable, but is at odds with how most sites and frameworks use CSS, and means the web framework and static resource build pipeline have to be redesigned around AMP constraints. Pretty much every site I have looked at since my first comment besides Github loads less than 50kb (much of which is unused) anyway. If you are really hitting the 50kb limit, you probably need to redesign anyway for desktop so AMP should come mostly for free.
- marssaxman 8y ago
  If limiting CSS to 50k per page would prevent news articles from including "a video player, audio player, image carousel, map, data tables, scroll away images, etc." then I wish browser makers would include it as an option so I could apply it as a filter everywhere. I don't want all that stuff to begin with.
codegoblins 8y ago
To be fair, HN looks like it was designed in the mid-2000s
- scarface74 8y ago
  HN was designed in the mid 2000s and has changed very little and that’s a good thing. Just for grins and giggles, I occasionally charge my first gen iPod Touch from 2007. Most web pages are unusable - except for HN and daringfireball. I have no affiliation with the site below. I just saw it on Show HN a few years ago. http://tenyearsago.io/news.ycombinator.com http://tenyearsago.io/news.ycombinator.com
  - lugg 8y ago
    Being stable is a good thing but please don't conflate that with being sterile. The mobile UX here is non existent.
    - dragonwriter 8y ago
      > The mobile UX here is non existent. It doesn't have any specialist mobile UX, but it also doesn't have any need for specialized mobile UX. It has pretty nearly the best mobile discussion UX I've seen simply by not trying too hard.
      - lugg 8y ago
        I have to zoom to click things. It has clean UX for desktop. Which thankfully translates to mobile good enough because we built mobile concepts to deal with it (zooming). But no, that doesn't mean it has mobile UX.
    - jeltz 8y ago
      HN works really well on mobile. The only issue is that the voting arrows are a bit small but otherwise it is one of the mobile sites I use with the best UX experience.
deleted 8y ago
[deleted]

Fjolsvith 8y ago

Does this site run on AMP?

ceejayoz 8y ago
What in AMP would make HN need 50+ KB instead of 2 KB of CSS?

ehsankia 8y ago

The whole of jQuery minified is 30kb. Why you would ever need 50kb for a single AMP page is beyond me.

ars 8y ago
It's mostly just long class names and things like that. If you minified the css along with the html you could get it significantly smaller. Also using individual css properties instead of combining them using the shorthand syntax, I assume any minifier would do that as well. Of course it's probably really hard to do because some class names are en/dis-abled in javascript and the names have to stay.
dmitriid 8y ago
There are no AMP pages that weigh less than 1MB. However, since Google aggressively preloads most of that data while you search, it gives you the illusion of AMP pages being lightweight. Non-AMP pages? Oh, Google will happily penalize them even if they perform better.

underwater 8y ago

A given page may only need a dozen kilobytes of CSS, but the combined amount that covers any possible page might be higher. For example a news article might have a video player, audio player, image carousel, map, data tables, scroll away images, etc. Normally a page could insert a link for a global CSS document, or have a document corresponding to each feature (video.css, audio.css). AMP doesn't allow this, you have to inline the styles into a single style block in the head of the document. The only way to do this if you have a site with a long tail of features is to track which elements are rendered and then before flushing the page calculate which styles should be inlined. AMP's approach is workable, but is at odds with how most sites and frameworks use CSS, and means the web framework and static resource build pipeline have to be redesigned around AMP constraints. And in the worse case, you'll discover than some content combinations happen to trip the 50k limit anyway, and silently fail.

thethirdone 8y ago
> A given page may only need a dozen kilobytes of CSS I think you would be challenged to find a single page that needed that much; please give an example if you have one. Most single page articles I have tested use less than 5kb. codepen.com uses like 6 kb on load of a new pen. gmail.com completely loads with 5kb and doesn't load more. > For example a news article might have a video player, audio player, image carousel, map, data tables, scroll away images, etc. This is definitely a concern, but 50kb is high enough that you should be able to fit custom css for everything you mentioned. I think 10x what most single pages use is pretty reasonable, and certainly not "an absurdly small, arbitrary limit". A significant portion of time is spent calculating styles from css so keeping it small is a real bonus to load times. > AMP's approach is workable, but is at odds with how most sites and frameworks use CSS, and means the web framework and static resource build pipeline have to be redesigned around AMP constraints. Pretty much every site I have looked at since my first comment besides Github loads less than 50kb (much of which is unused) anyway. If you are really hitting the 50kb limit, you probably need to redesign anyway for desktop so AMP should come mostly for free.
marssaxman 8y ago
If limiting CSS to 50k per page would prevent news articles from including "a video player, audio player, image carousel, map, data tables, scroll away images, etc." then I wish browser makers would include it as an option so I could apply it as a filter everywhere. I don't want all that stuff to begin with.

codegoblins 8y ago

To be fair, HN looks like it was designed in the mid-2000s

scarface74 8y ago
HN was designed in the mid 2000s and has changed very little and that’s a good thing. Just for grins and giggles, I occasionally charge my first gen iPod Touch from 2007. Most web pages are unusable - except for HN and daringfireball. I have no affiliation with the site below. I just saw it on Show HN a few years ago. http://tenyearsago.io/news.ycombinator.com http://tenyearsago.io/news.ycombinator.com
- lugg 8y ago
  Being stable is a good thing but please don't conflate that with being sterile. The mobile UX here is non existent.
  - dragonwriter 8y ago
    > The mobile UX here is non existent. It doesn't have any specialist mobile UX, but it also doesn't have any need for specialized mobile UX. It has pretty nearly the best mobile discussion UX I've seen simply by not trying too hard.
    - lugg 8y ago
      I have to zoom to click things. It has clean UX for desktop. Which thankfully translates to mobile good enough because we built mobile concepts to deal with it (zooming). But no, that doesn't mean it has mobile UX.
  - jeltz 8y ago
    HN works really well on mobile. The only issue is that the voting arrows are a bit small but otherwise it is one of the mobile sites I use with the best UX experience.

deleted 8y ago

[deleted]