Comment utiliser amp-img et amp-video pour accélérer votre site Web

AMP, en un mot, est une méthode permettant d'optimiser la rapidité et la performance des sites Web..

AMP signifie "Accelerated Mobile Pages" (Pages accélérées pour mobiles) et, si l'objectif déclaré est la performance sur les appareils mobiles, les gains de vitesse qu'il peut apporter sont tout aussi utiles sur les appareils non mobiles. AMP contient une suite de méthodes d'optimisation offrant différents types d'avantages, mais le pouvoir d'accélérer la création de sites est sans doute le plus important sur les sites contenant beaucoup d'images et de vidéos..

Étant donné que les sites plus rapides génèrent plus de visiteurs engagés et potentiellement un meilleur classement dans les moteurs de recherche (et donc une plus grande visibilité), il vaut vraiment la peine de penser à AMP lorsque vous créez la prochaine vitrine Web de votre travail..

AMP est un projet open source financé par Google. Il est en développement depuis septembre 2015 environ. Les versions AMP de ses sites apparaissent dans les résultats de recherche Google depuis le 24 février de cette année. Nous couvrons AMP depuis son lancement public plus tôt cette année, c'est donc une excellente idée de lire "Projet AMP: rendra-t-il vos sites plus rapides" si vous souhaitez des informations de base avant de poursuivre..

Dans cet article, vous trouverez de nombreuses informations sur la valeur globale du travail avec AMP, mais nous allons examiner un peu plus directement les deux aspects les plus importants du travail avec les images et les vidéos: le format personnalisé d'AMP  et éléments.

Quels sont  et ?

Lorsque vous créez une page conformément aux exigences AMP, vous utilisez une série d’éléments personnalisés au lieu de certains des éléments HTML par défaut auxquels vous pourriez être habitué..

• Au lieu d'utiliser un habitué élément que vous utiliserez
• Au lieu d'utiliser un  élément que vous utiliserez

Lorsque vous utilisez ces éléments personnalisés, vous bénéficiez automatiquement de certains des avantages inhérents à AMP. Regardons ce qu'ils sont et pourquoi ils sont dignes de votre considération.

Pourquoi utiliser et ?

Vous savez déjà qu'AMP est censé aider à rendre vos sites plus rapides, mais que fait spécifiquement le et éléments ont à offrir? Les avantages les plus pertinents sont les suivants.

Chargement paresseux

Par défaut, si vous avez une page contenant plusieurs images, chaque image doit être chargée en un seul clic. Cela peut très facilement faire glisser le temps de chargement global de votre site sur une durée assez longue. Plus votre temps de chargement initial est élevé, plus vous risquez que des visiteurs quittent votre site, et pire vous risquez de le faire dans les moteurs de recherche..

Cependant, avec une technique appelée "Chargement paresseux", vous pouvez uniquement avoir les premières images chargées avec le reste à venir plus tard. Le contenu chargé est suffisant pour permettre au visiteur de commencer à visualiser la page. Les images restantes sont "chargées paresseux" lorsque le visiteur fait défiler l'écran vers le bas. Cela peut apporter des améliorations considérables à votre vitesse de chargement.

Par exemple, lors des tests que j'ai effectués dans le cadre de mon article "Projet AMP: accélérera-t-il la gestion de vos sites", j'ai constaté que sur une connexion mobile simulée, le chargement d'une page avec cinq images de 500 ko prenait 26 secondes. Avec une version AMP du même site, le temps de chargement a été réduit à 16 secondes.

Pas de redistribution de la mise en page

L’un des principaux avantages de l’utilisation d’AMP est qu’il évite le problème de répétition de la mise en page.. 

Lors du service d'une page, les éléments du support non chargé n'ont initialement pas de hauteur ni de largeur. Par conséquent, le navigateur affiche les choses comme si lesdits médias ne faisaient pas partie de la page. Ensuite, quand une image est chargée, la mise en page doit être recalculée, les autres éléments étant déplacés et redimensionnés pour s’ajuster à l’image, ce qui est appelé refusion. Si un autre support doit également être chargé, la page doit être redistribuée à chaque fois pour chaque élément..

Sur les appareils mobiles en particulier, les visiteurs peuvent être frustrés s'ils sont déjà engagés et que ce sur quoi ils se concentrent saute soudainement à la vue à cause du reflux. Cela peut très facilement conduire à une baisse d'attention des visiteurs ou à un abandon du site, surtout si cela se produit plusieurs fois..

Avec AMP, la refusion ne se produit jamais. En effet, chaque média a un espace réservé de taille correcte ajouté à la mise en page à partir de word go. Une fois que le support est chargé, il remplace le paramètre fictif, aucune rediffusion nécessaire.

Accès CDN gratuit

