Les concepteurs Web créent des interfaces utilisateur mobiles plus légères et plus rapides

Google classe désormais les sites Web en fonction de la qualité de l'expérience mobile. Nous allons examiner certaines stratégies de conception utilisées pour rendre les sites Web extrêmement rapides.

Les développeurs Web disposent de diverses manières pour accélérer un site Web mobile. Ils utilisent des optimisations telles que :

• Hébergement Web rapide et CDN
• Caching
• Compression Gzip
• Mise en forme, compression et redimensionnement des images
• Nettoyage de la base de données
• Minification HTML, CSS et JavaScript
• Render- bloquer la suppression de JavaScript

Mais est-ce suffisant ? C'est un point de départ nécessaire, mais cela ne suffira pas pour de nombreux sites Web.

Les concepteurs de sites Web doivent contribuer à résoudre le problème en créant des interfaces utilisateur plus légères.

Qu'est-ce que cela implique exactement ? J'ai passé du temps à tester des sites Web avec Google PageSpeed ​​Insights pour essayer d'obtenir une réponse définitive.

J'ai commencé avec un échantillon de les sites Web les plus populaires au monde dans l'espoir de trouver qu'ils étaient tous optimisés à la perfection en termes de vitesse.

YouTubesans surprise, figurait parmi les sites les plus visités selon les données d'Ahref. Ses vitesses de chargement sur mobile, cependant, étaient un peu surprenantes :

Ce n'est pas un bon score, étant donné qu'il ne dépasse même pas la plage de scores moyen (50-89).

Wikipediaen revanche, avait un score mobile fantastique, même avec la redirection d'URL :

Ce n'est pas si surprenant que ça compte tenu de la densité de copie des pages par rapport à YouTube qui héberge des vidéos.

La plupart des autres sites Web qui ont complété le top 10 étaient partout avec leurs scores :

• Amazon = 51
• Facebook = 91
• Twitter = 73
• Fandom = 16
• Pinterest = 24
• IMDb = 16
• Reddit = 30
• Yelp = 56

À l'exception des sites mobiles de Facebook et Twitter, la plupart des 10 top 10 restants ont largement sous-performé en termes de vitesse.

Cela dit, ces sites Web peuvent se permettre de proposer des expériences plus lentes car ils ont des millions s de fans dévoués qui sont déjà profondément investis dans ce qu'ils offrent. De plus, leurs homologues d'applications mobiles peuvent offrir une expérience mobile supérieure et les sites les y réfèrent généralement pour cette raison. Tout comme IMDb le fait ici :

Votre site Web, cependant, peut ne pas avoir le l'avantage d'avoir une contrepartie d'application mobile ou d'avoir des visiteurs qui comprennent des vitesses de page plus lentes qu'idéales. Voici donc ce que vous devez faire :

Ce que vous pouvez faire pour créer des interfaces utilisateur mobiles plus légères et plus rapides

En dehors du top 10 des sites les plus visités, j'ai trouvé des tendances intéressantes.

Pour commencer, la plupart des les sites Web que je pensais être rapides sur mobile ne l'étaient certainement pas. Par exemple :

• Sites de voyage et de réservation
• Sites de divertissement
• Réservation de nourriture, avis et autres sites connexes
• Magasins de commerce électronique
• Sites d'influence numérique, sites de mariage, sites d'actualités populaires… et bien d'autres encore[19659010]Ce sont les types de sites que les consommateurs auraient des raisons de visiter sur leurs smartphones et, pourtant, la plupart de leurs scores de vitesse mobile étaient catastrophiques, comme je parle entre 10 et 30.

  En ce qui concerne les sites mobiles rapides. J'ai découvert (que je considère être un score de 70 et plus, un peu comme à l'école), j'ai pu identifier un certain nombre de tendances d'interface utilisateur qui, selon moi, sont responsables de leurs temps de chargement rapides. regardez ces sites :

  Contenu BDS

  Ceci est le site Web de Bárbara D. Szteinbergtraductrice, interprète et éditrice :

  

  Rece du site Web de Szteinberg ives un score de 82 de Google :

  

  Nous pouvons probablement attribuer ce score élevé aux éléments suivants :

  • Il s'agit d'un une page PWA.
  • Malgré l'animation lumineuse trouvée partout, chaque section se charge paresseux .
  • Les fichiers multimédias sont rares : il y a une photo, trois icônes et quelques dizaines de logos clients en noir et blanc. Au lieu de cela, les éléments de visualisation des données et les formes géographiques maintiennent les visiteurs en contact avec le contenu.

  Boldly

  Ceci est le site Web de Boldlyun studio de design londonien :

  

  Le site Web de Boldly reçoit un score de 84 de Google :

  

  Nous pouvons probablement attribuer ce score élevé aux éléments suivants :

  • La page d'accueil défile verticalement, un panneau à la foisce qui semble être un moyen plus efficace de présenter le contenu car il n'est pas nécessaire de tout charger en même temps.
  • À l'exception de certaines rotations d'image légères, il n'y a pas d'animations ou de processus gourmands en ressources dans les coulisses.
  • Ils utilisent Vernis ainsi qu'un certain nombre de CDN (Fastly, Cloudfront et S3).

  The Karol Hotel

  Ceci est le site Web de the Karol Hotelun hôtel-boutique à Clearwater, Floride :

  

  Le site Web mobile de l'hôtel Karol reçoit un score de 84 de Google :

  

  Nous pouvons probablement attribuer ce score élevé aux éléments suivants :

  • Il utilise Cloudflare web hébergement et CDN.
  • Lorsque je l'ai exécuté via PageSpeed ​​Insights, il m'a redirigé vers la version AMP du site. Ainsi, cela seul améliorera considérablement les vitesses de chargement du site mobile.
  • Malgré la taille du site et le nombre de superbes images qu'il contient, il se charge toujours très rapidement. Il semble que les images aient été redimensionnées et compressées avant d'être chargées sur le site.

  Matt Morris Wines

  Ceci est le site Web de Matt Morris Winesqui est en partie portfolio de photographies et en partie site Web de cave :

  

  Le site Web de Matt Morris Wines reçoit un score de 98 de Google :

   

  

  Nous pouvons probablement attribuer ce score élevé aux éléments suivants :[19659003]Pour la plupart, il s'agit d'un site Web d'une page. La "Page d'achat" n'affiche que quatre produits et la page "Liste de diffusion" renvoie à une fenêtre contextuelle d'abonnement.

