Last
Updated: 08/02/2023
( 40 minutes reading )
Ezoic is largely known as a platform allowing you to display ads on your website, enabling you to gain revenue. However, most people are unaware that it also includes performance-enhancing features that will improve their website's loading speed and prevent the ads from slowing down their pages.
Faster-loading websites will also result in better user experience and higher rankings in search engines. It has been proven in many online studies that website performance correlates directly with the website's rankings in Google.
This tutorial will cover the process of enabling Ezoic's "Leap" functionality which heavily contributes to your website's performance, as long as the website is using Ezoic's services.
Without further delays - let's get into it!
To activate "Leap," you first need to go through the process of integrating your website with Ezoic. We have a tutorial on how you can do that here.
After you finish the Ezoic integration, please log into your Ezoic account. Upon logging in, please point your attention to the top side of the screen, where you will see a menu.
In that menu, you will see the "Leap" icon. Please click on it.
When you click on the "Leap" icon, you will be redirected to the Ezoic "Leap" dashboard interface containing all the optimization settings. If Leap is disabled, please click the "Enable Leap" link in the screenshot below.
Doing so will reveal all the settings and allow you to configure them to your preference. The best way to go about activating Leap, especially if you are a newcomer, is by using the Setup Wizard.
We will guide you through each step of the configuration, advise you on which settings you should turn on (and which ones to avoid), and finally, tell you how to enable the caching aspect of Leap to complete the setup.
Before we start, let us give some background about the site we are testing so you can get more context behind the result. We will be using WordPress for the sake of testing with the Avada Theme, which is quite popular and widely used. We used a relatively heavy template from there to showcase how powerful the Leap settings can be and the benefits they can bring to your website. The template used includes Revolution Slider and Google Font API, which are generally very heavy on website performance and, despite having good visuals, can lower scores and performance.
You can find a test performed on GTmetrix before we enabled any optimizations in Leap. As you can see, the results are not particularly good, given the long TTFB and long Fully Loaded Time.
Let us begin the Ezoic Leap configuration setup and then perform the test at the end to see what you can expect.
After revealing all the configuration options in Leap, please click the "Use Setup Wizard" button on the screen's right side, somewhere around the middle.
When you click on the "Use Setup Wizard" button, you will be redirected to the page which will prompt you to select the Wizard Draft Selection. As this will be your first time creating a draft, please click the "Create Bank Draft" option.
Doing so will redirect you to the actual Setup Wizard, and you will receive a prompt in the form of a popup screen at the top of the screen asking you if you want a tour. As this tutorial will do just that, you can click the "Skip Tour" button in the popup window.
At the top, you will also see all the steps the Setup Wizard will take while optimizing your website's content. To begin, please click on the "Next" button on the right side of the page, underneath the 9th step - "Finalize".
Upon doing so, the Leap Setup Wizard will take you to the first step of the Optimization process, which is CSS.
Cascading Style Sheets (CSS) is a stylesheet language that describes how elements are styled on your website. We use CSS to control the website's visuals, such as the color, size, font, and spacing.
Critical CSS
The first optimization option we are going to enable is Critical CSS. Critical CSS is a method used to enhance Core Web Vitals, a set of metrics that measure website performance and user experience. This type of CSS refers to the subset of CSS styling necessary to render a webpage's "above the fold" content. A web page's "above the fold" area is the content in the initial screen view before a user scrolls down.
To enable Critical CSS, please use the toggle switch at the bottom of the page and set it to "On" by clicking on it. We recommend enabling this, as it has yielded good results in our testing and experience.
Beneath the toggle switch, you will see an "Excusion Rules" drop-down menu. You can use that to exclude CSS from the Critical CSS optimization method if you see broken elements in your website's "above the fold" area.
To move on to the rest of the optimization techniques, please click on the "Next" button above the Critical CSS description on the CSS optimization progress steps.
Doing so will take you to the next step, allowing you to enable the "Unused CSS" removal.
Unused CSS
When a webpage is loaded, the browser downloads and parses all the CSS files and inline styling associated with the page, even if some rules are unused. This process can negatively impact the Core Web Vitals metrics, such as the Largest Contentful Paint (LCP) and the Total Blocking Time (TBT), which measure the time it takes for a webpage to render and become interactive.
The "Remove Unused CSS" technique will reduce the size of the CSS files and will speed up page loading speed. We recommend enabling this option.
To do so, please click on the toggle switch underneath the "Remove Unused CSS" description.
Similarly to the Critical CSS functionality, you can exclude CSS files you do not want to apply this setting for using the "Exclusion Rules" drop-down menu underneath the toggle switch. In addition to the “Exclusion Rules”, you will also notice the “Find CSS Sheets” drop-down menu. Expanding it will unveil a tool that can populate a list of external and inline styling found on a specified URL on your website. Once the list is generated, you can easily choose what styling you wish to include for processing by Unused CSS using the radio buttons in the table below.
To proceed further with the CSS optimizations, please click on the "Next" button above the Remove Unused CSS description on the CSS optimization progress steps.
Optimize Fonts
Next up are the font optimization options. We recommend skipping this altogether and not applying any optimizations for your fonts because, in our experience, this usually breaks the fonts and icons on your website.
To ensure that this setting is disabled, please keep the toggle switch at the bottom of the page set to “Off”.
To continue with the CSS optimization process, please click on the "Next" button above the "Optimize Fonts" description on the CSS optimization progress steps.
Preload Fonts
The next set of optimizations is again related to Fonts. However, they work differently than the previous one. The "Preload Fonts" optimization technique "tells" the browser to download all necessary fonts preemptively so they are available when the page loads. By doing so, the browser can download the fonts in the background while other resources are being loaded without impacting the user experience.
We recommend enabling this option. Please click the toggle switch underneath the "Preload Fonts" description to do so.
To continue the CSS optimization process, please click the "Next" button above the "Preload Fonts" description on the CSS optimization progress steps.
Preview
The final step is the "Preview" option, which allows you to check the website with all the selected CSS optimization techniques enabled. It is convenient because it lets you review the site before deploying the optimizations and disable or tweak some applied CSS improvements.
To generate a preview page, please click the "Go to Preview" button beneath the "Preview Changes" description. Doing so will put your website in "Preview Mode" and allow you to test it.
At the bottom of the "Preview" page, you will also see common issues you should be on the lookout for. Expanding each drop-down menu will give you details about which setting could have caused it. After deactivating it, the website's functionality that appeared broken at the preview should be resolved.
When you finish testing, you can return to your Ezoic dashboard and click the "Exit Preview Version" button next to the "Go to Preview" button.
This concludes the CSS optimization options from Leap. Next are the image optimization techniques that will improve how your site serves images. To apply optimizations for your images, please click the "Next" button above the "Preview Changes" description.
Doing so will activate the "Next" button above, leading to the next available optimization via Leap. Please click on it.
Following the CSS optimizations will be the image optimization techniques offered by Ezoic's Leap service.
Lazy Load
The first option here is "Lazy Load." Lazy load makes it so your site only renders the images within the initial screen view and loads the rest as you browse the pages further. This technology drastically improves the site's Largest Contentful Paint (LCP) score.
We recommend enabling this if many images are concentrated around your website's initial screen view. Otherwise, we recommend keeping this setting disabled, as bloating the site with optimization services you do not need will not improve loading speed.
To turn "Lazy Load" on, please click the toggle switch at the bottom of the page. Underneath the toggle switch, you will find the "Exclusion Rules" drop-down menu, which you can use to exclude images that are not positively affected by the technology.
After doing so, please click the "Next" button corresponding to the Image optimization steps above the "Lazy Load Images" description.
Resize Images
Coming up next is the "Resize Images" optimization option. This optimization service enables Leap to resize image dimensions dynamically based on the device the visitor is using to view your website. For example, if the visitor uses a mobile device, the website will display low-res images optimized for smaller screens. In contrast, if a desktop is used, the images will be high-res and optimized for larger screens. This technology will positively impact the website's Largest Contentful Paint (LCP) and Content Layout Shift (CLS) core web vital scores.
To turn "Resize Images" on, please click the toggle switch at the bottom of the page. Underneath the toggle switch, you will find the "Exclusion Rules" drop-down menu, which you can use to exclude images that are not positively affected by the technology.
Finally, please click the "Next" button corresponding to the Image optimization steps above the "Resize Images" description.
Preload Background Images
Following the "Resize Image" technique, you will see the "Preload Background Images". Activating it will speed up image rendering defined inline as background images. An "inline" background image is set in CSS as an HTML element's "style" attribute. You may specify an image in such a manner if it is used as a large background image, such as a "hero" image at the top of a website.
We recommend turning this setting on, as it has yielded great results in our tests. To turn "Preload Background Images" on, please click the toggle switch at the bottom of the page.
Finally, please click the "Next" button corresponding to the Image optimization steps above the "Preload Background Images" description.
Set Explicit Width and Height
The last optimization technique under "Image Optimization" is the "Set Explicit Width and Height". This optimization setting will automatically set the "width" and "height" attributes on images (if it is not set already). This process will help the browser reserve space for these images as they are generated on the website, thus improving the page's CLS score.
Our experience has shown that this yields great results, and we recommend enabling this feature for image optimization. To turn "Set Explicit Width and Height" on, please click the toggle switch at the bottom of the page.
Finally, please click the "Next" button corresponding to the Image optimization steps above the "Set Explicit Width and Height" description.
At the end of the Image Optimization settings, similar to the CSS Optimizations, you will have a "Preview" option that will allow you to test the site and see if there are any issues with the newly enabled setting.
To generate a preview page, please click the "Go to Preview" button beneath the "Preview Changes" description. Doing so will put your website in "Preview Mode" and allow you to test it.
At the bottom of the "Preview" page, you will also see common issues you should be on the lookout for. Expanding each drop-down menu will give you details about which setting could have caused it. After deactivating it, the website's functionality that appeared broken at the preview should be resolved.
When you finish testing, you can return to your Ezoic dashboard and click the "Exit Preview Version" button next to the "Go to Preview" button.
To proceed further along Leap's optimization route, please click the "Next" button corresponding to the Image optimization steps above the "Preview Changes" description.
Doing so will activate the "Next" button above, corresponding to the progress for all optimizations via Leap. Please click on it.
Following the Image Optimization, you will stumble upon the static assets cache policy setup, enabling caching for all your static content - such as CSS and JavaScript. Caching these resources means they can be retrieved from the cache instead of being downloaded from the server every time the page is loaded, reducing the amount of data that needs to be transmitted and consequently lowering page load times.
We recommend enabling caching for static content to improve page load times and affect scores regarding Largest Contentful Paint (LCP).
Efficient Static Cache Policy
To turn on the "Efficient Static Cache Policy" so, please click on the toggle switch at the bottom of the page.
Once done, you will see the "Advanced Settings" checkboxes underneath these checkboxes, the "Exclusion" drop-down menu.
The advanced settings will allow you to decide which static content to cache. Please put a tickbox inside the content you want to cache. We recommend caching all the available static content on the website. Please place a tickbox inside all available checkboxes.
If you need to exclude a resource, please use the option available under the "Eclusion" drop-down menu.
Once you configure the settings above, please click on the "Next" button, corresponding to the "Static Asset Cache Policy" settings, right above the "Static Asset Cache Policy" description.
Preview
At the end of the "Static Asset Cache Policy" settings, similar to the Image Optimizations, you will have a "Preview" option that will allow you to test the site and see if there are any issues with the newly enabled configurations.
To generate a preview page, please click the "Go to Preview" button beneath the "Preview Changes" description. Doing so will put your website in "Preview Mode" and allow you to test it.
When you finish testing, you can return to your Ezoic dashboard and click the "Exit Preview Version" button next to the "Go to Preview" button.
To proceed further along Leap's optimization route, please click the "Next" button corresponding to the "Static Asset Cache Policy" optimization steps above the "Preview Changes" description.
Doing so will activate the "Next" button above, corresponding to the progress for all optimizations via Leap. Please click on it.
The "Pre-Connect Origins" technique reduces the time needed to establish a connection between the client's device and the server hosting the website. In doing so, it improves website performance and user experience significantly.
For this to happen, the service instructs the browser to establish a connection with the server before the actual resource is requested, securing a faster response time when the resource is requested.
By reducing the time it takes to establish a link with the server, websites render pages quicker, leading to faster First Contentful Paint (FCP) and Largest Contentful Paint (LCP) times.
Pre-Connect Origins
Turning on "Pre-Connect Origins" will enhance website performance by reducing the latency and improving the response time for requests to the server. These performance enhancements can lead to a faster, more responsive website and improve user engagement and search engine rankings.
We recommend enabling this setting as it will greatly enhance your website performance arsenal. To do so, please set the toggle switch at the bottom of the page to "On".
To proceed to the next step, please click on the "Next" button corresponding to the "Pre-Connect" settings right above the "Pre-Connect Origins" description.
Preview
At the end of the "Pre-Connect" settings, similar to the Static Asset Cache Policy optimization, you will have a "Preview" option that will allow you to test the site and see if there are any issues with the newly enabled configurations.
To generate a preview page, please click the "Go to Preview" button beneath the "Preview Changes" description. Doing so will put your website in "Preview Mode" and allow you to test it.
When you finish testing, you can return to your Ezoic dashboard and click the "Exit Preview Version" button next to the "Go to Preview" button.
To proceed further along Leap's optimization route, please click the "Next" button corresponding to the "Pre-Connect" optimization steps above the "Preview Changes" description.
Doing so will activate the "Next" button above, corresponding to the progress for all optimizations via Leap. Please click on it.
Minification is the process of removing unnecessary characters from your code without changing its functionality. The omitted characters are usually white space, new lines, comments, and long name variables. Removing them reduces the code size, producing a faster and more efficient transfer time to users viewing your site.
The leap optimization service in Ezoic will allow you to enable Minification for JavaScript, CSS, and HTML files. The first step of the "Minify" optimization route is enabling Minification for JavaScript files.
We recommend enabling Minification for all the content types above, as this will reduce page size, improve website loading speed and contribute to your page's SEO rankings.
Minify JavaScript
To turn on the "Minify" technique for JavaScript, please click on the toggle switch at the bottom of the page.
After doing so, please click the "Next" button corresponding to the "Minify" optimization steps above the "Minify" description.
Clicking on the "Next" button will take you to the second step of the Minification settings that will affect CSS when enabled.
Minify CSS
To turn on the "Minify" service for CSS, please click on the toggle switch at the bottom of the page.
After doing so, please click the "Next" button corresponding to the "Minify" optimization steps above the "Minify" description.
Doing so will take you to the third step of the "Minify" optimization setup that will affect HTML when enabled.
Minify HTML
To turn on the "Minify" service for HTML, please click on the toggle switch at the bottom of the page. After doing so, you will notice that there are advanced settings underneath to fine-tune this technique, as opposed to the CSS and JavaScript "Minify" options.
We recommend keeping everything at the default value (every checkbox ticked), as when disabled, it may affect the HTML files too aggressively and result in broken website layouts.
After enabling the HTML Minification, please click the "Next" button corresponding to the "Minify" optimization steps above the "Minify" description.
Preview
Similarly to the "Pre-Connect" technology, you will have a "Preview" option that allows you to test the site and see if there are any issues with the newly enabled configurations at the end of the "Minify" configurations.
To generate a preview page, please click the "Go to Preview" button beneath the "Preview Changes" description. Doing so will put your website in "Preview Mode" and allow you to test it.
At the bottom of the "Preview" page, you will also see common issues you should be on the lookout for. Expanding each drop-down menu will give you information about which setting could have caused it. If that is the case, you should deactivate it, which will resolve the functionality or layout affected by it.
When you finish testing, please return to your Ezoic dashboard and click the "Exit Preview Version" button next to the "Go to Preview" button.
To proceed further along Leap's optimization route, please click the "Next" button corresponding to the "Minify" optimization steps above the "Preview Changes" description.
Doing so will activate the "Next" button above, corresponding to the progress for all optimizations via Leap. Please click on it.
The "Script Delay" setting delays non-excluded JavaScript code until the entirety of the page has been loaded, improving your website's initial loading time in the process.
Script Delay
Some well-known scripts are automatically excluded from this setting in the backend of the Leap optimization service. It is important to manually exclude scripts from Leap, which are important for your website's layout and functionality, to avoid issues while using this setting.
We recommend enabling this functionality and adding exclusion rules for important scripts. To turn on this technique, please use the toggle switch on the first step of the "Script Execution" under the "Script Delay" description.
Doing so will unveil the "Advanced Setting" options and three drop-down menus, allowing you to detect and exclude scripts from the "Script Delay" functionality.
When you are finished with setting up the "Delayed Scripts" technology, please click the "Next" button corresponding to the "Script Execution" optimization steps above the "Script Delay" description.
Reduce CPU Intensive Tasks
CPU-intensive tasks refer to a task or group of tasks that consume a large amount of processing power while the browser is attempting to load the page. This setting reduces the impact of CPU-intensive JavaScript tasks and frees up the browser's processor allowing the page to render quickly. This option can improve your site's Largest Contentful Paint (LCP) and First Input Delay (FID) core web vital scores.
We recommend enabling this setting. However, you should pay close attention to it, as it may have side effects on timing-sensitive browser functions such as "setInterval" and "setTimeout".
To turn on this technology, please use the toggle switch at the bottom of the page under the "Reduce CPU Intensive Tasks" description.
When you have done the above, please click the "Next" button corresponding to the "Script Execution" optimization steps above the "Reduce CPU Intensive Tasks" description.
jQuery Loading Method
Delaying jQuery loading speeds up your site's initial loading if it's using this specific technology. However, it may break other scripts that depend on jQuery. If Script Delay is on and jQuery is delayed, you can use Leap to implement two different methods of dealing with jQuery dependency issues:
Of course, the last alternative is to turn off delaying jQuery scripts completely, and sometimes, this could be the best option, depending on your website's jQuery content. We recommend starting with the "jQuery Feature Preload" option and seeing how that fares for your site. If you do not get good results, please switch to the "Load jQuery from CDN". If both these optimization techniques impact the website negatively, please disable jQuery Script delaying completely.
You can pick one of the settings above using the radio button beneath the "jQuery Loading Method" description.
When you are finished selecting your setting, please click the "Next" button corresponding to the "Script Execution" optimization steps above the "jQuery Loading Method" description.
Preview
Similarly to the "Minify" technique, you will have a "Preview" option that allows you to test the site and see if there are any issues with the newly enabled settings at the end of the "Script Execution" setup.
To generate a preview page, please click the "Go to Preview" button beneath the "Preview Changes" description. Doing so will put your website in "Preview Mode" and allow you to test it.
At the bottom of the "Preview" page, you will also see common issues you should be on the lookout for. Expanding each drop-down menu will give you information about which setting could have caused it. If that is the case, you should deactivate it, which will resolve the functionality or layout affected by it.
When you finish testing, please return to your Ezoic dashboard and click the "Exit Preview Version" button next to the "Go to Preview" button.
To proceed further along Leap's optimization route, please click the "Next" button corresponding to the "Script Execution" optimization steps above the "Preview Changes" description.
Doing so will activate the "Next" button above, corresponding to the progress for all optimizations via Leap. Please click on it.
The last step of the setup process covers optimization for your iFrames and Youtube videos, which you have added to your website.
Lazy Load Iframes
Lazy Loading iFrames is a technique used to improve a site's performance and user experience by delaying iframes until they are needed. Iframes embed content from another source, such as videos, maps, or social media widgets, into a webpage. However, iframes can increase page load times, especially if they contain large or complex content.
To turn on this optimization service, please use the toggle switch at the bottom of the page under the "Lazy Load Iframes" description.
When you have done the above, please click the "Next" button corresponding to the "Content" optimization steps above the "Lazy Load Iframes" description.
Lazy Load YouTube Videos
Lazy-loading YouTube videos, which you upload on your website, is a technology that improves website performance and user experience. It involves delaying the actual YouTube video until the visitor scrolls down or lands on it. If not optimized properly, the embedded videos can dramatically slow page loading time.
We recommend this feature only if your site has embedded YouTube videos above the fold, the initial screen view before you scroll.
To turn on this optimization service, please use the toggle switch at the bottom of the page under the "Lazy Load YouTube Videos" description.
When you have done the above, please click the "Next" button corresponding to the "Content" optimization steps above the "Lazy Load YouTube Videos" description.
Preview
Similarly to the "Script Execution" technique, you will have a "Preview" option that allows you to test the site and see if there are any issues with the newly enabled settings at the end of the "Content" setup.
To generate a preview page, please click the "Go to Preview" button beneath the "Preview Changes" description. Doing so will put your website in "Preview Mode" and allow you to test it.
At the bottom of the "Preview" page, you will also see common issues you should be on the lookout for. Expanding each drop-down menu will give you information about which setting could have caused it. If that is the case, you should deactivate it, which will resolve the functionality or layout affected by it.
When you finish testing, please return to your Ezoic dashboard and click the "Exit Preview Version" button next to the "Go to Preview" button.
To finalize the entire process, pleases scroll down to the very bottom of the page. There, you will see seven checkboxes, each with a tick inside to finalize the process.
When you ensure all your content is working properly and tick all the checkboxes, the greyed-out "Activate" button at the bottom of the page will become clickable and apply all optimizations to your website once clicked.
Please do not forget to enter "Preview" mode after each optimization configuration and test the website so that, eventually, you can tick all checkboxes and activate the optimizations on the website.
Clicking on the "Activate" button will trigger a brief loading screen and show a popup window, notifying you that the settings are live!
To proceed, please click the green "Ok" button at the bottom left corner of the popup window to return to the initial "Leap" optimization page.
You will see a timer at the top of the page signifying that you must wait for "Leap" to apply all the settings.
Usually, this will last around 15 minutes, and afterward, you will ensure that all optimizations are working on the site.
Now that we have gone over the Leap Setup, it is time for the most exciting part - the results after the optimizations are live! Please check the screenshot below, which showcases the results after all optimizations.
As you can see, Ezoic's Leap service dramatically increased website performance, and the website is far better in terms of loading speed and UX!
We hope this long yet useful tutorial has given you insight into Leap, its features, and which ones you should consider for your website and when. We believe that following our advice and using the "Preview" option after each step will generate the results you are after and net you good performance, better UX experience, and better ad revenue in the process.
HostArmada is an Ezoic Certified Provider, and hosting your website here while using Ezoic ensures better performance, more consistent ads, and higher ad revenue. If you are having issues with Ezoic on your current provider and wish to improve both performance and your website's ad monetization, please check our hosting plans or contact our sales representatives over the live chat so they can recommend the best hosting package for your needs.
Nikola is an accomplished tech-savvy extraordinaire with over six years of experience in the web hosting field. He started as a customer care representative and quickly rose the ranks to become a support supervisor and, eventually - the head of the technical department in HostArmada. His deep understanding of the client's needs, combined with his technical knowledge, makes him the perfect man to create the ideal harmony between client satisfaction and professional problem-solving. You will often find him creating helpful tutorials, articles, and blog posts that help existing customers get around.
Learn more about Ezoic in the other tutorials that we have:
