{"id":10411,"date":"2020-08-25T11:23:56","date_gmt":"2020-08-25T08:23:56","guid":{"rendered":"https:\/\/developers.elementor.com\/?p=10411"},"modified":"2024-02-26T10:22:11","modified_gmt":"2024-02-26T08:22:11","slug":"css-rendering-performance-improvement","status":"publish","type":"post","link":"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/","title":{"rendered":"CSS Rendering Performance Improvement in Elementor 3.0"},"content":{"rendered":"\n<p>Elementor has two ways for rendering website CSS:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Printing it in a <code>&lt;style&gt;<\/code> tag in the DOM<\/li><li>Writing it to a CSS file that will be loaded with the page<\/li><\/ol>\n\n\n\n<p>The CSS written to files, for example, is completely static. It is printed once into a file, and that file is only updated when a change is made to the page&#8217;s content.<\/p>\n\n\n\n<p>But what about dynamic content? Some dynamic content includes its own CSS, such as colors and images (when used as background-image values). Dynamic content, such as custom fields, is disconnected from the page&#8217;s content, and can be changed outside of editing the post or page in Elementor Editor. So what happens when dynamic values include CSS that needs to be printed every single time a page is loaded?<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Up until Elementor 3.0, whenever a page was loaded, Elementor&#8217;s Dynamic Tags module scanned the entire page for any elements that include dynamic content. If dynamic content was found, the module fetched that element&#8217;s dynamic values, wrote the relevant CSS into a <code>&lt;style&gt;<\/code> tag, and injected it into the DOM. This, as described in the <a href=\"https:\/\/developers.elementor.com\/blog\/elementor-3-new-professional-features\/\" target=\"_blank\" rel=\"noreferrer noopener\">elementor.com blog post<\/a>, is an expensive process, costing precious loading time.<\/p>\n\n\n\n<p>In <a href=\"https:\/\/developers.elementor.com\/tag\/elementor-v3-0\/\">Elementor 3.0<\/a>, we changed the way we manage the rendering process of dynamic CSS. On the first time a page is loaded, when the page&#8217;s static CSS is rendered, we create a cache which includes a list of the page&#8217;s elements which have dynamic CSS values. Then, whenever that page is visited, we fetch the list of dynamic elements from the cache, and render them immediately. Instead of having to iterate over all the elements of the page every single time the page loads &#8211; we get those elements from the already-available list of dynamic elements. This saves a lot of run time and makes page load noticeably faster.<\/p>\n\n\n\n<p>Here are some results from tests we ran on <a rel=\"noreferrer noopener\" href=\"http:\/\/blackfire.io\/\" target=\"_blank\">Blackfire<\/a> to examine the difference before and after our optimization:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Page with no dynamic content at all:<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1002\" height=\"674\" src=\"https:\/\/developers.elementor.com\/wp-content\/uploads\/2020\/08\/image.png\" alt=\"\" class=\"wp-image-10412\" srcset=\"https:\/\/developers.elementor.com\/wp-content\/uploads\/2020\/08\/image.png 1002w, https:\/\/developers.elementor.com\/wp-content\/uploads\/2020\/08\/image-300x202.png 300w, https:\/\/developers.elementor.com\/wp-content\/uploads\/2020\/08\/image-768x517.png 768w\" sizes=\"(max-width: 1002px) 100vw, 1002px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><strong>Page with dynamic elements:<\/strong><\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"990\" height=\"662\" src=\"https:\/\/developers.elementor.com\/wp-content\/uploads\/2020\/08\/image-1.png\" alt=\"\" class=\"wp-image-10413\" srcset=\"https:\/\/developers.elementor.com\/wp-content\/uploads\/2020\/08\/image-1.png 990w, https:\/\/developers.elementor.com\/wp-content\/uploads\/2020\/08\/image-1-300x201.png 300w, https:\/\/developers.elementor.com\/wp-content\/uploads\/2020\/08\/image-1-768x514.png 768w\" sizes=\"(max-width: 990px) 100vw, 990px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Elementor has two ways for rendering website CSS:&nbsp; Printing it in a &lt;style&gt; tag in the DOM Writing it to a CSS file that will be loaded with the page The CSS written to files, for example, is completely static. It is printed once into a file, and that file is only updated when a [&hellip;]<\/p>\n","protected":false},"author":2024247,"featured_media":14447,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[20],"marketing_persona":[],"marketing_intent":[],"class_list":["post-10411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-performance","tag-elementor-3-0"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Rendering Performance Improvement in Elementor 3.0 - Developers<\/title>\n<meta name=\"description\" content=\"Elementor has two ways for rendering website CSS:&nbsp; Printing it in a &lt;style&gt; tag in the DOMWriting it to a CSS file that will be loaded with the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Rendering Performance Improvement in Elementor 3.0 - Developers\" \/>\n<meta property=\"og:description\" content=\"Elementor has two ways for rendering website CSS:&nbsp; Printing it in a &lt;style&gt; tag in the DOMWriting it to a CSS file that will be loaded with the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/\" \/>\n<meta property=\"og:site_name\" content=\"Developers\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-25T08:23:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-26T08:22:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/developers.elementor.com\/wp-content\/uploads\/2021\/12\/cover-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Udi Dollberg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Udi Dollberg\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/\"},\"author\":{\"name\":\"Udi Dollberg\",\"@id\":\"https:\/\/developers.elementor.com\/#\/schema\/person\/b17a4e43cbb8aa350eb9ad2684901a5b\"},\"headline\":\"CSS Rendering Performance Improvement in Elementor 3.0\",\"datePublished\":\"2020-08-25T08:23:56+00:00\",\"dateModified\":\"2024-02-26T08:22:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/\"},\"wordCount\":346,\"commentCount\":3,\"image\":{\"@id\":\"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/developers.elementor.com\/wp-content\/uploads\/2021\/12\/cover-1.png\",\"keywords\":[\"Elementor 3.0\"],\"articleSection\":[\"Performance\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/\",\"url\":\"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/\",\"name\":\"CSS Rendering Performance Improvement in Elementor 3.0 - Developers\",\"isPartOf\":{\"@id\":\"https:\/\/developers.elementor.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/developers.elementor.com\/wp-content\/uploads\/2021\/12\/cover-1.png\",\"datePublished\":\"2020-08-25T08:23:56+00:00\",\"dateModified\":\"2024-02-26T08:22:11+00:00\",\"author\":{\"@id\":\"https:\/\/developers.elementor.com\/#\/schema\/person\/b17a4e43cbb8aa350eb9ad2684901a5b\"},\"description\":\"Elementor has two ways for rendering website CSS:&nbsp; Printing it in a &lt;style&gt; tag in the DOMWriting it to a CSS file that will be loaded with the\",\"breadcrumb\":{\"@id\":\"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/#primaryimage\",\"url\":\"https:\/\/developers.elementor.com\/wp-content\/uploads\/2021\/12\/cover-1.png\",\"contentUrl\":\"https:\/\/developers.elementor.com\/wp-content\/uploads\/2021\/12\/cover-1.png\",\"width\":1200,\"height\":630,\"caption\":\"Cover image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Developers\",\"item\":\"https:\/\/developers.elementor.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Rendering Performance Improvement in Elementor 3.0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/developers.elementor.com\/#website\",\"url\":\"https:\/\/developers.elementor.com\/\",\"name\":\"Developers\",\"description\":\"Official Elementor Developer Resources\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/developers.elementor.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/developers.elementor.com\/#\/schema\/person\/b17a4e43cbb8aa350eb9ad2684901a5b\",\"name\":\"Udi Dollberg\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/developers.elementor.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/266fe955548f0b4200fdd883c48e33d033b9e7b1d223c4e280f0718b9a765033?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/266fe955548f0b4200fdd883c48e33d033b9e7b1d223c4e280f0718b9a765033?s=96&d=mm&r=g\",\"caption\":\"Udi Dollberg\"},\"description\":\"Udi is a talented developer in Elementor\u2019s Editor team and loves cars, woodworking and classic jazz.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Rendering Performance Improvement in Elementor 3.0 - Developers","description":"Elementor has two ways for rendering website CSS:&nbsp; Printing it in a &lt;style&gt; tag in the DOMWriting it to a CSS file that will be loaded with the","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:\/\/developers.elementor.com\/css-rendering-performance-improvement\/","og_locale":"en_US","og_type":"article","og_title":"CSS Rendering Performance Improvement in Elementor 3.0 - Developers","og_description":"Elementor has two ways for rendering website CSS:&nbsp; Printing it in a &lt;style&gt; tag in the DOMWriting it to a CSS file that will be loaded with the","og_url":"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/","og_site_name":"Developers","article_published_time":"2020-08-25T08:23:56+00:00","article_modified_time":"2024-02-26T08:22:11+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/developers.elementor.com\/wp-content\/uploads\/2021\/12\/cover-1.png","type":"image\/png"}],"author":"Udi Dollberg","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Udi Dollberg","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/#article","isPartOf":{"@id":"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/"},"author":{"name":"Udi Dollberg","@id":"https:\/\/developers.elementor.com\/#\/schema\/person\/b17a4e43cbb8aa350eb9ad2684901a5b"},"headline":"CSS Rendering Performance Improvement in Elementor 3.0","datePublished":"2020-08-25T08:23:56+00:00","dateModified":"2024-02-26T08:22:11+00:00","mainEntityOfPage":{"@id":"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/"},"wordCount":346,"commentCount":3,"image":{"@id":"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/#primaryimage"},"thumbnailUrl":"https:\/\/developers.elementor.com\/wp-content\/uploads\/2021\/12\/cover-1.png","keywords":["Elementor 3.0"],"articleSection":["Performance"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/","url":"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/","name":"CSS Rendering Performance Improvement in Elementor 3.0 - Developers","isPartOf":{"@id":"https:\/\/developers.elementor.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/#primaryimage"},"image":{"@id":"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/#primaryimage"},"thumbnailUrl":"https:\/\/developers.elementor.com\/wp-content\/uploads\/2021\/12\/cover-1.png","datePublished":"2020-08-25T08:23:56+00:00","dateModified":"2024-02-26T08:22:11+00:00","author":{"@id":"https:\/\/developers.elementor.com\/#\/schema\/person\/b17a4e43cbb8aa350eb9ad2684901a5b"},"description":"Elementor has two ways for rendering website CSS:&nbsp; Printing it in a &lt;style&gt; tag in the DOMWriting it to a CSS file that will be loaded with the","breadcrumb":{"@id":"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/#primaryimage","url":"https:\/\/developers.elementor.com\/wp-content\/uploads\/2021\/12\/cover-1.png","contentUrl":"https:\/\/developers.elementor.com\/wp-content\/uploads\/2021\/12\/cover-1.png","width":1200,"height":630,"caption":"Cover image"},{"@type":"BreadcrumbList","@id":"https:\/\/developers.elementor.com\/css-rendering-performance-improvement\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Developers","item":"https:\/\/developers.elementor.com\/"},{"@type":"ListItem","position":2,"name":"CSS Rendering Performance Improvement in Elementor 3.0"}]},{"@type":"WebSite","@id":"https:\/\/developers.elementor.com\/#website","url":"https:\/\/developers.elementor.com\/","name":"Developers","description":"Official Elementor Developer Resources","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/developers.elementor.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/developers.elementor.com\/#\/schema\/person\/b17a4e43cbb8aa350eb9ad2684901a5b","name":"Udi Dollberg","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/developers.elementor.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/266fe955548f0b4200fdd883c48e33d033b9e7b1d223c4e280f0718b9a765033?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/266fe955548f0b4200fdd883c48e33d033b9e7b1d223c4e280f0718b9a765033?s=96&d=mm&r=g","caption":"Udi Dollberg"},"description":"Udi is a talented developer in Elementor\u2019s Editor team and loves cars, woodworking and classic jazz."}]}},"_links":{"self":[{"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/posts\/10411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/users\/2024247"}],"replies":[{"embeddable":true,"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/comments?post=10411"}],"version-history":[{"count":0,"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/posts\/10411\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/media\/14447"}],"wp:attachment":[{"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/media?parent=10411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/categories?post=10411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/tags?post=10411"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/marketing_persona?post=10411"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/marketing_intent?post=10411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}