{"id":17547,"date":"2021-11-12T15:44:38","date_gmt":"2021-11-12T21:44:38","guid":{"rendered":"https:\/\/www.dotcom-tools.com\/web-performance\/?page_id=17547"},"modified":"2021-11-12T15:44:38","modified_gmt":"2021-11-12T21:44:38","slug":"total-blocking-time","status":"publish","type":"page","link":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/total-blocking-time\/","title":{"rendered":"Lighthouse Optimizations &#8211; Total Blocking Time"},"content":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; gap=&#8221;25&#8243; equal_height=&#8221;yes&#8221; content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1636408663624{padding-top: 100px !important;padding-bottom: 100px !important;background-image: url(https:\/\/www.dotcom-tools.com\/blog\/wp-content\/uploads\/2015\/09\/hero-section-with-description-3320.jpg?id=15799) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}&#8221;][vc_column css=&#8221;.vc_custom_1636409653940{padding-top: 30px !important;padding-bottom: 30px !important;background-color: #e6eaef !important;}&#8221;][vc_custom_heading text=&#8221;<b>Total Blocking Time<\/b>&#8221; font_container=&#8221;tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221; css=&#8221;.vc_custom_1636753361726{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221;][\/vc_column][\/vc_row][vc_row margin_top=&#8221;40&#8243; margin_bottom=&#8221;30px&#8221; css=&#8221;.vc_custom_1636409410012{margin-bottom: 30px !important;}&#8221;][vc_column][vc_custom_heading text=&#8221;What is Total Blocking Time?&#8221; font_container=&#8221;tag:h2|font_size:35|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"font-size: 16px;\">Total Blocking Time, or TBT, is one of the six metrics that make up the Performance section within a Lighthouse report. Total Blocking Time is the total amount of time, in milliseconds, that your page was unable to be interacted with by the user. Specifically, it considers all the long tasks between the First Contentful Paint and Time to Interactive. Long tasks are any JavaScript code that blocks any main thread from happening, thereby causing the interface to pause during the page load process. Where Time to Interactive tells you how quickly your page becomes fully interactive to a user, Total Blocking Time tells you what JavaScript tasks are taking the longest to execute.<\/p>\n<p>[\/vc_column_text][vc_custom_heading text=&#8221;How Total Blocking Time is Calculated&#8221; font_container=&#8221;tag:h3|font_size:30|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"font-size: 16px;\">In terms of the Total Blocking Time, any tasks that take longer than 50 milliseconds are defined as a long task. The amount of time after that is the blocking time, so for example, if a long task takes 60 milliseconds, the blocking portion would be 10 milliseconds. And like some of the previous metrics we have discussed, like the Speed Index and Tim to Interactive, the Lighthouse score represents how your pages compare to other websites when loading on mobile devices. On the Lighthouse report you will see a color-coded representation of your score. The ideal Total Blocking Time score should be under 200 milliseconds and will show up as green. Any score between 200 and 600 milliseconds (just over a half second) is considered moderately fast and will be color-coded as orange. Any Total Blocking Time score over 600 milliseconds will be color-coded red.<\/p>\n<p>[\/vc_column_text][vc_custom_heading text=&#8221;How to Reduce Total Blocking Time&#8221; font_container=&#8221;tag:h2|font_size:30|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"font-size: 16px;\">If the Total Blocking Time audit comes up red during your Lighthouse test, you will want to pay special attention to the recommendations. Unlike some of the other Performance metrics we have discussed, which may account for 10 to 20 percent of the Lighthouse score, Total Blocking Time accounts for 30 percent of the overall Lighthouse performance score. This is due to primarily to the fact that JavaScript, for all its great benefits, can also cause the most headaches to web developers, as it is the major factor in determining how you pages load and one of the most common barriers to optimizing web page performance. Some of the same optimizations for reducing the Total Blocking Time we have already discussed in previous sections, like reducing main-thread work, cleaning up JavaScript and any third-party code, and minifying CSS and JavaScript. The tradeoffs of developing an eye-catching and interactive web page, and a web page that loads quickly, should be considered carefully with the user experience in mind.<\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row margin_top=&#8221;60&#8243; margin_bottom=&#8221;0&#8243; css=&#8221;.vc_custom_1636595147911{margin-bottom: 15px !important;}&#8221;][vc_column width=&#8221;1\/3&#8243; css=&#8221;.vc_custom_1636595227743{padding-top: 60px !important;padding-bottom: 60px !important;padding-left: 10px !important;background-color: #f6f6f6 !important;}&#8221;][vc_single_image image=&#8221;17233&#8243; alignment=&#8221;center&#8221; style=&#8221;vc_box_rounded&#8221;][vc_custom_heading text=&#8221;<b>Lighthouse<\/b>&#8221; font_container=&#8221;tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\">Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.<\/p>\n<p>[\/vc_column_text][vc_btn title=&#8221;Learn More&#8221; style=&#8221;flat&#8221; color=&#8221;primary&#8221; align=&#8221;center&#8221; i_icon_fontawesome=&#8221;fas fa-location-arrow&#8221; add_icon=&#8221;true&#8221; link=&#8221;url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Flighthouse%2F&#8221;][\/vc_column][vc_column width=&#8221;1\/3&#8243; css=&#8221;.vc_custom_1636595173585{padding-top: 60px !important;padding-bottom: 60px !important;background-color: #f6f6f6 !important;}&#8221;][vc_single_image image=&#8221;17284&#8243; alignment=&#8221;center&#8221; style=&#8221;vc_box_rounded&#8221;][vc_custom_heading text=&#8221;<b>PageSpeed Terms<\/b>&#8221; font_container=&#8221;tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\">PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.<\/p>\n<p>[\/vc_column_text][vc_btn title=&#8221;Learn More&#8221; style=&#8221;flat&#8221; color=&#8221;primary&#8221; align=&#8221;center&#8221; i_icon_fontawesome=&#8221;fas fa-location-arrow&#8221; add_icon=&#8221;true&#8221; link=&#8221;url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Fpagespeed%2F&#8221;][\/vc_column][vc_column width=&#8221;1\/3&#8243; css=&#8221;.vc_custom_1636595196399{padding-top: 60px !important;padding-right: 10px !important;padding-bottom: 60px !important;background-color: #f6f6f6 !important;}&#8221;][vc_single_image image=&#8221;17281&#8243; alignment=&#8221;center&#8221; style=&#8221;vc_box_rounded&#8221;][vc_custom_heading text=&#8221;<b>YSlow<\/b>&#8221; font_container=&#8221;tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\">YSlow is an open-source website analysis tool that can be used to identify web page performance issues. Learn more about the YSlow to enhance your web pages and the user experience.<\/p>\n<p>[\/vc_column_text][vc_btn title=&#8221;Learn More&#8221; style=&#8221;flat&#8221; color=&#8221;primary&#8221; align=&#8221;center&#8221; i_icon_fontawesome=&#8221;fas fa-location-arrow&#8221; add_icon=&#8221;true&#8221; link=&#8221;url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Fyslow%2F&#8221;][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; gap=&#8221;25&#8243; equal_height=&#8221;yes&#8221; content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1636408663624{padding-top: 100px !important;padding-bottom: 100px !important;background-image: url(https:\/\/www.dotcom-tools.com\/blog\/wp-content\/uploads\/2015\/09\/hero-section-with-description-3320.jpg?id=15799) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}&#8221;][vc_column css=&#8221;.vc_custom_1636409653940{padding-top: 30px !important;padding-bottom: 30px !important;background-color: #e6eaef !important;}&#8221;][vc_custom_heading text=&#8221;Total Blocking Time&#8221; font_container=&#8221;tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221; css=&#8221;.vc_custom_1636753361726{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221;][\/vc_column][\/vc_row][vc_row margin_top=&#8221;40&#8243; margin_bottom=&#8221;30px&#8221; css=&#8221;.vc_custom_1636409410012{margin-bottom: 30px !important;}&#8221;][vc_column][vc_custom_heading text=&#8221;What is Total Blocking Time?&#8221; font_container=&#8221;tag:h2|font_size:35|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text] Total Blocking Time, or TBT, is one of&hellip;<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":17260,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v17.6 (Yoast SEO v19.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>Lighthouse Optimizations - Total Blocking Time | Dotcom-Monitor Tools Blog<\/title>\r\n<meta name=\"description\" content=\"Learn how the Total Blocking Time is calculated within Lighthouse. Dotcom-Tools can help identify factors to reduce your TBT metric today!\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/total-blocking-time\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Lighthouse Optimizations - Total Blocking Time\" \/>\r\n<meta property=\"og:description\" content=\"Learn how the Total Blocking Time is calculated within Lighthouse. Dotcom-Tools can help identify factors to reduce your TBT metric today!\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/total-blocking-time\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Dotcom-Monitor Tools Blog\" \/>\r\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/dotcommonitor\" \/>\r\n<meta name=\"twitter:card\" content=\"summary\" \/>\r\n<meta name=\"twitter:site\" content=\"@dotcom_monitor\" \/>\r\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/\",\"name\":\"Dotcom-Monitor Tools Blog\",\"description\":\"Let&#039;s Make the Web a Faster Place.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dotcom-tools.com\/web-performance\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/total-blocking-time\/#webpage\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/total-blocking-time\/\",\"name\":\"Lighthouse Optimizations - Total Blocking Time | Dotcom-Monitor Tools Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\"},\"datePublished\":\"2021-11-12T21:44:38+00:00\",\"dateModified\":\"2021-11-12T21:44:38+00:00\",\"description\":\"Learn how the Total Blocking Time is calculated within Lighthouse. Dotcom-Tools can help identify factors to reduce your TBT metric today!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/total-blocking-time\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/total-blocking-time\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/total-blocking-time\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.dotcom-tools.com\/web-performance\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lighthouse Optimizations\",\"item\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lighthouse Optimizations &#8211; Total Blocking Time\"}]}]}<\/script>\r\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Lighthouse Optimizations - Total Blocking Time | Dotcom-Monitor Tools Blog","description":"Learn how the Total Blocking Time is calculated within Lighthouse. Dotcom-Tools can help identify factors to reduce your TBT metric today!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/total-blocking-time\/","og_locale":"en_US","og_type":"article","og_title":"Lighthouse Optimizations - Total Blocking Time","og_description":"Learn how the Total Blocking Time is calculated within Lighthouse. Dotcom-Tools can help identify factors to reduce your TBT metric today!","og_url":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/total-blocking-time\/","og_site_name":"Dotcom-Monitor Tools Blog","article_publisher":"https:\/\/www.facebook.com\/dotcommonitor","twitter_card":"summary","twitter_site":"@dotcom_monitor","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website","url":"https:\/\/www.dotcom-tools.com\/web-performance\/","name":"Dotcom-Monitor Tools Blog","description":"Let&#039;s Make the Web a Faster Place.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dotcom-tools.com\/web-performance\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/total-blocking-time\/#webpage","url":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/total-blocking-time\/","name":"Lighthouse Optimizations - Total Blocking Time | Dotcom-Monitor Tools Blog","isPartOf":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website"},"datePublished":"2021-11-12T21:44:38+00:00","dateModified":"2021-11-12T21:44:38+00:00","description":"Learn how the Total Blocking Time is calculated within Lighthouse. Dotcom-Tools can help identify factors to reduce your TBT metric today!","breadcrumb":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/total-blocking-time\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/total-blocking-time\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/total-blocking-time\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dotcom-tools.com\/web-performance\/"},{"@type":"ListItem","position":2,"name":"Lighthouse Optimizations","item":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/"},{"@type":"ListItem","position":3,"name":"Lighthouse Optimizations &#8211; Total Blocking Time"}]}]}},"_links":{"self":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17547"}],"collection":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/comments?post=17547"}],"version-history":[{"count":2,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17547\/revisions"}],"predecessor-version":[{"id":17549,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17547\/revisions\/17549"}],"up":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17260"}],"wp:attachment":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/media?parent=17547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}