Streaming in the Shadow Reader
What did we do?
We made The Shadow Reader faster again!
We created The Shadow Reader (https://amp.cards) to demonstrate how AMP pages can be used within a Progressive Web App (PWA) (read our announcement post for more context). The site folds real articles from The Guardian into an immersive news reader experience. It’s a demo, but it’s also a fully functional site, containing everything you need to embed AMPs inside a beautiful PWA.
Earlier this year, we enhanced the Shadow Reader to follow an AMP=>AMP/PWA pattern, which made initial article loads faster and made the entire app more SEO-friendly. Now, we’ve made the site even faster by adding DOM streaming. That means the browser can render content as it loads – it doesn’t have to wait until the full load!
The latest from AMP Analytics providers
As AMP turns three, we can’t help but look back with nostalgia on how far along we’ve come along in our mission – Build the best open web technology that lets publishers create fast and secure pages without compromising on user-experience. That is why we built the analytics infrastructure in AMP that allows for “collect once, notify many” architecture for metrics on the page. This allows for AMP Analytics to be fast and accurate while using fewer resources on mobile devices.
AMP Analytics’ interface allows third-party analytics partners to easily integrate with the service. Websites building with AMP can choose from over 55 analytics providers today to get accurate metrics of the page.
We’re continuing to invest in the ecosystem, and wanted to give a shoutout to some of the amazing providers who also continue to invest in AMP. Over the coming few months, you’ll see deeper integrations from the following partners with AMP.
AMP continues to be adopted by Adobe customers, who love the speed that AMP provides and the mobile first approach. Adobe has supported AMP from the beginning with two different analytics templates that customers can use based on their needs. In 2019, Adobe would like to build out more robust ID linking capabilities as well as enhance the current templates to support more events out of the box to make the implementation...
AMP story learnings and best practices
Since we announced the developer preview of AMP Stories, we’ve been focused on ensuring the format is an easy and compelling way for publishers to create visual content on the web. It’s been exciting to see the experimentation and direction that some early testers have taken with the product.
Naturally we’ve also had a lot of people asking us to share early learnings about AMP stories – what works, what doesn’t – so we’ve tried to compile a quick run-down of best practices here:
1) AMP stories are just that – stories, intended to communicate a message, explain a situation, an event, a person, a concept. Publishers should be telling important stories worth reading that are both visually-rich and share relevant information in their text accompaniment. We’ve seen visual stories created in a variety of content categories, from sports to recipes to hard news to entertainment. Some things to avoid:
AMP stories which are just image slideshows or auto-generated are often lacking the core content that users are expecting and looking for when choosing what to read.
AMP stories should be complete, self-contained articles; they should make sense and be useful to the user without requiring the user to link out.
See AMP story examples from the Washington Post, Mic.com and FIFA (shown above).
Example from FIFA
2) Asset Quality Matters
Child Mind Institute boosts social shares on AMP pages with AddThis
Posted by Chad Edmonds, Director of Product Marketing, AddThis
AddThis has been excited to work with the AMP project over the past year, to ensure the web is fast and user-friendly for everyone. As AMP turns 3 years old this month, we’re celebrating the project’s progress with a recent case study showing increased shares and engagement using the AddThis AMP component. Happy birthday AMP!
Child Mind Institute is an independent, national nonprofit dedicated to transforming the lives of children and families struggling with mental health and learning disorders. The organization’s website, childmind.org, provides content and resources to help those in need.
Mobile traffic has become an increased priority for the Child Mind Institute and they’ve recently implemented Accelerated Mobile Pages (AMP) to provide a better user experience for mobile visitors. Since implementing AMP in November 2017, they now see an average page speed of 3.1 seconds compared to their previous page speed of 7 seconds.
Growth from AddThis Share Buttons
AMP was a huge success, and boosting social traffic was the next step to keep the momentum going. Childmind.org already had AddThis Floating Share Buttons on desktop and it made sense to use AddThis for AMP and their other mobile pages. It didn’t take long for Child Mind Institute to see results—they increased shares from AMP URLs by 10% (...
Three Years of AMP!
Not long ago the mobile web was sluggish, clunky and at risk of being closed off by apps. Many publishers were concerned how this would affect their future and the promise of the open web. News publishers approached us at Google to help ensure their content was easy to distribute and read across the web. To tackle these challenges, we partnered alongside publishers and tech companies on an initiative to strengthen the web, especially on mobile. Three years ago this month, together we announced the launch of the open source Accelerated Mobile Pages project.
Fast forward to today and there have been over 11,000 commits to the AMP code and the AMP project’s pledge to ensure the web is fast and user-friendly for everyone remains the same. Since its launch in 2015, AMP has grown to power billions of pages across the web from tens of millions of domains. The project has grown from a small group of dedicated committers, to the more than 700 contributors globally, with the support of hundreds of companies. And just last month, over 80 contributors met in person at the first AMP Contributor Summit.
A strong community
Since 2015, we’ve seen the community come together to participate and shape the future of the project. From the core group of companies and developers who helped launch the project, to the more than 400 developers at AMP Conf in Amsterdam, and the over 20 cities where...
What’s new in AMP, Q4 2018
A new, open governance model for AMP
In a separate blog post, we discussed our intent to move to a new governance model for the AMP Project.
For browsers that restrict third-party cookie access, AMP Linker is a new way to keep user sessions in sync. See our announcement blog post for details and how to implement them on your webpages.
“Infinite scroll” with amp-next-page
<amp-next-page> (now available as an experiment) supports what some call “infinite scroll” of articles. Developers can specify up to three URLs to load when the user gets to a specified scroll-depth in the page, and those documents will load seamlessly inline.
Tilt-bound animations with amp-orientation-observer
<amp-orientation-observer>, which supports low-level syncing between the orientation of a user’s device and frames in a given animation, is now launched. With this you can create a range of effects, like subtly shifting the background of your page, panning images, or advancing an animation on tilt. You can even create a layered 3D space by shifting multiple overlaid components of a scene at different rates.
Compare images with amp-image-slider
<amp-image-slider> gives users the ability to compare two images as overlays. This can be especially useful for “before & after” photos. Read more about that component in our recent blog post.
AMP Story Ads...
AMP Contributor Summit: Learnings & Takeaways
We held the first ever AMP Contributor Summit late last month, bringing together more than 80 developers from the open source community to meet each other face-to-face, talk about the latest developments in AMP and discuss where AMP should head into the future.
The summit kicked off with a New Contributor Day for people who were new to contributing to AMP. After a series of talks covering the basics of AMP extensions and how to get code reviewed and merged, we spent the afternoon writing code. We had 46 pull requests created on New Contributor Day alone, including many from people who had never contributed to an open source project before! If you’re interested in contributing to AMP but weren’t able to make it to the summit, check out the New Contributor Day talks and maybe even try the beginner or advanced codelabs!
On the second day of the summit members of the community gave talks to bring everyone up to speed on the latest in AMP and to get the attendees thinking about AMP’s future. Malte Ubl kicked off the day with an overview, and then a range of topics were covered throughout the day, including JS in AMP the proposal to change AMP’s governance model and fixing AMP URLs. All of these talks are now available on an AMP Channel playlist.
For the last day of the summit the attendees split up into a wide variety of discussion groups. These...
The latest results with AMP
In 2016, Australian car insurance comparison service Greenslips.com.au, embarked on a website redesign. After looking at possible web frameworks to meet their needs, they chose to rebuild their website with AMP. This allowed their developer team to maintain a single code base which ensured great and fast experiences on both desktop and mobile. Since launching their entirely “AMP-first” site earlier this year, Greenslips.com.au has seen a 12-15% (device dependent) increase in conversion rates on top of the expected speed gains of 15%.
Greenslips.com.au saw a 12-15% increase in conversion rates
Greenslips.com.au isn’t alone. We’ve seen many recent examples of businesses in both the publishing and e-commerce space see success with implementing AMP on their websites. In the last month we’ve published 5 new case studies on AMPproject.org — with more on the way. While each of these cases is unique, we hope that by sharing them, both businesses and developers can better understand how embracing AMP might benefit their own websites.
Indian publishers like The Tribune and Jagran New Media have seen revenue increases on their AMP pages, which are paired with their traditional site. In particular, Jagran New Media saw a 4.5x increase in revenue from mobile, along with an increase in traffic. Readwhere, the CMS provider used by The Tribune, is seeing both higher mobile revenue and...