chevron_right
chevron_right
What features does Leap have?
Informational/Resource

What features does Leap have?

Last Updated over a month ago
Article Navigation
Introduction
Overview
Tips and Best Practices
Related

Introduction

Welcome to our comprehensive guide on the features of Ezoic's Leap!

Leap is designed to streamline your website speed optimization by combining the capabilities of multiple plugins into a single, powerful tool. This article will provide you with detailed information on the various features that Leap offers, including CSS optimization, image handling, static asset caching, and script execution improvements. By leveraging these features, you can significantly enhance your site's loading speed and overall performance. Whether you're looking to optimize fonts, lazy load images, or minify HTML, this guide will cover everything you need to know about making the most of Ezoic's Leap.

Overview

 

Leap streamlines your website speed optimization with a wide array of features, all within a single tool, eliminating the need for multiple plugins. Below are the detailed explanations of the features included in Leap:

CSS Optimization:

  • Remove Unused CSS: This function removes any CSS not used by the current page and serves a minified version of the remaining CSS, resulting in smaller page sizes and faster loading times.
  • Remove Unused CSS by Page: Similar to the overall Remove Unused CSS function, this feature works on each individual URL, serving a minified version of the CSS used on that specific URL. NOTE that enabling this feature may slow down actual user experience if most pages use the same set of CSS, as users will have to download a new file for each page they visit.

  • Optimize Fonts & Preload Fonts: These features optimize fonts declared in the inline stylesheet to prevent flashes as fonts load and combine multiple font API calls into one request. Additionally, preloading fonts found in external CSS files ensures they are ready to be displayed more quickly without blocking page rendering.

 

Image Optimization:

  • Lazy Loading of Images: This feature helps your site load faster by only loading images when the user will actually see them. Images lower on the page load as the user scrolls down.
  • Next-Gen Formats: In supported browsers, this feature serves images in WebP format, a new image format designed for smaller file sizes.
  • Resize Images: Automatically resizes images on your page based on the user's screen size to minimize transfer times while maintaining image quality.
  • Preload Background Images: Adds preload tags for background images defined in inline stylesheets, which should speed up the loading of large images defined as backgrounds.
  • Set Explicit Width and Height: Sets the Width and Height attributes on image tags that lack them, without affecting tags that already have these attributes set.

 

Static Asset Cache Policy:

This feature tells the browser to cache your static assets, increasing your site's speed by eliminating the need for users to download those assets more than once. The available static assets that can be cached include images, stylesheets, scripts, and fonts. Efficient Static Cache Policy can also be disabled on specific elements using the specified selector.

 

Pre-connect:

  • Pre-connect Origins: Parses your page to identify other domains from which assets are requested and adds tags to tell the browser to pre-connect to those domains, speeding up asset loading.

Minification:

  • 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.
  • 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.
  • 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.

Script Execution:

  • Script Delay: Delays the loading and execution of Javascript until the primary content has loaded. You can set specific URL rules to exclude certain scripts, pages, or directories from script delay.
  • Reduce CPU Intensive Tasks: Slows down JavaScript tasks that are using too much CPU, allowing the browser's processor to have free time to render the page.
  • Disable Ads Above The Fold: Improves page performance and Core Web Vitals by removing ads above the fold, though it might decrease revenue if many visitors do not scroll down the page.
  • jQuery Loading Method: Core jQuery Feature Preload and loading jQuery from a global CDN to ensure more users have it cached.

Content Optimization:

  • Lazy Load Iframes: This feature allows lazy loading of iframes appearing outside the initial screen view, helping the site load faster.
  • Remove Scripts or Styles: Allows testing of removing specific scripts or style tags from your site.
  • Lazy Load YouTube Videos: Lazy loads YouTube embedded videos without loading extra YouTube content until played by the viewer, speeding up page load times. Recommended for sites with YouTube content in the initial screen view or considering transitioning to Humix for optimized video content and site performance.

With these comprehensive optimizations, Leap ensures that your users interact with your pages significantly faster while essential elements load seamlessly in the background.

Tips and Best Practices

Here are some best practices and tips to help you optimize the usage of Leap for better website speed and performance:

  1. Lazy Loading for Images and Iframes: Enable lazy loading for images and iframes to ensure that only the elements within the user's viewport are loaded immediately. This reduces initial load time and improves page performance.
  2. Next-Gen Image Formats: Use the "Next-Gen Formats" feature to serve images in the WebP format, which has smaller file sizes compared to traditional formats. This helps in reducing load times significantly.
  3. Reduce CPU Intensive Tasks: Slow down JavaScript tasks that consume too much CPU to allow the browser's processor to render the page more efficiently. Be aware that this may affect the timing of SetInterval and SetTimeout calls.
  4. Optimize Embedded Content: For sites with embedded YouTube videos, use the "Lazy Load YouTube Videos" feature to reduce load times. Consider transitioning to Humix for optimized video content.

By following these best practices and tips, you can make the most out of Leap’s features to significantly boost your website’s performance and speed.

Related

Optimizing scripts with Leap

Using the Script Delay Debugger Tool

Why isn't Leap converting images to webp format?'

× Enlarged Image

Loading ...