Ce que les concepteurs Web peuvent faire pour accélérer les sites Web mobiles

J'ai récemment écrit un article de blog pour un client de concepteur Web sur la vitesse de page et pourquoi c'est important Ce que je ne savais pas avant d’écrire, c’est que son agence avait du mal à optimiser ses sites Web mobiles pour gagner du temps. En conséquence, elle est revenue me voir préoccupée par la publication d'un article sur une stratégie que son agence n'avait pas encore adoptée avec succès.

Elle était toutefois déchirée. Elle a compris à quel point la vitesse des pages mobiles était importante pour l'expérience utilisateur et, par procuration, pour le référencement. Cependant, leur objectif a toujours été de créer un design attrayant et efficace. Les développeurs devaient toujours se préoccuper de l’optimisation de la vitesse des pages.

Nous avons finalement décidé de continuer à la publier jusqu’à ce que leurs sites Web ainsi que ceux de leurs clients soient correctement optimisés. Entre-temps, cela m'a fait réfléchir:

Les concepteurs peuvent-ils faire quelque chose en créant des sites Web mobiles pour aider les développeurs à optimiser la vitesse?

Les développeurs optimisent déjà les performances en amont ] avec:

• Hébergement Web rapide
• CDN
• Pratiques de codage propres
• Mise en cache
• Minification
• Optimisation de l’image
• Et plus

Et plus

Donc, y est.

Pour moi, cela ressemble beaucoup à la façon dont l’optimisation de la recherche est gérée. En tant qu'écrivain, je m'occupe des optimisations sur la page pendant que le développeur à qui je confie le contenu se charge des tâches techniques de référencement. Les concepteurs et les développeurs Web peuvent facilement aborder les aspects de l'optimisation de la vitesse qui se trouvent dans chacune de leurs timoneries.

Comprendre ce que “lent” veut dire sur le Web mobile

Il existe un certain nombre d'outils pour vous aider à analyser les vitesses de page et à les mettre en œuvre. diverses corrections pour les améliorer. Un outil particulièrement utile s’appelle Lighthouse . La seule chose à faire est que cela s'adresse aux développeurs Web.

Je suggère plutôt aux concepteurs Web d'utiliser un autre outil de test de Google appelé Test My Site .

Ceci est strictement réservé à ceux qui souhaitent obtenir une évaluation rapide de la vitesse de leur site mobile . Il vous suffit de saisir votre nom de domaine dans le champ et de laisser le test s'exécuter.

Ce qui me plaît dans cet outil, comparé à d’autres tests de vitesse sur site, c’est que tout est décrit en termes simples pour un profane. Dans ce cas, mon site Web est «lent», même lorsqu'il est utilisé sur des réseaux 4G. Bien que nous sachions depuis des années que les visiteurs de étaient disposés à attendre trois secondes le temps de chargement d'une page Web Google estime que le temps de traitement est de 2,9 secondes. (Ce sur quoi je suis tout à fait d’accord.)

Vous pouvez obtenir un rapport détaillé de Google qui explique comment accélérer les temps de chargement de votre mobile, mais les suggestions ne diffèrent pas de celles que vous avez apportées en matière de développement. Par exemple:

Nous le savons déjà. Cependant, si vous (ou votre développeur) n'avez implémenté aucune de ces corrections, c'est une bonne liste de contrôle.

Cela dit, je ne vous ai pas indiqué cet outil pour que vous puissiez continuer à utiliser l'outil. mêmes optimisations encore et encore, dans l’attente du même résultat. Que disent-ils toujours de la définition de la démence?

Je pense plutôt que vous devriez l’utiliser comme vérification rapide:

Mon site mobile est-il assez rapide aux yeux de Google? Non? Ensuite, vos visiteurs ne seront pas assez rapides non plus.

Et si vous voulez vraiment faire passer ce point à la maison, faites défiler vers le bas de la page d'analyse Tester mon site et exécutez vos chiffres dans le calculateur d'analyse d'impact. :

Si vous n’êtes pas complètement convaincu de la nécessité de réduire davantage votre vitesse mobile de 3 secondes, regardez L’impact financier de seulement 0,5 seconde sur vos résultats mensuels.

Que peuvent faire les concepteurs Web pour optimiser la vitesse des sites mobiles

Laissez le développeur Web gérer toutes les optimisations de vitesse nécessaires, telles que la mise en cache et la minification de fichiers, pendant que vous: suivez les conseils et les stratégies de conception suivants:

1. Héberger des polices à partir d'un CDN

