Optimize the following areas to achieve optimal performance in the Designer and on the published site.
Impact areas can vary between projects. However, the most common areas to tackle first include third-party scripts, images, fonts, and unused styles and animations.
Project settings
Review tabs in project settings for optimal performance.
Publishing
Minify/optimize code
- Minifying your site’s code can help your live website load faster.
- Load JS files per page
- Async loading JS files
- Load CSS files per page
Resources:
Fonts
Avoid using the native Google/Adobe fonts integration
- Selecting fonts through the native Google or Adobe fonts options adds extra API calls to fetch the fonts which can slow down the page.
- Additionally, Google fonts are not GDPR compliant as they collect end user IPs.
Resources:
Custom fonts
- Upload all fonts as custom fonts.
Resources:
Font display swap
- Setting font display settings to swap can prevent a flash of invisible text when pages load by using a system font.
Resources:
Limit number of fonts
- It recommended to limit the number of uploaded fonts to a reasonable amount.
- In most cases, 5-6 fonts are good but fewer is better if possible. This will make it easier to manage fonts inside the Designer as well.
Font file sizes
- Font file sizes should not be too large, roughly around 100kb or lower
- Avoid using icon-based fonts as they are typically large in file size. Use SVG code in a custom code embed or image-based icons instead.
- If too lage, the font will be mentioned in the Google page speed insights report
Resources:
Font selection in the Designer
- Ensure all fonts are selected under the custom fonts section from the Style panel.
- Selecting a Google font will automatically add a script to fetch that font and all of its weights from Google.
Resources:
Apps & Integrations
Google Analytics and Facebook pixel
- Instead of adding Google Analytics/Facebook pixel in this tab, consider managing all scripts from a single dashboard in Google Tag Manager (GTM) or equivalent.
- In GTM, leverage performance enhancing settings like which pages to load scripts on vs loading on all pages, load scripts after time delay, load scripts after page scroll delay, and more.
Resources:
Custom code
Async or defer attribute
- When possible, add async or defer attributes to eligible scripts.
- This option will depend on the purpose of the script.
- Some scripts must load first.
- Check with the service provider of the script if this is an option.
Resources:
Script delay methods
- With some extra custom code, script delays can be tailored to various scenarios.
- For instance, you can set delays based on user interactions like hovering or scrolling.
- Alternatively, you can introduce time delays after page load using functions like setTimeout in JavaScript.
Resources:
Google Tag Manager (GTM)
- Use GTM or equivalent to manage scripts and get helpful settings like which pages a script is executed on, scroll delay, time delay, etc. (Mentioned in the Apps & Integrations section)
Resources:
Audit usage of scripts
- Consider removing extra scripts or ones that provide little value.
In the Designer
Review of the most important areas relating to performance in the Designer.
Images
Images above the fold
- Above the fold images should not be lazy loaded, change them to eager load
Resources:
Images below the fold
- Below the fold images should be lazy loaded. This is the default option.
Resources:
Background images
- Limit usage of background images as they do not have the lazy loading option and also do not get responsive variants generated. Background images are loaded with the page and can slow down the page.
Image resets
- Set up a proper Image reset in your CSS framework or style guide
Resources:
Resources:
WebP image format/conversion tool
- Convert PNG and JPEG/JPG images to WebP/AVIF for better optimization and compression. Before doing so, review WebP browser support.
Resources:
Image file size
- Keep images in the 100 - 200kb range.
CMS image size restriction
- For image fields in the CMS, enforce a size limitation (i.e., 200kb).
Resources:
Set width and height on images
- Provide images a fixed height and width (i.e., 100px by 100px)
- Use object fit to control images that get skewed with this approach
- Or use the Aspect ratio with CSS aka the padding hack to create a selection of image sizes to be reused across the site
Resources:
Properly size images
- Google warns about this when there is a 4kb difference between the original image size vs the rendered size and recommends making images based on the rendered size.
Resources:
CSS Classes
Clean CSS
Resources:
Eliminate Random classes
- In the style manager, search “div block”, “heading”, and “link block”. This will usually show a bunch of random classes with numbers (div block 34, heading 12, etc).
Resources:
Animations
Unused animations
- Clean unused triggers and animations.
Resources:
Audit animations
- Audit animations and look for ones with numbers in them. These are usually duplicate animations and can be deleted and replaced by the original animation.
Avoid excessive use of animations
- For optimal performance, don’t use animations excessively (i.e., on every section of the page, many page load animations, etc.).
- Set up animations based on classes so they can be reused by adding the class to any element.
Resources:
CSS animations
- For simple interactions, like click or hover, use CSS states over interactions
Resources:
Transitions for CSS animations
- Add transitions for specific properties changed on CSS states and avoid using the “All properties” transition property
Resources: