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 five different functionalities (and will be adding more over time):
- 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:
- 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.
- 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.
- 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
- Resize Images: Automatically resizes images on your page based on the user's screen size to minimize transfer times while maintaining image quality.
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”: preview, clone, and archive
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 clear your cookies in order to look at the original site.
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.
Activate / Deactivate:
To finally activate a version, simply click on the version you'd like to activate and click "Activate". You can Deactivate this at any time by clicking "Deactivate":