Vous devez vous inquiéter de la conception de polices pour l'expérience mobile que vous ne voulez probablement pas entendre parler de cela… mais les polices Web personnalisées sont nulles quand il le faut au chargement. En fait, deux études de cas récentes montrent pourquoi les polices Web personnalisées nuisent aux vitesses de chargement des pages.

Heureusement, un CDN pourrait devenir votre atout précieux.

The Downtime Monkey Example

de Singe de temps d'arrêt . Dans cette étude de cas, Downtime Monkey revendique une amélioration de la vitesse de ses pages de 58% grâce à diverses optimisations, deux d'entre elles ayant trait à la manière dont les polices sont fournies à leur site.

Pour leurs icônes Font Awesome, ils ont décidé de les héberger à partir d'un CDN. Cependant, le CDN de Font Awesome s’est avéré peu fiable, ils sont donc passés au CDN Bootstrap. En conséquence, cela leur a permis de gagner entre 200 et 550 millisecondes par chargement de page .

Pour leur police Google Cabin, ils ont décidé de l'héberger à partir du CDN de Google. Ce qui est amusant de noter cependant, c'est que lorsqu'ils ont ensuite exécuté un test de vitesse de page sur le site, ils ont reçu une suggestion d'optimisation relative à la police.

Il semble que le lien qu'ils ont placé dans la tête de leur site ralentissait. le rendu de la page. Ils ont donc dû implémenter une solution permettant de charger la police de manière asynchrone sans endommager l’affichage de la page lors de son chargement. Ils utilisèrent Web Font Loader pour résoudre le problème et finirent par économiser ainsi entre 150 et 300 millisecondes par page

Le test de Brian Jackson

Brian Jackson, directeur du marketing chez Kinsta, a écrit un article pour KeyCDN qui montre la meilleure façon de gérer les polices Web personnalisées sur un site Web.

Vous pouvez voir dans son exemple qu'il suggère un certain nombre d'optimisations, telles que la limitation des styles et des jeux de caractères. disponible pour utilisation sur le site Web. Cependant, c’est son expérience avec l’hébergement sur CDN qui est vraiment intéressante.

Tout d’abord, il isole les polices Google les plus populaires et teste la rapidité avec laquelle elles ont été chargées via le CDN:

Open Sans a chargé le plus rapide.

Mais cela ne devrait pas automatiquement faire d'Open Sans le meilleur choix si vous essayez. pour accélérer votre site web. Après tout, Opens Sans est une police Google qui doit être servie par les serveurs de Google. Comparé à Arial, une police Web sûre qui n'est pas tirée d'une source externe, voici ce qui s'est passé:

Arial a battu Open Sans de près de 200 millisecondes.

Avant de poursuivre, je dirai simplement qu'il s'agit d'un exemple. moyen de résoudre le dilemme des polices à chargement lent: plutôt que d’utiliser des polices hébergées en externe, utilisez celles de votre système. Ils ne sont peut-être pas aussi excitants à concevoir, mais ils n'obligeront pas les utilisateurs à attendre que votre site Web soit chargé, ce qui vous coûtera cher visiteurs et clients.

Vous pensez peut-être bien télécharger et héberger votre police Google aurait alors plus de sens. De cette façon, vous n’aurez pas à choisir les polices que vous utilisez et vous éviterez les vitesses de chargement normales.

Eh bien, Brian était curieux à ce sujet aussi, alors il a fait un test:

Lorsqu'il était servi depuis un serveur local, Open Sans prenait 0,530 milliseconds pour se charger. Ce n’est pas une grande différence, mais ce n’est évidemment pas la bonne direction à prendre.

Alors, quelle est la conclusion? Eh bien, vous avez quelques options.

1. Vous pouvez utiliser une police Web sécurisée et éviter les problèmes liés à l'utilisation de polices hébergées en externe.
2. Vous pouvez utiliser une police Google et vous assurer qu'elle est hébergée par son intermédiaire. CDN.
3. Vous pouvez télécharger une police Google et la télécharger sur votre propre CDN (si vous pouvez la charger plus rapidement à partir de là).

Dans les deux cas, hébergez vos polices et icônes à partir d'un emplacement où elles ' Charger plus rapidement peut vous aider à optimiser les performances de votre site Web.

2. Arrêtez d’utiliser des éléments de conception encombrants

La liste suivante résume un peu les sujets déjà abordés. Je ne veux donc pas perdre votre temps à essayer de recréer la roue ici. Cependant, je pense que cette stratégie consistant à supprimer les éléments de conception inutiles (en particulier les plus lourds) pour optimiser l'expérience mobile mérite d'être résumée ici:

Arrêtez avec des annonces sur la page

