The Ollie Pro pattern library is a massive collection of expertly-designed patterns that you can use to quickly build beautiful websites in WordPress. To help you quickly browse these patterns, we’ve built a powerful and familiar interface that blends in seamlessly with the WordPress interface.

The biggest benefit of storing all of these stunning patterns in a cloud app is that we don’t weigh down your website with hundreds of patterns and assets. You can simply browse the library and choose what you want to use.

However, one of the big challenges of storing patterns in a cloud app is performance. When you’re building a website, you don’t want to be sitting and waiting for a cloud library to load. You need it to be instant. It simply can’t slow you down.

Speed is everything

Our first version of the Ollie Pro pattern library utilized iframes to generate pattern previews in the pattern browser. That’s how WordPress shows you patterns found within your theme, so we tried this approach as well.

Despite iframes being a not-so-fun element to work with on the web over the years, there are actually some big upsides to leaning on them if the situation is right.

For our use case, being able to show an iframe of the live pattern was great. Users would see a true representation of the pattern at all times. If we updated a pattern, the user would see that update instantly. It would also mean we didn’t have to endlessly generate new screenshots every time a pattern was updated.

But as I mentioned, iframes are not particularly fun to work with. No matter how well you optimize your assets, at the end of the day, you’re loading remote content. And that can come with a whole host of variables that are simply not scalable.

Good enough isn’t good enough

Despite the inherent hurdles of iframes, we were able to really dial in the performance of the iframe pattern previews. It was actually an impressive feat of engineering that Patrick and I devised to try and make this work. And for some people, that might have been good enough. But we didn’t start Ollie to ship stuff that was just “good enough.”

So after exploring some different solutions, we decided to pivot and use images for pattern previews in the pattern browser.

For some people, that might have been good enough. But we didn’t start Ollie to ship stuff that was just “good enough.”

My first instinct was to think “Omg, I’m going to be generating screenshots the rest of my life.” But Patrick, being the crafty and resourceful developer that he is, found a solution with ScreenshotOne. This is a screenshot API that Patrick wired into our pattern editor, and with the click of a button, it generates a perfect screenshot of our pattern.

Problem solved, iframes gone, and a bunch over overly-complex code was removed from the plugin in the process.

The difference was staggering

Like I said, the performance of the Ollie Pro pattern library with iframes wasn’t bad. It just wasn’t blazing-fast, which is the experience Patrick and I both wanted to bring to market.

But with the image-based approach, along with dozens of other performance improvements we included over the past few weeks, the pattern library now loads nearly-instantly and the feedback has been resoundingly positive. ⚡️ Visit the Ollie Pro page to take the pattern browser for a test drive.

Not only that, there’s plenty more we can do to make it load even faster. We’re just one week into Ollie Pro being live and we have a truck load of improvements to keep rolling out in the coming weeks.

Thanks to our beta testers and early customers that helped drive some of our early improvements and pivots. Their early vote of confidence in the product gave us the extra energy to make these last minute performance changes.

Get Ollie Pro

Our first week of Ollie Pro has proved one thing: people have been waiting for a product like Ollie Pro to start building beautiful, responsive websites with the WordPress site editor.

The excitement has been palpable. The sales rolling in have validated our assumptions. The niche we’re investing in is still relatively new but has a very long road ahead of it.

Learn more about Ollie Pro and grab a copy of it by visiting the Ollie Pro landing page. And if you want to give it a try for free, check out the free Ollie block theme.