Experience the Lightning Bolt

Editor’s note: The following was originally posted on eBay’s Blog by Senthil Padmanabhan, Principal Engineer. 

eBay continues to leverage AMP technology to accelerate and improve mobile experiences.

Experience the Lightning Bolt

Shopify Merchants Will Soon Get AMP’d

Editor’s note: The following was originally posted on Shopify’s Blog by Haani Bokhari, Front End Developer. Read below to learn how Shopify is using AMP.

Today we’re excited to share our involvement with the AMP Project.

Life happens on mobile. (In fact, there are over seven billion small screens now!) We’re not only comfortable with shopping online, but increasingly we’re buying things using our mobile devices. Delays can mean the difference between a sale or no sale, so it’s important to make things run as quickly as possible.

AMP, or Accelerated Mobile Pages, is an open source, Google-led initiative aimed at improving the mobile web experience and solving the issue of slow loading content. (You can learn more about the tech here.) Starting today, Google is pointing to AMP’d content beyond their top stories carousel to include general web search results.

We’ve been playing with AMP for the past few months, tinkering with ways to improve the mobile experience for Shopify merchants. We’ve created an app that merchants can install to provide AMP to all of their products. This means, when a Shopify merchant’s product would normally appear in Google search results, a customer will go from results to checkout page in two quick taps. Over the next weeks, we’ll be slowly rolling out our AMP alpha for select merchants.

This work continues our commitment to open source projects, which you can find on GitHub, and to mobile projects that meaningfully benefit merchants. Keep your eyes on this space as we continue to work on AMP and share our learnings.

Posted by Haani Bokhari, Front End Developer

Shopify Merchants Will Soon Get AMP’d

A Faster Reddit with Accelerated Mobile Pages

Editor’s note: The following was originally posted on Reddit’s Blog by u/illymc, Product Manager, Channels. Read below to learn how Reddit is using AMP.

Reddit is creating web pages that load almost instantly by leveraging Accelerated Mobile Pages (AMP for short). Slow to load pages are the primary reason that 39% of mobile users are unhappywith their web browsing experience. Creating fast mobile web experiences turns out to be very challenging; Vox Media, a tech company whose sites get over 150 million unique visitors a month, declared “performance bankruptcy” in 2015 citing pages that took 23 seconds to finish loading on average. AMP is a game changer for the mobile web because it makes it easy to create pages that load in a tenth of a second. Google’s performance experts have helped create the AMP standard so you know it’s reliable.

Today, we are announcing the launch of tens of millions of AMP pages on Reddit. These pages load between 7 and 30 times faster than our previous mobile pages. Every self-post created on Reddit now has a corresponding AMP version. Google will be showing these pages in it’s search results more and more over time. These pages focus on the most important part of the Reddit experience — the great content our users create.

Here’s an example:

jeremy-blog-post-visual

We were pleased to discover that creating AMP pages was a snap for our engineering team. AMP is a set of components verified by performance experts at Google to load incredibly quickly. As a result, building web pages becomes more like putting together LEGO blocks instead of having to carefully craft every aspect of your page. Some product developers might worry that having a constrained set of choices would lead to a compromised user experience. However, we found that being limited to AMP’s components made it easy to focus our design efforts on the content that users come to Reddit for.

Today, most companies are creating separate AMP versions of pages they already have. Here at Reddit, we are so excited about AMP that we’re experimenting with developing new pages in AMP. AMP pages look great and load fast on desktop just like they do on mobile. Maintaining good performance to pages as they change often amounts to a time consuming game of Whack-A-Mole but we can be confident our AMP pages will always be fast. So, for many kinds of pages, we think the AMP version is the only version we’ll ever need.

Posted by u/illymc

A Faster Reddit with Accelerated Mobile Pages

AMP and React+Redux: Why Not?

Editor’s note: The following was originally posted on Reddit’s blog by u/arbeitrary, Senior Software Engineer. Read below to learn how Reddit is using React to enable AMP.

At Reddit, we recently built alternate versions of some comments pages that use Accelerated Mobile Pages (AMP) technology — a technology designed by Google and others in the open source world to ensure that pages load instantly from search results on mobile devices. We have implemented it to improve the Reddit experience for mobile users.

We’ve built this as a Node.js app using React and Redux. React is a modern web framework that solves a number of problems that occur during web development. Redux is a library that helps maintain UI application state and abstracts state transitions away from user controls and API callbacks, providing an immutable, single source of truth about application state to the view components. React and Redux might seem like an odd choice for an app that essentially renders static markup, but we found the combination to be effective. Our decision was more about people and productivity than the code itself.

We have an awesome team working hard on a new version of our mobile web app that uses React and Redux. It will replace the site currently running on m.reddit.com, and will ship in the coming weeks. The new app is a single-page app, which means that instead of the server rendering each page, client-side JavaScript code handles clicks, makes data requests to the API, and renders new views live in the browser. To support a great experience when the app first loads, we also support full and partial rendering of a page on the server-side.