Lorsque j'ai écrit sur les éléments vous devriez fossé sur les sites Web mobiles j’appelais des publicités comme l’une des choses que l’on pouvait facilement jeter. Je maintiens toujours cette conviction.

Pour commencer, les annonces sont signifiées par une tierce partie. Chaque fois que vous devez faire appel à des serveurs tiers, vous augmentez encore votre temps de chargement en attendant que le contenu soit livré sur votre page.

Deuxièmement, plus de 26% de la population américaine utilise à elle seule la technologie de blocage des annonces sur leurs appareils, afin qu'ils ne voient pas vos annonces sur la page de toute façon.

Utilisez plutôt des méthodes de monétisation qui éloignent la publicité de votre site Web, augmentent vos conversions sur site et vous permettent de gagner. Ne drainez pas les ressources de votre serveur:

• Remarketing
  Laissez votre pixel de suivi suivre les internautes sur le Web, puis diffusez vos propres annonces sur le site de quelqu'un d'autre.
• PPC
  Il y a beaucoup d'argent à dépenser Si vous pouvez utiliser la formule de publicité au paiement au clic dans Google.
• [1 9459010] Publicités dans les médias sociaux
  Celles-ci sont particulièrement faciles à exploiter si votre site publie régulièrement de nouveaux contenus et si vous avez une offre attrayante.

Stop With Pop-Ups

Je sais que Google indique que Les fenêtres contextuelles mobiles sont acceptables dans certains cas. Toutefois, si vous construisez un site Web avec WordPress ou un autre système de gestion de contenu et que vous utilisez un plug-in pour créer ces fenêtres contextuelles, cela ralentira vos temps de chargement. Ce n'est peut-être pas beaucoup, mais vous remarquerez la différence.

ThemeIsle a décidé de faire une analyse de la manière dont certains plugins affectent la vitesse des sites Web WordPress. Voici ce qui s’est passé lorsqu’ils ont testé les effets de chacun de ces plugins sur le temps de chargement:

	Temps de chargement de la base (en secondes)	Temps de chargement après l’installation (en secondes)	Variation en%
