While most landing page templates have nailed the layout requirements to improve conversions, many just have good-enough performance, especially on mobile. Given that performance can dramatically affect conversions, why is it so hard to find a landing page that has both great design and performance?
According to this web.dev article, poor performance can have a negative effect on business goals.. The BBC found they lost 10% of users for every second their site took to load.
In other words, if you spend $5,000 a month on Pay-per-click ads, every extra second of load time could be costing you $500 a month!
From a developer standpoint, a good performing landing page can be achieved by simply reducing the amount of JavaScript and CSS, optimizing images, and making sure your code does not load the main thread with tasks that take too long.
Wait, that actually does not sound so simple. But even then, a team of developers should be able to figure this out, right?
Well, maybe marketing is to blame. The first thing I noticed when looking for a way to create landing pages is that most templates claim great Pagespeed but their demo is really simple, not what you would expect for a landing page.
I mean, take a look at this landing page from elementor’s Hello theme, a theme that claims to be the “Fastest WordPress Theme Ever Created.”
Their demo scores 98 on mobile and 99 on desktop. Great! Take a look for yourself.
Now let’s create a simple landing page by adding an image, heading, text, and button. The Hello theme scores 63 on mobile and 92 on desktop. Take a look
Other WordPress Templates
I took the same cursory approach and looked at other templates, but this time I made sure their demo included an actual landing page. For WordPress, I looked at Neve by Themeisle, and Astra theme.
Both these themes scored 90 or above on desktop, but on mobile they scored within 50-89.
JAMSTACK
So as a software developer, I decided to pull the big guns (or small? depending on how you see it) and took a look at some JAMSTACK frameworks.
I come from the world of Yii, so that makes me a PHP developer, and I naturally gravitated toward frameworks that use Vue.
I don’t want anything that is in beta (though I am rooting for Gridsome to be production-ready someday), so I tried Nuxt.
Maybe it was the excitement of using new tech that took a hold of me, but once I started using Nuxt, I decided to redesign my website which was based on WordPress but used a custom theme I made that used Material Design as the CSS/JS front-end framework.
And I am happy with the results. My whole website became fast and with the added benefit of becoming a Progressive Web App (I was really happy to run a full Lighthouse test that included PWA).
But the journey was not easy. Google Analytics did not work properly at first, that was because the Nuxt documentation was not up to date, I had to make a custom Image Component so I can continue to use Cloudinary as my Image CDN. I had to set up Lazy loading. And the part that took me the most time was optimizing code-splitting to reduce the size of JavaScript files, and sure, I was learning a new framework at the same time, so there is that.
But after finishing my website, I thought, should I use Nuxt to create sales funnels for my clients? or should I keep looking?
So I thought, let me get out of my comfort zone and try something based on React. So I aimed at Gatsby.
But because I suspected this would be another rabbit hole, I decided to check if any company had created a Web Design Software as a Service platform that creates beautiful landing pages that also perform well.
Website Design and Landing Page SaaS
I decided to test Webflow and Unbounce.
Webflow
I started with Webflow because a while back I had considered using it to create a one-page website and already had the layout set, so all I needed to do is test it with Pagespeed insights.
Webflow did well on desktop, with a score of 92. But on mobile, it received a 61.
I suspected bad design on my part and/or old code. So I decided to start with one of their starter templates before breaking out the Performance Profiler.
The starter template scored 97 on desktop, and 87 on mobile. Not bad.
So I went ahead and investigated a little bit to see if Webflow provides ways to optimize page load.
The tool is meant for designers with some coding experience, not for developers. So I found that their resources pointed mainly toward limiting your animations and optimizing images. The forum shows that people ask about this, but it looks like this part would fall under Webflow’s platform and not the developer or designers.
I find that limiting to attain my “Perfect Landing page” dream. But I’m definitely impressed with what Webflow can do. I’ll keep an eye out for them.
Unbounce
I signed up for a trial of their Advanced level subscription and used their Page Builder to select a template.
I selected Advanced for the subscription to be able to create pages using AMP.
The page scored 98 on desktop and 74 on mobile without the AMP version of the mobile page.
I found out that with Unbounce I have to create a page that uses AMP separately from the canonical page. That means with Unbounce you have to maintain two pages for every landing page. That’s going to be a pain.
With AMP setup, the mobile page scored 89.
My only gripe with any Website and Landing page SaaS is the dependency on the platform. In my experience technology needs to be updated frequently, so having control over updates is actually a competitive advantage.
As long as the SaaS updates and implements feature requests on a timely basis, then it’s comparable to maintaining your software in-house.
Part 1 Summary
Ok, so up to this point I think Webflow and Unbounce are good choices for landing page creation.
Webflow is more mature than Unbounce. However, Webflow brands itself as a website builder, while Unbounce focuses on Landing Page creation.
Designers with coding experience would probably go with Webflow, while marketers with design experience would go with Unbounce.
How about developers?
That is probably what I’ll be answering in Part 2.
