Share
Le projet AMP est une initiative Open Source récemment déployée et soutenue par Google. Son objectif est de rendre les sites plus rapides, en particulier ceux qui utilisent beaucoup de médias et / ou qui ont besoin de monétisation. Il s'agit essentiellement d'un moyen simple de déployer des méthodes d'optimisation quelque peu complexes, la plupart des processus étant traités en arrière-plan pour vous..
Dans notre article Projet AMP: Vos sites seront-ils plus rapides ?, nous détaillons ce que signifie AMP pour vous, en tant que développeur, et nous vous donnons des chiffres bruts sur le type de gains de vitesse que AMP peut ou non donner. vous.
Dans ce didacticiel, nous serons plus pratiques, avec un guide pas à pas pour créer une page AMP de toutes pièces, expliquer comment effectuer certaines tâches courantes de la même manière et partager quelques astuces au fur et à mesure..
Commençons!
L'ajout du code standard standard est le point de départ de chaque modèle AMP. Il y a un ensemble de code qui doit être présent dans chaque modèle AMP, sinon la validation échouera.
Créez un nouveau fichier HTML nommé index.html et ajoutez-y le code suivant:
Faire une page AMP Faire une page AMP
Vous pouvez lire le détail de chaque élément du code ci-dessus à:
Si vous le souhaitez, vous pouvez prévisualiser le modèle AMP que vous venez de créer en l’ouvrant directement dans un navigateur. Cependant, c'est toujours une bonne idée de prévisualiser sur un hôte local. Cette approche simule un hôte Web. L’environnement dans lequel vous prévisualisez votre modèle est aussi proche que possible de l’environnement réel dans lequel il sera déployé..
Pour cela, je recommande d’utiliser MAMP pour Windows ou Mac. Si vous n'avez pas encore installé MAMP, allez sur le site Web de MAMP et téléchargez une copie..
Une fois que vous avez installé MAMP, trouvez son htdocs dossier. Sur Mac, vous le trouverez généralement à / Applications / MAMP / htdocs, et sur Windows à C: \ MAMP \ htdocs \.
À l'intérieur, créez un nouveau dossier pour héberger votre projet, par exemple. mon projet. Puis déplacez le index.html fichier que vous avez créé à l'étape précédente dans le dossier.
Exécutez MAMP et vous devriez maintenant pouvoir prévisualiser votre modèle AMP en accédant à l’URL http: // localhost: 8888 / myproject / in Chrome. Même si vous préférez un autre navigateur, veuillez utiliser Chrome, car nous utiliserons les outils de développement Chrome à l'étape suivante..
Votre page AMP devrait actuellement ressembler à ceci:
Si vous accédez à cette URL et que cela ne fonctionne pas, il est possible que MAMP s'exécute sur un numéro de port différent de celui du 8888 que vous voyez dans l'URL indiquée ci-dessus. Pour savoir si tel est le cas, sur l'interface MAMP, cliquez sur le bouton qui lit Ouvrir la page WebStart. Cela vous mènera à une page contenant des informations sur MAMP, et dans l'URL, vous verrez le numéro de port correct à utiliser à la place:
Avant d'aller plus loin, nous voulons activer le mode de débogage de AMP afin que, si nous faisons accidentellement quelque chose qui ne passe pas la validation, nous le sachions immédiatement..
Pour ce faire, ajoutez # développement = 1 à la fin de votre URL d'aperçu, par exemple http: // localhost: 8888 / myproject / # development = 1.
Puis ouvre Outils de développement Chrome et aller au Console onglet, où vous devriez voir ce qui suit Propulsé par AMP ⚡ HTML… le message apparaît:
Au fur et à mesure que vous développez votre page, si quelque chose ne passe pas la validation AMP, un message d'erreur apparaît dans la console. À l'heure actuelle, nous n'avons aucun message d'erreur et nous voyons plutôt «Validation AMP réussie», nous informant que tout fonctionne comme prévu..
En plus du code standard que vous avez déjà ajouté, vous avez la possibilité d'ajouter des métadonnées JSON à la section head au format Schema.org, comme suit:
Cela n’est pas essentiel pour réussir la validation AMP, mais cela est essentiel pour pouvoir être récupéré par divers endroits tels que Google Search News..
Pour en savoir plus sur cette métadonnée, visitez:
L’une des exigences de l’AMP est que tous les CSS personnalisés doivent être placés en ligne dans le tête section, entre Mots clés.
Malgré cette exigence, écrire votre code CSS directement dans la section head n’est pas un flux de travail idéal. Ce dont vous avez vraiment besoin, c’est d’être capable d’écrire votre CSS dans une feuille de style externe, comme vous le feriez normalement, puis de le déplacer à l’endroit approprié dans le fichier. tête des sections de tous les fichiers modèles de votre site.
Nous ne traiterons pas ici étape par étape de la procédure à suivre, mais si vous souhaitez savoir comment utiliser une feuille de style externe tout en passant la validation AMP, suivez les étapes de notre tutoriel: Facilitez-vous la CSS en ligne d'AMP via Jade ou PHP avant de continuer.
Maintenant que votre code essentiel est en place, que le mode de développement est activé et (facultativement) que la gestion de la feuille de style externe est prête, nous pouvons maintenant ajouter des médias à votre page. Commençons par le type de support le plus courant: les images..
Dans AMP, vous n'utilisez pas le
À partir de ce didacticiel, nous allons utiliser un modèle de modèle existant pour accélérer les choses. Allez-y maintenant et prenez vous-même une copie du modèle gratuit Ceevee de StyleShout. Ce modèle contient des images que vous pouvez utiliser pour vous familiariser avec votre document AMP..
Dans les modèles Ceevee images dossier ", vous verrez une grande image de dunes de sable la nuit. Nous allons commencer par le placer dans votre modèle. Copiez le images dossier et collez-le dans le dossier de votre projet.
Ajoutez ensuite le code suivant pour intégrer l’image, au-dessus de la h1 balises qui sont déjà dans le code HTML:
Toute forme de support insérée dans une page AMP doit comporter une initiale largeur et la taille ensemble, donc contrairement à l'aide d'un img tag, dans un amp-img tag, vous ne pouvez pas laisser ces attributs.
Si vous n'êtes pas sûr de la taille exacte d'une image, c'est correct, à condition que les valeurs entrées représentent avec précision le rapport de format. le largeur et la taille les valeurs peuvent être considérées comme des espaces réservés, car AMP peut mettre en page la page avec les valeurs que vous fournissez, puis apporter des modifications après le chargement complet de l'image.
le disposition L'attribut est ce qui permet à AMP de régler l'affichage de l'image après son chargement. Nous avons fixé sa valeur à sensible, ce qui signifie que l'image conservera le rapport de format dérivé des valeurs de largeur et de hauteur, mais sera réduite ou agrandie pour remplir son conteneur. C'est pourquoi, même si vous ne connaissez pas la taille exacte d'une image, tant que vous avez le rapport d'aspect, vous êtes prêt à partir..
Enregistrez et actualisez votre aperçu et vous devriez voir l'image remplir votre fenêtre d'affichage:
En savoir plus sur amp-img et le disposition attribuer à:
L’utilisation d’une image d’arrière-plan qui remplit la hauteur et la largeur de la fenêtre de visualisation est un élément courant de la conception Web, créant ainsi une sorte de présentation d’entrée pour une page. Cela se fait généralement en utilisant une image d’arrière-plan avec le CSS taille du fond: couverture; appliqué à elle. Cependant, dans les sites AMP, nous ne souhaitons pas vraiment importer de grandes images d'arrière-plan via CSS, car cela contournerait l'optimisation de la charge du système..
Maintenant, vous pouvez certainement faire valoir que le chargement d'images d'arrière-plan volumineuses n'est pas idéal pour augmenter la vitesse de chargement, et pour cette raison, il est peut-être préférable de laisser toutes les images grandes ensemble..
Toutefois, si vous devez inévitablement créer une conception avec une grande image de fenêtre complète, vous pouvez au moins exploiter la priorité de chargement d'AMP en l'ajoutant via le bouton amp-img balise au lieu de comme arrière-plan. Voici comment vous pouvez le faire, en vous rapprochant de la technique de «couverture» d’arrière-plan..
Nous allons prendre l'image que vous venez d'intégrer et la transformer en image de couverture. Tout d'abord, envelopper l'image avec un div balise utilisant la classe doc_header alors vous avez:
Ensuite, si vous ne l’avez pas déjà fait, ajoutez des balises à la section de tête afin que nous puissions inclure certains CSS personnalisés. Entre ces balises, ajoutez:
.doc_header height: 100vh; couleur de fond: # 000; débordement caché; position: relative;
Habituellement, au lieu de ce que vous voyez ci-dessus, lors de la création d'une image de couverture, le concepteur définit la taille du html et corps éléments à 100% et puis aussi définir leur section de couverture à un la taille de 100%, le faisant remplir la fenêtre.
Cependant, cette approche ne fonctionnera pas avec AMP car le CSS qu’elle charge applique le style hauteur: auto! important; sur le corps élément, empêchant un réglage de hauteur: 100%; de travailler.
Donc, si vous avez vraiment besoin que quelque chose soit à la hauteur de la fenêtre, vous pouvez utiliser hauteur: 100vh;, comme nous l'avons fait avec notre doc_header classe. le vh unité représente la «hauteur de la fenêtre» et une valeur de 100vh équivaut à 100% de la hauteur de la fenêtre.
Si vous enregistrez et actualisez votre site maintenant, vous devriez voir que la div “doc_header” remplit la fenêtre d'affichage exactement.
Cependant, pour le moment, l'image ne remplit pas nécessairement le “doc_header” div. Si la fenêtre d'affichage est plus haute que large, il y aura une zone noire vierge en dessous..
Pour résoudre ce problème, ajoutez la classe doc_header_bg à ton amp-img tag comme ceci:
Ajoutez ensuite à votre CSS:
.doc_header_bg min-height: 100vh;
Ce code garantira que la hauteur de l'image n'est jamais inférieure à celle de la fenêtre d'affichage..
Malheureusement, il sera toujours écrasé sur des largeurs plus étroites, il n’est donc pas aussi élégant en apparence que d’utiliser une image d’arrière-plan. Cependant, il s’agit d’une approximation aussi précise que possible tout en utilisant le amp-img élément.
Nous allons maintenant ajouter des polices Web personnalisées dans notre modèle. En faisant cela avec AMP, vous avez trois méthodes de chargement qui passeront la validation:
Accentsconagua
@ font-face Le chargement d'une police Google doit s'effectuer via un élément de lien situé dans l'en-tête, à l'aide de l'URL fournie pour la ou les polices de votre choix à l'adresse https://www.google.com/fonts..
Pour notre modèle, nous utiliserons Open Sans et Libre Baskerville.
Pour charger ces deux polices, ajoutez ce code à votre section head:
Nous allons maintenant ajouter du texte à la zone de couverture de notre site, auquel nous appliquerons nos nouvelles polices Web. Dans le div "doc_header" existant, sous l'image, ajoutez un nouveau div avec la classe doc_header_inner:
Dans cette div, ajoutez le code suivant:
Simuler la couverture de l'image de fond
Ceci est une page de base créée pour vous montrer comment utiliser le projet AMP. Dans cette section, l’image d’arrière-plan utilise l’optimisation du chargement AMP. Les icônes sociales ci-dessous utilisent le chargement de polices personnalisées conforme à AMP. Lisez la suite pour voir plus de façons d'utiliser AMP.
Maintenant, ajoutez ce qui suit à votre CSS personnalisé:
body font-family: 'Open Sans', sans-serif; taille de police: 1rem; hauteur de ligne: 2; couleur: # 838C95; .doc_header_inner position: absolute; largeur: 85vw; largeur maximale: 64rem; en haut: 50%; à gauche: 50%; transformer: traduire (-50%, -50%); rembourrage en bas: 2rem; text-align: center; h1.doc_header_title font: bold 5.625rem / 1.1em 'Open Sans', sans-serif; couleur: #fff; espacement des lettres: -0,125rem; marge: 0 auto 1rem auto; texte-ombre: 0 0,0625 rem 0,1875 rgba (0, 0, 0, .8); @media (max-width: 35rem) h1.doc_header_title font-size: 12vw; p.doc_header_text font-family: 'Libre Baskerville'; hauteur de ligne: 1,9; couleur: # A8A8A8; marge: 0 auto; largeur: 70%; texte ombre: 0 0,0625 rem 0,125 rem rgba (0, 0, 0, .5); .doc_header_text span, .doc_header_text a color: #fff; .doc_header_inner hr width: 60%; marge: 1.125rem auto 1.5rem auto; couleur de bordure: # 2F2D2E; couleur de bordure: rgba (150, 150, 150, .1);
Le code ci-dessus est juste du code CSS normal pour la mise en forme du texte que nous avons ajouté, mais vous remarquerez que le processus d’application de nos polices Google dans un modèle AMP n’est pas différent de la normale. Vous utilisez le famille de polices propriété avec la valeur de la police choisie, par exemple. famille de polices: 'Libre Baskerville';
Lors de la sauvegarde et de l'actualisation de votre site, vous devriez voir les deux polices Google désormais appliquées au texte de la section couverture:
Ensuite, nous allons ajouter une police personnalisée qui n'est pas disponible dans Google Fonts ou Fonts.com, et c'est Font Awesome. Souvent, si vous utilisez Font Awesome, vous pouvez le charger via MaxCDN, mais AMP ne le permet pas, car le CDN n’est pas l’une des deux origines de police approuvées. En tant que tel, nous allons gérer nous-mêmes le chargement via @ font-face.
Pour charger la police vous-même, vous devez d'abord télécharger les fichiers de police, ce que vous pouvez faire à l'adresse https://fortawesome.github.io/Font-Awesome/. Notez que vous n’avez besoin que de «Font Awesome», pas de l’extra «Fort "Génial" qui sont offerts lors du téléchargement.
Une fois le fichier zip de Font Awesome téléchargé, extrayez-le et copiez le les polices dossier qu'il contient dans votre dossier de projet.
Pour votre CSS, ajoutez le code suivant:
/ * Font Awesome * / @ font-face font-family: 'FontAwesome'; src: url ('fonts / fontawesome-webfont.eot? v = 4.0.3'); src: url ('fonts / fontawesome-webfont.eot? # iefix & v = 4.0.3') format ('embedded-opentype'), url ('fonts / fontawesome-webfont.woff? v = 4.0.3') (format 'woff'), url ('fonts / fontawesome-webfont.ttf? v = 4.0.3') format ('type réel'), url ('fonts / fontawesome-webfont.svg? v = 4.0.3 # fontawesomeregular') format ('svg'); poids de police: normal; style de police: normal; .fa display: inline-block; font-family: FontAwesome; style de police: normal; poids de police: normal; hauteur de ligne: 1; -webkit-font-lissage: antialiasé; -moz-osx-font-lissage: niveaux de gris; .fa-facebook: before content: "\ f09a"; .fa-twitter: before content: "\ f099"; .fa-google-plus: before content: "\ f0d5"; .fa-linkedin: before content: "\ f0e1"; .fa-instagram: before content: "\ f16d"; .fa-dribbble: before content: "\ f17d"; .fa-skype: before content: "\ f17e"; / * / Font Awesome * /Je recommande d'insérer le code ci-dessus en haut de votre code CSS personnalisé pour vous aider à garder les choses organisées. Ce code se charge dans nos fichiers de polices personnalisés et crée des classes qui peuvent être utilisées pour ajouter des icônes de police à une conception. Il s'agit du code CSS standard fourni par Font Awesome..
Ensuite, ajoutez également ce CSS:
.doc_header_social margin: 1.5rem 0; rembourrage: 0; taille de la police: 1.875rem; texte-ombre: 0 0,0625rem 0,125rem rgba (0, 0, 0, .8); .doc_header_social li display: inline-block; marge: 0 1rem; rembourrage: 0; .doc_header_social li a color: #fff; .doc_header_social li a: survol color: # 11ABB0;
Cette CSS supplémentaire ajoute un style spécifique à notre modèle que nous utiliserons pour configurer une rangée d'icônes sociales liées..
Ajouter ce code HTML après le
Si vous actualisez votre site maintenant, vous devriez voir une rangée de @ font-face alimenté des icônes sociales au bas du texte que nous avons ajouté plus tôt:
ampli-police ÉlémentPour que les visiteurs ne voient pas un site endommagé si les polices personnalisées ne se chargent pas, AMP fournit le ampli-police élément pour vous permettre de créer des replis.
Pour que cet élément fonctionne, la première chose à faire est de charger le script AMP qui l’active. Dans votre section head, ajoutez ce code:
Maintenant avec le ampli-police élément prêt à l'emploi, on peut lui faire ajouter une classe au html ou corps tag si notre police ne parvient pas à charger. Ajoutez ce code au bas de votre modèle, avant la fermeture
Jetons un coup d'œil sur les attributs définis dans cet élément. Nous avons d'abord mis layout = "nodisplay" qui assure que l'élément est invisible.
Ensuite, l'attribut famille de polices est réglé sur FontAwesome, ce qui indique à AMP que nous voulons suivre le chargement de la police nommée «FontAwesome». Assurez-vous que cette valeur correspond exactement à la famille de polices mise dans votre @ font-face Code CSS.
L'attribut temps libre est réglé sur 3000, ce qui signifie que nous allons allouer jusqu'à trois secondes au chargement de la police avant de passer à un repli. Vous pouvez changer cela en n'importe quelle valeur que vous préférez.
Enfin, nous avons mis sur-error-add-class à font-génial-manquant. Si la police ne parvient pas à se charger après trois secondes, cette classe sera ajoutée à la liste. html ou corps élément. Nous pouvons cibler cette classe pour créer notre comportement de secours en ajoutant ce code à notre CSS personnalisé:
.font-awesome-missing .doc_header_social display: none;
Si la police échoue à se charger après trois secondes, le CSS ci-dessus activera et masquera la barre d'icônes sociale afin d'éviter tout affichage endommagé..
Maintenant, essayez de renommer temporairement le dossier des polices de votre projet pour empêcher le chargement des polices, puis actualisez votre page et vous devriez voir la zone des icônes sociales se masquer. Vous devriez aussi voir la classe font-génial-manquant ajouté au html ou corps étiquette. Restaurez le dossier de polices avec le nom correct et vous devriez revoir vos icônes de police lors de l'actualisation..
En savoir plus sur le ampli-police élément à:
Ensuite, nous allons apprendre à ajouter une vidéo YouTube de la manière AMP, mais nous devons d’abord ajouter un petit code d’entretien pour créer une section dans laquelle la vidéo s’assoira..
Après le “doc_header” div, remplacez le existant h1 balises avec ce code HTML:
Intégrer une vidéo YouTube
Ajoutez ensuite ceci à votre CSS personnalisé:
.standard_width width: 100%; largeur maximale: 75rem; marge gauche: auto; marge droite: auto; .standard_padding box-sizing: border-box; rembourrage: 6rem 3rem; .video_wrap background-color: # 2B2B2B;
Vous avez peut-être remarqué dans le CSS ci-dessus que nous avons défini taille de la boîte: boîte-frontière; dans le standard_padding classe.
La raison en est que dans AMP, vous ne pouvez pas utiliser la technique courante consistant à inclure * box-sizing: border-box, parce que le * le sélecteur est considéré comme trop gourmand en ressources. En tant que tel, vous devrez définir taille de la boîte: boîte-frontière; pour les éléments spécifiques sur lesquels vous en avez besoin, ou manipulez simplement le rembourrage et les bordures à l'ancienne, avec une calculatrice ou en comptant sur vos doigts.
amp-youtube ÉlémentMaintenant que la section est configurée et prête pour le contenu, nous allons ajouter une vidéo YouTube à l'aide de la solution personnalisée AMP. amp-youtube élément. En utilisant cet élément au lieu du code d'intégration YouTube standard, nous pouvons exploiter des techniques d'optimisation du chargement similaires à celles de amp-img.
Pour commencer, vous devez ajouter le code JavaScript AMP requis pour activer le nouvel élément. Dans la section principale, collez dans:
Ajoutez maintenant le code HTML suivant dans les divs que vous venez d’ajouter, sous le h2 Mots clés:
Pour spécifier la vidéo que vous souhaitez charger, définissez son ID YouTube sur l'attribut. data-videoid. Autre que cet attribut, le amp-youtube l'élément est à peu près le même que le amp-img élément.
Nous avons le largeur et la taille mis à 600 et 270 respectivement. Comme pour les images, les vidéos doivent avoir une largeur et une hauteur initiales..
Nous utilisons ensuite layout = "responsive" de sorte que la vidéo corresponde à la taille de son conteneur, tout en conservant le rapport de format tiré des paramètres de hauteur et de largeur.
Enregistrez et actualisez votre site, puis essayez de redimensionner la fenêtre. Vous devriez voir que votre vidéo YouTube s’agrandit ou s’agrandit pour s’ajuster, en conservant le rapport de format correct..
En savoir plus sur le amp-youtube élément à:
AMP propose des éléments personnalisés supplémentaires pour le chargement du contenu de sites spécifiques, tels que amp-twitter, amp-instagram et quelques autres. Pour le contenu provenant de sites tiers qui ne possèdent pas leur propre élément AMP, il existe le amp-iframe élément à la place. Nous allons maintenant utiliser cet élément pour charger une carte Google dans notre page.
Créez un conteneur pour la carte en ajoutant ce code sous vos divs «video_wrap»:
Utilisez l’intégration iframe, par exemple Plans
Maintenant, comme avec le ampli-police et amp-youtube éléments, nous devrons charger le script AMP qui pilote le amp-iframe élément. Ajoutez ceci à votre section de tête:
Ensuite, dans votre nouvelle division et sous le h2 tags, ajoutez ce code:
Rechargez votre site et vous devriez voir une carte Google maintenant en place.
Outre l’optimisation du chargement, l’utilisation de la amp-iframe element aide à garantir que le contenu affiché via l'iframe ne se comporte pas de manière indésirable, tel que l'exécution de JavaScript qui pourrait ralentir le chargement ou forcer l'affichage d'annonces en incrustation. le bac à sable Cet attribut vous permet de déterminer le niveau de contrôle que vous appliquez sur le contenu iframe..
Pour plus de détails sur amp-iframe et ses contrôles «bac à sable», visitez:
Une des choses qui peuvent sembler limitantes lorsque vous travaillez avec AMP est la règle selon laquelle aucun JavaScript personnalisé n'est autorisé. D'un autre côté, AMP inclut des éléments personnalisés qui visent à vous fournir certaines des fonctionnalités que vous pouvez généralement implémenter via JavaScript personnalisé..
Par exemple, au lieu de charger un script lightbox personnalisé, vous pouvez utiliser le amp-image-lightbox élément. Nous allons créer une galerie d'images qui utilise cet élément maintenant.
Commencez par créer un conteneur pour votre galerie en ajoutant ce code juste au-dessus de votre ampli-police étiquette:
Créer une galerie avec des lightbox
Ajoutez également ceci à votre CSS personnalisé:
.portfolio_wrap background-color: #ebeeee; .portfolio_inner padding: 4rem 6rem; .portfolio_item box-sizing: border-box; float: gauche; largeur: 25%; text-align: center; rembourrage: 0.8rem; .clearfix: before, .clearfix: after content: ""; affichage: table; .clearfix: after clear: both;
Comme nos derniers éléments personnalisés, nous devrons charger un script AMP pour activer la amp-image-lightbox élément. Ajoutez ceci à votre section de tête:
Nous sommes maintenant prêts à commencer à configurer notre galerie de lightbox. Commencez par ajouter ce code dans vos nouveaux divs, sous le h2 Mots clés:
Ce amp-image-lightbox element créera l’affichage lightbox réel avec les images agrandies qu’il contient. Nous voulons le masquer jusqu'à ce qu'un utilisateur ait cliqué sur une image qu'il souhaite agrandir, nous l'avons donc défini sur layout = "nodisplay".
Remarque: nous avons défini l'ID de cet élément sur lightbox1.
Pour ajouter un élément à la galerie, ajoutez cette div sous le amp-image-lightbox élément:
Ensuite, à l'intérieur, ajoutez ceci amp-img code:
Pour la plupart, cela amp-image L'élément est le même que celui que nous avons ajouté précédemment, mais vous remarquerez l'ajout de on = "tap: lightbox1". Cela indique à AMP que lorsque l'image est tapée / cliquée, la version la plus grande doit être ouverte dans une lightbox avec l'identifiant lightbox1, c'est-à-dire le amp-image-lightbox élément que nous venons de créer.
Ajoutez sept autres images à la galerie avec ce code:
