Top Viewed


Related articles

Rate Your Experience

What features does Leap have?

Modified on: Thu, 25 May, 2023

Leap streamlines your website speed optimization with one single tool. Ezoic’s Leap does the work of multiple plugins and includes the following 18 features (with more being added!):


CSS

image


  1. Critical CSS: Renders Critical CSS into the head tag and lazy loads the stylesheets. This prevents the site from "jumping" when CSS loads slowly. In other words, Critical CSS helps your site load better by not loading all styles at once and improves speed by putting the important CSS inline. Within the critical CSS function, you can also click the link "Block or Highlight Specific Files (in Advanced Settings)", which will allow you to input specific URLs that should either be processed or skipped by the Critical CSS function:

  2. image
  3. Remove Unused CSS: Removes any CSS that is not used by the current page and serves a minified version of the CSS that is unused resulting in smaller page sizes and faster loading.

    imageimage
  4. Remove Unused CSS by Page: Removes any CSS classes that are not used on each individual URL, and serves a minified version of the CSS that is used on that URL. (Remove Unused CSS function must be enabled to also use this function).
    WARNING: While this should increase your site speed score, this may cause your site to be slower for actual users if most pages use the same set of CSS. This happens because the user has to download a new file for each page that they visit. 

    image



  5. Optimize Fonts: Fonts declared in the inline stylesheet are optimized to prevent flashes as fonts are loaded, and multiple font API calls are wrapped into one request.

    image
  6. Preload Fonts: Preload fonts found in external CSS files so that they are ready to be displayed more quickly without blocking page rendering. You should consider using this setting if Pagespeed Insights suggests to 'Preload Key Requests' with font files as the resources to be preloaded.

    image

 

Images

image


  1. Lazy Loading of Images: this helps your site load faster by only loading images when the user will actually see them. The images lower on the page load as the user scrolls down. The only images that will load immediately are those shown on the first screen, not the images lower on the page. (This feature is required to be turned on when using Next-Gen Formats and Resize Images features).
    image
  2.  Next-Gen Formats: In supported browsers, this feature will serve images in WebP format - a new image format designed to have a smaller file size.
    image
  3.  Resize Images: Automatically resizes images on your page based on the user's screen size to minimize transfer times while maintaining image quality.
    image
  4.  Preload Background Images: Add preload tags for background images defined in inline stylesheets. Background images are not loaded until all stylesheets have been processed, so this feature should speed up the loading of large images defined as backgrounds.
    image
  5. Set Explicit Width and Height: Sets the Width and Height attributes on image tags that are missing them. Does not affect image tags that already have Width and Height attributes set.
    image


Static Asset Cache Policy

image


This feature tells the browser to cache your static assets which can increase your site's speed because the user doesn't have to download those assets more than once. This feature will set the caching header on your assets to an appropriate length of time. The available static assets that can be cached are:

  1. Images 

  2. Stylesheets

  3. Scripts

  4. Fonts


image



Disable Efficient Static Cache Policy on specific elements using the specified selector.

image


Pre-connect 

image


  1. Pre-connect Origins: Parses your page to identify other domains you are requesting assets from. It then adds tags to tell the browser to pre-connect to those domains to speed up the loading of those assets. 


image


Minify HTML

image
  1. Minify Javascript:Removes unnecessary whitespace, comments, and characters from JavaScript files to minimize javascript payload size, reducing the time to send the file to the user.
  2. Minify CSS: Remove unnecessary whitespace, comments, and characters from the CSS files to minimize CSS payload size, reducing the time to send the file to the user.
  3. Minify HTML: Remove unnecessary whitespace, attributes comments and characters from the HTML to minimize page size, reducing the time to send the page to the user.


Note that you have the option to 'keep' certain HTML from being minified.


a. Keep IE Conditional Comments: Preserve IE conditional comments in the HTML.


b. Keep Default Attribute Values: Preserve default attributes for tag.


c. Keep End Tags: Preserve end tags.


d. Keep Quotation Marks: Preserve quotation marks around tag attributes such as type='text/javascript'


e. Keep Whitespace: Preserve whitespace between inline tags but still collapse multiple whitespace characters into a single whitespace character.


image

Script Execution

image


  1. Script Delay: Delays the loading and execution of Javascript until the primary content has loaded.
image



You can also set script delay URL rules as follows. If you want to exclude certain URLs from script delay you can do this using 'no defer' parameters in your code. Here's some info on how to implement them:

https://developers.google.com/speed/pagespeed/service/DeferJavaScript

image

Alternatively, you can set 'URL Rules' to exclude 'Script Delay' from being applied to specific scripts, pages, or directories on your site:


image


image

Unsure which scripts need to be excluded? You can use the 'Find Delayed Scripts' feature to identify the right combination of scripts to exclude.

image


image

Start by toggling all scripts to 'no' and then use the process of elimination to work out which scripts can safely be delayed ('yes') without affecting functionality. Note that more than one script will often need to be excluded ('no') before you land on the winning combination!


image



2. Reduce CPU Intensive Tasks: Slows down javascript tasks that are using up too much CPU so the browser's processor has free time to render the page. May affect the timing of SetInterval and SetTimeout calls.

image

3.Disable Ads Above The Fold: Above the fold is the content that a viewer sees before they scroll down the page. This feature tries to improve page performance and Core Web Vitals (FID, LCP) by removing ads above the fold which might decrease your revenue if you have a lot of visitors that do not scroll down on the page.

image

4. jQuery Loading Method: Core jQuery Feature Preload. If excluding scripts that require jQuery functions, instead of also excluding the whole jQuery library, add a tiny script that enables core functionality until the main jQuery file is loaded.
Load jQuery from CDN. Load jQuery from a global CDN so more users have it cached.

image

Content

image
  1. Lazy Load Iframes: This feature allows you to lazy load iframes that appear outside of the initial screen view. This helps your site load faster by only loading iframes when the user will actually see them.
image

You can also set lazy load iframe URL rules.

image


With these features, your users will be able to interact with your pages significantly faster, while fewer essential elements load in the background. To implement, you should load up Leap and generate a version.

2. Optimize Tweets: Replaces embedded tweets with a static version that requires less load time.

image

3. Remove Scripts or Styles: Used to test removing specific scripts or style tags from your site. Use the Inclusion Rules to select which to remove. This setting will have no effect if there are no Inclusion Rules set up.

image

4.Lazy Load Youtube Videos: Lazy loads YouTube standard embedded videos (currently does not support playlists) without loading any extra YouTube content until being played by the viewer to speed up page load times. Only recommended to use if your site has YouTube content in initial screen view, otherwise use the Lazy Load Iframes setting. If your site uses a lot of YouTube content, you may want to consider transitioning your site to use Humix for optimized video content and site performance.

image


Loading ...