This post about transitioning to the WordPress Ollie block theme is part of a series where we share our learnings on managing a hobby website. It’s intended for WordPress hobby website administrators.
Key Takeaways
- The transition from Avada to the Ollie Pro block theme significantly improved the Waterland Event Hire website’s PageSpeed Insights scores from 73 to 93.
- Rebuilding each page with Ollie Pro takes time, and the complexity varies based on the number of pages.
- Maintaining the same URLs during the conversion process was critical for SEO and ensured a smooth transition.
- The migration involved optimising images and carefully recreating design elements like the cover block using native WordPress features.
- Overall, Ollie Pro delivered a fast, efficient website, demonstrating its effectiveness as a block theme.
BajanThings is built using the Ollie Pro theme. We are huge fans of Mike McAlister and Patrick Posner the team behind Ollie. Ollie Pro works out-of-the-box. It looks great. It has beautifully crafted patterns. What’s even more impressive is how fast sites built using Ollie Pro are right out-of-the-box.
My niece runs Waterland Event Hire and Site Services. Starting out in business in 2014, Waterland used a small agency to build their website. It was built using Avada. Over the last few years I’ve been helping my niece to optimise the Waterland Event Hire and Site Services website so that it ranks highly in their operating locale: East Yorkshire.
In our post: In praise of the WordPress block theme: Ollie Pro we highlighted a test we did to recreate the homepage of my niece’s website: Waterland Event Hire and Site Services using Ollie Pro.
Waterland Event Hire and Site Services front page
built using Avada Page builder
Mock-up of
Waterland Event Hire and Site Services front page
built using Ollie Pro
The original Waterland Event Hire and Site Services website was built using Avada Website Builder (formerly Fusion Builder).
We hit a wall optimising the Waterland Event Hire and Site Services website. Our PageSpeed Insights scores were stuck at around 73.
Avada is a front-end visual page builder for WordPress. Page builders like Avada offer convenience and speed, but their hidden costs is bloated code and sluggish performance. An additional factor was some of the Yoast Pro SEO analysis tools would not work with Avada!
The sluggishness of the Avada built version of the Waterland Event Hire and Site Services website was a result of additional code and scripts these Page builder tools generate.
Page speed is a critical factor for search engines when ranking websites, as they prioritise fast-loading sites to provide a better user experience. Consequently, websites that rely heavily on Page builders may suffer in search engine rankings, leading to reduced visibility and lower organic traffic. This was our experience with the Avada built version of Waterland Event Hire and Site Services.
We opted to bite-the-bullet and change the website from using Avada to using the native WordPress block theme Ollie Pro. Having done this our out-of-the-box PageSpeed Insights scores jumped from around 73 to around 93!
It should be noted:
The conversion of an Avada based website or for that matter, any WordPress website built using a proprietary Page builder, to a native block theme, will be time consuming.
The amount of work will depend on the number of pages/posts. The Waterland Event Hire and Site Services website consisted of 33 webpages and no posts. It took me about a month to complete the conversion.
Converting an Avada based website to a native block based website is not a simple port from say a classic theme like Twenty Seventeen or Astra to a block theme like Ollie.
Each page and post has to be rebuilt as Avada Builder, the Avada Page builder generates propriety code that is incompatible with the native WordPress Gutenberg page builder.
The conversion process require setting up a staging site where each page/post need to be systematically overwritten using the Gutenberg block editor, re-creating each page/post and section using native Gutenberg blocks, while closely matching the design and layout of the original Avada website (as we did with the Waterland Event Hire and Site Services front page mock-up).
While doing this we also took the opportunity to optimise all the images used and to make them .webp format.
Critical for SEO is the URLs remain the same. During the conversion process the Avada site remained the Master while each and every page/post on the staging site was converted to the native WordPress format.
When we completed the staging site – the staging site was pushed to being live.
Before pushing the staging site to live we took multiple back-up of the Staging site and the Avada site. This was so is if something went wrong the agency could easily do a roll-back… that’s more down to learning the hard way, some grey hair and wisdom!
The next stage of the process is: over the next week we are moving the Waterland Event Hire and Site Services website from hosting handled by the agency to Waterland managing their own hosting. Via the aggregation of marginal gains from moving from PHP 8.1.34 to PHP 8.3 or even 8.4, adding REDIS Object cache and maybe even integrating QUIC.cloud, we anticipate a further marginal speed boost from 93 to maybe 95 or 96! That’s pretty phenomenal.
The hardest part of the conversion was re-creating the cover block on the home page with a curved top and bottom which uses a built-in Avada feature – called an Avada Section Separator. We re-created this using a standard cover block with a SVG top and bottom mask which was inserted via the Icon Block. The icon block allows you to insert Custom SVG code.
Here is the Custom SVG code that created the top and bottom masks:
SVG - Top -> created using https://svgeditoronline.com/editor/ with the output then edited
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1024" height="80" viewBox="0 0 1024 80">
<g transform="matrix(13.29 0 0 -2.46 512 36.06)" >
<path style="fill: #ffffff; fill-rule: opacity: 1;" transform="translate(-48, -48)" d="M 9.113 65.022 C 11.683 45.575 28.302 30.978 48 30.978 c 19.696 0 36.316 14.598 38.887 34.045 H 9.113 z" />
</g>
</svg>
---
SVG - Bottom -> created using https://svgeditoronline.com/editor/ with the output then edited
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1024" height="80" viewBox="0 0 1024 80">
<g transform="matrix(13.29 0 0 2.46 512 44.06)" >
<path style="fill: #ffffff; fill-rule: opacity: 1;" transform="translate(-48, -48)" d="M 9.113 65.022 C 11.683 45.575 28.302 30.978 48 30.978 c 19.696 0 36.316 14.598 38.887 34.045 H 9.113 z" />
</g>
</svg>
Everything else was accomplished using native WordPress blocks.
All in all, we think we nailed the migration of the Waterland Event Hire & Site Services website from the Avada Page Builder to the native WordPress Ollie Pro block theme. And now the site is super fast!
A Big thank you to Mike McAlister and Patrick Posner the team behind Ollie Pro. Ollie Pro is BajanThings go-to block theme.
