Making a Wordpress site load in speed lightning time is not that hard. Wordpress may be slow if you’re not using good hosting, a cache plugin, or the basics of lazyloading and compressing, but with the correct and simple actions, you may reduce page load time to below 2 seconds.
Take a look at the top ways to optimize a Wordpress site, whether you have a Woocommerce store, a simple blog page, or a landing page.
1. Check your overall Core Web Vitals metrics & run speed tests
Have a look at your Core Web Vitals metrics and Web Vitals historical field data to visualize potential issues. Treo.sh offers a visualization of your Core Web Vitals real-world data(CRUx) through a UI, with access to many cool data about your website. Core Web Vitals is now the standard of page speed.
To make a plan of action and optimize a Wordpress site, firstly we must know what assets are taking time to load and if they’re essential to page load. After looking at Treo, run a Webpagetest, which is a free service for speed tests. Run a test with 9 repeated runs to have a more consistent result.
Take a look at the website’s waterfall assets. It shows all assets loading waterfall and you can choose a few server locations you may need on the free plan.
If you want a more in-depth metric or run a mobile speed test, consider the following wordpress speed test tools:
- Web.Dev – Core Web Vitals field data. More than speed insights, with SEO, Best Practices, and accessibility tests.
- Gtmetrix – Core Web Vitals, multiple advanced features, and locations. Data Retention(Page results) up to 3 months for free.
- LighthouseMetrics.com – Quick Core Web Vitals test from multiple locations, or full Lighthouse audit.
2. Optimize assets loading
After checking the asset waterfall chart, you may start to optimize. Start by removing unused CSS and JS, and consider Critical CSS.
To remove unused CSS you must check by clicking all elements(mobile and desktop) on the page to find and only remove 100% unused CSS.
Remove unused Javascript
To remove unused JS, you may check on each plugin frontend and see what pages it needs to run or add defer to its script tag. You may also consider adding Javascript to the delay/defer exclusion list, to have its functionality working properly.
To completely remove the plugin javascript from loading, install Asset Cleanup and dequeue it from the page you want it to be removed.
To delay, install Wp Meteor and move the bar to “Delay until first interaction”. This will delay all Javascript till user interaction with a few essential exceptions.
If you’re not sure whether delay or remove, consider our post ‘How to remove unused js’ with even more options to remove unused js.
3. Use cache and consider Cloudflare APO for HTML caching
To check if your Wordpress is using caching use Pagespeed; run a test. If the website results come with the warning “Leverage Browser Caching” for files from your domain, you need to check if the cache is set up correctly or set it up.
You can also test using the seositecheckup Page Cache test tool.
Cloudflare APO
Cloudflare currently offers Automatic Platform Optimizations (APO) for $5/month, and it caches not only static assets(JS, CSS) but also the HTML of the WordPress website. This is possible due to Cloudflare Workers that caches dynamic content.
According to Cloudflare, their Automatic Platform Optimization plugin optimized their client’s Web Vitals and Core Web Vitals metrics:
“Automatic Platform Optimization consistently demonstrated better aggregate performance among sites we analyzed in TTFB, First Paint, FCP, and LCP metrics. Even more impressive are improvements on both desktop and phone form factors.”
Cloudflare’s blog
Cloudflare APO is compatible with WP Rocket* and many other plugins, check the compatibility.
*Cloudflare APO cache needs to be manually purged on every Wp Rocket change.
4. Optimize Core Web Vitals
Core Web Vitals is a ranking algorithm, and it involves LCP, CLS, and FID. You will need a plugin with a full-suite solution to fix these, consider using either Wp Rocket or Nitropack. Check their comparison.
To optimize or fix the Largest Contentful Paint (LCP) Issue in WordPress, consider:
- Critical CSS – Creates critical CSS to load early and improve LCP(may degrade your CLS).
- Cut and use a different image for the mobile.
- Use a CDN for images and SVGs plus lazyload images – CDN speeds ut the image load time.
- Avoid page builders, and choose a fast theme.
- Preload the largest contentful paint image and disable unnecessary lazyloading.
To fix or optimize CLS(Cumulative Layout Shift) in WordPress:
- Don’t push content above existing content – Avoid slider plugins and use an image or a CSS background color.
- Apply correct image sizing.
- Setup critical CSS – Creates critical CSS to load early.
- Prefer themes/plugins that use transform animations over animations of properties that trigger layout changes.
5. Use CDN
CDNs as the name says, are content delivery networks meant to deliver assets to speed up the website load time.
You may consider the following CDNs:
- Bunny
- Jetpack (Free Unlimited Image CDN)
- RocketCDN ($9/mo unlimited traffic, CSS/JS/images)
- Imagekit (Free 20GB/month)
- Cloudflare (Free unlimited reverse proxy CDN)
- Optimole (Free 5k visits/month)
- Smush
- Shortpixel
6. Choose a faster theme
Picking a fast theme is as important as building a website. Check the following Core Web Vitals-ready themes with blocks and functionalities that are not much away from page builders:
- GeneratePress + GeneratePress Premium Blocks
- Kadence and Kadence Blocks Pro
- Lightning
- Blocksy
- Genesis theme
- OceanWp
- Astra
- Frost
- Tove and Gutenberg blocks
7. Consider using headless Wordpress(Frontity) or an alternative headless CMS
Frontity is a server-side, dynamic framework for headless WordPress sites and blogs. It uses React + Wordpress to build the website.
You can also build using Gutenberg on a staging website, using a UI to build since there’s no Wordpress interface on the framework, and then migrate to Frontity, check the video tutorial.
You may also consider the following headless CMSs:
Get your WordPress Core Web Vitals optimized and your pages faster!