Luna recently finished developing a new website for tech publication Android Authority. With the new site we aimed to help them branch out and reach more people as well as fine-tuning their SEO.
Our main focus was streamlining the site so it ran as fast as possible.
Speed is everything nowadays. People just don’t have the patience of the churning dial-up era and this means that sites that are a few seconds too slow to load are seeing higher bounce rates than a trampoline at a kid’s birthday party.
Quick loading times are simply what customers expect- it’s not optional. The time it takes for your site to load is the first impression a visitor receives before they’ve even registered what’s on your site. If you’re looking for conversions, nothing matters more than convenience.
According to Think With Google, as page loading times increase from 1 second to 5 seconds, the probability of bouncing increases by 90% and once they’re gone, they’re gone!
In a world where people spend an average of just over 4 hours per day on their smartphones, stumbling into a site that runs like treacle will have them mashing the back button so fast it will activate their fight-or-flight.
No, seriously. They did a study on this and found that the stress caused by a page loading too slowly is equivalent to watching a horror movie alone in the dark. A six second delay in loading a video increases stress levels by a third. That's how much people hate slow websites.
Not only that, but page speed affects your SEO. Google now takes site speed into consideration when determining your ranking. Slow loading times also mean that Google’s crawlers are going to take longer to index pages on your site, meaning new pages could take longer to appear in search results.
One of our biggest priorities in the redesign was improving the mobile experience of the site. Currently, more searches are being performed on mobile than on desktop and this is reflected in Google’s mobile-first index.
On top of that, mobile users spend less time on sites than desktop users and also show a slightly higher bounce rate. It’s clear that their attention is the most valuable for SEO purposes and yet remains the most elusive.
Now, let’s compare some of the stats to see how the site improved.
On Android Authority’s old mobile website the First Contentful Paint (time to load first text or image) was 4.9 seconds and the Largest Contentful Paint (time to load the largest text or image) was 7 seconds. With the new mobile site, we reached an FCP of 1.3 seconds and LCP of 1.8. This is a pretty dramatic speeding up which, in turn, improves user experience and got us a 7% reduction in bounce rate.
We saw performance increases across both the mobile and desktop sites with 2x - 6x speed boosts across the board.
Making the site run faster involved implementing a range of technical changes.
With mobile performance being a high priority for this project, we chose to develop the site as a Progressive Web App (PWA) — meaning it functions similarly to a mobile app. With a PWA we can deliver a faster, smoother site experience to mobile and desktop users as well as allowing the site to be used like an app on phones and tablets.
As a PWA, it can be saved to the homescreen, send push notifications, and be viewed in a cached form offline. Android Authority needs to be regularly updated with the latest news from the tech sphere and, as such, hugely benefits from the ability to send notifications and be easily accessible from the home screen.
To get the site running more smoothly we did some (lots of) tinkering under the hood and made it into a “headless” Wordpress site.
You might have heard about headless Content Management Systems before but just in case you haven’t, here’s what it is in a nutshell. Traditionally, a CMS like Wordpress combines the back end of a site (the server-side) with the front end (the client-side). A headless system involves uncoupling these two elements.
With our headless site we were able to use Wordpress like a warehouse for all our backend stuff, giving us more flexibility to do what we wanted with the front end.
We chose this approach as it complimented our use of Static Site Generation (SSG). Static sites deliver pre-generated pages, meaning the visitor’s browser doesn’t have to do much work, and making them ridiculously fast to load. This is the opposite of dynamic sites where pages are generated as they are requested. With Android Authority, we also used Incremental Static Regeneration or ISR to bridge the gap, meaning we get the speed of a static site, with all the dynamic elements of a heavier site.
On the downside, SSG lacks a lot of the easy management and building capabilities of a CMS. Content Management Systems employ a What You See Is What You Get approach to building so you can edit and create in real-time. Editing a static site, however, requires a certain amount of dev know-how.
As Android Authority is producing regular content, they needed a user-friendly content delivery system. Combining a powerful CMS such as Wordpress with a React.js frontend was like finding the most heavenly wine and cheese pairing. All the speed and versatility of the SSG plus the quick and easy management of the CMS is just... *chef’s kiss*
All our hard work paid off in the end. The new site is a drastic improvement over its last iteration and the immediate drop in bounce rate shows it is already having the desired effect. With the changes we implemented, Android Authority’s readers can now enjoy a faster and more streamlined web experience.
Register here to tune in to our breakout session at WP Engine's Digital Breakthrough Summit 2021 on June 24th @ 2:55 PM CT, where we talk about Android Authority's journey to headless and the radical performance improvements we are already witnessing!
If you're interested in such a site, email us at email@example.com
"Luna transformed our brand and our product. Providing millions of users with one great brand experience!"
Co-founder, Android Authority
Get in touch