Site Speed/Performance depends many factors such as hosting quality, amount of site images.. theme, all plugins you’re running. It’s also a broad topic and It takes time and effort to optimize your site performance. First you need to understand the problem correctly. Here’s some facts you should keep in mind:
- Everything of your website matters: theme, plugins, hosting, images, custom code (Google Analytics, Fb code, any JS code).. not only just theme. A good theme will help you to optimize your site easier, but It’s not a miracle. There’s no themes gives you 100/100 performance score by installing it.
- It takes time to learn. There’s no miraculous button: Optimize me.
- Most of things you need to do is non-theme things: Images, plugins, hosting.
In this article, we’ll help you at some points the theme can do to get you a better score in Core Web Vitals test and GTMetrix. Also, we’ll offer you some plugins to use to improve it.
First, we use 2 major tools to measure performance: Pagespeed Insights and GTMetrix. In fact, when you focus and improve Pagespeed insights score, the GTMetrix score will be better automatically. Hence we use Pagespeed Insights as primary tool.
While this is a long topic, we’ll update this guide regularly along with theme features that we can offer.
Table of Contents
Reduce TTFB
TTFB stands for Time to first byte. This is a very important factor to get high score but often being omitted. This TTFB depends on your hosting, CDN.. and there’s a long post about how to reduce it. This is out of scope of the theme so we’ll link to the original article so you can read: How to Reduce TTFB to Improve Page Load Times.
For The Fox demo, we use Cloudflare as DNS and enable Cloudflare APO cache ($5/month), and It passes Core Web Vitals Requirement.
If when you check your site, it notifies: Initial server response time.. then you have things to do with TTFB
Deliver CSS, JS better to avoid Render Blocking
You can also choose other plugin, like Autoptimize. Personally, Debloat is better for me.
- Install and activate this plugin: https://wordpress.org/plugins/debloat/
- Go to Dashboard > Settings > Debloat Plugin Settings
- Set up as following
And following for Javascript settings:
Use a Lazyload plugin
The Fox works well with WP Rocket (a premium plugin with Lazyload included). In case you want to use a free plugin, please consider LazyLoad by WPRocket. We use it because It’s compatible with Imagify Webp plugin.
Autoptimize has Lazy load module too, however it’s not compatible with Imagify Webp module. Please try different plugin when your lazy load plugin causes problem: Images disappear, the page went blank..
Use an image compression + Webp plugin
The Fox works well with Imagify. This is a free plugin but their service is premium. It costs $5-$10/month for their image compression and webp image generator service. We used their service and our all images are lightweight, in webp format (which is lighter to load).
Note that you’ll need to create an Imagify account, enter an API before using it.
Regenerate thumbnails
When you changing a theme, Maybe your images are not being displayed incorrect size and the full image will be loaded. This will increase the site size and also reduce the time load.
- Install this plugin: https://wordpress.org/plugins/regenerate-thumbnails/
- Go to Dashboard > Tools > Regenerate thumbnails > Run it.
Adding Cache Plugin
Cache plugin will improve your website performance and help your site reduce the response time. Some server/hosting has their own caching mechanism or cache plugin. But if not, you can consider using some caching plugin: WP Rocket (paid), W3 Total Cache, WP Super Cache.
Disable Elementor Default Colors & Fonts
If you don’t need Elementor fonts, you can disable them in:
- Go to Dashboard > Elementor > Settings > Advanced
- Google fonts, choose Disable.
Using a CDN for Your Website
If your pages are filled with images and want your images to load faster, you can (and should) use content delivery networks (which are commonly referred to as CDNs).
We recommend you use Cloudflare. This service will speed up your site more than 10x faster and improve your score. Here’s the guide.
Loading Google Fonts swap
This is to avoid rendering block of Google fonts loading. If your Fox version is less than 5.5.2, please go to Customize > DESIGN > General > Google font display > choose swap.
If your Fox version is 5.5.2, please go to Customize > Performance > Google Fonts display > choose swap.
