{"id":10493,"date":"2020-12-29T15:14:47","date_gmt":"2020-12-29T13:14:47","guid":{"rendered":"https:\/\/developers.elementor.com\/?p=10493"},"modified":"2024-02-26T10:21:59","modified_gmt":"2024-02-26T08:21:59","slug":"experiment-optimized-asset-loading","status":"publish","type":"post","link":"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/","title":{"rendered":"New Experiment: Optimized Asset Loading Mode"},"content":{"rendered":"\n<p>In the upcoming Elementor v3.1.0, we created a new \u201cImproved Asset Loading\u201d mode, which reduces the amount of JS code loaded on the page by default. When activated, parts of the infrastructure code will be loaded asynchronously, only when needed.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h3 class=\"wp-block-heading\">Which Functionalities Already Support the New Improved Asset Loading Mode?<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">1. Widget JS Handlers<\/h4>\n\n\n\n<p>Up to Elementor v3.1.0, all <a href=\"https:\/\/developers.elementor.com\/creating-a-new-widget\/adding-javascript-to-elementor-widgets\/\">widget handlers<\/a> were loaded to every page by default, regardless of whether they are actually used on the page.<\/p>\n\n\n\n<p>Starting in Elementor v3.1.0, when the \u201cImproved Asset Loading\u201d mode is active, each widget will dynamically load its handler, only when being used on the page.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">How Does It Affect Usage of Widget Handlers?<\/h5>\n\n\n\n<p>Up to Elementor v3.1.0, when you wanted to extend a certain widget\u2019s JS functionality, you were able to get the widget\u2019s handler by calling the following method:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>elementorFrontend.elementsHandler.getHandlers( 'accordion.default' );<\/code><\/pre>\n\n\n\n<p>It was also possible to get the JS handlers for all JS-enhanced widgets at once, as one object, by not passing any value to the function.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>elementorFrontend.elementsHandler.getHandlers();<\/code><\/pre>\n\n\n\n<p>Starting Elementor v3.1.0, The method name was changed to <code>getHandler()<\/code>, and when the \u201cImproved Asset Loading\u201d mode is active, calling the method will return a \u201c<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\" target=\"_blank\" rel=\"noreferrer noopener\">Promise<\/a>\u201d (instead of the handler itself); once the \u201cPromise\u201d is fulfilled, the widget handler will be available as the function argument:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>elementorFrontend.elementsHandler.getHandler( 'accordion.default' )\n\t.then( ( handler ) =&gt; {\n\t\tconsole.log( 'The Requested Handler: ', handler )\n\t} );<\/code><\/pre>\n\n\n\n<p>* <strong>IMPORTANT NOTE<\/strong>: The old method name and its behavior are now deprecated. Within the next few releases, the old method will be removed entirely, and there will be no option to get all handlers at once as one object. Therefore, you will have to use the new method when calling a widget&#8217;s JS handler.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. Swiper JS Library<\/h4>\n\n\n\n<p>Starting in Elementor v3.1.0, when the \u201cImproved Asset Loading\u201d mode is active, the Swiper JS library will only be loaded when the page includes at least one element utilizing the Swiper library.<\/p>\n\n\n\n<p>For example: Section\/Column Background Slideshow, or one of the Carousel Widgets (Image Carousel, Testimonial Carousel, etc.).<\/p>\n\n\n\n<p>Starting v3.1.0, we\u2019ve changed the implementation of creating a new swiper instance by changing the \u2018swiper\u2019 utility (available in the global scope at <code>elementorFrontend.utils.swiper<\/code>). Initializing Swiper this way now returns a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\" target=\"_blank\" rel=\"noreferrer noopener\">Promise<\/a> instead of the \u2018Swiper\u2019 global variable provided by the library.<\/p>\n\n\n\n<p>Therefore, starting in v3.1.0, in order to support the new dynamic assets loading feature, the creation of new Swiper instances has to be done using the <code>elementorFrontend.utils.swiper<\/code> utility, when it returns the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\" target=\"_blank\" rel=\"noreferrer noopener\">Promise<\/a>.<\/p>\n\n\n\n<p>For Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const asyncSwiper = elementorFrontend.utils.swiper;\n \nnew asyncSwiper( swiperElement, swiperConfig ).then( ( newSwiperInstance ) =&gt; {\n  console.log( 'New Swiper instance is ready: ', newSwiperInstance );\n \n  mySwiper = newSwiperInstance;\n} );<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Backward Compatibility For External Plugins Developers<\/h3>\n\n\n\n<p>In case that your plugin is dependent on the Swiper JS library, you will now have to make sure that the library is available before using it since it will not be loaded by default.<\/p>\n\n\n\n<p>It also needs to be considered that there might still be users who hadn\u2019t made the upgrade to v3.1.0 yet, in which the Swiper utility does not return a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\" target=\"_blank\" rel=\"noreferrer noopener\">Promise<\/a>. Therefore we need to consider both scenarios:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>The user uses an older version prior to v3.1.0, and the <code>elementorFrontend.utils.swiper<\/code> utility does not return a Promise.<\/li><li>The user uses v3.1.0 and up, in which the <code>elementorFrontend.utils.swiper<\/code> utility returns a Promise.<\/li><\/ol>\n\n\n\n<p>Once the Swiper library is available, a global variable called \u2018Swiper\u2019 will exist in the window scope. It is necessary to check if this variable exists; if it does, use it. <\/p>\n\n\n\n<p>If the Swiper global object does not exist, we\u2019ll use a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\" target=\"_blank\" rel=\"noreferrer noopener\">Promise<\/a>, which will create the new Swiper instance automatically once it\u2019s fulfilled.<\/p>\n\n\n\n<p><strong>Code snippet for creating a new swiper instance in a widget handler that supports v3.1.0 and up with backward compatibility:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if ( 'undefined' === typeof Swiper ) {\n  const asyncSwiper = elementorFrontend.utils.swiper;\n \n  new asyncSwiper( swiperElement, swiperConfig ).then( ( newSwiperInstance ) =&gt; {\n    console.log( 'New Swiper instance is ready: ', newSwiperInstance );\n \n    mySwiper = newSwiperInstance;\n  } );\n} else {\n  console.log( 'Swiper global variable is ready, create a new instance: ', Swiper );\n \n  mySwiper = new Swiper( swiperElement, swiperConfig );\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Page Assets Reduction<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>v3.1.0 Optimized Mode<strong> Disabled<\/strong><\/td><td>v3.1.0 Optimized Mode<strong> Enabled<\/strong><\/td><\/tr><tr><td>Assets File Size Reduced by <strong>up to 6KB<\/strong><\/td><td>Assets File Size Reduced by <strong>up to 177KB&nbsp;<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Starting Elementor v3.1.0, the \u201cImproved Asset Loading\u201d mode will be available, although it will not be active by default. Still, a minor improvement will occur even when this new setting is disabled, and the page assets size will be slightly reduced (up to 6KB). Once the \u201cImproved Asset Loading\u201d mode is enabled, the total size of Javascript assets loaded on each Elementor page can be reduced by up to 177KB compared to the same assets being loaded on a version prior to 3.1.0.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why did we make this change?<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Elementor views performance improvements as one of our top priorities, and we continuously work hard on ways to make Elementor sites faster and more performant.<\/li><li>We are now providing our users with the option to load less code by default, which translates to significantly faster page-load times.<\/li><li>This change, in addition to providing a performance improvement in itself, also includes infrastructure to be used towards more code reduction in the future.<\/li><\/ul>\n\n\n\n<p>This is another substantial step in our roadmap of performance improvements. Many more improvements are currently under development and will be gradually released.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Enable The Improved Asset Loading JS Mode<\/h3>\n\n\n\n<p>In the admin panel, go to Elementor \u2192 Tools \u2192 Experiments \u2192 Improved Asset Loading.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the upcoming Elementor v3.1.0, we created a new \u201cImproved Asset Loading\u201d mode, which reduces the amount of JS code loaded on the page by default. When activated, parts of the infrastructure code will be loaded asynchronously, only when needed.<\/p>\n","protected":false},"author":533350,"featured_media":14447,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[22],"marketing_persona":[],"marketing_intent":[],"class_list":["post-10493","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-performance","tag-elementor-3-1"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>New Experiment: Optimized Asset Loading Mode - Developers<\/title>\n<meta name=\"description\" content=\"In the upcoming Elementor v3.1.0, we created a new \u201cImproved Asset Loading\u201d mode, which reduces the amount of JS code loaded on the page by default. When\" \/>\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\/experiment-optimized-asset-loading\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"New Experiment: Optimized Asset Loading Mode - Developers\" \/>\n<meta property=\"og:description\" content=\"In the upcoming Elementor v3.1.0, we created a new \u201cImproved Asset Loading\u201d mode, which reduces the amount of JS code loaded on the page by default. When\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/\" \/>\n<meta property=\"og:site_name\" content=\"Developers\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-29T13:14:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-26T08:21:59+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=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"New Experiment: Optimized Asset Loading Mode\",\"datePublished\":\"2020-12-29T13:14:47+00:00\",\"dateModified\":\"2024-02-26T08:21:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/\"},\"wordCount\":816,\"commentCount\":20,\"image\":{\"@id\":\"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/developers.elementor.com\/wp-content\/uploads\/2021\/12\/cover-1.png\",\"keywords\":[\"Elementor 3.1\"],\"articleSection\":[\"Performance\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/\",\"url\":\"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/\",\"name\":\"New Experiment: Optimized Asset Loading Mode - Developers\",\"isPartOf\":{\"@id\":\"https:\/\/developers.elementor.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/developers.elementor.com\/wp-content\/uploads\/2021\/12\/cover-1.png\",\"datePublished\":\"2020-12-29T13:14:47+00:00\",\"dateModified\":\"2024-02-26T08:21:59+00:00\",\"author\":{\"@id\":\"\"},\"description\":\"In the upcoming Elementor v3.1.0, we created a new \u201cImproved Asset Loading\u201d mode, which reduces the amount of JS code loaded on the page by default. When\",\"breadcrumb\":{\"@id\":\"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/#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\/experiment-optimized-asset-loading\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Developers\",\"item\":\"https:\/\/developers.elementor.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New Experiment: Optimized Asset Loading Mode\"}]},{\"@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\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"New Experiment: Optimized Asset Loading Mode - Developers","description":"In the upcoming Elementor v3.1.0, we created a new \u201cImproved Asset Loading\u201d mode, which reduces the amount of JS code loaded on the page by default. When","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\/experiment-optimized-asset-loading\/","og_locale":"en_US","og_type":"article","og_title":"New Experiment: Optimized Asset Loading Mode - Developers","og_description":"In the upcoming Elementor v3.1.0, we created a new \u201cImproved Asset Loading\u201d mode, which reduces the amount of JS code loaded on the page by default. When","og_url":"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/","og_site_name":"Developers","article_published_time":"2020-12-29T13:14:47+00:00","article_modified_time":"2024-02-26T08:21:59+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/developers.elementor.com\/wp-content\/uploads\/2021\/12\/cover-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/#article","isPartOf":{"@id":"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/"},"author":{"name":"","@id":""},"headline":"New Experiment: Optimized Asset Loading Mode","datePublished":"2020-12-29T13:14:47+00:00","dateModified":"2024-02-26T08:21:59+00:00","mainEntityOfPage":{"@id":"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/"},"wordCount":816,"commentCount":20,"image":{"@id":"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/#primaryimage"},"thumbnailUrl":"https:\/\/developers.elementor.com\/wp-content\/uploads\/2021\/12\/cover-1.png","keywords":["Elementor 3.1"],"articleSection":["Performance"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/","url":"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/","name":"New Experiment: Optimized Asset Loading Mode - Developers","isPartOf":{"@id":"https:\/\/developers.elementor.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/#primaryimage"},"image":{"@id":"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/#primaryimage"},"thumbnailUrl":"https:\/\/developers.elementor.com\/wp-content\/uploads\/2021\/12\/cover-1.png","datePublished":"2020-12-29T13:14:47+00:00","dateModified":"2024-02-26T08:21:59+00:00","author":{"@id":""},"description":"In the upcoming Elementor v3.1.0, we created a new \u201cImproved Asset Loading\u201d mode, which reduces the amount of JS code loaded on the page by default. When","breadcrumb":{"@id":"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/developers.elementor.com\/experiment-optimized-asset-loading\/#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\/experiment-optimized-asset-loading\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Developers","item":"https:\/\/developers.elementor.com\/"},{"@type":"ListItem","position":2,"name":"New Experiment: Optimized Asset Loading Mode"}]},{"@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":""}]}},"_links":{"self":[{"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/posts\/10493","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\/533350"}],"replies":[{"embeddable":true,"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/comments?post=10493"}],"version-history":[{"count":0,"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/posts\/10493\/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=10493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/categories?post=10493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/tags?post=10493"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/marketing_persona?post=10493"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/developers.elementor.com\/wp-json\/wp\/v2\/marketing_intent?post=10493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}