{"id":376659,"date":"2023-02-07T07:59:35","date_gmt":"2023-02-07T15:59:35","guid":{"rendered":"https:\/\/css-tricks.com\/?p=376659"},"modified":"2023-02-07T07:59:42","modified_gmt":"2023-02-07T15:59:42","slug":"the-truth-about-css-selector-performance","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-truth-about-css-selector-performance\/","title":{"rendered":"The truth about CSS selector performance"},"content":{"rendered":"\n<p>Geez, leave it to <a href=\"https:\/\/blogs.windows.com\/msedgedev\/2023\/01\/17\/the-truth-about-css-selector-performance\/\" rel=\"noopener\">Patrick Brosset to talk CSS performance<\/a> in the most approachable and practical way possible. Not that CSS is always <a href=\"https:\/\/csswizardry.com\/2022\/09\/critical-css-not-so-fast\/\" rel=\"noopener\">what&#8217;s gunking up the speed<\/a>, or even the lowest hanging fruit when it comes to improving performance.<\/p>\n\n\n\n<p>But <em>if<\/em> you&#8217;re looking for gains on the CSS side of things, Patrick has a nice way of sniffing out your most expensive selectors using Edge DevTools:<\/p>\n\n\n\n<ul>\n<li>Crack open DevTools.<\/li>\n\n\n\n<li>Head to the Performance Tab.<\/li>\n\n\n\n<li>Make sure you have the &#8220;Enable advanced rendering instrumentation&#8221; option enabled. This tripped me up in the process.<\/li>\n\n\n\n<li>Record a page load.<\/li>\n\n\n\n<li>Open up the &#8220;Bottom-Up&#8221; tab in the report.<\/li>\n\n\n\n<li>Check out your the size of your recalculated styles.<\/li>\n<\/ul>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2334\" height=\"1600\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-24-at-9.32.16-AM.png?resize=2334%2C1600&#038;ssl=1\" alt=\"DevTools with Performance tab open and a summary of events.\" class=\"wp-image-376666\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-24-at-9.32.16-AM.png?w=2334&amp;ssl=1 2334w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-24-at-9.32.16-AM.png?resize=300%2C206&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-24-at-9.32.16-AM.png?resize=1024%2C702&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-24-at-9.32.16-AM.png?resize=768%2C526&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-24-at-9.32.16-AM.png?resize=1536%2C1053&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-24-at-9.32.16-AM.png?resize=2048%2C1404&amp;ssl=1 2048w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>From here, click on one of the Recalculated Style events in the Main waterfall view and you&#8217;ll get a new &#8220;Selector Stats&#8221; tab. Look at all that gooey goodness!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2334\" height=\"1728\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-24-at-9.37.15-AM.png?resize=2334%2C1728&#038;ssl=1\" alt=\"\" class=\"wp-image-376667\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-24-at-9.37.15-AM.png?w=2334&amp;ssl=1 2334w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-24-at-9.37.15-AM.png?resize=300%2C222&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-24-at-9.37.15-AM.png?resize=1024%2C758&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-24-at-9.37.15-AM.png?resize=768%2C569&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-24-at-9.37.15-AM.png?resize=1536%2C1137&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-24-at-9.37.15-AM.png?resize=2048%2C1516&amp;ssl=1 2048w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Now you see all of the selectors that were processed and they can be sorted by how long they took, how many times they matched, the number of matching attempts, and something called &#8220;fast reject count&#8221; which <a href=\"https:\/\/microsoftedge.github.io\/DevTools\/explainers\/StyleTracing\/explainer.html\" rel=\"noopener\">I learned<\/a> is the number of elements that were easy and quick to eliminate from matching.<\/p>\n\n\n\n<p>A lot of insights here if CSS is really the bottleneck that needs investigating. But read Patrick&#8217;s full post over on the Microsoft Edge Blog because he goes much deeper into the why&#8217;s and how&#8217;s, and walks through an entire case study.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Geez, leave it to Patrick Brosset to talk CSS performance in the most approachable and practical way possible. Not that CSS is always what&#8217;s gunking up the speed, or even the lowest hanging fruit when it comes to improving performance. But if you&#8217;re looking for gains on the CSS side of things, Patrick has a [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":376670,"comment_status":"closed","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":"Link: The truth about CSS selector performance","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[1144,1470,592],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/edge-devtools-selector-stats.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":268205,"url":"https:\/\/css-tricks.com\/chrome-devtools-local-overrides\/","url_meta":{"origin":376659,"position":0},"title":"Chrome DevTools &#8220;Local Overrides&#8221;","date":"March 13, 2018","format":false,"excerpt":"There's been two really interesting videos released recently that use the \"Local Overrides\" feature of Chrome DevTools in order to play with web performance without even touching the original source code. Umar Hansa: Improving the performance of Soylent.com with local overrides and font-display Harry Roberts: Using Chrome\u2019s \u2018Local Overrides\u2019 to\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/chrome-devtools.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":317687,"url":"https:\/\/css-tricks.com\/whats-new-in-devtools-2020\/","url_meta":{"origin":376659,"position":1},"title":"A Look at What&#8217;s New in Chrome DevTools in 2020","date":"July 31, 2020","format":false,"excerpt":"I\u2019m excited to share some of the newer features in Chrome DevTools with you. There\u2019s a brief introduction below, and then we\u2019ll cover many of the new DevTools features. We\u2019ll also look at what\u2019s happening in some other browsers. I keep up with this stuff, as I create Dev Tips,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/chrome-devtools.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":251777,"url":"https:\/\/css-tricks.com\/set-timed-debugger-web-inspect-hard-grab-elements\/","url_meta":{"origin":376659,"position":2},"title":"Set a Timed Debugger To Web Inspect Hard-To-Grab Elements","date":"February 22, 2017","format":false,"excerpt":"Triggering a debugger; statement at just the right moment can help you select a DOM element that is really hard (or impossible) to get selected in DevTools. You can do that directly in your code, or, through a setTimeout right in the console, so you can get the DOM just\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":275721,"url":"https:\/\/css-tricks.com\/what-do-we-call-browsers-native-development-tools\/","url_meta":{"origin":376659,"position":3},"title":"What do we call browser&#8217;s native development tools?","date":"September 5, 2018","format":false,"excerpt":"You know, that panel of tools that allows you to do stuff like inspect the DOM and see network requests. How do the companies that make them refer to them? Chrome calls them DevTools. Edge calls them DevTools. Firefox calls them Developer Tools. Safari calls it the Web Inspector. I\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/chrome-devtools.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":354537,"url":"https:\/\/css-tricks.com\/what-if-you-could-use-visual-studio-code-as-the-editor-of-in-browser-developer-tools\/","url_meta":{"origin":376659,"position":4},"title":"What if\u2026 you could use Visual Studio Code as the editor of in-browser Developer Tools?","date":"October 21, 2021","format":false,"excerpt":"It's not uncommon for my front-end workflow to go something like this: Work on thing.See that thing in an automatically refreshed browser.See something wrong with that thing.Inspect and correct the thing in DevTools.Apply the correct code in my code editor.See that correct code automatically refreshed in the browser. I know,\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/experiment-sources-in-code-editor-open.msft_.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":294387,"url":"https:\/\/css-tricks.com\/can-you-view-print-stylesheets-applied-directly-in-the-browser\/","url_meta":{"origin":376659,"position":5},"title":"Can you view print stylesheets applied directly in the browser?","date":"August 19, 2019","format":false,"excerpt":"Yep. Let's take a look at how to do it in different browsers. Although note the date of this blog post. This stuff tends to change over time, so if anything here is wrong, let us know and we can update it. In Firefox... It's a little button in DevTools.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/print-browser.jpg?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\/376659"}],"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\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=376659"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376659\/revisions"}],"predecessor-version":[{"id":377156,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376659\/revisions\/377156"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/376670"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=376659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=376659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=376659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}