Les propriétaires d’entreprise avec des sites Web lents et mal optimisés ont besoin d’un sérieux signal d’alarme.
Quarante pour cent des personnes abandonneront un site Web qui prend plus de trois secondes à se charger. En 2016, votre site Web n’existera peut-être pas s’il ne se charge pas rapidement sur toutes les plateformes, des ordinateurs portables aux smartphones. Heureusement, il existe une solution qui peut résoudre ce problème et améliorer votre stratégie de marketing mobile.
Google a récemment lancé une nouvelle solution appelée Accelerated Mobile Pages (AMP), qui peut considérablement accélérer votre site Web et mieux l’optimiser pour les utilisateurs mobiles.
Voici un guide pour vous aider à démarrer avec AMP.
Qu’est-ce qu’une page AMP ?
Le projet AMP est une initiative open source créée par Google. Son but est d’améliorer l’expérience des utilisateurs d’appareils mobiles.
Google a annoncé le nouveau projet pour la première fois le 7 octobre 2015. Cependant, de nombreux spécialistes du marketing de contenu en savent encore très peu sur AMP ou ne l’utilisent pas à leur avantage. Quel est donc le but d’AMP et quelles sont ses limites ?
Pages mobiles plus rapides et mieux optimisées
L’optimisation de la vitesse des pages Web mobiles est essentielle à votre réussite. Les taux de rebond du site Web sont nettement plus élevés pour les pages qui prennent beaucoup de temps à charger. Les longs temps de chargement font également chuter les taux de conversion (jusqu’à 27 % avec un délai d’une seconde) et les pages à chargement lent se classent beaucoup plus bas dans le SERPS.
Des revenus plus élevés pour les éditeurs
L’un des principaux objectifs du projet AMP est de permettre aux éditeurs d’augmenter leurs revenus. Les pages Web à chargement rapide bénéficient d’une plus grande visibilité, ce qui signifie que les éditeurs peuvent gagner beaucoup plus en revenus publicitaires.
Supprimer les fonctionnalités de site Web dynamique
Le principal inconvénient des pages AMP est qu’elles ne fonctionnent qu’avec du contenu statique. Le contenu statique apparaît exactement le même à chaque chargement de la page.
En d’autres termes, vous ne pouvez pas utiliser les pages AMP pour les pages Web mobiles qui utilisent le ciblage géographique ou le contenu créé avec des générateurs de nombres aléatoires. Cela peut diminuer l’expérience utilisateur sur les pages qui permettaient auparavant une plus grande interactivité de l’utilisateur.
Éléments AMP
Les pages AMP sont très faciles à créer. Il vous suffit de vous familiariser avec les trois composants de base, qui sont répertoriés sur le site du projet AMP et résumés ci-dessous.
AMP-HTML
HTML est le principal langage de balisage pour la création de sites Web depuis plus de 20 ans. Cela n’a pas changé avec l’introduction de l’AMP.
AMP HTML est le code open source utilisé pour créer des pages AMP. La plupart du code HTML d’AMP est identique au code HTML normal. Cependant, certaines balises spéciales sont créées spécifiquement pour AMP.
Voici un exemple de document AMP HTML qui a été publié sur Github :
Du texte
taper = ”a9 ″
data-aax_size = ”300 × 250 ″
data-aax_pubname = ”test123 ″
data-aax_src = ”302 ″>
Comme vous pouvez le voir, les balises meta, script, body, link et formatting sont les mêmes que celles du HTML standard. Cependant, certaines des balises utilisées pour intégrer du contenu sont différentes, telles que les balises d’image et d’annonce.
AMPJS
JavaScript joue un rôle important dans la conception Web moderne. Le projet AMP fournit son propre code JavaScript open source appelé AMP JS.
Ces scripts sont importants pour augmenter la vitesse de chargement de la page Web. Malheureusement, étant donné que AMP ne peut être utilisé que pour créer des pages statiques, vous ne pourrez pas y intégrer de code JavaScript tiers.
CDN AMP
AMP CDN est un réseau de diffusion de contenu spécialement conçu pour les pages AMP. Vous n’avez pas besoin de l’utiliser pour utiliser les pages AMP, mais cela peut améliorer considérablement les performances de vos pages et vous permet de les mettre en cache, ce qui facilite leur partage.
Présentation de l’AMP
Maintenant que vous comprenez les principaux éléments des pages AMP, vous pouvez commencer à les incorporer dans votre site. Voici comment commencer :
Soyez conscient des limites de votre contenu
N’oubliez pas que de nombreuses fonctionnalités auxquelles vous êtes habitué ne seront pas disponibles dans AMP, notamment les suivantes :
- Certains cookies de suivi (bien que les développeurs open source en aient publié certains)
- formulaires de plomb
- Scripts de géolocalisation
Malgré ces limitations, vous pouvez toujours trouver des moyens de rendre vos pages attrayantes et vous pouvez stocker des images hébergées localement avec HTML5.
Décrivez la structure de vos pages AMP
Commencez par créer un aperçu de vos pages Web. Malgré la vitesse de chargement des pages AMP, vous devez toujours éviter d’utiliser des images inutilement volumineuses et du contenu redondant pouvant interférer avec les temps de chargement.
Créer du code HTML AMP
Si vous maîtrisez l’écriture de pages HTML, vous pouvez apprendre à créer des pages AMP assez rapidement. Comme je l’ai déjà dit, la plupart du code est identique au HTML normal.
Je recommande de suivre les tutoriels sur cette page du site Web du projet AMP. Voici un bref aperçu.
Commencez avec une page standard
Commencez par copier le code de cette page. Vous pouvez facilement modifier cette page pour voir à quoi elle ressemble.
Il existe quelques différences clés entre le HTML traditionnel et le HTML AMP que vous devez connaître avant de commencer à modifier.
Balise de niveau supérieur
Tout code HTML nécessite une balise de niveau supérieur. En HTML traditionnel, il s’agit simplement de la balise, mais la balise de niveau supérieur pour AMP HTML est .
Première balise enfant dans la balise
Assurez-vous que la première balise à l’intérieur de la balise head est .
Étiquettes supplémentaires dans l’étiquette
La balise head nécessite également une balise indiquant :
.
Vous devrez également copier et coller les éléments suivants :
Changement de style et de format
Modifiez le format de vos pages AMP avec CSS. Le processus est à peu près le même, sauf que vous devez utiliser l’élément AMP équivalent pour le
