Elementor 3.3 Introduces Full Website Kits, Performance Improvements
With the new release of the popular WordPress page builder comes greater convenience in the way templates are packaged for import and export. Elementor also continues to improve page load by slimming down bulky assets and loading them more efficiently. Read on for the details.
Full Website Kits
With the release of Elementor 3.3 we now have the ability to import and export entire websites. That includes layouts, content, site settings, and templates. Every component of your website gets zipped up when you export your site as a Full Website Kit.
This technology existed prior to Elementor 3.3, in the form of template kits, which are a super convenient way to stand up a site when you don’t need to reinvent the wheel. But the Full Website Kit bundles everything, including WordPress pages and posts, WooCommerce product pages, and custom post types.
Why would you want to do this? Setting up the basics can take a lot of time, especially when you’re not familiar with a theme or Elementor kit. If we need to create a very similar website for a client who is expanding into a new region or offering a new product line, we don’t want to waste time tweaking theme settings, configuring WooCommerce, etc. With the ability to export a bespoke website into a zip file and import it into a new WordPress installation, we can save a ton of time.
From our perspective as a search engine marketing firm, this allows us to spend more time, energy, and resources on crafting SEO-friendly content, analyzing and optimizing our Google Ads campaigns, which is our bread and butter.
Performance Improvements
Photo credit: Paul Coster | Flickr
Elementor gives you the ability to customize every aspect of your site, create flashy animations, and select from a dizzying array of web fonts. But that flexibility and ease of use can come at the expense of page speed. If you’re not careful your Elementor site could be creating CSS bloat and loading a bunch of web fonts, icons, and JS libraries that aren’t needed on every page. That’s going to slow your page load time, an important factor for ranking in Google search.
Fortunately, the WordPress community offers quite a few plugins to boost page speed. Plugins like Asset Cleanup and WP Asset Manager allow you to choose which CSS and JS assets to load on a page-by-page basis, among other optimization techniques. But this can be cumbersome if you have a really big site. That’s why we’re happy to see that Elementor is continuing to improve the way assets are loaded (and not loaded when not needed) with this new release.
Here’s a quick rundown on the performance improvements (check out Elementor’s Developers blog for more extensive notes).
Conditional JS Libraries Loading – JS files handling “sticky” features now only load on pages that use them, a 7kb redution on all other pages
Widgets CSS – pages only load the CSS of the widgets being used on that page. This improves the render-blocking score (site visitors don’t have to wait for assets to load before using the site) as the huge frontend.css file is slimmed down.
Inline Widgets CSS – if a widget’s CSS is less than 8k it will be loaded inline rather than stored in an external file. This cuts down on HTTP requests that can slow down a page’s load time.
Animation CSS Library – CSS animation libraries are only loaded on pages that use animations. This removes 19KB from pages that don’t use animations.
Elementor Icons – Elementor icons require a font file and a CSS file to load properly. It turns out most of the bulk of the CSS file came from Elementor’s editor itself. So they created a frontend CSS library that is 6% the size of the used in the editor, a savings of 16k.
Display Parameter for Google Fonts – the new display parameters for Google fonts allows you to load fallback fonts, so site visitors don’t see a blank white page before Google Fonts have loaded
Color Sampler
Grabbing the hex code of a color can be a pain in the ass when you’re toggling between browsers and devices. We sometimes resort to grabbing a screenshot and sampling the colors in Photoshop, not the most elegant solution.
Elementor 3.3 makes it easier to accomplish this common task by allowing you to grab the primary colors from any image on your page, or any other element with defined colors. This could be cool for folks who like to build color schemes around photos (a clever visual design strategy).
Upgrading Elementor Safely
Be sure to back up your WordPress site when upgrading to the latest version of Elementor. You may see small discrepancies when you upgrade. If possible, upgrade Elementor on a staging site before doing it on the live site.