- UI/UX design
- REST API
- Increased SERP rank
- Greater design flexibility
- Bleeding-edge performance
Working With Android Authority
Android Authority is one of the largest independent tech publications, with over 20 million monthly visitors. As part of a major transition within the business, Drewl was tasked with developing Android Authority’s new website.
For this project, our goal was to craft a streamlined, performance-optimised user experience across all devices to boost brand impressions and SEO.
In other words: it needed to be fast.
Feeling The Need For Speed
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.
It’s More Of An Issue Than You Might Think (Even If You Already Think It’s A Big Issue)
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.
A Streamlined Mobile Experience
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 although both are showing an overall negative trend. Mobile devices also show a slightly higher bounce rate than desktop devices. Overall mobile users’ attention is the most valuable for SEO yet also the most elusive.
Before And After
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.
Looking Under The Hood (The Technical Stuff)
We implemented a whole range of changes to the website to make it run faster. As mobile performance was a high priority for this project, we developed the site as a Progressive Web App (PWA) — meaning the site 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 mobile devices.
It can be saved to the homescreen, send push notifications, and be viewed in a cached form offline. As a site that’s regularly updated with the latest news from the tech sphere, Android Authority benefits from the ability to send notifications and be easily accessible from the home screen.
“Headless” Content Management & Static Site Generation
To get the site running more smoothly we did some tinkering around 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, then 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 WordPress site we could then use WordPress as a warehouse for all our backend stuff, giving us more flexibility to do what we wanted with the front end.
We chose to use a headless CMS 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.
On the downside, SSG’s lack 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 headless CMS with Static Site Generation 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 was just…. *chef’s kiss*
…And The Results Are In
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.