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.
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
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.