4 ms·
> all CSS is in the head, a max of 50 KB. There is no external CSS at all. That's crucial. It reverses a persistent anti-pattern in web development that calls f
by seanwilson 8y ago
> all CSS is in the head, a max of 50 KB. There is no external CSS at all. That's crucial. It reverses a persistent anti-pattern in web development that calls for a bunch of separate files for CSS and JS.
This means CSS and JS cannot be cached between page loads however so you're requesting the same data every time while navigating pages. It's a tradeoff against faster page loading. I'm surprised there isn't a better solution for this yet.
Also, with HTTP/2, splitting up your CSS and JS is actually a good idea because you can include only what you need on each page and the parts are cached between pages.
I think the basic problem is people including way too much CSS and way too much JS. For even desktop pages, 50KB of CSS should be enough for most pages.
- cheschire 8y agoI wonder if one of the user stories being addressed by AMP identifies that users don't typically visit more than a couple pages from any particular site before a style update is pushed by the developers that invalidates the cache anyways.
- seanwilson 8y agoWell, fast initial page loads would improve the experience a user gets when they're using a search engine to find an answer, especially if they have to visit multiple websites. For a site like Hackernews though where you probably visit many pages each visit, downloading the same e.g. 50KB of CSS every page is wasteful.
- im3w1l 8y agoHackernews has 7KB of css - 2KB with compression. The html for this document is 200kb - 30kb with compression.
- seanwilson 8y agoI meant hypothetically; sites where most users visits many pages.
- codedokode 8y agoCaching helps if you visit several pages on the same site. But AMP might be optimized for scenario when you scroll through several AMP pages from different sites in the search results. Using an external stylesheet would only make loading slower in this case. Another problem is that on an unreliable connection external CSS can fail to load.
- collinmanderson 8y agoOne trick I'm interested in trying: use external CSS if the referer is coming from the same site, otherwise include CSS inline. That way people who only view one page (a large percentage of visitors) get it inline, and people who view multiple pages get it cached.