What features does the Site Speed Accelerator have?

Modified on: Mon, 11 Jan, 2021

Site Speed Accelerator streamlines your website speed optimization with one single tool. Ezoic’s Site Speed Accelerator does the work of multiple plugins and includes the following 18 features (more are being added all the 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:

  2. image


    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.

  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. 



  5. image


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

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


 

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.

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



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

  4. Fonts


image


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


image


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. 


image


Minify HTML


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


  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


You then need to click this button:


image


And then the check box:


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


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


Start by toggling all scripts to 'no' and then use 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. 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.
image


You can also set lazy load iframe URL rules.


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 Accelerator and generate a version.



Loading ...