Note: For a more comprehensive article on this topic, check out our guide on How to Speed Up WooCommerce.
So head over to Plugins > Add New – and search for Autoptimize and install it.
Under the Exclude scripts from Autoptimize add this line: kirki/modules/webfont-loader/vendor-typekit/webfontloader.js
If you are using the WooCommerce Blocks plugin, also exclude lodash.min.js
Autoptimize JS, CSS & HTML Options
These are the settings we’re using on our main Shoptimizer theme demo. Ensure that you match them to prevent any issues.
If you install the Jetpack plugin you can also serve images from a global CDN which will help them load faster. Turning on Lazy Loading also prevents the images from being loading on the page, unless they are within the viewport – further improving loading times.
Elementor font settings
Elementor hides some of its font loading values within the editor so it’s a bit tricky to find.
To access this panel, edit a page/template with Elementor. Click the hamburger icon on the top-left corner.
Select Site Settings.
Select Global Fonts
You will see Primary, Secondary, Text, and Accent. Edit all of them and change the Font family option of each to Default. And save.
That should remove Roboto and Roboto Slab from being loaded unnecessarily and provide a speed boost.
Navigate also to Elementor > Settings and make a couple of additional tweaks if you have not done so already.
Ensure that Disable Default Colors and Disable Default Fonts are selected.
Within the ‘Advanced’ Tab select Internal Embedding for the ‘CSS Print Method’ and Enable the ‘Optimized DOM Output’ option.
Shoptimizer - find out more
The fast WooCommerce theme built for speed and conversions.