L’âge du web mobile
C’est indéniable, le web devient mobile. D’ailleur devient n’est pas la terme adapté, le web est mobile. Plus de la moitié du trafic mondial provient des mobiles. Le web est donc mobile first. Cela mène à certains questionnements. Qu’en est-il ? Quelles sont les tendances ? Comment s’adapter ? Petit tour d’horizon du nouvel âge du web.
Cela fait quelques années que le traffic web depuis les mobiles augmente de manière significative. Google a même passé son index en mobile first en 2016. Mais depuis 2017, nous pouvons vraiment affirmer que le web est mobile avant d’être desktop. La majeure partie du trafic mondial est généré depuis les smartphones.
Les chiffres clefs du web mobile
Afin de contextualiser, voici quelques données sur le “marché” web.
- La population mondiale est de 7,6 milliards de personnes ;
- 5,6 milliards ont plus de 14 ans ;
- 5 milliards d’abonnements mobile dans le monde (pas forcement avec de la data) ;
- 3,5 milliards de smartphones en usage ;
- Cela contraste avec les 1,3 milliards de PC en usage.
Bien entendu, ces chiffres sont en constante augmentation (sauf les ventes de PC qui ralentissent). Les pays émergents ont en effet un énorme potentiel de croissance. Les mobiles y sont souvent le seul moyen d’accès à internet. De plus, le taux de pénétration des mobiles est bien en deçà de leurs homologues occidentaux.
L’impact sur le commerce est déjà très net. Aux États-Unis, les chiffres du e-commerce sont en très forte croissance tandis que ceux des magasins physiques diminuent.
Le graphique comparant les chiffres des dépenses du jour le plus important pour le e-commerce aux USA et en Chine, respectivement le cyber monday et le single’s day est des plus impressionnant.
Fait d’importance, des données rapportées par Nielsen nous apprennent qu’en moyenne, un utilisateur passe quotidiennement 3 heures sur son smartphone.
Enfin, une étude menée sur l’expérience de navigation des mobinautes montre que ce que les utilisateurs aiment le moins concernant la navigation mobile… c’est l’attente.
Que faire concrètement ?
En tant que designer, développeur, webmarketeur ou autre professionnel du web, il devient évident que vous travaillez dorénavant majoritairement pour les utilisateurs mobiles.
Bien entendu, il y a des exceptions. Ce site en fait partie car la plupart d’entre-vous sont des professionnels du web. Ainsi, vous consultez très majoritairement ces pages pendant vos heures de tavail, depuis une machine de travail, donc desktop ou laptop.
Ne négligez pas votre présence web
À tous ceux qui ne sont pas encore sur internet, pensez-y vraiment. À moins que vous ne vouliez pas augmenter votre volume d’affaire, les chiffres sont formels : c’est sur internet que ça se passe !
Il ne s’agit pas forcement de e-commerce. Le web est un média d’information : À quelle heure ferme ce magasin ? Qu’y a-t-il au menu de ce restaurant ? Quels sont les films à l’affiche ? Où sont les locaux de ce professionnel ?
Tout y passe. Le mobile est mobile et par essence, il permet d’accéder à l’information quand on en a besoin. Si l’utilisateur ne peut pas la trouver, vous avez perdu un client…
Je suis un ferme opposant à l’idée qu’un site a une durée de vie de trois ans. Un site bien conçu doit pouvoir durer et accomplir sa mission avec constance.
Toutefois, il faut admettre qu’un site conçu avant l’adoption massive des smartphones et la généralisation des principes de responsive design n’est aujourd’hui plus adapté. Il faudra donc soit le refondre complètement, soit l’adapter afin qu’il puisse atteindre son audience dans de bonne conditions.
Designez mobile first
La version mobile (responsive) doit être pensée dès les premières phases du design. À la rigueur, il est même pertinent de concevoir l’interface mobile en premier lieu et d’adapter l’affichage pour grands écrans ensuite.
Je ne suis pas designer, mais j’ai trop souvent pu constater des designs pensés pour desktop, et dont on confiait les maquettes aux développeurs avec comme consigne de gérer le responsive. Révélation : non Boostrap ne gère pas le responsive automatiquement. C’est du rafistolage et vous ne voulez pas que plus de 50% de vos visiteurs profitent d’une expérience rafistolée.
Si vous faites du e-commerce, pensez aux bonnes pratiques UX spécifiques à ce type de site.
Sites et webapps performants
L’évolution des technologies permet toujours plus. Pourtant les performances n’augmentent pas… En effet, le poids des pages est en constante augmentation. Cela a un double effet : d’une part les pages mettent plus de temps à charger ; d’autre part plus de données – notamment de JavaScript – demande plus de temps de traitement navigateur.
Cela s’ajoute à une demande en puissance plus importante et donc à une réduction de l’autonomie. Bien entendu si cela est imperceptible sur un ordinateur de bureau ou un smartphone dernier cri connecté en Wifi, un utilisateur d’un mobile peu puissant ou connecté à un réseau saturé en pâtira.
Je suis un fervent défenseur de l’idée que le web est universel. C’est à dire que tout appareil y ayant accès doit pouvoir accéder aux informations et service web de manière confortable. Bien entendu, je ne dis pas qu’il faut supporter de vieux navigateurs.
Cependant, il s’agit de faire les choix techniques qui permettent l’accès du site/webapp au plus grand nombre. Un site bien conçu, léger, sans publicité abusive, qui soit consultable aussi bien depuis une tour à 5000€ que depuis un smartphone d’occasion, connecté à une 3G poussive dans un pays en développement.
Bien entendu, tout ceci est à nuancer car Buzeo, de même que YouTube par exemple, n’auront de toute façon pas vocation à être utilisés par des personnes n’ayant pas accès à une connexion un minimum véloce. Néanmoins, pensez à optimiser vos sites pour en réduir le poids.
Les nouvelles possibilités que nous offrent le CSS et le JavaScript ne nous fournissent aucune excuse. Du site statique à la PWA, nous nous devons d’offrir de la performance en toute situation.
20% des visiteurs de ce site proviennent d’Afrique. En outre, quelle que soit votre cible, les réseaux mobiles des grandes métropoles sont saturés. J’ai bien souvent de moins bons débits mobile à Paris en full 4G qu’à la campagne avec une bonne vieille 3G.
Conclusion
Je crois que tout est dit. C’est en voyant la conférence de Luke Wroblewski à Conversions@Google 2018 que l’idée de cet article m’est venue (slides ici).
En outre, je vous invite à regarder la conférence de Bruce Lawson : World Wide Web, Not Wealthy Western’s Web en vidéo ou directement lire l’article correspondant sur Smashing Magazine (les deux sont également complémentaire).
Enfin, quelle que soit votre cible, plus c’est rapide, mieux c’est. J’estime que tout le challenge et l’intérêt des métiers du web est d’offrir de la performance au plus grand nombre d’appareils, sans compromis de fonctionalité.
Qu’il s’agisse d’un blog, d’un site vitrine ou d’un e-commerce, vos utilisateurs vous remercieront.
Commentaires
Alex dit –
Je suis tellement d'accord avec toi !
Je me bas depuis des années contre toutes les usines à gaz et autres frameworks JavaScript utilisés à tout va. Tu as pas chargé la page que tu prends 3mo de bundle...
Concernant le poids des images, malheureusement ça ne va pas aller en s'arrangeant. Mais c'est le point qui me gène le moins :)
C'était une bonne idée déjà d'abandonner WordPress pour la JAMStack, ne serait-ce que pour la planète.
Concernant le reste... Va falloir commencer à changer éviter d'inclure Bootstrap et jQuery dans tous les projets !
Buzut dit –
J'essaye de rester pragmatiques, les images et vidéos, ce sont des éléments qui sont directement utiles à l'utilisateur. Donc les enlever c'est plus rapide, mais à ce compte là ne pas visiter un site aussi c'est plu rapide que de charger la page…
On peut toutefois améliorer le poids en faisant les choses intelligemment : dimensionner les images correctement, bien les compresser, les servir au bon format (SVG quand c'est possible et offrir une version WebP pour les navigateurs modernes) et servir la bonne image au bon appareil (indice : l'image de 2000px de large sur un écran mobile de 600px de large est un gaspillage). Je parle de tout ça plus en détails dans un dédié aux images.
Toujours à propos des images, les gros consommateurs de BP ce sont les GIF. Mais aujourd'hui ce format doit être remplacé : on peut les servir en WebP (ça supporte la transparence et les animations) ou en vidéo (mp4, large support et compression bien plus efficace), avec une balise
<video src="mon-gif.mp4" autoplay loop></video>et voilà.Pour le WebP, j'avais écris un article également pour le mettre en place, y'a que l'embarras du choix dans les solutions : pré-compression, CDN…
Bootstrap honnêtement, je n'en vois plus l'intérêt, avec flexbox et CSS grid je comprends pas. À la rigueur pour faire un proto en 2/2 et pas avoir à écrire de CSS mais sinon l’intérêt est limité, il existe d'autres frameworks CSS plus efficaces et au pire du pire, on peut utiliser PurgeCSS pour ne garder que ce qui est utilisé.
Concernant la JAMStack, c'est certain, côté serveur ça utilise clairement moins de ressources et c'est généralement plus rapide. En revanche, un site dynamique bien optimisé offre de très bonnes performances, souvent aussi bonnes qu'un site statique. Ça demande en revanche une plus grande complexité (code propre et performant, gestion du cache, CDN…) et donc plus de chances de faire de la merde.
On crache souvent sur WP car – comme PHP – de nombreuses personnes avec des compétences très variées l'utilisent et on assiste à beaucoup de n'importe quoi : des plugins dans tous les sens, pas de cache, mises à jour pas faites etc. Quand il est possible de le remplacer par un simple SSG, clairement, il faut le faire, mais parfois le besoin est différent et WordPress reste un très bon outil.
J'utilise WordPress et WooCommerce pour Alphapole par ex, ça marche plutôt bien. On gère directement les comptes clients, les factures, les relances, le programme de fidélité etc etc. Clairement, on peut faire de plus en plus de choses avec la JAMStack, mais parfois, un bon vieux CMS répond au besoin 🤷♂️
Alex dit –
Hello Quentin !
Je vais aller lire ton article sur les images, c'est quelque chose que je ne maitrise pas trop. D'ailleurs en tant que dev, je trouve que l'on n’utilise pas assez la balise
source. Lesrsetest peu utilisé et compris, au final si des images_aliases sont utilisés sur les sites, on a de la chance :)Pour Bootstrap, clairement. J'ai essayé d'autres frameworks light, comme Milligram. Mais finalement je suis on ne peut plus d'accord avec toi, le flex les as tué. Le souci c'est qu'ils ont une popularité tellement énorme, ils continueront d'être utilisé pendant de longues années, même s’ils tendent à devenir atomiques.
Je ne connaissais pas du tout PurgeCSS ! Merci beaucoup, moi qui voulais réduire l'empreinte du coverage dans Chrome... :D
Effectivement, la question se pose. Je suis tombé sur ton site par hasard, le premier article que j'ai lu c'était "Ciao WordPress, Hello JAMstack". J'ai failli aller sur Hugo, puis je suis parti sur WordPress car il reste de nombreux avantages (les commentaires comme tu en parlais, le système de recherche, les balises Schema que tu ne galères pas à implémenter toi-même...).
Hier, j'ai passé ma journée à optimiser mon thème WordPress sur https://alexsoyes.com. Je me suis basé d'ailleurs sur l'excellent https://sustywp.com/, ça te parle ?
C'est sûr que la JAMStack, c'est nouveau, c'est propre, c'est moderne... ça donne envie ! Mais comme tous les outils, c'est pas toujours adapté. Un blog c'est limité, mais pour un site vitrine ça doit être génial.
WooCommerce est un très bel outil, ça me donne envie de postuler chez Automattic tout ça...
Bon week-end, Alex
Buzut dit –
Salut Alex !
Yes je connaissais Susty WP. C'est certain que c'est ultra léger, d'ailleurs ton site charge instantanément.
Je suis en train de rédiger une formation sur WordPress destinée aux développeurs : "WordPress en tant que framework web". Il s'agit de montrer les possibilités de l'outil au delà de l'usage one-click install, j'ajoute un thème et des plugins qui fait dire à certains développeurs que "WordPress c'est de la merde".
Quand je pars d'une page blanche et conçois tout sur-mesure, j'utilise Steroids. C'est un blank theme destiné au développeur JavaScript (envie d'utiliser les outils JS et front plutôt que tout l'environnement PHP).
Clairement, WP (et les autres CMS) présentent des avantages face au statique : un grand nombre de fonctionalités marchent "out of the box", sans avoir à programmer quoi que ce soit (la partie SEO par exemple est juste géniale avec SEOpress).
Cependant, au delà du thème en lui-même et des assets qui sont transférés à l'utilisateur, il y a toute la question d'optimiser la génération côté serveur (requête SQL, templating, caching…). Le cœur de WP est extrêmement performant, mais chaque plugin ajouté (plus ou moins bien programmé) alourdi le core avec des requêtes à la DB, du temps de CPU (templating, traitements PHP)… Tout cela fait que, indépendamment du HTML généré, le sacro saint TTFB a vite tendance à grimper, ralentissant d'autant le temps de chargement ; sans parler de l'augmentation de la charge serveur (réduction du nombre d'utilisateurs concurrents, conso électrique en hausse).
C'est bien sur pour ça qu'on conseille souvent de limiter le nombre de plugins, et bien entendu qu'il faut mettre en cache (c'est le cas sur ton site). Mieux vaut donc du code custom qu'un plugin dont on ignore (ou n'a pas le temps d'auditer) le fonctionnement et l'impact. Il ne faut pas tomber dans l'extrême car ce serait renier la nature même de WordPress, mais rester vigilant.
Sur un gros site, tout l'enjeu est de trouver le bon équilibre et optimiser tout cela pour des pages qu'il n'est pas possible de mettre en cache (si tout est cacheable, alors l'impact est négligeable).
Concernant le front et l'inertie de vieux outils, c'est comme ça. Bootstrap est là pour encore un moment, comme jQuery.
Je suis aussi en train de rédiger un gros article sur la JAMstack, c'est une nouvelle approche du développement. Il y a – comme dans toutes choses – des avantages et des inconvénients, des projets pour lesquels ça fit, et d'autres pour lesquels ça ne convient pas. Mais on peut faire énormément de choses.
Et puis comme le statique est une sorte de cache poussée à son paroxysme, c'est aussi possible avec WordPress. Il existe le plugin WP2Static qui génère un site statique d'un WordPress 😎
Alex dit –
Hello :)
Yes, le but c'était aussi de montrer que WordPress est plutôt performant... La plupart des devs fuient dès que l'on en parle. Si la formation est ouverte, je serai ravi de te donner mon avis dessus :)
Je suis plutôt pour changer les clichés dans notre milieu. Mais clairement les plugins, c'est le problème. Déjà c'est "trop grand public" pour que les bonnes pratiques soient respectées, et puis plus ton site est gros, plus t'as de plugins, plus c'est la merde...
À ce moment c'est net que je passerai par un framework type Symfony voire eZ Platform si jamais y'a besoin.
"Il ne faut pas tomber dans l'extrême car ce serait renier la nature même de WordPress, mais rester vigilant."
C'est clair, la puissance de WP ce sont d'abord les plugins. Certains ont beaux être moyens moyens, le process de validation est de plus en plus complexe j'ai l'impression. Je suis en train de faire valider un thème, c'est tout un workflow !
jQuery... n'en parlons pas va !
La JAMStack c'est vraiment le côté accessibilité / développement durable que j'aime bien. T'as pas besoin de Varnish, pas de DB, moins de frontaux si jamais... C'est clairement avantageux !
Sympa ton plugin, j'irai le tester... :D
On vient de faire une sacrée digression sur WP, mais ça va le coup ! Content de voir que tous les devs ne le détestent pas.
PS: Cool ton thème ! Je vais aller fouiner un peu dans le code, je ne suis pas super familier à l'écosystème JS. En tout cas, les emojis dans les commits, c'est la base :)
Bon lundi à toi,
Alex
Rejoignez la discussion !