Creating a high speed wordpress site for mobile is a challenge in itself. Having worked for two decades in wordpress, i managed to find a way to achieve 100/100 speed for mobile sites (not desktop), passing core web vitals easy peesy, without any caching plugins or lazy load. Our TTFB also greatly improved. Creating high speed mobile content is the key because over 80% visitors use mobile compared to desktops/tablets. This number is only increasing while desktops are slowly fading away.
The key here is to use lightweight block wordpress theme, cloudflare, no fancy fonts and minimal plugins (less than 3). The lightweight setup optimized helped us to save hundreds of dollars in hosting (we used a cheap instance), brought us more conversions from mobile visitors. Speed also helped us get higher google positions over our competitors.
Our Setup
- Lightsail amazon wordpress host ($10 instance)
- WordPress with Ollie block theme
- Apache server + Php 8.2 with Gzip + Mariadb
- Cloudflare (with APO enabled)
- SSL enabled with Letsencrypt
- No plugins used
- Minimal system fonts
We kept the page requests less than 30 and the page load size less than 500kb highly optimized for mobile speed.
Theme Setup
We highly recommend lightweight themes, a free one with just gutenberg editor (no fancy page builders) such as
- Ollie
- OceanWP
- TwentyTwentyFour
- Blocksy
- Neve FSE
We discarded sliders, page builders, and fancy js animations. We have also decided not to use css gradients which is known to cause paint rendering delays in some browsers.
Fonts
Fonts are key to speed up wordpress sites on mobiles. We have discarded google fonts, deleted all font woff font files, kept it clean. We used purely system font with the following additional css code.
* { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}Cloudflare
We used free cloudflare with caching enabled to pass speeds. We only noticed a small performance boost with APO enabled. We have enabled cloudflare captcha protect for search pages (also login page) to protect from spam attacks which could slow down the server. You can enable bot fight mode or setup firewall rules to prevent server overload from ddos attacks.
Plugins
Using too many plugins can impact speed and exhaust server resources. We only used max 3 plugins, one for form, cloudflare and SMTP mail.
We have decided not to use any caching plugin as our experiments showed these plugins can slowdown your server over time, instead let cloudflare to handle caching.
Page Builders
Page builders are known to be heavy on wordpress eg. Wpbakery and Elementor. We decided to stick with only Gutenberg editor.
Database
We optimized our mysql database content using wp optimize plugin removing any overhead from our data.
Images
We optimized images to JPG or WEBP formats kept it less than 150kb for featured images. New wordpress versions automatically lazy load images on viewport, no plugin required.
Icons
Iconsets are beautiful but are known to dramatically slowdown pages even with SVGs, so we stayed away from using icons. We have discarded all icon sets (eg. fontawesome,). Instead we took 10 icons from google fonts, converted to png images and used it in our site, loaded as image. These were lightweight and loaded on demand.
SSL
We noticed non ssl site loaded faster had a slight performance compared to SSL enabled site. We enabled Lets encrypt in our lightsail.
Redis object cache
We installed redis server and plugin to even speed up object cache but it backfired for us causing our instance to freeze. It did not work for us. So we removed the redis.
Blocks
We decided to build our site using basic wordpress blocks for speed. We kept to mostly text and images. No fancy sliders, animations or javascript.
