AMP

Attrayants, fluides et instantanés

Créez facilement des sites Web axés sur l'utilisateur avec AMP.

Commencer
<amp-sidebar
  id="sidebar"
  layout="nodisplay"
  side="right"" ""left"
</amp-sidebar>

Qu'est-ce qu'
AMP ?

Des pages Web attrayantes et fluides qui se chargent quasiment à la seconde

AMP est un format simple et robuste conçu pour vous assurer un site Web rapide, axé sur l'utilisateur, et rentable. Il assure le succès à long terme de votre stratégie Web grâce à une distribution sur toutes les plateformes populaires et à la réduction des coûts d'exploitation et de développement.

<amp-img class="resp-img"
  alt="Desktop"
  width="550"
  height="368"
  src="images/Desktop.jpeg">
</amp-img>
<style amp-custom>
  .resp-img {
    max-width: 700px;
  }
</style>

Créez des expériences Web enthousiasmantes pour tous les utilisateurs du Web ouvert

AMP permet de créer des annonces et des sites Web toujours rapides, agréables et performants sur tous les appareils et toutes les plateformes de distribution. Les éditeurs et les annonceurs peuvent décider de la façon dont ils présentent leur contenu en privilégiant une expérience axée sur l'utilisateur.

Une capture d'écran d'un site Web utilisant AMP.
Une capture d'écran d'un site Web utilisant AMP.
Maintenir la flexibilité et le contrôle et réduire la complexité dans votre code Vous pouvez utiliser du CSS pour personnaliser votre style et des données dynamiques pour récupérer les données les plus récentes là où vous en avez besoin.
Des modules qui garantissent les performances La création d'un site Web de qualité demande beaucoup de temps et d'efforts. Les composants AMP sont déjà optimisés pour fournir la meilleure performance possible.
Créez un avenir durable pour tous sur le Web ouvert Le projet AMP est une initiative open source visant à protéger l'avenir du Web en offrant une expérience améliorée, plus rapide et plus intuitive.
La vitesse des pages Web améliore l'expérience utilisateur et les indicateurs clés de performance Les pages AMP se chargent quasiment à la seconde, et ce sur tous les appareils et toutes les plateformes.
Les pages AMP sont faciles à créer Vous pouvez généralement convertir l'intégralité de votre archive en quelques jours, surtout si vous utilisez un CMS populaire tel que WordPress ou Drupal.
La technologie AMP peut être mise en œuvre sur différents points de contact Web Utilisé par des plateformes mondiales comme Google, Bing et Twitter, AMP permet aux utilisateurs de vivre une expérience donnant l'impression d'être native sur toutes les plateformes en ouvrant par défaut les pages AMP lorsqu'elles sont disponibles.

Nous nous impliquons réellement dans l'amélioration de la vitesse à tous les niveaux. Si le chargement de notre site prend trop de temps, peu importe la qualité de notre journalisme, certains visiteurs quitteront la page avant de voir ce qu'elle contient.

David Merrell, chef de produit senior

Lire un exemple de réussite

En quoi consiste AMPHTML ?

<!DOCTYPE HTML>
<html >
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="hello-world.html">
  <meta name="viewport" content="width=device-width">
  <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>
  <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
  <amp-geo layout="nodisplay">
    <script type="application/json">
      {
        "AmpBind": true
      }
    </script>
  </amp-geo>
  <h1>Hello in <span [text]="country">...</span>!</h1>
  <button on="tap:AMP.setState({'country': ampGeo.ISOCountry.toUpperCase()})">Where am I?</button>
</body>
</html>

Hello
World!

Composants intégrés

AMPHTML, c'est du HTML, mais avec quelques restrictions pour des performances fiables.

Bien que la plupart des balises d'une page AMPHTML soient des balises HTML normales, certaines balises HTML sont remplacées par des balises spécifiques à AMP (voir également Balises HTML dans la spécification AMP). Ces éléments personnalisés, appelés composants AMPHTML, facilitent l'intégration efficace de fonctionnalités courantes.

Par exemple, la balise amp-img fournit une prise en charge complète de srcset même dans les navigateurs qui ne la prennent pas encore en charge. Apprenez à créer votre première page en AMPHTML.

Les pages AMP sont découvertes par les moteurs de recherche et autres plateformes via la balise HTML. Vous pouvez disposer d'une version non-AMP et d'une version AMP de votre page, ou uniquement une version AMP.

Caches AMP

Les pages AMP peuvent être mises en cache pour un chargement quasi instantané sur le Web. Des plateformes telles que Google exécutent des caches AMP pour permettre le chargement rapide de votre contenu à partir de leur service.

Le cache Google AMP est un réseau de diffusion de contenu basé sur un proxy destiné à fournir tous les documents AMP valides. Il récupère les pages AMPHTML, les met en cache, et améliore automatiquement leurs performances. Lorsque vous utilisez le Google AMP Cache, le document, tous les fichiers JS, et toutes les images se chargent à partir de la même origine qui utilise HTTP 2.0 pour une efficacité maximale.
Le cache est également doté d'un système de validation intégré qui confirme le fonctionnement garanti de la page indépendamment de ressources externes. Le système de validation exécute une série d'assertions confirmant que le balisage de la page est conforme à la spécification AMPHTML.

Une autre version du système de validation est fournie avec chaque page AMP. Cette version peut consigner les erreurs de validation directement dans la console du navigateur lors de l'affichage de la page, vous permettant ainsi de voir comment les modifications complexes apportées à votre code peuvent affecter les performances et l'expérience utilisateur.

Découvrez des cas d'utilisation de sites Web AMP