The Site Speed App is a tool that allows you to generate versions of your site to test and optimize different elements based on your goals. The key goal of this app is to execute these various changes and improve your site speed.  


This app can be installed through the App Store by visiting your Dashboard, however, you must be integrated with Ezoic before using it.



We currently offer 11 different functionalities (and will be adding more over time):


CSS

  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 (Advanced)", which will allow you to input specific URLs that should either be processed or skipped by the Critical CSS function:ewjfhb.png

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

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

 

 

 

Images

  1. Lazy Loading of Images: 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)

  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

  3. Resize Images: Automatically resizes images on your page based on the user's screen size to minimize transfer times while maintaining image quality.

 

 

 

Efficient Static Cache Policy


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

 

You can also set certain static cache URL rules as follows:

 

Pre-connect 

  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 loading of those assets. 

Script Execution 

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

 

You can also set script delay URL rules as follows:


 


2. Ad Delay: Delays the loading and execution of ads until the primary content has loaded. 

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


Content

  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. 


You can also set lazy load iframe URL rules as follows:




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

 


How Do I Get Started?

You can make a new version by clicking “create version” and naming it. You can create as many versions as you like.


Versions let you try different combinations of features to find the one that both performs the best and fits your content and layout. There are different actions you can perform with the versions you have created that are listed under “Actions”: Edit Version, Clone Version, Clear Preview Version and Archive Version


Clone Version:

You can also clone a version you’ve created in order to test different variations of the version you’re deciding on. For example, if you wanted to try out what effect the render critical CSS version would have in conflation with the lazy load images you could clone the CSS version and add the lazy load images function to it and test both together.


You can also preview a version you have created before you activate the version. Click "Preview" to preview the version and "Activate" to activate the version: 


Preview Version:

Before activating a version, you can preview it (under actions) to review the changes on your site. You can also perform a site speed score test on a preview version. It is highly recommended that you preview any version before setting it live.

Note: When you are looking at a previewed version, you are cookied in. You will need to click "Clear Preview Version" once you are done in order to look at the original site.


Activate Version:

To finally activate a version, simply click on the version you'd like to activate and click "Activate".