{"id":359146,"date":"2021-12-21T10:42:43","date_gmt":"2021-12-21T18:42:43","guid":{"rendered":"https:\/\/css-tricks.com\/?p=359146"},"modified":"2021-12-21T10:42:45","modified_gmt":"2021-12-21T18:42:45","slug":"links-on-performance-v","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/links-on-performance-v\/","title":{"rendered":"Links on Performance V"},"content":{"rendered":"\n
  1. Does shadow DOM improve style performance?<\/a> \u2014 Nolan Lawson covers how, because of the inherent encapsulation<\/em> 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 and IDs are actually faster outside of it (?!), so if you just style with those, that’s the way to go.<\/li>
  2. HTML-first, JavaScript last: the secret to web speed!<\/a> \u2014 Mi\u0161ko Hevery is talking about Qwik<\/a> and one of the things that makes it fast. I don’t know much about Qwik, but it looks like a JavaScript framework that is pretty SSR-friendly as it keeps state directly in the HTML\/DOM (e.g. div ::app-state=\".\/AppState\" app-state:1234=\"{count: 321}\"><\/code>), which you would think is slow, but apparently isn’t.<\/li>
  3. Small Bundles, Fast Pages: What To Do With Too Much JavaScript<\/a> \u2014 Some thoughts from Ben Schwarz on what to do with those problematic big bundles. Make ’em smaller is the main game, then constantly keep an eye on them.<\/li>
  4. Getting Your head<\/code> Straight: A New CSS Performance Diagnostics Snippet<\/a> \u2014 We covered<\/a> Harry’s super clever snippet a while back, but Vitaly had beaten us to it<\/a> and it’s worth re-sharing because it’s awfully cool.<\/li>
  5. New HTTP standards for caching on the modern web<\/a> \u2014 Tim Perry gets into two brand new (proposed) caching headers: Cache-Status<\/code> and Targetted Cache-Control<\/code>. “These are designed to update HTTP standards to match the reality of the CDN-powered web that exists today, creating specifications that formalize existing practices from popular CDNs.”<\/em> Feels like good stuff where web standards can come in and fix up a gnarly situation.<\/li>
  6. Optimizing resource loading with Priority Hints<\/a> \u2014 Leena Sohoni, <\/a>Addy Osmani, and Patrick Meenan talk about the Priority Hints…. uh… I’d call it an API except it’s really just an importance<\/code> attribute in HTML, or a JavaScript param in other APIs. Here’s the draft spec<\/a>. It’s one of those things, like responsive images with srcset<\/code>\/sizes<\/code> or will-change<\/code>, where you, the-author, know more than the browser does and allows you to give the browser information it needs to perform better.<\/li>
  7. Have Core Web Vitals made the web faster?<\/a> \u2014 CWVs were announced in May 2020 and then we were told by May 2021 they would become a factor in SEO. Barry Pollard checks in to see if that big carrot (or stick?) has enticed us all to make sites faster en masse. The answer is complicated because the way CWVs are measured has changed in that time. Some measurements say yes, things are better. But if you use steady alternate measurements from before\/after, things look worse. I all depends on what slice of the web you’re looking at.<\/li>
  8. Improving performance with Islands Architecture and PostCSS<\/a> \u2014 Astro has a cool feature for components\u2014like <Sidebar client:media={\"(min-width: 768px)\"} \/><\/code>\u2014where that element isn’t loaded at all unless that media query matches. I might argue that’s only a good idea if it’s a heavy component or has JavaScript it requires. I say that because it seems like using it for something like static HTML would actually offset any potential savings, as extra JavaScript has to run to test the media conditions and then conditionally fetch assets. But anyway, Oliver Turner demonstrates how to share the media queries between your JavaScript and CSS (via PostCSS).<\/li>
  9. Image Optimizer<\/a> \u2014 This is an Electron-powered (but macOS only) drag-and-drop image optimizer. Like ImageOptim<\/a>, I suppose. Both are free.<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"

    Does shadow DOM improve style performance? \u2014 Nolan Lawson covers how, because of the inherent encapsulation of the shadow DOM, the […]<\/p>\n","protected":false},"author":3,"featured_media":294175,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Nine links about performance I've been saving up.","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[592],"class_list":["post-359146","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-performance"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/website-lightning.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":280290,"url":"https:\/\/css-tricks.com\/styling-a-web-component\/","url_meta":{"origin":359146,"position":0},"title":"Styling a Web Component","author":"Chris Coyier","date":"January 8, 2019","format":false,"excerpt":"This confused me for a bit here so I'm writing it out while it's fresh in mind. Just because you're using a web component doesn't mean the styles of it are entirely isolated. You might have content within a web component that is styled normally along with the rest of\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/Untitled_Artwork-scaled.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/Untitled_Artwork-scaled.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/Untitled_Artwork-scaled.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/Untitled_Artwork-scaled.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/Untitled_Artwork-scaled.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":301665,"url":"https:\/\/css-tricks.com\/thinking-through-styling-options-for-web-components\/","url_meta":{"origin":359146,"position":1},"title":"Thinking Through Styling Options for Web Components","author":"Chris Coyier","date":"January 16, 2020","format":false,"excerpt":"Where do you put styles in web components? I'm assuming that we're using the Shadow DOM here as, to me, that's one of the big draws of a web component: a platform thing that is a uniquely powerful thing that only the platform can do. So this is about defining\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/vie-import-component.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/vie-import-component.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/vie-import-component.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/vie-import-component.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/vie-import-component.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":302768,"url":"https:\/\/css-tricks.com\/getting-acquainted-with-svelte-the-new-framework-on-the-block\/","url_meta":{"origin":359146,"position":2},"title":"Getting Acquainted With Svelte, the New Framework on the Block","author":"Tristram Tolliday","date":"February 6, 2020","format":false,"excerpt":"For the last six years, Vue, Angular, and React have run the world of front-end component frameworks. Google and Facebook have their own sponsored frameworks, but they might leave a bitter taste for anyone who advocates for an open and unbiased web. Vue is another popular framework that has multiple\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/svelte-radiant.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/svelte-radiant.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/svelte-radiant.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/svelte-radiant.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/svelte-radiant.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":256890,"url":"https:\/\/css-tricks.com\/playing-shadow-dom\/","url_meta":{"origin":359146,"position":3},"title":"Playing with Shadow DOM","author":"Chris Coyier","date":"July 20, 2017","format":false,"excerpt":"About a year ago, Twitter announced it would start displaying embedded tweets with the shadow DOM rather than an , if the browser supports shadom DOM. Why? Well, speed is one reason. They say: Much lower memory utilization in the browser, and much faster render times. Tweets will appear faster\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":323804,"url":"https:\/\/css-tricks.com\/the-failed-promise-of-web-components\/","url_meta":{"origin":359146,"position":4},"title":"The failed promise of Web Components","author":"Chris Coyier","date":"October 19, 2020","format":false,"excerpt":"Lea has some words: Perusing the components on\u00a0webcomponents.org\u00a0fills me with anxiety, and I\u2019m perfectly comfortable writing JS \u2014 I write JS for a living! What hope do those who can\u2019t write JS have? Using a custom element from the directory often needs to be preceded by a ritual of npm\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":284484,"url":"https:\/\/css-tricks.com\/encapsulating-style-and-structure-with-shadow-dom\/","url_meta":{"origin":359146,"position":5},"title":"Encapsulating Style and Structure with Shadow DOM","author":"Caleb Williams","date":"March 21, 2019","format":false,"excerpt":"This is part four of a five-part series discussing the Web Components specifications. In part one, we took a 10,000-foot view of the specifications and what they do. In part two, we set out to build a custom modal dialog and created the HTML template for what would evolve into\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/tablature.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/tablature.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/tablature.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/tablature.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/tablature.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/359146","targetHints":{"allow":["GET"]}}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=359146"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/359146\/revisions"}],"predecessor-version":[{"id":359697,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/359146\/revisions\/359697"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/294175"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=359146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=359146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=359146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}