Sobes.tech
Interview Help
Resources
Interview Preparation
Resources
Job Search
Resources
Legal
Back to questions
Middle

What are AMP pages?

sobes.tech AI

Answer from AI

AMP (Accelerated Mobile Pages) is an open-source HTML framework created by Google for building fast and responsive web pages that display well on mobile devices.

Key principles of AMP:

  • Limited set of HTML tags: Uses a subset of HTML, which speeds up parsing and rendering.
  • Asynchronous resource loading: Scripts, images, and other resources load asynchronously, not blocking the rendering of main content.
  • Content priority: Optimization aimed at quick loading of visible content.
  • Static element sizes: Most elements have predefined sizes, reducing content "jumps" during loading.
  • Use of AMP Cache: A third-party organization (like Google) can cache AMP pages and serve them from its cache, ensuring instant loading.

Main components of AMP:

  • AMP HTML: A restricted set of HTML tags with custom AMP components.
  • AMP JS: JavaScript library for managing resource loading and interactivity.
  • AMP Cache: A proxy network for caching and delivering AMP pages.

Example of using AMP:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Example AMP Page</title>
    <link rel="canonical" href="https://example.com/regular-page.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}}@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>
    <style amp-custom>
      /* Your CSS styles */
    </style>
  </head>
  <body>
    <h1>Hello, AMP!</h1>
    <p>This is a fast page.</p>
    <amp-img src="/images/kitten.jpg" alt="Kitten" width="100" height="100" layout="responsive"></amp-img>
  </body>
</html>

Advantages of AMP:

  • Loading speed: Pages load very quickly, especially on mobile devices.
  • Improved SEO: Google favors AMP pages in mobile search results.
  • Enhanced user experience: Fast loading and smooth scrolling.

Disadvantages of AMP:

  • Design and functionality restrictions: Not all HTML tags and JavaScript functions are available.
  • Implementation complexity: Requires separate development or adaptation of existing content.
  • Dependence on Google (to some extent): AMP Cache is controlled by Google.

AMP is widely used for news articles, blogs, and other content where fast loading is critical on mobile devices.

PreviousNext