The problem:
Upbeat Impulse blog had 2 big performance issues before optimization:
- very poor mobile page speed
- Page didn’t pass Core Web Vitals test
Upbeat Impulse is my blog about mental health and self-improvement I started more than 4 years ago. It hasn’t been optimized for a while, and the front page was bloated with excessive codes and lots of requests shown in GTMetrix and Webpagetest.org. Here are the screenshots of page speed and Core Web Vitals data in Page Speed Insights and Webpagetest.org:
Causes of low page speed issues
The causes of low mobile page speed were numerous, including:
- unoptimized and uncompressed images
- shared hosting and no CDN
- Emelentor with its bloated code structure and too many widgets
- combination of fonts pulled from the theme (Astra) and Elementor
- different optimization plugins with perhaps, conflicting settings
- render blocking resources
- some plugins that created additional requests and code such as Woo-commerce, Contact Form 7, Popup plugin
- unoptimized database
- numerous revisions of the page stored in the database
- Fonts – 3 different fonts were loading on the same page: Roboto – default Elementor, Open Sans, and default font – fonts reduced to the ones inherited from the theme
The Strategy
I tried to check if the Elementor page can be optimized at all and to pass Core Web Vitals, so I decided to:
- keep the Elementor and try to optimize the page with it
- keep the current theme – Astra child theme
- keep the regular, shared hosting, which adds to the slow page speed
- optimize everything else I could
The Process
Here is what I did in the following order:
- I used WP Optimize plugin to delete revisions of posts and pages and to optmize databases. I removed more than 100 revisions of different posts/pages on the entire website,
- I removed not essential plugins, such as the plugin for captcha, contact form plugin, custom fields for WooCommerce checkout, Insert Headers and Footers plugin, a plugin for popup, and kept only one optmization plugin – Autoptimize
- I removed other themes from the installation and kept only Astra and Astra child themes
- I removed excessive images stored on the server
- I also removed the folders on the CPanel of the previous plugins that were still there in the /wp-content/uploads
- I optimized the Elmentor installation – disabled default colors and fonts. I also activated the options – Optimize DOM output and Improved Assets Loading in the experiement section
- I reduced the number of elements and widgets on the front page to only 6 widgets
- I installed the firewall and CDN
- I removed a hero image that was higly impacting LCP, and instead of that put gradient hero widget
- Removed wc-ajax=get_refreshed_fragments which was contributing to total blocking time on the front page, and loading on every page
- Optimized settings in Autoptimize according to best practice (minify JS, CSS, HTML, lazy loading images and serving them via Shortpixel CDN, removed Google fonts, and removed emojis)
- Added DNS prefetch for the domain
- Added DNS prefetch and preload for Google Tag Manager which contributed to the total blocking time
The Result
As a result of all these efforts, mobile page speed improved significantly, and both Page Speed Insights and Webtest.org showed passed Core Web Vitals based on the lab data. When I measured the results, it showed the following results:
Improving mobile page speed is sometimes a complex process with lots of trials and testing. I can help you improve the mobile page speed and technical SEO score on your WordPress site, built with page builders.
