{"id":330798,"date":"2020-12-14T07:38:09","date_gmt":"2020-12-14T15:38:09","guid":{"rendered":"https:\/\/css-tricks.com\/?p=330798"},"modified":"2020-12-14T07:38:12","modified_gmt":"2020-12-14T15:38:12","slug":"http-archives-annual-state-of-the-web-report","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/http-archives-annual-state-of-the-web-report\/","title":{"rendered":"HTTP Archive\u2019s Annual State of the Web Report"},"content":{"rendered":"\n

The HTTP Archive looked at more than 7 million websites and compiled their annual report detailing how the sites were built. And there\u2019s an enormous wealth of information about how the web changed in 2020. In fact, this report is more like an enormous book and it\u2019s entirely fabulous. The data comes from making queries to the HTTP Archive<\/a> and is broken down into various sections, such as Performance, Security, and the languages themselves, including how folks wrote HTML or CSS.<\/p>\n\n\n\n\n\n\n\n

Here\u2019s what the report has to say about the CSS they scanned:<\/p>\n\n\n\n

While JavaScript far surpasses CSS in its share of page weight, CSS has certainly grown in size over the years, with the median desktop page loading 62 KB of CSS code, and 1 in 10 pages loading more than 240 KB of CSS code. Mobile pages do use slightly less CSS code across all percentiles, but only by 4 to 7 KB. While this is definitely greater than previous years, it doesn’t come close to JavaScript\u2019s whopping median of 444 KB and top 10% of 1.2 MB<\/p><\/blockquote>\n\n\n\n

Gasp! <\/em>And here\u2019s a shocking bit of info that shortly follows:<\/p>\n\n\n\n

[\u2026] only about 7% of pages concentrate all their CSS code in one remote stylesheet, as we are often taught to do. In fact, the median page contains 3 <style><\/code> elements and 6 (!) remote stylesheets, with 10% of them carrying over 14 <style><\/code> elements and over 20 remote CSS files! While this is suboptimal on desktop, it really kills performance on mobile, where round-trip latency is more important than raw download speed.<\/p><\/blockquote>\n\n\n\n

I sort of want to quote the whole section about CSS<\/a> specifically because there\u2019s a lot of interesting facts that show how we, as a community, have a lot of work to do to improve performance and spread the good word about CSS optimization.<\/p>\n","protected":false},"excerpt":{"rendered":"

The HTTP Archive looked at more than 7 million websites and compiled their annual report detailing how the sites were built. And there\u2019s an enormous wealth of information about how the web changed in 2020. In fact, this report is more like an enormous book and it\u2019s entirely fabulous. The data comes from making queries […]<\/p>\n","protected":false},"author":223806,"featured_media":330869,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[592,809],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/web-almanac-2020-report.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":305390,"url":"https:\/\/css-tricks.com\/links-on-performance-i\/","url_meta":{"origin":330798,"position":0},"title":"Links on Performance I","date":"March 24, 2020","format":false,"excerpt":"I've had a number of browser tabs open to articles all related to web performance and gosh darn it if blogging them is a way for me get some closure. They are all good! Manuel Matuzovic, Why 543 KB keep me up at night: Yes, I know, it depends. 543\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/website-lightning.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359205,"url":"https:\/\/css-tricks.com\/2021-roundup-of-web-research\/","url_meta":{"origin":330798,"position":1},"title":"2021 Roundup of Web Research","date":"December 23, 2021","format":false,"excerpt":"Last year, we kicked out a roundup of published surveys, research, and other findings from around the web. There were some nice nuggets in there, like a general sentiment that the web needs more documentation, Tailwind CSS dun got big, TypeScript is the second most beloved language, and that the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":312407,"url":"https:\/\/css-tricks.com\/analyzing-notion-app-performance\/","url_meta":{"origin":330798,"position":2},"title":"Analyzing Notion app performance","date":"June 8, 2020","format":false,"excerpt":"Here\u2019s a fantastic case study where Ivan Akulov looks at the rather popular writing app Notion and how the team might improve the performance in a variety of ways; through code splitting, removing unused vendor code, module concatenation, and deferring JavaScript execution. Not so long ago, we made a list\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/notion.png?fit=1200%2C790&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":338426,"url":"https:\/\/css-tricks.com\/how-to-improve-css-performance\/","url_meta":{"origin":330798,"position":3},"title":"How to Improve CSS Performance","date":"April 19, 2021","format":false,"excerpt":"There is no doubt that CSS plays a huge role in web performance. Milica Mihajlija puts a point on exactly why: When there is CSS available for a page, whether it\u2019s inline or an external stylesheet,\u00a0the browser delays rendering until the CSS is parsed. This is because pages without CSS\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/calibreapp-css-performance.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":256704,"url":"https:\/\/css-tricks.com\/musings-on-http2-and-bundling\/","url_meta":{"origin":330798,"position":4},"title":"Musings on HTTP\/2 and Bundling","date":"July 17, 2017","format":false,"excerpt":"HTTP\/2 has been one of my areas of interest. In fact, I've written a few articles about it just in the last year. In one of those articles I made this unchecked assertion: If the user is on HTTP\/2: You'll serve more and smaller assets. You\u2019ll avoid stuff like image\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":325635,"url":"https:\/\/css-tricks.com\/how-to-load-fonts-in-a-way-that-fights-fout-and-makes-lighthouse-happy\/","url_meta":{"origin":330798,"position":5},"title":"How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy","date":"November 24, 2020","format":false,"excerpt":"A web font workflow is simple, right? Choose a few nice-looking web-ready fonts, get the HTML or CSS code snippet, plop it in the project, and check if they display properly. People do this with Google Fonts a zillion times a day, dropping its tag into the . Let\u2019s\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/google-lighthouse.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/web-almanac-2020-report.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/330798"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=330798"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/330798\/revisions"}],"predecessor-version":[{"id":330961,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/330798\/revisions\/330961"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/330869"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=330798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=330798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=330798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}