ToolKit Test Page

Improving TBT, LCP, and Time to Interactive with Lazy Elements

As of v1.4.2, ToolKit > Booster > CSS now has a new feature called Lazy Elements. Lazy Elements works a lot like Lazy Loading images- it renders the content once it enters the user’s viewport. The main difference is that Lazy Elements works on HTML elements via targeting CSS Selectors that you define! This allows Elementor users the amazing ability to: Drastically reduce Div’s and DOM’s by lazy rendering elements below the fold Significantly Improve Time to Interactive, TBT, and LCP metrics Improve mobile performance Lazy Elements: CSS Selectors In order to help ToolKit lazy render a particular HTML element,

Read More »

Licenses & Keys

Licenses & Keys In ToolKit, there are 2 main areas that involve or use licenses and keys: The My License tab in ToolKit, and the new Syncer framework (allows users to create their own Connection Keys to either share with other users or to use on their other ToolKit sites). My License To insert your ToolKit License key and activate the plugin, go to Elementor > ToolKit > My License. ToolKit users can remotely deactivate ToolKit on their other sites by visiting their Account Portal and remove the site from their license. Syncer Keys There are 4 levels of access

Read More »

Media Optimization with ToolKit

Improve site performance with ToolKit’s powerful suite of media optimization features, including: ✅ Lazy load images and videos✅ Preload critical, “above the fold” images (great for LCP)✅ CSS Helper Class for lazy loading background images✅ Exclude specific images from lazy loading✅ Automatically define image width and height attributes (great for improving CLS!)✅ Automatically optimize Youtube videos and creation of self-hosted video thumbnails Lazy Loading Lazy Loading speeds up your site by loading your media only as they enter the browser viewport. ToolKit offers both Native Browser-based lazy loading, as well as our JS-based method (uses intersectionObserver protocol). Native Browser-Based Lazy

Read More »

Prefetch External Resources with Headstart

Introduced in ToolKit v1.3.11, Booster > Headstart gives ToolKit users the ability to easily preconnect and prefetch external resources. By “Prefetching” an external domain, browsers can begin connecting and downloading a resource faster. This helps improve load and render times and addresses the Lighthouse recommendation “Preconnect to Required Origins“ To use Headstart: 1) Perform a GTMetrix scan or Lighthouse performance audit to easily and quickly identify any external third-party resources that are being loaded on your page. In GTMetrix, take a look at the Waterfall tab, identify any scripts that being downloaded/served from an external domain (aka any domain that

Read More »

Core Web Vitals: Cumulative Layout Shift (CLS)

One of our missions with ToolKit is to help Elementor users build lighter sites. With Google’s increased focus on Core Web Vitals, building lighter, faster digital experiences is more important than ever before. In this guide, we’ll cover one of the three major Core Web Vitals signals: Cumulative Layout Shift (CLS). Let’s get started! This content is for Toolkit members only. Please log in to your ToolKit account to access this content.

Read More »

Dashing: Customize the WP Login and Dashboard pages

Dashing allows users to easily customize the WP Login page as well as assign an Elementor template as a WP Admin Dashboard widget. This is great for creating custom client dashboards and welcome messages, and branding the WP Login page with your own logo and background. Custom WP Admin Dashboard Widget Update your WP dashboard by going to ToolKit > Theme Manager > Dashing and selecting which Elementor saved template to display. Customize the WP Login Page Introduced in v1.3, Dashing now includes the ability to customize and secure your WP Login page. Update Login URL: Enhance site security by

Read More »

ToolKit v1.3 Release Notes

We’re excited to announce that ToolKit v1.3 is now available! This big update includes: the ability to dequeue unneeded CSS & JS scripts via (Script Ninja), new WP Login page customization options in Dashing, performance improvements general bug fixes and code improvements View the full changelog here. Reduce Bloat with Script Ninja Script Ninja empowers Elementor users to quickly dequeue unneeded CSS & JS scripts on a per page/post level- right within ToolKit. Simply select a page and click “Display Scripts List” to view all of the CSS and JS files being loaded. Dequeue CSS files that are not needed

Read More »

Reducing Bloat with Script Ninja

As of v1.3, ToolKit users can now dequeue unneeded CSS and JS scripts on a per page/post level using the new Script Ninja feature in Booster. To use Script Ninja: 1) Go to ToolKit > Booster > Script Ninja 2) Select a page and click “Display Scripts List” to view all of the CSS and JS files being loaded on that particular page 3) Dequeue any CSS and JS files that you are not using on that page. This step may require careful testing as some plugins may require certain scripts to function. Helpful Tips: 1) After dequeuing or updating