Sécurité plugins	0.93 s	1.13 s	21.50%
Plugins de sauvegarde	0.93 s	0.94 s	1.07%
Plugins de contact	0.93 s	0,96 s	3.22%
Plugins SEO	0,93 s	1.03 s	10.75%
Plugins pour le commerce électronique	0,93 s	1.22 s	31.10% [19659109] Certes, certains plugins sont codés pour être plus légers que d'autres, mais il y aura toujours une différence dans vos temps de chargement. Sur la base de ces données, la différence pourrait être aussi faible que 0,01 et jusqu'à 0,29 seconde. Si vous savez que les pop-ups ne sont pas vraiment casher sur le Web mobile, pourquoi tenter votre chance? Prenez plutôt cette offre promotionnelle, cette notification de cookie ou cette annonce et placez-la sur vos pages Web. Arrêtez-vous avec des chaînes de contacts encombrantes N’oubliez pas les canaux de contact de votre site Web. En particulier, vous devez faire attention à la conception de formulaires mobiles . Bien sûr, cela dépend en partie du temps qu’il faut réellement à un utilisateur pour le remplir. Cependant, vous devez également tenir compte de la longueur et de la longueur des formulaires sur plusieurs pages. En règle générale, vos formulaires pour mobiles doivent être simples, il ne faut inclure que ce qui est absolument nécessaire. Il existe une école alternative. Vous pourriez abandonner complètement le formulaire de contact, ce dont j'ai parlé en parlant de la tendance de à remplacer les formulaires mobiles par des chatbots . Certains sites Web ont supprimé leurs formulaires et laissé des informations telles que des FAQ, des adresses électroniques et des numéros de téléphone que les visiteurs peuvent utiliser s'ils souhaitent entrer en contact. Cela allégerait certainement les choses du point de vue du chargement. Je ne sais tout simplement pas si ce serait idéal pour l'expérience utilisateur. 3. Créer un site Web à page unique Les conseils ci-dessus seront les plus simples et les plus rapides à mettre en œuvre. Vous devez donc absolument commencer là si un client ou un développeur Web vous parle de problèmes de sites Web trop lents. Cependant, si les tests de vitesse de page montrent toujours qu'un site prend plus de 2,5 secondes à se charger, envisagez une nouvelle approche pour la refonte d'un site Web à des fins d'optimisation de la vitesse. Comme Adam Heitzman l'a déclaré dans un article pour Search Engine. Journal : "Les sites d'une page se convertissent généralement beaucoup plus facilement en mobile et les utilisateurs les trouvent simples à naviguer." Mais cela signifie-t-il qu'un site Web d'une page sera toujours chargé plus rapidement qu'un site de plusieurs pages site Internet? Bien sûr que non. Cependant, la plupart des concepteurs professionnels choisissent une conception d'une seule page sur plusieurs pages à des fins très spécifiques. DevriX a un joli graphique qui résume ceci: Pour être clair, je ne vous suggère pas de transformer votre site Web en une application à page unique (SPA). Si vous souhaitez accélérer la propriété numérique de votre client avec les travailleurs du service, un PWA est une meilleure solution. (Plus d'informations à ce sujet au point suivant.) Je vous suggère plutôt de convertir un site Web de plusieurs pages en un site d'une page si votre client remplit certains critères: focus étroit et singulier. Sites Web nécessitant peu de contenu pour faire passer son message. Un nombre limité de mots clés pour lesquels vous devez classer. Cela dit, si vous concevez un site Web qui correspond à avec ces trois critères (ou au moins deux sur trois), vous pouvez de manière réaliste déplacer votre site Web vers une conception plus simple d'une page. Les sites Web d'une seule page vous obligeant à faire plus avec moins, contenu et fonctionnalités limités. naturellement créer un site web léger. Même si vous avez légèrement repoussé les limites, vous pouvez toujours créer un site Web à chargement plus rapide pour mobile, comme Tempus le fait: Ce qui est cool avec ce site web d'une page, c'est qu'il ne lésine pas sur l'imagerie extensive nécessaire pour vendre des maisons de luxe . Et pourtant, son site mobile se charge en 2,1 secondes Par contre, tous les sites Web à page unique ne sont pas conçus pour la vitesse. Prenez le développeur Le site Web de Davide Marchet : En raison de la surcharge des animations, le chargement de la page sur un mobile prend 5,4 secondes. Vous pouvez même le voir sur la capture d'écran présentée par Think with Google. L’image vue ici est en réalité le message qui apparaît pendant le chargement de la première animation en arrière-plan. Je vous conseillerais donc de faire attention si vous espérez utiliser une conception d'une seule page pour résoudre les problèmes de performances de votre site Web. La conception doit être simple, très ciblée et sans encombrement par des scripts et des effets d'animation qui annulent les avantages de la réduction du contenu à une page. 4. Transformez votre site mobile en PWA Selon Google, il existe trois caractéristiques qui définissent chaque PWA : Reliable Rapide S'engager La ​​vitesse est une partie inhérente de applications Web progressives grâce aux employés de service avec lesquels ils ont été construits. Comme les employés de service existent en dehors du navigateur Web et ne dépendent pas de la vitesse du réseau de l'utilisateur, ils chargent plus rapidement le contenu mis en cache pour les visiteurs. Je dirais aussi que, parce que la conception d'un PWA ressemble plus à celle d'un application mobile native (du moins sa coque), cela oblige le design à être plus soigné qu'un site Web mobile. Si vous avez du mal à accélérer votre site Web après avoir mis en œuvre toutes les optimisations de performances traditionnelles Vous êtes censé le faire, ce serait le bon moment pour transformer votre site Web mobile en PWA. Laissez-moi vous montrer pourquoi: Imaginez que vous planifiez un voyage à Chicago avec un ami. Vous discutez du voyage dans un bar ou un café, puis vous réalisez que vous ne savez pas où aller. Vous effectuez donc une recherche sur les «hôtels du centre-ville de Chicago» sur l’un de vos smartphones . Vous ne songez pas encore à acheter une chambre; vous voulez juste rechercher vos options. Donc, vous cliquez sur les liens de sites Web que vous fournit Google. Ceci est l'application Web progressive du Best Western River North Hotel : Hôtel Best Western River North ) ( Grand aperçu ) Ceci est le site Web de Palmer House Hilton un hôtel à proximité du centre-ville de Chicago. : Pour commencer, le PWA est beaucoup plus beau et plus facile à naviguer sur votre smartphone, il va donc gagner points là. Il existe également une question de rapidité: Le River North Hotel se charge en 2,4 secondes sur son mobile, tandis que son concurrent Hilton se charge en 4 secondes. (Vous pouvez réellement voir sur la capture d'écran Hilton que le site n'était pas encore complètement chargé.) C'est une différence que les visiteurs remarqueront à coup sûr. Même si nous ne faisons pas de comparaison côte à côte entre les concurrents Brewer Digital Marketing l'agence qui développa le PWA pour eux, raconta ce qui s'était passé après leur basculement. Les revenus de l'hôtel ont augmenté de 300% et les nuits réservées avec le PWA, de 500%. 5. Convertissez votre site Web ou votre blog en format AMP Nous devons remercier Google pour une autre astuce de conception rapide pour le Web mobile. Celui-ci s'appelle Accelerated Mobile Pages, ou AMP, pour abréger. Initialement, AMP a été publié pour aider les éditeurs à supprimer leur blog ou leurs pages d'actualités pour un chargement plus rapide sur les appareils mobiles. Toutefois, AMP est une structure de composants Web que vous pouvez utiliser pour concevoir des sites Web entiers ou seulement des parties spécifiques de ceux-ci (comme des articles de blog). Une fois implémentées, les pages se chargent presque instantanément à partir de la recherche. Pourquoi le chargement d’AMP est-il si rapide? Il existe un certain nombre de raisons: Avec AMP vous ne pouvez charger que du code JavaScript asynchrone et du code CSS en ligne sur votre site Web, ce qui signifie que votre code ne bloquera ni ne retardera le rendu de la page. sont également une autre source de temps de chargement plus lent. Cependant, AMP résout ce problème en chargeant automatiquement la mise en page avant les ressources (images, publicités, etc.). Considérez-le comme une forme de chargement paresseux. Il y a beaucoup plus que cela, mais l'idée de base est que il élimine les éléments qui tendent à alourdir les sites Web et oblige les concepteurs à s'appuyer le plus souvent sur du HTML léger pour construire leurs pages Si vous souhaitez voir un exemple de cela en action, vous pouvez consulter pratiquement tous les grands magazines numériques. ou site de nouvelles. Si vous ne connaissez pas le contenu AMP, il vous suffit de rechercher l’icône éclair qui apparaît en regard du nom de la page Web dans la recherche Google. Comme ceci: Gizmodo est un bon exemple du contenu de l'AMP: En fait, lorsque Gizmodo a effectué la transition vers AMP en 2016, il a connu d'énormes remontées en termes de performance. Le nombre de pages imprimées a augmenté de 300%, ce qui a entraîné 50% d'impressions supplémentaires. Si vous voulez vraiment tirer le meilleur parti des vitesses AMP, Mobify suggère d'associer AMP à votre PWA . Ainsi, vous pourrez charger vos pages Web à la vitesse de l'éclair pour les visiteurs: Chargement de la première page avec AMP Pourcentage de sites Web Temps de chargement (secondes) 10% 0.3 20 % 0.5 50% 1.1 60% 1.4 80% 2.2 90% 3.4 95% 5.2 Mobify rapporte les temps de chargement de l'AMP (Source: Mobify ) Ensuite, maintenez ces temps de chargement rapides avec le PWA: Nombre de pages ultérieures chargé sur le PWA Pourcentage de Sites Web Temps de chargement (secondes) 10% 0.6 20% 0.8 50% 1.4 60% 1.8 80% 3.0 90% 4.5 95% 6.2 Les rapports Mobify sur les temps de chargement des AHP (Source: Mobify ). > Faites attention aux AMP et aux PWA. Regardez les tableaux ci-dessus et vous verrez que certains sites ont mis en œuvre ces tactiques de conception rapides et ne dépassent toujours pas les 2,5 secondes imposées par Google pour le chargement mobile. Ce n'est pas parce que les deux sites promettent un chargement plus rapide des pages Web que cela signifie que votre site Web sera automatiquement extrêmement rapide. Enveloppant Alors que Google s'efforce de récompenser davantage les sites Web mobiles via un ordinateur de bureau, Ce n’est pas vraiment une question que vous pouvez régler plus longtemps. Toutes les versions de votre site Web, et notamment de votre mobile, doivent être optimisées pour l'expérience utilisateur. Cela signifie que la conception, le code, le contenu et tout le reste à l'intérieur et autour de celui-ci doivent être optimisés. Une fois que le développeur a pris en charge les optimisations de performances traditionnelles pour accélérer le site Web, il est temps que le concepteur apporte ses propres modifications. Dans certains cas, de simples changements tels que la manière dont les polices sont servies sur le site Web peuvent aider. Dans d’autres cas, vous devrez peut-être envisager des solutions plus radicales, telles que la refonte de votre site Web en tant que PWA. Commencez par considérer la lenteur du chargement du site Web de votre client. Ensuite, examinez ce qui cause le plus gros problème sur le mobile. Coupez le gras petit à petit et voyez ce que vous pouvez faire en tant que concepteur pour compléter les optimisations techniques en matière de vitesse du développeur. (ra, il) Le meilleur outil 2023 pour ta croissance Instagram ! Source link Partager : Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre) Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)