• Il n'y a pas de formulaire de contact. Le bouton « Contact » propose d'ouvrir le client de messagerie du visiteur pour lui.
• Il y a 17 photos JPG sur le site. Cependant, un certain nombre de panneaux contiennent de nombreuses images, révélant chacune au fur et à mesure que le visiteur défile. Je soupçonne que le choix du concepteur de rendre chaque image transparente (en l'éliminant progressivement) au fur et à mesure qu'une nouvelle devient opaque (en l'introduisant progressivement) aide à accélérer les choses car toutes les images ne doivent pas être chargées ou affichées en même temps .[19659082]Woof Gang Bakery

  Ceci est le site Web de Woof Gang Bakeryune chaîne d'animaleries aux États-Unis :

  

  Le site Web de Woof Gang Bakery reçoit un score de 73 de Google :

  

  Nous pouvons probablement attribuer ce score élevé aux éléments suivants :

  • Le site utilise deux services d'hébergement Web : Heroku et Amazon EC2.
  • Il est hébergé sur un serveur Cowboy et utilise un proxy Heroku Vegur pour l'équilibrage de charge, ce qui signifie qu'il est optimisé pour une faible latence et une faible utilisation de la mémoire.
  • Il est connecté à un certain nombre de CDN : Amazon S3, Cloudflare JS et CDN JS.

  La Maison Blanche

  Ceci est le site Web pour la Maison Blanche :

  

  Le site Web de la Maison Blanche reçoit un score de 71 de Google :

  

  Nous pouvons probablement attribuer ce score élevé aux éléments suivants :

  • Bien que le site soit volumineux, il a une navigation impeccablement soignéeavec des couches de pages secondaires et tertiaires plutôt que créer des pages surdimensionnées qui prennent trop de temps à traiter.
  • La mise en cache Redis est activéece qui est un moyen très efficace de mettre en cache une page lorsque de nombreuses fonctions PHP fonctionnent en arrière-plan.
  • Cela exploite le réseau Akamai pour l'hébergement Web et la fonctionnalité CDN.

  Résumé

  La vitesse de chargement des pages Web est une partie très importante de l'expérience du visiteur ainsi que l'un des principaux facteurs de classement de Google. Et comme l'algorithme de Google donne la priorité à l'expérience mobile par rapport au bureau lors du classement d'un site Web, cela est devenu un énorme problème car la plupart des sites aujourd'hui ne parviennent pas à fournir la vitesse.

  Google Research et Webpagetest.org ont testé plus de 11 millions de sites Web. Et ce qu'ils ont trouvé était surprenant :

  

  Nous savons depuis des années que les consommateurs ne sont vraiment disposés qu'à attendez trois secondes pour qu'un site Web se chargesi c'est le cas.

  Ainsi, si la page Web mobile moyenne met plus de 15 secondes à s'afficher complètement, votre site va saigner les visiteurs, les prospects, les ventes et le client satisfaction (s'ils y parviennent même en premier lieu).

  Voici ce que vous pouvez faire pour éviter que cela ne se produise :

  • Ignorez les polices décoratives et n'en tenez pas plus à trois pages Web -des polices sécurisées ou des polices Google servies par CDN.
  • Mettez une limite sur le nombre d'images que vous utilisez si vous n'allez pas activer le chargement différé ou d'autres techniques de chargement différé.
  • Concevez chaque page pour qu'elle soit le plus court possible. Dans la mesure du possible, divisez les pages plus longues et utilisez des liens internes et des navigations bien conçues pour que les visiteurs se déplacent entre elles.
  • N'utilisez pas de fenêtres contextuelles, de bannières publicitaires, d'animations de chargement et d'autres extras gourmands en ressources.[19659004]Envisagez de le concevoir comme un site Web d'une page ou une PWA si vous avez moins de six ou sept pages d'informations à partager.
  • Parlez à votre développeur Web de l'installation d'un CDN, pour l'ensemble du site ou simplement pour servir votre image ou des ressources vidéo.

  Utilisez ces stratégies pour réduire le poids de vos interfaces utilisateur mobiles et donner aux sites Web de vos clients une chance d'impressionner les visiteurs avant qu'ils n'atteignent le bouton « Précédent » du navigateur.