Sobes.tech
Aide à l'entretien
Ressources
Préparation à l'entretien
Ressources
Recherche d'emploi
Ressources
Juridique
Retour aux questions
Middle

Qu'est-ce que les pages AMP?

sobes.tech IA

Réponse de l'IA

AMP (Pages Mobiles Accelerées) est un cadre HTML open source créé par Google pour créer des pages web rapides et adaptatives qui s’affichent bien sur les appareils mobiles.

Principes fondamentaux d’AMP:

  • Ensemble limité de balises HTML: Utilisation d’un sous-ensemble de HTML, ce qui permet d’accélérer l’analyse et le rendu de la page.
  • Chargement asynchrone des ressources: Scripts, images et autres ressources se chargent de manière asynchrone, sans bloquer le rendu du contenu principal.
  • Priorité au contenu: L’optimisation vise à charger rapidement le contenu visible.
  • Taille statique des éléments: La plupart des éléments ont des tailles prédéfinies, ce qui réduit les "sauts" de contenu lors du chargement.
  • Utilisation de AMP Cache: Une organisation tierce (par exemple, Google) peut mettre en cache les pages AMP et les livrer depuis son cache, assurant un chargement instantané.

Composants clés d’AMP:

  • AMP HTML: Ensemble limité de balises HTML avec l’ajout de composants AMP personnalisés.
  • AMP JS: Bibliothèque JavaScript pour gérer le chargement des ressources et l’interactivité.
  • AMP Cache: Réseau proxy pour mettre en cache et livrer les pages AMP.

Exemple d’utilisation d’AMP:

<!doctype html>
<html amp lang="ru">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Exemple de page AMP</title>
    <link rel="canonical" href="https://example.com/обычная-страница.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>
      /* Vos styles CSS */
    </style>
  </head>
  <body>
    <h1>Bonjour, AMP!</h1>
    <p>Ceci est une page rapide.</p>
    <amp-img src="/images/kitten.jpg" alt="Chaton" width="100" height="100" layout="responsive"></amp-img>
  </body>
</html>

Avantages d’AMP:

  • Vitesse de chargement: Les pages se chargent très rapidement, surtout sur les appareils mobiles.
  • SEO amélioré: Google privilégie les pages AMP dans les résultats mobiles.
  • Meilleure expérience utilisateur: Chargement rapide et défilement fluide.

Inconvénients d’AMP:

  • Limitations en design et fonctionnalités: Toutes les balises HTML et fonctions JavaScript ne sont pas disponibles.
  • Complexité d’implémentation: Nécessite un développement séparé ou une adaptation du contenu existant.
  • Dépendance à Google (dans une certaine mesure): AMP Cache est sous contrôle de Google.

AMP est largement utilisé pour les articles d’actualités, les blogs et d’autres contenus où la vitesse de chargement est critique sur les appareils mobiles.

PrécédentSuivant