Jay Taylor's notes

back to listing index

ampproject/amphtml

[web search]
Original source (github.com)
Tags: amp web-performance github.com
Clipped on: 2016-07-27

Skip to content
AMP HTML source code, samples, and documentation. See below for more info. https://ampproject.org
JavaScript HTML Python CSS Java Protocol Buffer Other
Latest commit 940c782 8 minutes ago Image (Asset 2/4) alt= keithwrightbos committed with jridgewell A4A: upgrade callback (#4213)
3p Fix: renderStart() not defined for ad type that use doubleclick (#4241) 11 minutes ago
ads Clean up ads example page. (#4202) 2 days ago
build-system Stricter enforcement of getMode DCE (#4222) 22 hours ago
builtins AdSpirit adapter for AMP (#4007) 2 days ago
css Make sure that the update ref point is hidden on load (#3816) 29 days ago
examples [amp-viz-vega]: Initial stub implementation and example page (#4182) 17 hours ago
extensions A4A: upgrade callback (#4213) 9 minutes ago
screenshots/test/manual Updated screenshots 6 months ago
spec Bringing list up to date with whitelisted font providers. 2 days ago
src [amp-viz-vega]: Initial stub implementation and example page (#4182) 17 hours ago
test cron job from @erwinmombay to update size.txt (#4235) 5 hours ago
testing Modules service to aggregate module-level metadata and factories (#4025) 12 days ago
third_party Optimize service retrieval for inlineability. (#4115) 7 days ago
tools Duplicate normal carousel to create scrollable-carousel (#4228) 2 hours ago
validator Fix the command line example in validator README. (#4179) a day ago
.babelrc add destructuring to babel transform whitelist (#4206) 2 days ago
.eslintrc add no-undef to enforce variables need to be declared and scoped corr… a month ago
.gitignore Updates to adtech amp-ad functionality #3462 (#3659) a month ago
.travis.yml only build css files for production dist creation (#4006) 16 days ago
AUTHORS Initial commit 11 months ago
CODE_OF_CONDUCT.md Establish a code of conduct for the AMP open source project. 10 months ago
CONTRIBUTING.md Design principles for development on AMP (#4170) 5 days ago
CONTRIBUTORS Update CONTRIBUTORS 4 months ago
DESIGN_PRINCIPLES.md Design principles for development on AMP (#4170) 5 days ago
DEVELOPING.md Design principles for development on AMP (#4170) 5 days ago
GOVERNANCE.md Update core comitters 3 months ago
ISSUE_TEMPLATE.md Initial ISSUE template. 5 months ago
LICENSE fix(license): fix incorrect search and replace done on LICENSE file 11 months ago
Procfile Heroku config (#2857) 4 months ago
README.md From the root README.md, link to validator/README.md. (#3239) 2 months ago
TICKEVENTS.md Fix a typo in TICKEVENTS.md (#3463) 2 months ago
gulpfile.js [amp-viz-vega]: Initial stub implementation and example page (#4182) 17 hours ago
karma.conf.js Implement AdSense and DoubleClick ads on top of A4A (#3956) 16 days ago
package.json chore(package): update request to version 2.73.0 (#3984) 15 days ago
system.properties add custom closure compiler pass (#2593) 3 months ago

README.md

Image (Asset 3/4) alt= Issue Stats Issue Stats

AMP HTML Image (Asset 4/4) alt=

AMP HTML is a way to build web pages for static content that render with reliable, fast performance. It is our attempt at fixing what many perceive as painfully slow page load times – especially when reading content on the mobile web.

AMP HTML is entirely built on existing web technologies. It achieves reliable performance by restricting some parts of HTML, CSS and JavaScript. These restrictions are enforced with a validator that ships with AMP HTML. To make up for those limitations AMP HTML defines a set of custom elements for rich content beyond basic HTML. Learn more about how AMP speeds up performance.

How does AMP HTML work?

AMP HTML works by including the AMP JS library and adding a bit of boilerplate to a web page, so that it meets the AMP HTML Specification. The simplest AMP HTML file looks like this:

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="hello-world.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:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>Hello World!</body>
</html>

This allows the AMP library to include:

  • The AMP JS library, that manages the loading of external resources to ensure a fast rendering of the page.
  • An AMP validator that provides a way for web developers to easily validate that their code meets the AMP HTML specification.
  • Some custom elements, called AMP HTML components, which make common patterns easy to implement in a performant way.

Get started creating your first AMP page.

Full docs and reference.

The AMP JS library

The AMP JS library provides builtin AMP Components, manages the loading of external resources, and ensures a reliably fast time-to-paint.

The AMP Validator

The AMP Validator allows a web developer to easily identify if the web page doesn't meet the AMP HTML specification.

Adding "#development=1" to the URL of the page instructs the AMP Runtime to run a series of assertions confirming the page's markup meets the AMP HTML Specification. Validation errors are logged to the browser's console when the page is rendered, allowing web developers to easily see how complex changes in web code might impact performance and user experience.

It also allows apps that integrate web content to validate the web page against the specification. This allows an app to make sure the page is fast and mobile-friendly, as pages adhering to the AMP HTML specification are reliably fast.

Learn more about validating your AMP pages. Also see additional choices to invoke the validator.

AMP HTML Components

AMP HTML Components are a series of extended custom elements that supplement or replace functionality of core HTML5 elements to allow the runtime to ensure it is solely responsible for loading external assets and to provide for shared best practices in implementation.

See our docs and reference for more info.

Releases

We push a new release of AMP to all AMP pages every week on Thursday. The more detailed schedule is as follows:

  • Every Thursday we cut a green release from our  master  branch.
  • This is then pushed to users of AMP who opted into the AMP Dev Channel.
  • On Monday we check error rates for opt-in users and bug reports and if everything looks fine, we push this new release to 1% of AMP pages.
  • We then continue to monitor error rates and bug reports throughout the week.
  • On Thursday the "Dev Channel" release from last Thursday is then pushed to all users.

You can always follow the current release state of AMP on our releases page. The release used by most users is marked as  Latest release  and the current Dev Channel release is marked as  Pre-release .

AMP Dev Channel

AMP Dev Channel is a way to opt a browser into using a newer version of the AMP JS libraries.

This release may be less stable and it may contain features not available to all users. Opt into this option if you'd like to help test new versions of AMP, report bugs or build documents that require a new feature that is not yet available to everyone.

Opting into Dev Channel is great to:

  • test and play with new features not yet available to all users.
  • use in Q&A to ensure that your site is compatible with the next version of AMP.

If you find an issue that appears to only occur in the Dev Channel version of AMP, please file an issue with a description of the problem. Please always include a URL to a page that reproduces the issue.

To opt your browser into the AMP Dev Channel, go to the AMP experiments page and activate the "AMP Dev Channel" experiment. Please subscribe to our low-volume announcements mailing list to get notified about important/breaking changes about AMP.

Further Reading

If you are creating AMP pages, check out the docs on ampproject.org and samples on ampbyexample.com.

These docs are public and open-source: https://github.com/ampproject/docs/. See something that's missing from the docs, or that could be worded better? Create an issue and we will do our best to respond quickly.

Resources:

Reference:

Technical Specifications:

Who makes AMP HTML?

AMP HTML is made by the AMP Project, and is licensed under the Apache License, Version 2.0.

Contributing

Please see the CONTRIBUTING file for information on contributing to the AMP Project, and the DEVELOPING file for documentation on the AMP library internals and hints how to get started.

Security disclosures

The AMP Project accepts responsible security disclosures through the Google Application Security program.

Code of conduct