Our primary goal for choice of technology to build the AMP app was to let us move quickly while creating a great user experience. Since AMP is a fundamentally mobile experience, we chose to use the new React and Redux-based version of our mobile web app as a starting point, but using it exclusively with server-side rendering. Starting with an existing codebase let us focus attention on how an AMP experience for Reddit should differ from the core mobile web experience. React let us use AMP components like amp-img or amp-accordion to build our views the same way we use any HTML element, so we maintained a consistent paradigm with our other React projects without adding glue for each new component.

As our AMP traffic increases, we learn more about AMP in production, and we continue to explore more ways to serve mobile redditors, the line between our AMP app and our core mobile web app may blur. We have intentionally left the door open for merging our AMP app and mobile web app together. At a basic level, this makes code sharing simpler while giving us flexibility to draw on fast-loading AMP to gracefully enrich the interactivity of our pages as new users become regular redditors.

From both a technology and user experience perspective, we’re excited about new tools and ecosystems like AMP and React. Both enable developers to write better code for a fast and engaging web. Anything is fair game when it helps us build solid technology for helping redditors find their home on the Internet.

Posted by u/arbeitrary

AMP and React+Redux: Why Not?

Google Search Results are officially AMP’d

Editor’s note: The following was originally posted on Google’s Inside Search Blog by David Besbris, VP Google Search. Read below to learn how Google Search is using AMP on Search results

Along with many others in the open source Accelerated Mobile Pages Project, we’ve been working to make the mobile web experience faster. In February, we launched AMP in the Top Stories” section of Google Search, delivering news in a fast and reliable way. In August, we previewed linking to AMPs across the entire mobile search results page. Today we’re excited to announce that we’re rolling out that faster experience to users across the world.  

Now when you search on your mobile device, you’ll see a label that indicates a page is AMP’d. This doesn’t change Search results but will show you which sites have pages that are ready to load lightning fast.

amp-result-v3-cellphonecase

Today, the median time it takes for an AMP page to load from Google Search is less than one second. Beyond just saving you time with fast loading pages, AMP will also save you data — AMP pages on Search use 10 times less data than the equivalent non-AMP page.

To date we have over 600 million AMP documents created by sites such as eBay (US), Reddit (US), Shopify (Canada),  Konga (Nigeria), WikiHow (US), Cybercook (Brazil), Skyscanner (UK), and many more from all over the world (232 locales and 104 languages). These pages cover retail, travel, recipe, general knowledge and entertainment. That’s a lot of fast-loading pages!

To find out more about AMP, check out ampproject.org.

Posted by David Besbris, VP Google Search

 

Google Search Results are officially AMP’d

New study: #SpeedMatters for mobile user engagement and revenue

The AMP project was founded on the belief that for the mobile web to be better, it needs to be faster.

The Need for Mobile Speed”, a new research study released today by Google, quantifies the real impact of mobile speed on user engagement and revenue. Based on an analysis of 10,000+ mobile web domains, and data from across Google Analytics and DoubleClick, Google’s research team found that:

  • 53% of mobile site visits are abandoned if pages take longer than 3 seconds to load
  • The average load time for mobile sites is 19 seconds over 3G connections
  • The average mobile page makes 214 server requests

The study also projects, that while there are several factors that impact revenue, publishers whose mobile sites load in 5 seconds earn up to 2x more mobile ad revenue than those whose sites load in 19 seconds.

Insights like these reinforce the mission of the AMP project — to improve the experience of the mobile web for everyone, across every device.

To read more about the study, visit g.co/MobileSpeed.

Posted by Rudy Galfi, Product Manager, AMP Project

New study: #SpeedMatters for mobile user engagement and revenue

Live-updating AMPs — launched

At the end of July we announced the beta launch of <amp-live-list>, a component that updates page content dynamically without additional navigation or reload. For the core use-case of live blogs, this helps publishers connect readers to breaking news as it unfolds.

Today, we’re pleased to announce that we’ve graduated <amp-live-list> out of beta. Developers can use the component in production pages, and readers can enjoy live-updating content like live blogs in AMP. For instance, The Guardian is already using <amp-live-list> to publish their liveblogs.

amp-live-list-guardian2

“Live updates are a valued feature of our regular liveblogs, so it’s great to have such an easy route to supporting them in AMP.”

— Simon Adcock, Front-end Developer, Guardian News & Media

And this is just the beginning. We want to enhance <amp-live-list> with some of the feature requests we’ve gotten from developers, like the option to trigger updates without user interaction or display the number of available updates. So, as always, check out the documentation in GitHub and at AMP by example, and give us feedback on what you’d like to see next!

Posted by Eric Lindley, Product Manager

Live-updating AMPs — launched