Si vous examinez le trafic analytique des sites Web au cours des dernières années, vous constaterez probablement qu’ils ont tous un point commun: une augmentation du nombre de visiteurs qu’ils reçoivent d’utilisateurs sur des appareils mobiles.
Globalement, il y a maintenant plus de trafic Web provenant d'appareils mobiles que de ce que nous considérons comme des «appareils traditionnels», ce qui signifie essentiellement des ordinateurs de bureau ou des ordinateurs portables. Il ne fait aucun doute que l'informatique mobile a changé la façon dont les gens utilisent le contenu en ligne, ce qui signifie qu'elle a également changé la façon dont nous devons créer des sites Web pour ces audiences de plus en plus centrées sur le mobile.
Construire pour un public mobile
Créer des «sites Web conviviaux pour les mobiles» est une priorité pour les professionnels du Web depuis de nombreuses années. Des pratiques telles que la conception Web réactive ont pour but de contribuer à la création de sites qui fonctionnent bien pour tous les appareils. Une focalisation sur les performances du site Web et des temps de téléchargement rapides profite à tous les utilisateurs, mobiles ou non. Une autre approche des sites conviviaux pour mobiles est connue sous le nom de développement Web AMP (Accelerated Mobile Pages).
Ce projet, soutenu par Google, a été créé en tant que norme ouverte permettant aux éditeurs de sites Web de créer des sites qui se chargent plus rapidement sur des appareils mobiles. Si vous pensez que cela ressemble beaucoup à une conception Web réactive, vous n’avez pas tort. Les deux concepts ont beaucoup en commun, à savoir qu'ils sont tous deux axés sur la fourniture de contenu aux utilisateurs sur des appareils mobiles. Il existe toutefois un certain nombre de différences entre ces deux approches.
Différences clés entre AMP et Responsive Web Design
Un des atouts de la conception Web réactive a toujours été la flexibilité qu’il ajoute à un site. Vous pouvez créer une page qui répond automatiquement à la taille de l'écran du visiteur. Cela confère à votre page une portée et la capacité de servir une bonne expérience avec une large gamme de périphériques et de tailles d'écran, des téléphones mobiles aux tablettes en passant par les ordinateurs portables, les ordinateurs de bureau et au-delà. La conception Web réactive est axée sur tout appareils et expériences utilisateur, pas seulement mobiles. C'est bon à certains égards et mauvais à d'autres.
La flexibilité dans un site est une bonne chose, mais si vous voulez vraiment vous concentrer sur le mobile, créer un site qui se concentre sur tous les écrans, plutôt que sur les seuls mobiles, peut être une flexibilité de trading qui optimise les performances mobiles. Telle est la théorie derrière AMP.
AMP est purement axé sur la vitesse, à savoir la vitesse mobile. Selon Malte Ubl, responsable technique de Google pour ce projet, AMP vise à intégrer «le rendu instantané au contenu Web». Voici quelques-unes des méthodes utilisées:
- Chargement paresseux
- Utiliser preconnect
- Pré-extraction de ressources
- Async Javascript
- Feuilles de style en ligne
- Aucune police téléchargeable
- Priorisation des ressources
Ce ne sont là que quelques-uns des principes qui font que AMP se charge si rapidement. Toutefois, certains éléments de cette liste peuvent faire frémir les professionnels du Web de longue date. Les feuilles de style en ligne, par exemple. Depuis des années, beaucoup d'entre nous ont appris que tous les styles devraient être contenus dans des feuilles de style externes. Le fait de pouvoir styler de nombreuses pages de site à partir d'une seule feuille externe est l'un des points forts de CSS, une force qui est annulée si les pages utilisent plutôt des styles en ligne. Oui, vous évitez de télécharger le fichier externe, mais au prix de pouvoir gérer l'ensemble du site avec la seule feuille de style. Alors, quelle approche est la meilleure? En réalité, ils présentent tous deux des avantages et des inconvénients. Le Web change constamment et différentes personnes visitant votre site ont des besoins différents. Il est très difficile d’établir des règles qui s’appliqueront dans tous les cas, car différentes approches ont un sens dans différentes situations. L'essentiel est de peser les avantages ou les inconvénients de chaque approche afin de déterminer celle qui convient le mieux à votre cas particulier.
Une autre différence essentielle entre AMP et RWD réside dans le fait que la conception réactive est rarement ajoutée à un site existant. Parce que RWD est vraiment une refonte de l’architecture et de l’expérience d’un site, il faudra généralement que ce site soit repensé et redéveloppé pour prendre en compte les styles réactifs. AMP peut cependant être ajouté sur un site existant. En fait, il peut même être ajouté à un site responsive existant.
Considérations Javascript
Contrairement aux sites avec RWD, les sites AMP ne fonctionnent pas bien avec Javascript. Cela comprend 3rd les scripts de partie et les bibliothèques qui sont très populaires sur les sites d’aujourd’hui. Ces bibliothèques peuvent ajouter des fonctionnalités incroyables à un site, mais elles ont également un impact sur les performances. En tant que tel, il va de soi qu'une approche centrée sur la vitesse de la page éviterait les fichiers Javascript. C'est pour cette raison que l'AMP est souvent mieux utilisé sur des pages Web statiques que sur des pages très dynamiques ou nécessitant des effets Javascript spécifiques pour une raison ou une autre. Par exemple, une galerie de site Web utilisant une expérience de style «lightbox» ne sera pas un excellent candidat pour AMP. D'autre part, un article standard sur le site Web ou un communiqué de presse ne nécessitant aucune fonctionnalité sophistiquée serait une excellente page à diffuser avec AMP. Cette page est susceptible d'être lue par des personnes utilisant des appareils mobiles qui ont peut-être vu le lien sur les médias sociaux ou via une recherche Google mobile. Le fait de pouvoir livrer ce contenu instantanément quand ils le demandent, au lieu de ralentir la vitesse de téléchargement tout en chargeant du Javascript et d'autres ressources inutiles, offre une expérience client exceptionnelle.
Choisir la bonne solution
Alors, quelle option vous convient - AMP ou RWD? Cela dépend de vos besoins spécifiques, bien sûr, mais vous n’avez pas besoin de choisir l’un ou l’autre. Si nous voulons avoir des stratégies en ligne plus intelligentes (et plus efficaces), cela signifie que nous devons considérer tous les outils à notre disposition et apprendre comment ils vont fonctionner ensemble. Peut-être cela signifie-t-il que votre site sera réactif, mais que vous utiliserez le format AMP dans certaines sections ou pages qui conviendraient le mieux à ce style de développement. Cela pourrait également signifier prendre différentes approches et les combiner pour créer des solutions hybrides répondant à des besoins très spécifiques et offrant le meilleur des deux mondes aux visiteurs de ce site.
