Google AMP yields 600% increase on mobile site page load speed
Hacking away speed with AMP
Mobile page speed will become a ranking factor in Google search
Google has recently announced that starting in July 2018, it will release an update that prioritizes mobile site load time in its ranking algorithm. This means that improved mobile website speed will also improve a site’s ranking in Google searches.
To stay ahead of the curve, the product team at Zaplabs participated in a hackathon at Google where we focused on a simple offering, Accelerated Mobile Pages (AMP), with the goal of improving mobile website speed in order to drive more traffic and provide a better user experience. We wanted to deliver a maximum feature impact with minimum changes to the existing infrastructure that allows for fast learnings and building without legacy constraints.
Our team leveraged Google’s Engineering department resources to build a proof of concept that could benefit diverse parties ranging from Engineering, Design, SEM/SEO, to real estate professionals and our consumers — home buyers and sellers. Our main goal was to push beyond our boundaries to create something new, exciting, and useful for all teams.
What we hoped for
Previous studies have shown that improving performance directly affects metrics like conversions, total dollars spend, and time spent on site. Since higher page load times correlate with higher bounce rates, we hoped that increasing our site speed will reduce bounce rate and increase conversions.
What we did
Couple weeks before the day of the hackathon, we started sketching ideas, mapping out entry points, exploring potential landing pages and markets, reviewing traffic data on GA, comparing conversion opportunities, and discussing obstacles and constraints. We initially defined several experiments to test but decided to focus on one user journey and one high value conversion event.
Since search engine results pages are the most popular entry point into our consumer sites, the potential to see spikes in traffic as a result of reduced page load time was widely appealing. We identified a lower cost market to experiment which was in Denver, CO and split our traffic that was SEM-driven to build live search results pages (pages with home listings). We planned on A/B testing our AMP page with our current production version for 30 days to see if our speed improvements had any impact on user engagement.
Simplified Design
Embracing the restrictions of AMP (ie. no Javascript) meant that our team had to either limit feature scope to what can be supported with AMP tools or use an external link that directs users to the current production page.
We defined our most valuable conversion event as “Contact an Agent” CTA which triggers a Signup form that requires consumer profile information that’s highly valuable to our real estate agents. We pinned the CTA at the bottom, hoping that easy accessibility of the button would increase lead quality for our real estate agents since on our current website, conversion events don’t exist anywhere on the search results page.
We only kept the UI that was essential and reduced the amount of information on the property detail card to deliver to the new MLS API we were implementing. With less features and code like Javascript, we couldn’t wait to see how fast AMP pages would load compared to traditional HTML pages.
What We Got Done
During the one-day hackathon, our engineers were able to deliver:
- Increased site speed
- Hands-on AMP knowledge transfer
- Deployed cached, scalable, https, API driven SERPs for all zips, cities and neighborhoods around Denver, CO
- Tracking with the AMP version of Google Analytics
- Pages that were built with web components so that each piece is reusable
The result was 600% improvement from previous non-AMP load time!
The result was nothing short of amazing. The page load time for the new AMP page was 1 second, a 600% improvement from the previous non-AMP load time of 6 seconds. When tested in Google’s Lighthouse Speed Test, our Lighthouse score improved from 68 to 94 (for context, a score of 80 is generally considered good, while anything beneath that requires optimization).
The looping animated gifs show versions of the page loading. Our new page animation runs several times while the old version runs once. These measurements are made on a bandwidth throttled connection. The film strips show the progress over time and illustrate the significant improvement.
It’s amazing how much faster you can get something painted when you have no blocking JS or CSS. The final load numbers are even farther apart. The time to each page being consistently interactive is far slower on our production site — 6 seconds vs. 1 second on the AMP version.
Next Steps
This hackathon helped our team quantify the cost and benefit of performance optimizations and degradations. We plan on A/B testing our AMP page with our current production version for the next 30 days to see if our speed improvements have any impact on conversion rate and engagement.
Special Thanks
The AMP concept was the brainchild of our lead front-end developer Aaron Hans. He was supported on-site at Google by Peik Sia, Sui Mak, and Alex Hill. Our remote team of product managers and designers included Michele Weiner, Willem Jager, Dario Navarro, Ryan Lee, Saurabh Mallik, Joe Ngo, and Chris Ong.
