AMP Stories immerse your readers in fast-loading full-screen experiences. Easily create visual narratives, with engaging animations and tappable interactions.
The AMP Story format is free and part of the open web and are available for everyone to try on their websites. They can be shared and embedded across the web without being confined to a closed ecosystem or platform.
AMP (Accelerated Mobile Pages) | Webmaster Guidelines – By jmexclusives
AMP Stories provide content publishers with a mobile-focused format for delivering news and information as visually rich, tap-through stories.
In addition, AMP Stories offers a robust set of advertising opportunities for advertisers and publishers. Particularly, to reach a unique audience on the web with immersive experiences.
Read and learn more about AMP (Accelerated Mobile Pages) | Webmaster Guidelines before you choose to proceed.
What are the AMP Stories?
AMP stands for Accelerated Mobile Pages and was introduced by Google in October of 2015. Furthermore, AMP is an open-source custom web development framework. Not to mention, created to speed up the loading time of web pages on mobile devices.
Google’s AMP stories features allow publishers to create content that is very similar to Instagram stories, designed with mobile websites in mind. But, the content created with AMP doesn’t end up on apps. Instead, it’s placed in search results pages.
AMP is an open-source project that was created in response to the fact that mobile users now spend more time on apps than on websites. 77% of their time, to be exact, according to Statista data.
With AMP, content loads extremely fast, which helps keep mobile users on those pages and off of their apps. Instead of regular search engine results, users receive a swipeable story that’s easy to navigate. The UX is somewhat similar to the popular dating app, Tinder.
Here is more;
For your information, AMP partners include CNN, Mic, Wired, The Washington Post, Mashable, and People. Beyond loading at lightning-fast speeds, AMP Stories can also be shared in the same way news articles are shared.
Images, Videos, and GIFs
AMP stories are built with visually rich media, and whether you utilize pictures, videos or GIF assets is up to you.
Images and videos expand to visually fill the readers’ screens, providing a smooth and fully engaging experience. AMP allows you to specify the file type to account for the user’s network connection and browser capabilities.
Text and Audio
Convey facts and figures via bite-sized chunks of one or two sentences – ideal for mobile devices. Choose from different font colors for basic readability. Or add visual elements like subtle black transparent gradient overlays to ensure readability.
Even on random background imagery, for example, user-generated content. On top of this, you can use short audio files on every page to provide spoken information or background music.
Animations and Interactions
It’s easy to create visual effects and tappable interactions that keep readers engaged. Titles can fly drop, fade-in, or animate onto the page.
Configure your story to automatically progress to the next page when a video snippet is finished. Provide social sharing and related links at the end of your story, so users can share it or dive further into other content on your site.
- Create Beautiful and Engaging Content Easily: AMP stories make the production of stories as easy as possible from a technical perspective.
- Creative Flexibility for Editorial Freedom and Branding: The AMP stories format comes with preset but flexible layout templates, standardized UI controls, and components for sharing and adding follow-on content.
- Sharable and Linkable on the Open web: AMP stories are part of the open web and can be shared and embedded across sites and apps without being confined to a single ecosystem.
- Track and Measure: Supports analytics and bookend capabilities for viral sharing and monetization.
- Fast Loading Times: AMP stories are lightning-fast so that your audience stays engaged and entertained.
- Immersive Storytelling: AMP stories is a new and modern way to reach existing readers.
- Robust Advertising Support: AMP Stories enables monetization capability for publishers using full-screen immersive story ads and using affiliate links. For advertisers, Stories are a way to reach a unique audience within a new storytelling experience.
How does AMP Stories work?
Generally speaking, Accelerated Mobile Pages are important because they help web pages load faster. For one thing, which potentially improves usability.
Since the Accelerated Mobile Pages (AMP) project was launched by Google in February of 2016, the goal was outstanding. Particularly, of putting mobile performance above everything else on the web.
AMP Stories & SEO Responsive Website Designers – jmexclusives
Equally important, convincing visitors to stay longer on your site engaging with your content. However, neither does AMP improve engagement on its own nor does it make your content more useful or entertaining.
And Google definitely met its goal on AMP. Whereby, AMP powers more than two billion mobile pages and 900,000 different domains. Pages with AMP now load twice as fast as pages without added AMP elements.
If you think you can ignore AMP, you’re wrong. AMP has some pretty awesome features and benefits that can take your content creation efforts to the next level. Also, if you don’t take the time to understand or use AMP stories, you’re missing out.
Here is more;
AMP has been around for a while already and many companies have optimized their web pages for AMP. However, most recently both Google and Facebook announced changes to their algorithms.
Well, the simple reason why is that they both want to offer customers a better experience when they click on a web page. In that case, AMP (Accelerated Mobile Pages) Ready & Responsive Website Pages & Posts are as important as the website itself. And of course, that’s where AMP Stories comes in.
Solve problems on the right layer;
E.g. don’t integrate things on the client-side, just because that is easier when the user experience would be better with a server-side integration.
Only do things if they can be made fast;
Don’t introduce components or features to AMP that can’t reliably run at 60fps or hinder the instant load experience on today’s most common mobile devices.
Prioritize things that improve the user experience;
But, compromise when needed. Some things can be made fast and are still a terrible user experience. AMPs should deliver a fantastic user experience and speed is just one part of that.
Below are more details of how AMP Stories should work or works;
1. Execute all AMP JavaScript Asynchronously;
JavaScript is powerful, it can modify just about every aspect of the page, but it can also block DOM construction and delay page rendering (see also Adding interactivity with JavaScript). To keep JavaScript from delaying page rendering, AMP allows only asynchronous JavaScript.
While custom JS is allowed in amp-script, and third-party JS is allowed in iframes, it cannot block rendering. For example, if third-party JS uses the super-bad-for-performance document.write API, it does not block rendering the main page.
2. Size all Resources Statically;
External resources such as images, ads or iframes must state their size in the HTML so that AMP can determine each element’s size and position before resources are downloaded. AMP loads the layout of the page without waiting for any resources to download.
AMP uncouples document layout from resource layout. Only one HTTP request is needed to layout the entire doc (+fonts).
3. Don’t let Extension Mechanisms block Rendering;
AMP doesn’t let extension mechanisms block page rendering. AMP supports extensions for things like lightboxes, Instagram embeds, tweets, etc. While these require additional HTTP requests, those requests do not block page layout and rendering.
Any page that uses a custom script must tell the AMP system that it will eventually have a custom tag. For example, the amp-iframe script tells the system that there will be an amp-iframe tag. AMP creates the iframe box before it even knows what it will include:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
4. Keep all third-party JavaScript out of the Critical Path;
Third-party JS likes to use synchronous JS loading. They also like to document.write more sync scripts. For example, if you have five ads on your page, and each of them causes three synchronous loads, each with a 1-second latency connection, you’re in 15 seconds of load time just for JS loading.
AMP pages allow third-party JavaScript but only in sandboxed iframes. By restricting them to iframes, they can’t block the execution of the main page. Even if they trigger multiple style re-calculations, their tiny iframes have very little DOM.
5. All CSS must be Inline and Size-bound;
CSS blocks all rendering, it blocks page load, and it tends to get bloated. In AMP HTML pages, only inline styles are allowed. This removes 1 or often more HTTP requests from the critical rendering path compared to most web pages.
Also, the inline style sheet has a maximum size of 50 kilobytes. While this size is big enough for very sophisticated pages, it still requires the page author to practice good CSS hygiene.
6. Font triggering must be efficient;
Web fonts are super large, so web font optimization is crucial to performance. On a typical page that has a few sync scripts and a few external style sheets, the browser waits and waits to start downloading these huge fonts until all this happens.
The AMP system declares zero HTTP requests until fonts start downloading. Therefore, there are no HTTP requests blocking the browser from downloading fonts.
7. Minimize style Recalculations;
Each time you measure something, it triggers style recalculations which are expensive because the browser has to layout the entire page.
In AMP pages, all DOM reads happen first before all the writes. This ensures there’s the max of one recalc of styles per frame. Learn more about the impact of style and layout recalculations on rendering performance.
8. Only run GPU-accelerated animations;
The only way to have fast optimizations is to run them on the GPU. GPU knows about layers, it knows how to perform some things on these layers, it can move them, it can fade them, but it can’t update the page layout; it will hand that task over to the browser, and that’s not good.
The rules for animation-related CSS ensure that animations can be GPU-accelerated. Specifically, AMP only allows animating and transitioning on transform and opacity so that page layout isn’t required. Learn more about using transform and opacity for animation changes.
9. Prioritize resource loading;
AMP controls all resource downloads: it prioritizes resource loading, loading only what’s needed, and prefetches lazy-loaded resources.
When AMP downloads resources, it optimizes downloads so that the currently most important resources are downloaded first. Images and ads are only downloaded if they are likely to be seen by the user, above the fold, or if the user is likely to quickly scroll to them.
AMP also prefetches lazy-loaded resources. Resources are loaded as late as possible but prefetched as early as possible. That way things load very fast but CPU is only used when resources are actually shown to users.
10. Load pages in an Instant;
The new preconnect API is used heavily to ensure HTTP requests are as fast as possible when they are made. Whereas, the pages might already be available by the time the user actually selects it, leading to instant loading.
While prerendering can be applied to all web content, it can also use up a lot of bandwidth and CPU. AMP is optimized to reduce both of these factors. Prerendering only downloads resources above the fold and prerendering doesn’t render things that might be expensive in terms of CPU.
When AMP documents get prerendered for instant loading, only resources above the fold are actually downloaded. When AMP documents get prerendered for instant loading, resources that might use a lot of CPU (like third-party iframes) do not get downloaded.
Learn more about why AMP HTML doesn’t take full advantage of the preload scanner.
How do you Use AMP Stories in WordPress?
The AMP Project is an open-source initiative aiming to make the web better for all. Accelerated Mobile Pages enables web experiences that are consistently fast, beautiful and high-performing across distribution platforms.
Furthermore, the Official Accelerated Mobile Pages Plugin for WordPress supports fully integrated AMP publishing for WordPress sites, with robust capabilities and granular publisher controls.
Read more about AMP Plugin for WordPress before learning more about how you can earn below.
Single Page Story Ad
Story Ads are full screen, single page ads that appear within AMP Stories. Advertisers/ Publishers can invite users to a web page, an AMP page or an app with a single tap.
A story ad has a rich, flexible canvas that allows images, videos, animations or a combination of all those elements. Supported by Google Ad Manager and Google DV360 (Beta). With additional ad server support coming soon!
Sign up now and start building AMP Stories for free
Affiliate Links
Publishers can use affiliate links as a form of monetization by placing outlinks in organic story pages. Having said that, please read more about Story Ads Best Practices.
Not sure how to get started?
In this tutorial, you’ll learn how to create a basic AMP HTML page, and also how to stage it and validate that it’s AMP compliant. As well as how to get it ready for publication and distribution.
Takeaway,
With this in mind, a partnership with WordPress might bring Accelerated Mobile Pages enabled by default to millions of unsuspecting webmasters. As a result of Accelerated Mobile Pages implementation, most web surfers won’t ever leave Google.
Of course, this is not really a “web” of interconnected websites anymore, but a centralized dystopia. Read more about AMP (Accelerated Mobile Pages) | Webmaster Guidelines.
Above all, we can all agree on the fact that a faster mobile web experience is better for everyone. However, the costs of implementing Accelerated Mobile Pages may just be too high.
Therefore, if you have a well-designed responsive website with optimized images and video, you really don’t need to worry about Accelerated Mobile Pages. Use the following useful and related topic links for your further research guides.
Resourceful References;
Finally, I hope the above-revised guide on AMP (Accelerated Mobile Pages) and AMP Stories was useful.
But, if you’ll have additional questions, contributions or even recommendations in regards to the above topic, please Contact Us. Additionally, let us know how we can help you create an AMP Ready and SEO Responsive website like jmexclusives.
Here are more useful and related topic links;
- What is Website Monetization?
- Who is a Full Stack Web Developer?
- Google-friendly Sites Beginners Guidelines
- Website Design & Development Basics
- SEO Best Routine Practices For Webmasters