Le stockage et la bande passante pour de grandes quantités de supports peuvent coûter assez rapidement cher, et choisir un hôte capable de livrer rapidement les téléspectateurs du monde entier n'est pas toujours facile..

Cependant, lorsque vous utilisez AMP, vous avez accès gratuitement à un CDN fourni par Google. Tant que vous créez une page validée AMP, Google met automatiquement en cache vos documents HTML, vos fichiers JS et vos images dans le CDN AMP..

Relativement mains libres

La vérité est que la plupart des choses que AMP fait pour vous peuvent également être effectuées de différentes manières via divers scripts et méthodologies. Cependant, l’un des avantages énormes de l’utilisation d’AMP est que vous n’avez pas besoin de vous familiariser avec les détails techniques nécessaires à la configuration d’optimisations équivalentes..

En utilisant AMP, vous évitez de choisir, configurer et gérer manuellement plusieurs scripts et processus. Au lieu de cela, vous utilisez simplement AMP comme prescrit et tout se passe en arrière-plan sans avoir besoin de votre participation pratique..

Débuter avec AMP

Avant d'entrer dans les détails de l'utilisation de et vous devez savoir comment créer une page AMP avec le code passe-partout requis. Nous avons expliqué comment faire cela dans un autre tutoriel. Pour lancer le processus, vous pouvez vous rendre à "Comment faire une page AMP de base à partir de zéro".

Il n'est pas nécessaire de suivre l'intégralité du didacticiel. Par conséquent, si vous continuez jusqu'à la fin de la section intitulée "Traitement du CSS en ligne", vous serez prêt à revenir ici..

Comment utiliser

Sur une page AMP que vous utiliserez pour charger chaque image. Voyons comment utiliser son code correctement et ce que font chacun des attributs associés..

(Vous pouvez trouver la documentation complète pour sur le site Web de référence du projet AMP).

Inclusions essentielles

Lors de l'ajout d'un  élément, vous devez inclure quelques attributs essentiels. Comme avec un habitué élément vous aurez besoin d'utiliser un src attribut pour spécifier l'emplacement de votre image, et un alt attribut pour définir un repli de texte.

C'est aussi un exigence dans AMP que vous spécifiez la taille et largeur chaque fois. En effet, AMP utilise les attributs height et width pour définir la taille des espaces réservés avant le chargement de l'image..

Si vous souhaitez modifier la réactivité des images lorsque vous définissez des dimensions fixes, ne vous inquiétez pas, car AMP intègre une fonctionnalité permettant de gérer les réglages réactifs, ce que nous aborderons plus tard..

Un exemple de base de la L’élément avec ces inclusions essentielles est:

Utiliser srcset

le l'élément fournit un srcset attribut qui peut être utilisé pour spécifier d'autres images à afficher avec différentes largeurs ou densités de pixels. 

Il est utilisé de la même manière que chez un habitué  élément, afin que vous puissiez avoir un aperçu complet de l'attribut à l'adresse: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset

Par exemple, pour fournir différentes images à différentes densités de pixels, vous pouvez utiliser:

Ou pour charger différentes images en fonction de la largeur de la fenêtre, vous pouvez utiliser:

Remarque, si vous utilisez des valeurs contenant w la src l'attribut sera ignoré dans les navigateurs supportant srcset.

Ajout d'attribution

Si vous avez besoin de créditer une image, vous pouvez utiliser attribution, par exemple:

Espaces réservés

Si vous souhaitez contrôler l'apparence des espaces réservés qui apparaissent dans votre page lors du chargement des images, vous pouvez le faire avec CSS ciblé au amp-img élément, par exemple:

amp-img background-color: grey; 

Comment utiliser

Dans une page AMP, vous utiliserez chaque fois que vous souhaitez intégrer une vidéo de votre propre source. Si vous souhaitez intégrer des vidéos de tiers, telles que celles de YouTube ou via un iFrame, vous pouvez utiliser d'autres éléments tels que ou .

(Encore une fois, vous pouvez trouver la documentation complète pour sur le site Web de référence du projet AMP).

Inclusions essentielles

Comme avec , il y a quelques inclusions essentielles lors de l'utilisation . Encore une fois src est nécessaire pour spécifier l'emplacement de la vidéo, et les deux la taille et largeur sont nécessaires pour qu'AMP puisse disposer correctement la page lors du chargement.

Un exemple de base avec les attributs requis pourrait être:

Ajout d'un repli

Si la vidéo ne se charge pas ou ne s'affiche pas pour une raison ou une autre, il est possible de configurer une solution de repli en imbriquant une

 
 
La vidéo n'a pas pu être chargée. Veuillez vérifier que votre navigateur prend en charge la vidéo HTML5..
 
 

 
 
La vidéo n'a pas pu être chargée. Veuillez vérifier que votre navigateur prend en charge la vidéo HTML5..