{"id":275207,"date":"2018-08-10T08:40:37","date_gmt":"2018-08-10T15:40:37","guid":{"rendered":"http:\/\/css-tricks.com\/?p=275207"},"modified":"2018-08-10T08:40:37","modified_gmt":"2018-08-10T15:40:37","slug":"the-cost-of-javascript-in-2018","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-cost-of-javascript-in-2018\/","title":{"rendered":"The Cost of JavaScript in 2018"},"content":{"rendered":"

Even though we mentioned it<\/a> earlier, I thought this outstanding post by Addy Osmani all about the performance concerns of JavaScript<\/a> was still worth digging into a little more.<\/p>\n

In that post, Addy touches on all aspects of perf work and how we can fix some of the most egregious issues, from setting up a budget to \u201cTime-to-Interactive\u201d measurements and auditing your JavaScript bundles.<\/p>\n

<\/p>\n

Embrace performance budgets and learn to live within them. For mobile, aim for a JS budget of < 170KB minified\/compressed. Uncompressed this is still ~0.7MB of code. Budgets are critical to success, however, they can\u2019t magically fix perf in isolation. Team culture, structure and enforcement matter. Building without a budget invites performance regressions and failure.<\/p><\/blockquote>\n

Super specific and super practical!<\/p>\n

Surprisingly, Addy mentions that \u201cthe median webpage today currently ships about 350KB of minified and compressed JavaScript,\u201d which seems like an awful lot lower than I\u2019d expected, if I’m being honest. The stat that scares me most is that the median webpage takes around fifteen whole seconds until it\u2019s interactive. And pulling all that JS into a Web Worker or caching with Service Workers won’t even make up that time to interaction. Yikes.<\/p>\n

Another key point: not all bytes are equal. For example, 200KB of JavaScript is not equal to a 200KB JPG image file:<\/p>\n

A JPEG image needs to be decoded, rasterized, and painted on the screen. A JavaScript bundle needs to be downloaded and then parsed, compiled, executed \u2014and there are a number of other steps that an engine needs to complete. Just be aware that these costs are not quite equivalent.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

Even though we mentioned it earlier, I thought this outstanding post by Addy Osmani all about the performance concerns of JavaScript was still worth digging into a little more. In that post, Addy touches on all aspects of perf work and how we can fix some of the most egregious issues, from setting up a […]<\/p>\n","protected":false},"author":223806,"featured_media":275227,"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":"The Cost of JavaScript in 2018","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[432,592,1339],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/cost-of-js.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":274996,"url":"https:\/\/css-tricks.com\/slow-websites\/","url_meta":{"origin":275207,"position":0},"title":"Slow Websites","date":"August 7, 2018","format":false,"excerpt":"The web has grown bigger. Both in expansiveness and weight. Nick Heer's \"The Bullshit Web\": The average internet connection in the United States is about six times as fast as it was just ten years ago, but instead of making it faster to browse the same types of websites, we\u2019re\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/median-webpage-stats.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":255094,"url":"https:\/\/css-tricks.com\/production-progressive-web-apps-javascript-frameworks\/","url_meta":{"origin":275207,"position":1},"title":"Production Progressive Web Apps with JavaScript Frameworks","date":"May 27, 2017","format":false,"excerpt":"This last week at Google I\/O, Addy Osmani announced some amazing developer resources for creating Progressive Web Applications (PWAs) that prioritize performance with JavaScript Frameworks. This was truly a team effort- a lot of people worked on these projects to get them going, and it's a really valuable contribution to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":251407,"url":"https:\/\/css-tricks.com\/javascript-start-performance\/","url_meta":{"origin":275207,"position":2},"title":"JavaScript Start-Up Performance","date":"February 11, 2017","format":false,"excerpt":"Addy Osmani: Smaller JavaScript bundles generally do result in a faster load time (regardless of our browser, device & network connection) but 200KB of our JS !== 200KB of someone else's and can have wildly different parse and compile numbers. Using file size as a metric isn't an awful crime,\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":316110,"url":"https:\/\/css-tricks.com\/links-on-performance-ii\/","url_meta":{"origin":275207,"position":3},"title":"Links on Performance II","date":"July 2, 2020","format":false,"excerpt":"Just had a couple of good performance links burning a hole in my pocket, so blogging them like a good little blogger. Web Performance Recipes With Puppeteer Puppeteer is an Node library for spinning up a copy of Chrome \"headlessly\" (i.e. no UI) and controlling it. People use it for\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":282922,"url":"https:\/\/css-tricks.com\/the-bottleneck-of-the-web\/","url_meta":{"origin":275207,"position":4},"title":"The Bottleneck of the Web","date":"March 5, 2019","format":false,"excerpt":"Steve Souders, \"JavaScript Dominates Browser CPU\": Ten years ago the network was the main bottleneck. Today, the main bottleneck is JavaScript. The amount of JavaScript on pages is growing rapidly (nearly 5x in the last 7 years). In order to keep pages rendering and feeling fast, we need to focus\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/ship-bottle.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359146,"url":"https:\/\/css-tricks.com\/links-on-performance-v\/","url_meta":{"origin":275207,"position":5},"title":"Links on Performance V","date":"December 21, 2021","format":false,"excerpt":"Does shadow DOM improve style\u00a0performance? \u2014 Nolan Lawson covers how, because of the inherent encapsulation of the shadow DOM, the styling gets applied a bit faster than it would if those styling rules were relevant to the entire page. But as ever, it depends, and it turns out that classes\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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275207"}],"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=275207"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275207\/revisions"}],"predecessor-version":[{"id":275228,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275207\/revisions\/275228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/275227"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=275207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=275207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=275207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}