Accelerated Mobile Pages (AMP) is a framework for building web pages that are optimized for mobile devices. It addresses issues like slow load times and poor user experiences on mobile by simplifying pages and parallelizing resource loading. AMP pages use HTML, CSS and JavaScript to load quickly. They are cached globally through Google's AMP Cache for fast delivery. Publishers can easily implement AMP pages and monetize them while embracing an open web.
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Robert Nyman
This document provides an introduction to progressive web apps (PWAs). It discusses the history of web technologies from HTML and HTTP in the early 1990s to more recent developments like service workers, push notifications, and web app manifests that enable PWAs. Features of PWAs are described like reliability, performance, engagement, and integration with the operating system. Case studies are presented showing the benefits some companies have seen from implementing PWAs.
AMP and the instant web - WebPerformance NYC MeetUp groupMichael Posso
This talk was designed to give the developer the basics of the AMP technology. The talk offers the pros and cons of the technology as well as a technical overview of the structure of an AMP pages. The information covers several tools and integration with popular CMS and how to implement AMP in the development testing and build process.
The document discusses client side performance testing. It defines client side performance as how fast a page loads for a single user on a browser or mobile device. Good client side performance is important for user experience and business metrics like sales. It recommends rules for faster loading websites, and introduces the WebPageTest tool for measuring client side performance metrics from multiple locations. WebPageTest provides waterfall views, filmstrip views, packet captures and reports to analyze page load times and identify optimization opportunities.
Client-side Web Performance Optimization [paper]Jakob
This document discusses client-side performance optimizations for websites. It begins by explaining how client-side loading accounts for 80-90% of total page load time on average. It then provides an overview of tools for analyzing performance bottlenecks. The document outlines several basic optimization techniques, including reducing HTTP requests, leveraging browser caching through headers and cache busters, optimizing images, prioritizing critical resources, and improving JavaScript and CSS performance. It emphasizes the importance of measuring performance before and after making changes.
2017 Silicon Valley Code Camp: Instant Mobile WebLisa Huang
Instant Mobile Web presentation for Silicon Valley Code Camp 2017.
Session: https://www.siliconvalley-codecamp.com/Session/2017/instant-mobile-web-an-accelerated-mobile-pages-primer
This document discusses ways to make JavaScript faster in web pages. It recommends loading scripts asynchronously or with defer, preloading scripts, reducing CPU time spent evaluating scripts and function calls, budgeting third-party scripts, ensuring proper compression of scripts, and reviewing code coverage to optimize performance.
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Katie Sylor-Miller
Raiders of the Fast Start: Frontend Performance Archeology
There are a lot of books, articles, and online tutorials out there with fantastic advice on how to make your websites performant. It all seems easy in theory, but applying best practices to real-world code is anything but straightforward. Diagnosing and fixing frontend performance issues on a large legacy codebase is like being an archaeologist excavating the remains of a lost civilization. You don’t know what you will find until you start digging!
Pick up your trowels and come along with Etsy’s Frontend Systems team as we become archaeologists digging into frontend performance on our large, legacy mobile codebase. I’ll share real-life lessons you can use to guide your own excavations into legacy code:
What tools and metrics we used to diagnose issues and track progress.
How we went beyond server-driven best practices to focus on the client.
Which fixes successfully increased conversion, and which didn’t.
Our work, like all good archaeology, went beyond artifacts and unearthed new insights into our culture. We at Etsy pride ourselves on our culture of performance, but, like all cultures, it needs to adapt and reinvent itself to account for changes to the landscape. Based on what we’ve learned, we are making the case for a new, organization-wide, frontend-focused performance culture that will solve the problems we face today.
Client Side Performance In Web Applicationsvladungureanu
Client-side optimization for web applications is an important issue that must be considered by any web developer. This paper presents some approaches regarding web applications client-side optimization. We
discuss the optimization techniques that refer to CSS, JavaScript and HTML. We also we oer a preview on various tools that can be used for proling, debugging and optimizing, such as Firebug. The final part of the paper sums some conclusions regarding client-side optimization.
In 2016, mobile internet usage exceeded desktop for the first time! With over 50% of users on mobile, is your web app optimized for them?
Let’s learn about Accelerated Mobile Pages, how AMP address mobile user challenges and build a valid AMP app together!
http://nodevember.org/speaker/Lisa%20Huang
The document discusses progressive web apps (PWAs) and outlines key considerations for creating a PWA. It addresses questions around what a PWA is, how to make a website feel like an app, offline functionality, push notifications, and creating a roadmap. Examples from companies that implemented PWAs successfully are provided. The conclusion recommends developing a progressive roadmap that starts with baseline PWA features and builds out functionality over time based on priorities and initiatives.
Google Lighthouse is super valuable but it only checks one page at a time.
Hamlet will show you how to get it to check all pages of a site, and how to run automated Lighthouse checks on-demand at scheduled intervals and from automated tests.
He'll also cover how to set performance budgets, how to get alerts when budgets are exceeded, and how to aggregate page reports using BigQuery and Google Data Studio.
February 2018: Sustainable UX ConferenceLisa Huang
The document is a slide presentation about AMP (Accelerated Mobile Pages) that discusses:
- Mobile web challenges like slow devices and networks where JavaScript does heavy lifting.
- How AMP addresses these with techniques like inlined CSS, prioritized resource loading, and async JavaScript to make pages load instantly.
- Examples of companies that use AMP and the types of content it works for.
- How AMP can be used as an entry point or data source to build progressive web apps with features like service workers for offline use.
Building for Your Next Billion - Google I/O 2017Robert Nyman
New internet users are coming online around the world and are facing very different constraints to accessing the internet. In this talk, we'll cover what we've learned from building experiences for new internet users and walk through how you can build great experiences that work well for billions of users around the world.
This is a presentation from Google I/O 2017, the video is available at https://www.youtube.com/watch?v=wD3rpdiLMyY
Speakers: Tal Oppenheimer, Mariya Moeva, Robert Nyman
https://twitter.com/taloppenheimer
https://twitter.com/marrrr
https://twitter.com/robertnyman
Automated Duplicate Content Consolidation with Google Cloud FunctionsHamlet Batista
Avoid duplicate content and don’t leave money on the table with unoptimized groups of pages linked by canonical declarations! Particularly in e-commerce, you can increase Google’s confidence by making sure your groups of product URLs are perfectly canonicalized and clear to search engines.
Talk delivered in New York, Sep 19, 2016 during an O'Reilly meetup before Velocity Conference about Web Performance and Images, including HTTP Client Hints and new Image Formats
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...Link-Assistant.Com
Page Speed can make or break your business in 2018, as it is equally important for user experience, revenue, and SEO. Mobile page speed is becoming a Goolge ranking factor in July 2018, or is it already as of May 2018? To get an idea about the current state of the industry, SEO PowerSuite conducts an experiment for 1 mln pages to find the correlation between mobile page speed in the position in mobile SERPs. In this presentation, delivered by Aleh Barysevich at SMX London, you'll find the results of the experiment, as well as the latest tools and tips on improving page speed.
How Agile Technical SEO Can Add Value To Your SEO Campaign, by Adam GentBranded3
Google is constantly evolving and a webmaster’s ability to react to changes is key to any successful SEO campaign. However, what happens when you can’t get technical SEO recommendations over the line? This slideshow focuses on how you can be more Agile and implement technical SEO recommendations that add value.
php[world] 2015 Training - Laravel from the Ground UpJoe Ferguson
Most of this training was code samples which are not included here.
Ready to jump into Laravel and start building applications and more? Ready to explore more than just Adventures in Laravel 5? Come learn the best practices for local development, building real world applications, and deploying your applications to production. Join us and learn how to leverage modern development practices so build powerful and robust applications. We will also cover how to test your application's functionality so you can be more confident in deployments and upgrades. Laravel 5.1 will be the framework's first "LTS" (Long term support) version so you can be certain there will be community and support for the life of your application.
The document discusses PHPUnit, a testing framework for PHP. It provides an overview of PHPUnit, including that it was created by Sebastian Bergmann in 2004 as a port of xUnit to PHP. PHPUnit uses assertions for testing and supports unit, integration, and acceptance testing. The document reviews available assertions, annotations like @group and @dataProvider, and how to set up and run tests with PHPUnit.
With the evolution of software, starts an evolution of the software developer and how things are approached. A different and more responsible mindset is now required and with that comes the use of the Engineering Cycle that will provide not only the basic skill set but also the core base for a Software Engineer to handle any type of project.
Have you been working with other frameworks and feel ready to try something new? Why not try Zend Framework? Not only can you use it for the full stack of your application, but you can pull out the individual components into your existing application. Get ready for a course on how to build an ZF2 application from the ground up — from the basics of an MVC app to the more advanced components. When you leave this tutorial, you will have a great grasp on how the framework is structured
Adding 1.21 Gigawatts to Applications with RabbitMQ (Bulgaria PHP 2016 - Tuto...James Titcumb
As your application grows, you soon realise you need to break up your application into smaller chunks that talk to each other. You could just use web services to interact, or you could take a more robust approach and use the message broker RabbitMQ. In this tutorial, I will introduce RabbitMQ as a solution to scalable, interoperable and flexible applications.
This tutorial is perfect for those who would like a deep dive into RabbitMQ with little or no pre-existing knowledge about message queuing systems. Once you’ve finished the tutorial, you will have learnt how to set up basic publish/subscribe message queues, control the flow of messages using various exchanges, and understand various features of RabbitMQ such as RPC, TTL, and DLX.
Talk given at PHP World 2015 about the Hack language released by Facebook. A short history and look at it's key features as well as how Hack and PHP are evolving together.
Code Coverage for Total Security in Application MigrationsDana Luther
So the time has come to take the leap and upgrade your application to a new major version of the underlying framework, or, perhaps, to an entirely different framework... how do you ensure that none of your functionality or usability is impacted by a potentially drastic rewrite of the underlying systems? How can you move forward with 100% confidence in your migrated codebase? Testing, testing and more testing. Using a combination of unit, functional and acceptance tests can give you the certainty you need. In this talk, we will go over key strategies for ensuring that you begin with full code coverage and move forward with confidence.
This document outlines an agenda for a talk about using Git. The talk is broken into three parts: messing with commits, everyday workflows, and what to do when Git problems happen. It provides terminology for Git concepts like repository, commit, branch and HEAD. It also summarizes common Git commands and workflows like add, commit, log, status, cherry-pick and GitHub flow. Troubleshooting techniques like reflog and bisect are also mentioned.
Security is an enormous topic, and it’s really, really complicated. If you’re not careful, you’ll find yourself vulnerable to any number of attacks which you definitely don’t want to be on the receiving end of. This talk will give you just a taster of the vast array of things there is to know about security in modern web applications, such as writing secure PHP web applications and securing a Linux server. Whether you are writing anything beyond a basic brochure website, or even developing a complicated business web application, this talk will give you insights to some of the things you need to be aware of.
Sure, you could improve yourself or promote your project the normal way, with hard work and years of slow, incremental progress. Or you could use some of the brain’s built-in cheat codes to level up on your way to success.
Along with learning, our brains are plagued by a raft of bugs and unwanted features that we have been unable to remove. Use these “features” to your advantage to teach, learn and persuade. Join us in a tour of some of the most amusing bugs and exploits that allow you to play with the interface between our brains and the world.
Laravel is a great framework to use for web applications but what if you need to do more? Come learn how to harness the power of the console in your Laravel applications to do various tasks such as caching data from 3rd party APIs, Expire old content from S3 or other data store, and batch process huge data sets without users having to wait for results. You can even automate tasks such as backing up your remote databases before you run migrations with artisan commands.
This document provides an overview of PHP extensions, including reasons for creating extensions, the extension development process, and advanced extension topics. Some key points:
- Extensions allow PHP to interface with C/C++ libraries, modify how the PHP engine works, and increase performance of slow code.
- The extension development process includes setting up the compile environment, writing the module definition, adding functions, and testing.
- Advanced topics include using global variables, custom object handling, memory management, and threading safety. Well-documented extensions can be proposed for inclusion in the PECL repository.
By using a comprehensive feature-filled framework we can build software fast. On the other hand, by decoupling our applications we can build sofware that is independent of our framework and infrastructure choices, and therefore longer lasting.
We can't do both, is one approach always right?
In this talk we'll look at different decoupling techniques, what problems they solve, and when they make sense. We will learn some concrete techniques to discover where we should be investing in decoupling, and when we should let the framework maintainers do the work for us.
The new JSON fields are some of the most talking about new features in MySQL 5.7. But they are by no means the only awesome things this version has to offer. MySQL 5.7 is a year old, so this talk won't be an introduction to this version. We will be digging into 5.7 to see how to make the most of the tools available in it. Want to tackle important practical problem solving for your data, make your query performance analysis more efficient or look at how virtual columns can help you index data? This talk is for you!
We all have focussed on best practices and code quality over the past years, but we seemed to forgot the most important aspect of the web: security. This talk gives a good overview on your first-line of defence in your code, how to ensure that new exploits and hacking techniques are covered with tests and how you build solid web applications that secured enough to keep script kiddies and wanna-be hackers away. I will also give some tips what to do when you're company becomes victim of cyber crime.
PHP World DC 2015 - What Can Go Wrong with Agile Development and How to Fix ItMatt Toigo
A talk I gave at the 2015 PHPWorld Conference. PDF Version of the slides at www.matt-toigo.com/files/phpworld_2015_presentation.pdf
Agile and Scrum are often pitched together as the definitive silver bullet for eliminating pain from software development, but they include their own sets of problems that commonly drag down development teams. Whether an agile team is executing an internal project or doing work for a client, a very similar set of problems begins to afflict all the members of such teams, regardless of their roles. The common root causes of these problems can be quickly identified, and complementary solutions can be easily implemented to ensure a happy team that continues to deliver high-quality work.
The document provides information about an intermediate PHP OOP conference session covering magic methods, polymorphism, collections, iterators, loose coupling, and high cohesion. The session details include explanations of magic methods like __construct, __destruct, __call, and __get, as well as polymorphism, implementing interfaces like Countable and ArrayAccess, and using iterators. The talk aims to improve developers' OOP skills in PHP.
This document discusses modern SQL features beyond the SQL-92 standard, including OLAP features like grouping sets, cube, and rollup for multi-dimensional analysis; common table expressions (WITH queries) for organizing complex queries and enabling recursion; lateral joins for iterating over query results; window functions for ranking and aggregating over partitions; and the use of JSON data types in PostgreSQL for combining SQL and NoSQL capabilities. It provides examples and discusses support for these features across major database systems.
Enough suffering, fix your architecture!Luís Cobucci
You aim for a simple change to deliver a feature, but the outcome is chaotic: coupled code, unrelated things breaking, one tiny change results on a humongous changeset. Aren't you tired of this and think that software development should be simple and make people happy? Do not despair we're here to help you!
In this talk, we take a look at software anatomy, laugh at some mistakes we constantly make, and see a proof of concept using modern PHP tools. Then you will finally be able to break this cycle and find your way out of this madness.
Automating Your Workflow with Gulp.js - php[world] 2016Colin O'Dell
Gulp is a powerful utility for automating development workflows. Tasks are written using code, not configuration, enabling the easy creation of highly-custom and flexible automations. This talk introduces developers to the core concepts of gulp.js, and how to leverage it for new & existing projects. We’ll cover several examples of common tasks for managing CSS, JS and PHP, including: compiling Sass, minifying files, running PHP tests, checking code styles, ensuring legacy browser support & more.
Jacob Lial from Greenlane Search Marketing presents on AMP (Accelerated Mobile Pages) - December 2015. Learn about what AMP means to SEO, Google, and mobile site improvements to benefit your users. Visit ampproject.org to learn more about Google's big 2016 focus.
Scope of this paper is to focus on Accelerated Mobile Pages a project brought by Google and its infinite possible use cases in this mobile-first era. In my paper, I have given emphasis on areas such as publishing articles, implementing news broadcast in storytelling format and Direct Email engagement via Accelerated Mobile Pages. As Accelerated Mobile Pages is an open source technology and it works on the browser it can be used by anyone on any device regardless of hardware and OS compatibilities. Date Ganesh Revji | Darvesh Raviraj Narsing | Mayuri Dendge"Accelerated Mobile Pages (AMP)" Published in International Journal of Trend in Scientific Research and Development (ijtsrd), ISSN: 2456-6470, Volume-2 | Issue-5 , August 2018, URL: http://www.ijtsrd.com/papers/ijtsrd15821.pdf http://www.ijtsrd.com/computer-science/world-wide-web/15821/accelerated-mobile-pages-amp/date-ganesh-revji
The document discusses Accelerated Mobile Pages (AMP), an open-source initiative started by Google and Twitter to improve the mobile web experience. It provides an overview of AMP, including its origins, how AMP HTML pages are structured, how site speeds are improved, potential search engine results page impacts, client usage scenarios, supported advertisements, and limitations. A live demo of an AMP page is also included.
The document discusses Accelerated Mobile Pages (AMP) capabilities for Magento projects. It covers what AMP is, the benefits of using AMP like faster page speeds and improved SEO, required code elements for AMP pages, common AMP components for Magento like forms and images, and how to add features like analytics and validate AMP pages. It also provides examples of using AMP features in Magento like custom layouts, templates, and dynamic content with AMP Bind.
Amp up your Site with Accelerated Mobile PagesBrian McKeiver
My presentation from South Florida Code Camp 2016 on Accelerated Mobile Pages (AMP). SFLCC was in lovely Fort Lauderdale, Florida.
Google started AMP as an initiative to dramatically improve the performance of the mobile web. The main approach that AMP employs is placing HTML on a diet, in an attempt to gain breakneck speeds, for loading content on our mobile devices. This new open-source based framework throws out the standard approach to loading bloated CSS and JavaScript libraries and instead becomes a lean, mean superfast machine. Join me to find out what exactly are Accelerated Mobile Pages, what do they mean for search, and how can you prepare for it on your website?
What is AMP? Why should I learn what it offers? And how can I take advantage of it in WordPress? This deck was used to guide a discussion about these topics at the awesome PDX WP Meetup on August 5th, 2019.
7 secrets of performance oriented front end development servicesKaty Slemon
Why a good front-end is the primary necessity of any digital solution and how can you, as a web/mobile designer or app owner, can be built a performance-optimized front-end for its users.
Basic Understanding of Progressive Web AppsAnjaliTanpure1
The document provides an overview of progressive web apps (PWAs). It discusses the history and idea behind PWAs, defining them as websites that are built using common web technologies but adopt features that make them feel like native mobile applications. The key pillars that transform websites into PWAs are listed as being reliable, fast, engaging, and integrated. Core building blocks like service workers and web app manifests are explained. Example case studies are given that demonstrate performance improvements from adopting PWAs. Limitations are also outlined.
Progressive Web Apps - Overview & Getting StartedGaurav Behere
A brief intro to progressive web apps & conventional ways of performance optimization on web.
The presentation was given as part of a tech talk, thus the readers are suggested to read through the reference links as well.
Join us for this 40-minute webinar where we will do a recap of the announcements made during Cloudflare’s inaugural Speed Week. Cloudflare released several new products that are designed to improve the web experience for our customers. We’ll explore each of the announcements that include:
- How Cloudflare Argo is getting smarter and faster
- How HTTP/2 requests can be handled and prioritised more effectively
- Simplify image management, and reduce the number of image variants needed for mobile and other display types
- Improving the load times of progressive images with HTTP/2 prioritisation
- Optimising the delivery of live video stream content with reduced lag
- Supporting a lightweight, faster JavaScript framework
We have also specially invited Harshad Rotithor, Chief Architect of Carousell, to share on how the smartphone and web-based marketplace for buying and selling new and used goods, has successfully leveraged on Cloudflare's products and services to improve its APAC business performance.
If web performance matters to you, and you ever needed a reason to try Cloudflare, this webinar is especially for you. Learn how we’re different, and how we’re challenging the status quo, believing that fast is never fast enough.
SEO 101 - Google Page Speed Insights Explained Steve Weber
During our second SEO webinar lesson, we spoke about the importance of site speed. We ran through an explanation of the Google Page Speed insights tool and how to take care of the most common optimizations the tool sugests to site oweners.
Performance and User Experience for the Web of TomorrowWP Engine
Mariya Moeva, Product Manager at Google, discusses the future of the web and the important roles privacy, speed, and fostering quality user experiences have to play in it. Learn about tools like AMP, Site Kit and Web Stories for WordPress that you can use to assess and advance the performance of your WordPress site.
Website performance and an introduction to AMPMichael Gearon
Why website performance matters, and what is the business cost of not improving your page speed. Part two is looking at the AMP project, including AMP stories and AMP email
A basic overview of Accelerated Mobile Pages, Instant Articles and Apple News technologies - along with the steps on enabling and configuring AMP on a WordPress website. This talk was initially presented at the Melbourne SEO Meetup on the 1st of March 2016.
Slides from my 4-hour workshop on Client-Side Performance Testing conducted at Phoenix, AZ in STPCon 2017 (March).
Workshop Takeaways:
Understand difference between is Performance Testing and Performance Engineering.
Hand’s on experience of some open-source tools to monitor, measure and automate Client-side Performance Testing.
Examples / code walk-through of some ways to automate Client-side Performance Testing.
See blog for more details - https://essenceoftesting.blogspot.com/2017/03/workshop-client-side-performance.html
What are the principles to build a progressive web app? What are its core features? What about its architecture? The blog explores it all. Give it a read. https://www.webguru-india.com/blog/checklist-for-progressive-web-app-development/
Demystifying web performance tooling and metricsAnna Migas
Web performance has been one of the most talked about web development topics in the recent years. Yet if you try to start your journey with the speed optimisations, you might find yourself in a pickle. With the tooling, you might feel overwhelmed—it looks complex and hard to comprehend. With the metrics: at first glance all of them seem similar, not to mention that they change over time and you cannot figure out which of them to take into account.
Similar to Amp your site an intro to accelerated mobile pages (20)
Megalive99 Situs Betting Online Gacor TerpercayaMegalive99
Megalive99 telah menetapkan standar tinggi untuk platform taruhan online. Berbagai macam permainan, desain ramah pengguna, dan transaksi aman menjadikannya pilihan utama para petaruh.
seo proposal | Kiyado Innovations LLP pdfdiyakiyado
Crafting a compelling SEO proposal? Learn how to structure a winning SEO proposal template with essential elements and tips for client engagement. Elevate your SEO strategy with expert insights and examples
Have you ever built a sandcastle at the beach, only to see it crumble when the tide comes in? In the digital world, our information is like that sandcastle, constantly under threat from waves of cyberattacks. A cybersecurity course is like learning to build a fortress for your information!
This course will teach you how to protect yourself from sneaky online characters who might try to steal your passwords, photos, or even mess with your computer. You'll learn about things like:
* **Spotting online traps:** Phishing emails that look real but could steal your info, and websites that might be hiding malware (like tiny digital monsters).
* **Building strong defenses:** Creating powerful passwords and keeping your software up-to-date, like putting a big, strong lock on your digital door.
* **Fighting back (safely):** Learning how to identify and avoid threats, and what to do if something does go wrong.
By the end of this course, you'll be a cybersecurity champion, ready to defend your digital world and keep your information safe and sound!
Book dating , international dating phgrathomaskurtha9
International dating programhttps: please register here and start to meet new people todayhttps://www.digistore24.com/redir/384521/godtim/.
get started. https://www.digistore24.com/redir/384521/godtim/
3. ● Why speed is important?
● What are the problems AMP addresses?
● What is in AMP?
4. Will abandon a site
that takes >3 seconds
to load
40%
Expect a page to
load in <2 seconds
47%
Say fast load time
speed is important
to site loyalty
52%
Slow and steady doesn’t win the race
What are user expectations for mobile sites?
7. Mobile pages should render in < 1s
3Gnetwork
connection
600ms to 1s
is consumed by mandatory 3G network
overhead which can’t be avoided
(average 750 Kbps to 1 Mbps)
Source: "The Search Agency, Optimization Strategies for the Mobile Web"
8. Mobile pages that load 1s faster see up to +27% CvR
180,000
160,000
140,000
120,000
100,000
80,000
60,000
40,000
20,000
0
1.7
1.6
1.4
1.2
1.0
0.8
0.6
0.4
0.2
0.0
1.2 1.5 1.8 2.1 2.4 2.7 3.0 3.3 3.6 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9
Load time (seconds)
Conversionrate(%)
Sessions Conversion rate (%) Bounce rate (%)
1.9% conversion rate
1.5% conversion rate
Note: Some of pages with
load times faster than 2.4
seconds experienced lower
conversion rates.
Those numbers may be
influenced by faster
response/page load times for
404s and other errors.
Source: "Mobile performance conversion rate"
12.8% bounce rate
20% bounce rate
58
51
45
39
32
26
19
13
6
0
Bouncerate(%)
9. < 1sec
Median load Time
for AMP on Search
19sec
Avg Load Time
for Non-AMP
AMP is fast
10. ● Why speed is important?
● What are the problems AMP addresses?
● What is in AMP?
12. 2 Poor consumer perceptions of mobile web experiences
1 Evolving ecosystems of closed distribution models
3 Monetization at the content level is hard
4 Technology updates are outpacing development cycles
5 Ad Blockers are a challenge to the industry
We are faced with new challenges
With a common objective: an open ecosystem of knowledge
13. So we need something...
Fast Easy to
implement
Mobile
Friendly
Embrace the
open web
Gives strong
Incentives
✔⚡
14. How to make fast web pages
1. Simplify the pages
a. Less Javascript
2. Optimize the bandwidth
a. Get the best content for your device (image resolution etc.)
b. Parallelize the loading (asynchronous load)
3. Cache the pages
a. Use Content Delivery Networks to store a local copy of the
pages
⚡
15. How to make fast web pages
Use HTTP/2 whenever possible.
You get that for free if you use the Google AMP Cache.
⚡
16. Easy to implement
What is required
● Start with the doctype <!doctype html>.
● Contain a top-level <html ⚡> tag (<html amp> is accepted as well).
● Contain <head> and <body> tags.
● Contain a <link rel="canonical" href="$SOME_URL" /> tag inside their head that points to
the regular HTML version of the AMP HTML document or to itself if no such HTML
version exists.
● Contain a <meta charset="utf-8"> tag as the first child of their head tag.
● Contain a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag
inside their head tag. It’s also recommended to include initial-scale=1.
● Contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag as the last
element in their head (this includes and loads the AMP JS library).
17. Easy to implement
Simple AMP webpage
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal
both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s
steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style
amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:non
e}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
18. Mobile Friendly
“Just like all web pages, Accelerated Mobile Pages will load in any modern
browser or app webview. AMP files take advantage of various technical and
architectural approaches that prioritize speed to provide a faster experience
for users.”
Not just mobile friendly but browser friendly.
✔
19. Embrace the open web
“The initial companies involved in this early preview of the project want to
make the mobile web work better for all – not just for one platform, one
set of technologies, or one set of publishers.”
Unlike other mobile friendly solutions, AMP is open source
and does not require you to be locked into a publishing
platform (Facebook Instant Articles) or be an approved
publisher (Apple News Format).
20. Embrace the open web
“A goal of the Accelerated Mobile Pages Project is to ensure effective ad monetization on the
mobile web while embracing a user-centric approach. With that context, the objective is to
provide support for a comprehensive range of ad formats, ad networks and technologies in
Accelerated Mobile Pages. ”
Will publishers be able to sell their own ad inventory?
Yes, as with their existing websites, publishers control their ad inventory and how they sell it.
22. ● Why speed is important?
● What are the problems AMP addresses?
● What is in AMP?
23. What is AMP?
HTML5
(AMP HTML)
JavaScript
(AMP JS)
CSS3
(Custom styling)
Global Proxy
Cache
(AMP Cache)
24. Easy to implement
Simple AMP webpage
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal
both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s
steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style
amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:non
e}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
25. AMP JS
The library managing:
➔ Resource loading
➔ Core web components
➔ Performance
optimizations
https://github.com/ampproject/amphtml
26. Google AMP Cache
➔ Cache of valid AMP
documents available for
anyone to use
➔ HTTP/2 with same
origin for all resources
➔ Google products all
serve via the AMP
cache
➔ API available to query
AMP documents
27. Google AMP Cache
➔ Cache of validated AMP
documents available for
anyone to use
➔ HTTP/2 with same
origin for all resources
➔ Google products all
serve via the AMP
cache
➔ API available to query
AMP documents
Request
POST https://acceleratedmobilepageurl.googleapis.com/v1/ampUrls:batchGet
{
"lookupStrategy": "IN_INDEX_DOC",
"urls": [
"http://www.bbc.co.uk/news/science-environment-37547103"
]
}
Response
200
- Show headers -
{
"ampUrls": [
{
"originalUrl": "http://www.bbc.co.uk/news/science-environment-37547103",
"ampUrl": "http://www.bbc.co.uk/news/amp/37547103",
"cdnAmpUrl": "https://cdn.ampproject.org/c/www.bbc.co.uk/news/amp/37547103"
}
]
}
28. AMP Validation Rules Enforced
● All script tags have async attributes.
● Only inline CSS
● Only 50KB of CSS
● Only AMP’s own JavaScript (support for variety of
extensions/custom-elements)
● 3rd party JS is only allowed in iframes.
● Resources must have static-responsive size declared in markup.
● Resource resizing is controlled by AMP Runtime.
29. Optimizations include:
● Only the first viewport is prerendered
— because AMP knows where each
page element is positioned
● No 3rd party JavaScript is executed
at this stage
Prerendering by Platforms Can Make Loading Instant?
30. Linking pages with <link>
Add information about the AMP page to the non-AMP page and vice versa, in the form of
<link> tags in the <head>.
Add the following to the non-AMP page:
<link rel="amphtml"
href="https://www.example.com/url/to/amp/document.html">
And this to the AMP page:
<link rel="canonical"
href="https://www.example.com/url/to/full/document.html">
Make Your Page Discoverable
34. ● EXPLORE
ampproject.org/docs to learn more and read documentation
github.com/ampproject/amphtml to connect with the development team
ampbyexample.com Look at working AMP examples
● DEVELOP & TEST
Start developing AMP pages and validate them
● LAUNCH
Point to AMP pages from canonical articles to make them discoverable and
eligible to appear in content platforms
Join the AMP initiative