Plus tôt dans la journée, j'ai découvert un type de page qui se chargerait "presque instantanément". Eh bien, avec un rap comme ça, j'ai dû essayer ça par moi-même. Je suis donc allé sur Tasty un site Web de cuisine, sur mon bureau et sur mon téléphone pour tester chaque temps de chargement. La page d'accueil pour les deux a pris une seconde à charger et à afficher. C'était impressionnant.
En comparant la page d'accueil mobile et de bureau, j'ai vu que les images et les mises en page étaient parfaitement optimisées. Cela a marqué un autre élément sur ma liste.
Et enfin, quand j'ai cliqué sur une recette, j'ai été accueilli avec une démo vidéo, de qualité parfaite. C'était inattendu et totalement accueillant. À cette époque, je considérais Google AMP comme un outil incroyable pour des sites Web sophistiqués et attrayants.
Les pages Google AMP peuvent vous aider à concevoir des pages de commerce électronique, des publicités attrayantes et des expériences mobiles passionnantes lors de l'hébergement de pages. cette charge presque instantanément. Par exemple, Gizmodo a constaté que ses pages se chargeaient trois fois plus rapidement et Mashable a vu une augmentation de 200% du CTR moyen .
Source [19659004] En tant qu'utilisateur, mon expérience avec les pages Google AMP a été spectaculaire. Plongeons-nous donc dans les SAP: comment ils fonctionnent, ce qu'ils sont, pourquoi ils sont incroyables pour les entreprises et comment vous pouvez créer les vôtres.
Google AMP est un framework open source développé par le moteur de recherche. Vous pouvez utiliser AMP pour créer des sites Web, des histoires, des e-mails et des annonces conçus par l'utilisateur. Son objectif est de ravir l'utilisateur et de fournir des expériences dynamiques ultra-rapides de plusieurs façons. Contrairement à d'autres AMP, Google s'intègre aux nombreux canaux de sites Web, tels que la recherche, le cache AMP et Analytics. En plus de pouvoir s'intégrer aux canaux Google, vous pouvez monétiser le cadre HTML AMP avec la suite de publicités Google (Ads, AdSense et AdManager). AMP est un excellent choix pour améliorer les mesures commerciales de base, telles que le nombre de conversions sur les pages Web. Les pages AMP se chargent presque instantanément sur tous les appareils. AMP vous permet également de convertir l'intégralité du fichier sur votre site Web en quelques jours si vous utilisez un CMS populaire tel que WordPress ouQu'est-ce que Google AMP?
Un autre grand avantage pour les entreprises utilisant Google AMP est que le cadre AMP est utilisé par des sites mondiaux populaires comme Bing et Twitter et vous permet de créer une expérience fluide et native. Essentiellement, si le contenu de votre site Web AMP a un lien vers Twitter, par exemple, le tweet sera intégré à votre site Web et les utilisateurs n'auront pas à aller voir le tweet.
Maintenant que nous avons couvert la définition de base de l'AMP et pourquoi elle est idéale pour les entreprises, approfondissons le fonctionnement de l'AMP.
Fonctionnement de Google AMP
Dans cette section, je vais vous expliquer comment les pages AMP peuvent se charger si rapidement. Il y a sept raisons au total, et vous pouvez trouver une explication sur cette page téléchargée par un Google Developer AMP .
Comment fonctionne Google AMP?
- Les pages AMP chargent tout le contenu de la page à la fois.
- La conception des pages AMP est connue à l'avance par les navigateurs.
- CSS est en ligne et limité par sa taille.
- Les polices Web sont très volumineuses, les pages AMP les téléchargent donc en premier.
- Les pages AMP minimisent les recalculs de style et de conception.
- Le pouvoir de charger des images est transféré du CPU au GPU pour l'accélération.
- Le téléchargement de ressources est une priorité pour les pages AMP.
1. Les pages AMP chargent tout le contenu de la page à la fois.
AMP effectue le chargement de tous les composants d'une page Web en même temps. Cela diffère d'une fonctionnalité de page Web non AMP de ressources en cours de chargement un par un. Les pages AMP n'autorisent aucun JavaScript personnalisé pouvant interrompre ce temps de chargement simultané.
AMP utilise iFrames qui ne bloque pas le traitement de la page d'accueil et autorise uniquement le JavaScript asynchrone. AMP peut avoir du JavaScript en arrière-plan, mais ils sont conçus avec grand soin pour garantir qu'ils ne dégradent pas les performances.
2. Les navigateurs connaissent à l'avance la conception des pages AMP.
Sur une page non AMP, le navigateur Web, comme Google ou Firefox, ne connaît pas tous les composants d'une page Web tant qu'elle n'est pas entièrement chargée. Dans AMP, toutes les images externes ou cadres de site doivent indiquer leur taille en HTML. C'est pour que le navigateur sache combien sera chargé avant le téléchargement.
Cela permet à AMP de charger tout le contenu de la page sans avoir à attendre le téléchargement d'autres éléments ou ressources. Ceci est appelé "conception statique" et est un élément crucial de l'AMP.
3. CSS est en ligne et limité par sa taille.
Sur les pages AMP, une seule feuille de style est nécessaire: en ligne. Cela supprime plusieurs requêtes HTTP du chemin de rendu. HTTP est conçu pour permettre la communication entre les navigateurs Web et les serveurs.
L'élimination de plusieurs requêtes HTTP rationalise les navigateurs et les serveurs de communication nécessaires pour charger complètement la page. De plus, les feuilles de style en ligne ont un maximum de données (50 kilo-octets) qui permet au contenu d'être sophistiqué mais assez facile pour se conformer aux règles CSS.
4. Les polices Web sont très grandes, donc les pages AMP les téléchargent en premier.
L'optimisation des polices utilisées sur les pages Web est un élément crucial des performances de la page. Sur une page Web non AMP avec quelques scripts et feuilles de style, le navigateur doit attendre qu'ils soient téléchargés avant de télécharger les polices.
AMP ne nécessite pas le démarrage des requêtes HTTP avant le téléchargement des sources. Cela est possible pour les raisons un et deux. Ainsi, avec AMP, aucune communication HTTP n'empêche le navigateur de télécharger des polices.
5. Les pages AMP minimisent les recalculs de style et de conception.
Chaque fois que quelque chose est modifié sur une page, le navigateur doit recalculer le téléchargement de la page. Une page non AMP ne charge pas tous les éléments simultanément, le navigateur ne connaît donc pas la mise en page pendant son téléchargement.
Cela peut être un problème, car dans les pages traditionnelles, plusieurs scripts et feuilles sont utilisés pour exécuter de nombreuses fonctions dynamiques en même temps. Lorsque cela se produit, de nouvelles conceptions peuvent être produites et finir par être peu attrayantes pour les utilisateurs.
Mais comme AMP a le pouvoir de télécharger simultanément du contenu et de le rendre, il a également la capacité de lire, comprendre et implémenter ces changements de manière transparente. [19659032] 6. Le pouvoir de charger les images est transféré du CPU au GPU pour accélérer.
Au lieu d'utiliser le processeur ou le processeur de votre ordinateur pour générer les images de votre page, AMP utilise le GPU, ou processeur graphique, qui est plus efficace. Cela libère le travail que le CPU doit faire, ce qui accélère et charge la page.
Lorsque le CPU crée des images, il crée des couches, puis les envoie au GPU pour d'autres modifications. Par exemple, le GPU peut réduire, agrandir, faire pivoter ou rogner des images.
7. Le téléchargement de ressources est une priorité pour les pages AMP.
Lorsqu'une page AMP commence à se télécharger, elle commence à optimiser ses ressources. Ceci est fait de sorte que les composants les plus importants soient prioritaires. Les publicités et les images ne sont téléchargées que si l'utilisateur est susceptible de les voir sous le pli.
Il est important de noter que tout le contenu a déjà été préparé pour téléchargement sur une page AMP en raison de la conception statique. Ils ne sont entièrement téléchargés que si la page détermine que l'utilisateur est susceptible de les voir.
Ce sont les raisons pour lesquelles les pages AMP sont optimisées au point où elles se téléchargent presque instantanément. Très bien, non? Les pages AMP font tout ce travail en coulisses pour accélérer le processus de chargement.
À ce stade, vous vous demandez peut-être comment créer l'une de ces pages AMP. Heureusement, créer une page AMP, même la tester, est assez intuitif. Passons en revue ce processus dans la section suivante.
Comment créer des pages Google AMP
À ce stade, nous avons gagné que les pages Google AMP sont des pages Web qui améliorent l'expérience utilisateur en utilisant des graphismes attrayants, des mises en page fluides et se chargent presque instantanément. Mais la création d'un site Web AMP est-elle aussi simple qu'il y paraît?
Réponse courte: c'est possible.
Je ne suis pas développeur et ma connaissance de la sphère de codage est très minime. Mais quand j'ai commencé à jouer avec le "AMP Playground", j'ai pu créer une page Web très simple.
Lorsque vous développez une page AMP, Google propose un processus de workflow. Tout d'abord, vous créez une page, appelée & # 39; Hello World & # 39; par Google. Ensuite, intégrez votre page, apprenez les bases des pages AMP, optimisez la page et configurez le suivi analytique et concevez la page en fonction des besoins et des objectifs de votre site Web.
Google AMP s'intègre aux plates-formes CMS. Vous pouvez trouver une liste complète de ces plates-formes ici .
Si vous souhaitez créer une page Web, Google vous guidera tout au long du processus. La plateforme fournit un modèle de code que vous pouvez copier et enregistrer dans une extension .html. Il vous fournit une liste des marques requises que vous devez inclure sur votre page pour en faire un document HTML AMP viable.
La barre latérale à bascule de la page de création contient des instructions pour inclure des images, modifier la mise en page, optimiser le référencement, les aperçus et les étapes finales avant la publication.
Si vous voulez savoir comment ce sera de travailler avec une page AMP, visitez la page d'accueil, amp.dev . Là, vous pouvez expérimenter un peu avec le terrain de jeu AMP, comme je l'ai fait. Ici, j'ai utilisé mes connaissances de codage très limitées pour expérimenter, comme ci-dessous, lorsque j'ai ajouté du texte à une annonce vierge:
Comment créer une page Google AMP
- Implémentez et modifiez le texte de l'en-tête.
- Travail sur les paragraphes du corps.
- Modifiez les boutons pour les adapter aux besoins de votre page Web.
- Modifiez les attributs de classe si vous le souhaitez.
1. Implémentez et modifiez le texte d'en-tête.
Tout d'abord, j'ai commencé avec le modèle répétitif donné. J'ai suivi les mots clés dans le code, "
" et "", qui me disent que je vais travailler sur un H2 dans le corps de la page. J'ai changé le titre de "AMP is easy" en "Welcome to my site!" mettre du texte entre crochets h2.
2. Travaillez sur les paragraphes du corps.
Ensuite, je suis allé à la section paragraphe. Dans le code, les paragraphes sont marqués en rouge "
" et "
". Le rouge est comme un signe; Il indique au site Web ce que le contenu suivant comprendra. Dans ce cas, c'est le texte que j'ai changé en "Ci-dessous est une image responsive. Les images responsives sont optimisées pour les appareils mobiles et de bureau."
3) Modifiez les boutons en fonction des besoins de votre site Web.
Après avoir appris à modifier les paragraphes, je suis passé aux boutons. Le texte vert, "activé", indique à la page Web que la phrase suivante sera le type de bouton. Dans ce cas, le bouton fonctionnera en appuyant sur, le type est un message d'accueil et il apparaîtra sur la page Web.
4. Attributs de classe alternatifs si vous le souhaitez.
Le code AMP Playground vous demande de modifier votre texte. Pour cette étape, le texte vous indique comment basculer un attribut de classe. En suivant les lignes de code, vous pouvez découvrir comment effectuer des modifications simples.
La classe HTML est utilisée pour définir le type d'attribut s'il en a plusieurs. (Si je devais lister différentes boissons sur votre site, j'utiliserais "classe" pour préciser la disposition du vin, du jus d'eau, etc.). Dans ce cas, l'attribut class était pour une couleur.
N'oubliez pas, ce n'est qu'un modèle de personnalisation vierge pour que vous vous sentiez à l'aise de créer une page Web. Vous n'avez pas besoin d'un fichier .html distinct pour cela, vous pouvez travailler directement dans Google. Vous pouvez également répondre à un quiz pour des histoires, des e-mails et des annonces. J'ai adoré utiliser cela parce que c'était amusant, cela me faisait me sentir à l'aise avec le langage de codage et l'interface de la cour de récréation était facile à suivre.
Vous pouvez utiliser les pages AMP pour rendre l'expérience client agréable, du début à la fin, comme mon expérience. avec le site Web de Tasty. Comment allez-vous intégrer ces pages à votre stratégie à l'avenir?
