Our Asset Optimization options allow you to customize how some of the most important assets of your page are loaded. These are things that control the layout and functionality of your page such as Javascript (JS) files and CSS (Cascading Stylesheets).
CSS
The main CSS file for your page controls all the main design of your page, including all customizations made to the page. This includes font sizes and styles, section, row and column heights and widths, and colours used. You can choose to load this file externally (as a separate CSS file) or inline/internally.
- External – This means your CSS file will be loaded externally. This means an additional request for your page on loading which can increase blocking time or time to interactive.
- Internal (Recommended) – Results in a slightly larger page footprint, but the code for the CSS is loaded in-line/internally which means no additional requests. Page speed tests seem to prefer this option.
CSS Dependencies
CSS Dependencies are CSS files (in fact one CSS file) which controls some of the base styles used on all pages built with the OptimizeBuilder.
- External – load this file as an external CSS file. This will increase page requests by one, and possibly increase page blocking. The advantage to external loading is the file can be cached so it does not need to be loaded again on future pages (if visitor browses further onto your site).
- Internal (Recommeded) – load the CSS dependencies code in-line within the page code. This reduces the need for an extra external file request which can reduce blocking time on pagespeed tests.
JS (Javascript)
Defer the loading of your main page JS files – this will load them after your main content.
Other JS (Javascript) Dependencies
Defer the loading of JS dependencies. You can not set JS Dependencies defer, if JS is not set to defer as well.
Excluded JS (Javascript) Files
If you have other scripts running on your site which use javascript, you can add their names or file urls here to exclude them from being deferred, which can break these scripts.
If you’re using inline javascript/jquery, you might want to add a type to your scripts to stop them being broken. For example if you were previously using
<script type="text/javascript"> // Some JavaScript </script><br>
You can replace this with something like:
<script type="module"> // Some JavaScript </script><br>
This should stop the code being broken when Other JS defer is on. Please note we’re not able to provide javascript coding advice but if you are having challenges with these options let our support team know and we’ll do our best to help.
SVG Icons
Load SVG Icon files in-line or externally. For IE support or sites using CDN, choose Internal.
Load Stripe scripts only on checkout pages
Only load Stripe JS files on pages with OptimizeCheckout forms. Enabling this will disable Advanced fraud detection.
Disable Emojis
Disables the emoji functionality to reduce an extra HTTP request linked to the emojis script.
Disable WordPress / oEmbeds
Disables the oEmbed functionality to reduce an extra HTTP request linked to the oEmbed script.