{"id":17574,"date":"2021-11-13T12:08:17","date_gmt":"2021-11-13T18:08:17","guid":{"rendered":"https:\/\/www.dotcom-tools.com\/web-performance\/?page_id=17574"},"modified":"2021-11-13T12:08:17","modified_gmt":"2021-11-13T18:08:17","slug":"avoid-non-composited-animations","status":"publish","type":"page","link":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-non-composited-animations\/","title":{"rendered":"Lighthouse Optimizations &#8211; How to Avoid Non-composited Animations"},"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>Avoid Non-composited Animations<\/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_1636826641090{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 are Non-composited Animations?&#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;\">Non-composited animation is related to main thread work that we had covered in a previous section. If your page has any animation that can be affected, or triggered, by JavaScript or CSS code, and it causes the browser to go through the rendering process, or rendering pipeline, again, this is referred to as non-composited animation. From a user perspective, this causes all sorts of different issues, like layout shifts and impact on the overall quality of the animation. <\/p>\n<p>[\/vc_column_text][vc_custom_heading text=&#8221;How to Avoid Non-composited animations&#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;\">As we mentioned previously, browsers must go through their own rendering pipeline process to render your web page. Altogether, there are six steps. Each of these steps is dependent on the previous step. The steps are as follows:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul style=\"font-size: 16px;\">\n<li>Download and parse all HTML, CSS, and JavaScript<\/li>\n<li>JavaScript execution<\/li>\n<li>Determine web page styles<\/li>\n<li>Determine the page layout<\/li>\n<li>Paint the element pixels<\/li>\n<li>Composite layers to screen<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p style=\"font-size: 16px;\">The first five steps of the rendering pipeline are part of the main thread work that we referred to earlier. This is where the bulk of the work is done. The last step, composite, is carried out on its own thread. So, the more main-thread work the browser must process, the longer it is going to take to load the page. Secondly, and we talked about cumulative layout shifts (CLS) earlier in this guide, any time the rendering pipeline process has to re-start, the more users will experience page content layout shifts. The best way to avoid non-composited animations is to change the properties that affect composited animations, such as transform and opacity, and to make sure that any CSS elements that affect layout, such as width, height, padding, position, border, etc., are reviewed to ensure that they do not trigger the page re-painting process.<\/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;Avoid Non-composited Animations&#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_1636826641090{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 are Non-composited Animations?&#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] Non-composited animation is related to main thread work that&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 - How to Avoid Non-composited Animations | Dotcom-Monitor Tools Blog<\/title>\r\n<meta name=\"description\" content=\"How do you avoid non-composited animations? What does this Lighthouse recommendation mean? Fix non-composited animations with Dotcom-Tools 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\/avoid-non-composited-animations\/\" \/>\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 - How to Avoid Non-composited Animations\" \/>\r\n<meta property=\"og:description\" content=\"How do you avoid non-composited animations? What does this Lighthouse recommendation mean? Fix non-composited animations with Dotcom-Tools today!\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-non-composited-animations\/\" \/>\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=\"4 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\/avoid-non-composited-animations\/#webpage\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-non-composited-animations\/\",\"name\":\"Lighthouse Optimizations - How to Avoid Non-composited Animations | Dotcom-Monitor Tools Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\"},\"datePublished\":\"2021-11-13T18:08:17+00:00\",\"dateModified\":\"2021-11-13T18:08:17+00:00\",\"description\":\"How do you avoid non-composited animations? What does this Lighthouse recommendation mean? Fix non-composited animations with Dotcom-Tools today!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-non-composited-animations\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-non-composited-animations\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-non-composited-animations\/#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; How to Avoid Non-composited Animations\"}]}]}<\/script>\r\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Lighthouse Optimizations - How to Avoid Non-composited Animations | Dotcom-Monitor Tools Blog","description":"How do you avoid non-composited animations? What does this Lighthouse recommendation mean? Fix non-composited animations with Dotcom-Tools 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\/avoid-non-composited-animations\/","og_locale":"en_US","og_type":"article","og_title":"Lighthouse Optimizations - How to Avoid Non-composited Animations","og_description":"How do you avoid non-composited animations? What does this Lighthouse recommendation mean? Fix non-composited animations with Dotcom-Tools today!","og_url":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-non-composited-animations\/","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":"4 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\/avoid-non-composited-animations\/#webpage","url":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-non-composited-animations\/","name":"Lighthouse Optimizations - How to Avoid Non-composited Animations | Dotcom-Monitor Tools Blog","isPartOf":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website"},"datePublished":"2021-11-13T18:08:17+00:00","dateModified":"2021-11-13T18:08:17+00:00","description":"How do you avoid non-composited animations? What does this Lighthouse recommendation mean? Fix non-composited animations with Dotcom-Tools today!","breadcrumb":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-non-composited-animations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-non-composited-animations\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-non-composited-animations\/#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; How to Avoid Non-composited Animations"}]}]}},"_links":{"self":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17574"}],"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=17574"}],"version-history":[{"count":2,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17574\/revisions"}],"predecessor-version":[{"id":17576,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17574\/revisions\/17576"}],"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=17574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}