Fast, audience-first and efficient – talk about mission alignment. Marissa Halpert, a front end engineer working out of Washington, D.C., and Rick Terrill, leading the front end engineers out of Texas, couldn’t ignore the connection! Together, they led Axios’ shift to AMP-first. We invited the duo for a chat to discover how a beta test in 2019 escalated into a full migration.
Thanks for joining us! To kick us off – could you share a bit about your background?
Rick: I got into tech through a love of video games, and dreamed of becoming a game developer. That quickly turned into a love of Flash (which, I assure you, was super cool back then). A front end nerd was born.
Marissa: I was introduced to programming in high school before going on to study computer science at James Madison University. Since then, I have done full-stack development at a Fortune 500 company and led front-end web projects at a digital agency, before joining Axios in April of 2019.
Can you tell us a bit about Axios, and what attracted you to AMP?
Marissa: Axios launched in 2017 with a mission to make people smarter, faster. We share breaking news across politics, tech, science, media, business, and the world.
Rick: At Axios, we’re all about being audience-first. We want our site to be fast and easy to use, with content that’s worthy of the reader’s time. We figured going AMP-first was the best choice to help us achieve that, and it’s really worked out.
How did you approach making the switch to an AMP-first website?
Rick: It was a two-phase approach. We created a beta in 2019, using an ADR to work through the challenges and agree on details. We implemented our single-story page as a separate application, which was responsible for rendering two or three years of content and a few ad units.
Marissa: Rick’s team wrote most of the beta code before I joined Axios. Wanting to understand more about AMP I attended the Roadshow in Atlanta and began advocating for going AMP-first. After getting the thumbs-up, we kicked off a full discovery process. We chose Next.js 9.1 because of its built-in AMP integration and our team’s existing React knowledge.
What drove that decision?
Rick: The beta test was something quick and easy that we could observe – but our dev team had to maintain two separate code bases (axios.com and amp.axios.com). They were both React.js, but they were also completely different ways of thinking. We wanted to make sure everyone was working in the same way together, using React.js and Next.js.
Marissa: AMP had come a long way since our AMP beta debuted. Ultimately, the lightning-fast speed that AMP is known for (along with the vast component library and community outreach) convinced us to go AMP-first.
Were there any challenges you had to overcome?
Rick: All of our ads at Axios are native ads that we build in-house, and our existing creatives varied in size and dimensions. So the biggest challenge by far was adjusting to the fixed-height world of AMP. This could be a challenge for other businesses with digital ads when building with AMP.
How has AMP helped you improve speed?
Rick: There was a symbiotic relationship between Axios and AMP straight away, because our mission is to help people get smarter, faster on the news and information that matters. AMP forced us to examine every feature, down to the byte, and make sure that it’s worthy of the reader’s time. It also pushed us to remove a lot of complex, client-side logic, which increased Lighthouse scores several-fold.
How has AMP changed your perspective as a team of developers?
Marissa: Being AMP-first means constantly flexing your creative muscles. We needed to re-evaluate how we wrote inline JavaScript. We need to be more mindful of the CSS that we are writing to stay under the 75kb limit. The AMP validator reminds us to always be thinking about the user’s experience.
Rick: Exactly. If you only have one of each color in your pencil case, you start drawing a lot quicker instead of worrying about shades.
Interested in learning more about AMP?
Then sign up for our email newsletter to get the latest updates, event announcements, community discussions, and advanced tutorials straight to your inbox.
Posted by Alex Durán, AMP Project Marketing, Google