Read More »
Performance
ToolKit

Cloudflare Guide for Elementor Users (2020-2021)

“Over 25 million Internet properties are on Cloudflare, and their network is rapidly growing by tens of thousands every day. Cloudflare powers Internet requests for approximately 16% of the Fortune 1,000 and serves 20 million HTTP requests per second on average.” A benefit to using a CDN like Cloudflare is the ability to cache and serve your site’s content to visitors through their global network of servers. With the proper Caching Rules, Cloudflare can also serve your site’s HTML just like a caching plugin. Not to mention, all of this processing is no longer handled by your site’s server- but

Read More »

Troubleshooting License Activation Issues

This guide will help you troubleshoot common issues that may be preventing you from activating ToolKit on your site. Your license key expired on <date>. Please renew now. This error displays if you had an annual license key which has expired. To fix, you can log into your ToolKit account and renew your license key. Invalid License Key This error displays if an invalid license key was entered. This can happen accidentally for a number of reasons including copy/pasting the license key incorrectly (maybe with a space at the end, or missing a character). Please make sure you have entered

Read More »

Introducing Toolkit v1.2

Quite possibly one of our biggest updates yet, v1.2 brings a radical overhaul to a few areas of ToolKit like Booster, Syncer, and Theme Manager. v1.2 is scheduled for release on December 1, 2020. As many of you know, on November 16th, 2020, GTMetrix updated their scoring system to the Google Lighthouse framework. For many users, the new framework may seem overwhelming, but check out this guide to learn everything you need to know about the new scoring rubric. Months ago, we shared an announcement from GTMetrix which discussed the big changes on the way- and in anticipation of that,

Read More »

Font Optimization

ToolKit offers users the ability to Optimize Google Fonts, Enable Fallback Fonts, and Preload Fonts. Optimize Google Fonts Enabling this will locally host and combine your Google Fonts when possible. This can help solve common recommendations like “Add Expires Headers” as well as others for Google fonts. Locally hosting Google Fonts will work if they’re referenced directly in the HTML. Google Ads and some 3rd party scripts may load Google Fonts asynchronously. If Google Fonts are loaded asynchronously, they may not be included in this optimization. When viewing your waterfall report, click on “Fonts” or search for “fonts.googleapis.com”. Fonts that show

Read More »

Delay Javascript

Improve performance by delaying the loading of JavaScript until there is a user interaction (e.g. mouse movement, scrolling, pressing a key, etc). This is an advanced feature so please test with care! ToolKit offers users the ability to Delay JS on the ‘Homepage Only’ or ‘Globally’. This can be helpful when optimizing JS files that are not needed on the home page- but may be needed on other pages. Adding New JS Scripts to Delay To add new JS scripts to delay, simply enter the file URL or a unique keyword that identifies the script. This keyword can be any

Read More »

Remove Render Blocking Resources with Defer JS

Render Blocking Resources refers to the resources your browser needs to download before it is able to begin rendering the requested site. For the most part, these files are CSS and JS files. For JavaScript, one option is to add the ‘defer‘ attribute to the script. The ‘defer’ attribute tells the visitor’s browser to execute the script once the page’s HTML has been completely parsed. This particular feature should be tested carefully because some plugins or themes may have features that require certain JS files. We’ve included a couple of features to help maximize compatibility as well as an area

Read More »

Content Delivery Networks (CDN)

What is a CDN? Depending on where your hosting server (origin server) is located, if a website visitor from halfway across the world visits your site, it will take longer to deliver your site’s content to them due to geographical distance. A Content Delivery Network is a globally distributed network of servers designed for serving content quickly. Once you “push” your site’s files to your CDN, the content will be cached, distributed globally, and delivered to your website visitor using the server closest to them geographically. How Does a CDN Help Performance? By offloading your site’s static files (CSS, JS,

Read More »

Cache Manager

As of v1.2, ToolKit now has it’s own caching functionality built into Booster. When enabled, ToolKit will create and serve a cached version of your site’s pages which can help speed up load times for visitors. If you are using any other layer of caching such as Cloudflare (or any CDN), server level caching (Redis, FastCGI, etc), or another caching plugin, we recommend keeping this function turned off. Automatic Cache Clearing ToolKit automatically detects available custom post type and will automatically clear everything in the /cache folder when any changes to the select post type are detected. To clear cache

Read More »

Elementor Tutorials

Elementor has an amazing library of in-depth video tutorials on Youtube. Click here to visit their channel and begin learning more about what Elementor can do!

Read More »