J’ai récemment écrit un billet de blog pour un client web designer sur la vitesse de la page et pourquoi il importe. Ce que je ne savais pas avant d’écrire, c’est que son agence avait du mal à optimiser leurs sites Web mobiles pour la vitesse. En conséquence, elle est revenue à moi préoccupé par la publication d’un post sur une stratégie de son agence n’avait pas encore d’adopter avec succès.

Elle était déchirée. Elle a compris à quel point les vitesses des pages mobiles étaient importantes pour l’expérience utilisateur et, par procuration, le point de vue. Cependant, leur objectif a toujours été de faire une conception belle et efficace. Quelque chose comme l’optimisation de la vitesse de la page a toujours été laissé aux développeurs de s’inquiéter.

En fin de compte, nous avons décidé de continuer à le publier jusqu’à ce qu’ils puissent obtenir leur propre site Web ainsi que les sites de leurs clients correctement optimisés. En attendant, ça m’a fait penser :

Y at-il quelque chose que les concepteurs peuvent faire lors de la création de sites Web mobiles pour aider les développeurs à optimiser pour la vitesse?

Les développeurs sont déjà optimiser les performances avant avec:

• Hébergement web rapide
• Cdns
• Pratiques de codage propres
• Cache
• Minification
• Optimisation de l’image
• Et plus encore

Alors, il reste quelque chose ?

Pour moi, c’est un peu comme la façon dont l’optimisation de recherche est traitée. En tant qu’écrivain, je m’occupe des optimisations sur la page tandis que le développeur que je remettez le contenu à faire les trucs techniaux SEO. Les concepteurs et les développeurs Web peuvent facilement s’attaquer aux parties de l’optimisation de la vitesse qui sont dans chacune de leurs timoneries.

Comprendre ce que signifie « lent » sur le Web mobile

Il existe un certain nombre d’outils pour vous aider à analyser les vitesses des pages et à implémenter diverses corrections pour les améliorer. Un outil qui est particulièrement utile est appelé Lighthouse. La seule chose est, il est destiné aux développeurs web.

Au lieu de cela, je suggère que les concepteurs web utilisent un autre outil de test Google appelé Testez mon site .

C’est strictement pour ceux qui veulent obtenir une évaluation rapide de leur vitesse du site mobile . Tout ce que vous devez faire est d’entrer votre nom de domaine dans le champ et de laisser le test s’exécuter.

Ce que j’aime à propos de cet outil par rapport à d’autres tests de vitesse du site, c’est que tout est précisé pour vous en termes profanes. Dans ce cas, mon site est « lent », même lorsqu’il est servi sur les réseaux 4G. Bien qu’on nous ait dit pendant des années que les visiteurs sont prêts à attendre trois secondes pour une page Web à charger, Googleconsidère 2,9 secondes de trop. (Ce avec quoi je suis entièrement d’accord.)

Vous pouvez obtenir un rapport élargi de Google qui vous indique comment accélérer vos temps de chargement mobile, mais les suggestions ne sont pas différentes des mises à jour que vous faites sur le côté développement. par exemple:

On le sait déjà. Toutefois, si vous (ou votre développeur) n’avez pas encore implémenté l’un de ces correctifs, il s’agit d’une bonne liste de contrôle pour travailler hors de.

Cela dit, je ne vous ai pas pointé vers cet outil afin que vous puissiez continuer à faire les mêmes optimisations encore et encore, s’attendant au même résultat. Qu’est-ce qu’ils disent toujours de la définit ion de la folie ?

Au lieu de cela, je pense que vous devriez utiliser cela comme un examen rapide de l’intestin:

«

Et si vous voulez vraiment conduire ce point à la maison, faites défiler vers le bas de la page d’analyse Test My Site et exécutez vos numéros à travers la calculatrice d’analyse d’impact:

Si vous n’êtes pas complètement convaincu que vous devez réduire votre vitesse mobile de 3 secondes, regardez l’impact financier que 0,5 seconde seulement aurait sur votre résultat net mensuel.

Ce que les concepteurs Web peuvent faire pour optimiser les sites mobiles pour la vitesse

Laissez le développeur web gérer toutes les optimisations de vitesse nécessaires comme la mise en cache et la minification des fichiers pendant que vous prenez les conseils de conception et les stratégies suivantes :

1. Fonts d’hôte d’un CDN

Il ya assez que vous avez à vous soucier quand il s’agit de concevoir des polices pour l’expérience mobile que vous ne voulez probablement pas entendre cela … mais les polices Web personnalisées sucent quand il s’agit de chargement. En fait, il existe deux études de cas récentes qui démontrent pourquoi les polices Web personnalisées sont préjudiciables aux vitesses de chargement des pages.

Heureusement, un CDN pourrait finir par être votre grâce salvatrice.

L’exemple de singe en temps d’arrêt

Le premier vient de Singe de temps d’arrêt . Dans cette étude de cas, Downtime Monkey bénéficie d’une amélioration de la vitesse de la page de 58% grâce à une variété d’optimisations – dont deux se rapportaient à la façon dont ils ont servi des polices à 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, alors ils sont passés au Bootstrap CDN. En conséquence, cela leur a permis d’économiser entre 200 et 550 millisecondes par chargede page.

Pour leur Google Font « Cabin », ils ont décidé de l’héberger à partir du CDN Google. Ce qui est drôle à noter, cependant, c’est que quand ils ont couru un test de vitesse de page sur le site par la suite, ils ont reçu une suggestion d’optimisation liée à la police.

Il semble que le lien qu’ils ont mis dans la tête de leur site ralentissait le rendu de la page. Ainsi, ils ont dû implémenter une parcontour qui permettrait à la police de charger asynchronement sans nuire à l’affichage de la page comme il chargé. Ils ont utilisé Web Font Loader pour résoudre le problème et ont fini par économiser entre 150 et 300 millisecondes par charge de page en conséquence.

Test de Brian Jackson

Brian Jackson, Chief Marketing Officer chez Kinsta, a écrit un post pour KeyCDN qui démontre la meilleure façon de servir des polices Web personnalisées sur un site Web.

Vous pouvez voir dans son exemple qu’il suggère un certain nombre d’optimisations, comme limiter les styles et les jeux de caractères sont disponibles pour une utilisation sur le site. Cependant, c’est son expérimentation avec l’hébergement CDN qui est vraiment intéressant.

Tout d’abord, il a isolé les fonts Google les plus populaires et testé la rapidité avec laquelle ils ont chargé à travers CDN de Google:

Open Sans a chargé le plus rapidement.

Mais cela ne devrait pas automatiquement faire Open Sans le meilleur choix si vous essayez d’accélérer votre site Web. Après tout, Opens Sans est un Google Font qui doit être servi à partir des serveurs de Google. Par rapport à Arial, une police web-safe quin’est pas tirée d’une source externe, c’est ce qui s’est passé:

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

Avant de passer à autre chose, je dirai simplement que c’est une façon de résoudre le dilemme des polices à chargement lent : plutôt que d’utiliser des polices hébergées à l’extérieur, utilisez vos polices système. Ils pourraient ne pas être aussi excitant à concevoir avec, mais ils ne forceront pas les utilisateurs à s’asseoir et attendre que votre site Web à charger, vous coûtant les visiteurs et les clients dans le processus.

Vous pourriez penser que le téléchargement et l’hébergement de votre police Google serait plus logique alors. De cette façon, vous n’avez pas à faire de compromis sur les polices que vous utilisez et il va raser le temps hors de leurs vitesses de chargement normales. Oui?

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

Lorsqu’il est servi à partir d’un serveur local, Open Sans a pris 0,530 millisecondes à charger. Ce n’est pas une énorme différence, mais ce n’est évidemment pas la bonne direction pour aller.

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 qui viennent avec l’utilisation de polices hébergées à l’extérieur en premier lieu.
2. Vous pouvez utiliser une police Google et vous assurer qu’elle est hébergée par l’intermédiaire du CDN de Google.
3. Vous pouvez télécharger une police Google et la télécharger sur votre propre CDN (si vous pouvez l’obtenir le chargement plus rapide à partir de là, c’est-à-dire).

Quoi qu’il en soit, l’hébergement de vos polices et icônes à partir d’un endroit où ils se chargeront plus rapidement peut vous aider à optimiser votre site Web pour les performances.

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

La liste suivante est en quelque sorte un rehashing de sujets qui ont été couverts avant, donc je ne veux pas perdre votre temps à essayer de recréer la roue ici. Cependant, je ne pense que cette stratégie de supprimer les éléments de conception inutiles (en particulier les plus lourds) pour optimiser l’expérience mobile est une question de résumer ici:

Arrêtez-vous avec les annonces sur la page

Quand j’ai écrit sur éléments que vous devriez abandonner sur les sites Web mobiles , j’ai appelé les publicités comme l’une des choses que vous pourriez facilement jeder. Je maintiens toujours cette conviction.

Pour commencer, les publicités sont servies par un tiers. Chaque fois que vous devez faire appel aux serveurs d’une autre partie, vous augmentez encore vos propres temps de chargement en attendant qu’ils livrent le contenu sur votre page.

Deuxièmement, plus de 26 % de la population américaine utilise à elle seule la technologiede blocage de la publicité sur leurs appareils, de sorte qu’ils ne sont pas susceptibles de voir 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 propres conversions sur place et ne vident pas les ressources de votre serveur :

• Remarketing
  Laissez votre pixel de suivi suivre les visiteurs autour du web et ensuite diffuser vos propres annonces sur le site de quelqu’un d’autre.
• PPC (en)
  Il ya beaucoup d’argent à faire si vous pouvez clouer la formule de publicité pay-per-click dans Google.
• Annonces sur les médias sociaux
  Ceux-ci sont particulièrement faciles à exécuter si votre site publie régulièrement du nouveau contenu et que vous avez une offre convaincante.

Arrêtez avec des pop-ups

Je sais que Google dit que pop-ups mobiles sont corrects 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 plugin pour créer ces pop-ups, cela va ralentir vos temps de chargement. Ce n’est peut-être pas de beaucoup, mais vous remarquerez la différence.

ThemeIsle (ThemeIsle) a décidé de faire une analyse de la façon dont certains plugins affectent les vitesses du site WordPress. Voici ce qui s’est passé quand ils ont testé les effets de chacun de ces plugins ont eu sur le temps de chargement:

Certes, certains plugins sont codés pour être plus léger que d’autres, mais il y aura toujours une sorte de différence ressentie 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 secondes.

Si vous savez que les pop-ups ne sont pas vraiment casher sur le web mobile de toute façon, pourquoi pousser votre chance? Au lieu de cela, prenez cette offre promotionnelle, avis de cookie ou annonce et placez-le sur vos pages Web.

Arrêtez avec des canaux de contact encombrants

N’oubliez pas les canaux de contact de votre site Web. En particulier, vous devez être prudent sur la conception de formulaires mobiles. Bien sûr, une partie de cela a à voir avec combien de temps il faut réellement un utilisateur pour remplir un. Cependant, il ya aussi ce qu’un formulaire long ou de plusieurs pages fait à vos vitesses de chargement que vous devriez penser.

En général, vos formulaires mobiles doivent être maigres — n’incluez que ce qui est absolument nécessaire.

Il y a aussi une autre école de pensée à considérer.

Vous pourriez abandonner le formulaire de contact tout à fait, quelque chose que j’ai discuté quand je parle de la tendance de remplacer les formulaires mobiles par des chatbots . Il ya des sites Web qui ont supprimé leurs formulaires et laissé des informations comme la FAQ, adresses e-mail et numéros de téléphone pour les visiteurs à utiliser s’ils ont besoin d’entrer en contact. Cela allégerait certainement les choses du point de vue du chargement. Je ne sais pas si ce serait idéal pour l’expérience utilisateur.

3. Créer un site Web à page unique

Les conseils ci-dessus vont être les plus simples et les plus rapides à mettre en œuvre, de sorte que vous devriez certainement commencer là si un client ou développeur web vient à vous avec des problèmes de sites Trop lents. Toutefois, si les tests de vitesse de page montrent toujours qu’un site prend plus de 2,5 secondes à charger, envisagez une approche différente pour redessiner un site Web aux fins de l’optimisation de la vitesse.

Comme Adam Heitzman l’a dit dans un article pour Search Engine Journal :

« Les sites à page unique convertissent généralement beaucoup plus facilement sur mobile et les utilisateurs les trouvent simples à naviguer. »

Mais cela signifie-t-il qu’un site Web d’une seule page se charge toujours plus rapidement qu’un site Web de plusieurs pages? Bien sûr que non. Cependant, la plupart des designers professionnels choisissent une conception d’une page sur plusieurs pages à des fins très spécifiques. DevriX a un joli graphique qui résume cela:

Pour être clair, je ne suggère pas que vous transformez votre site Web en une application d’une seule page (SPA). Si vous voulez accélérer la propriété numérique de votre client avec les travailleurs de service, un PWA est une meilleure solution. (Plus d’infos à ce sujet dans le point suivant.)

Au lieu de cela, ce que je suggère, c’est que vous convertissez un site Web de plusieurs pages en un seul page si votre client remplit certains critères:

• Entreprises avec un accent extrêmement étroit et singulier.
• Sites Web qui ne nécessitent pas beaucoup de contenu pour faire passer leur point de vue.
• Une gamme limitée de mots clés que vous devez classer pour.

Cela dit, si vous concevez un site Web qui s’inscrit dans ces trois critères (ou au moins deux sur trois), vous pourriez déplacer de façon réaliste votre site Web à une conception plus simpliste d’une seule page.

Étant donné que les sites Web d’une seule page vous obligent à faire plus avec moins, le contenu et les fonctionnalités limités créent naturellement un site Web léger. Même si vous avez légèrement repoussé les limites, vous pouvez toujours créer un site Web de chargement plus rapide pour mobile comme le fait Tempus :

Ce qui est cool à propos de ce site d’une seule page, c’est qu’il ne lésine pas sur l’imagerie étendue nécessaire pour vendre des maisons de luxe. Et pourtant, son site mobile se charge en 2,1 secondes.

D’autre part, tous les sites Web d’une seule page ne sont pas construits avec la vitesse à l’esprit. Prenez lesite du développeur Davide Marchet:

Parce qu’il est surchargé d’animations, il faut 5,4 secondes pour que la page se charge sur mobile. Vous pouvez même le voir à partir de la capture d’écran présentée par Think with Google. L’image vue il ya en fait le message qui apparaît tandis que la première animation se charge en arrière-plan.

Donc, je vous suggère d’être prudent si vous espérez utiliser une conception d’une seule page pour résoudre les problèmes de performance de votre site Web. La conception doit être simple, super ciblée et sans encombre par des scripts et des effets d’animation qui défont les avantages de réduire votre contenu à une page.

4. Transformez votre site mobile en PWA

Selon Google, il y a trois caractéristiques qui définissent chaque PWA :

1. digne de confiance
2. rapide
3. charmant

La vitesse est une partie inhérente de applications web progressives grâce aux travailleurs de service avec qui ils sont construits. Étant donné que les travailleurs des services existent en dehors du navigateur Web et ne sont pas subordonnés à la vitesse du réseau de l’utilisateur, ils chargent le contenu mis en cache pour les visiteurs plus rapidement.

Je dirais aussi que parce que la conception d’un PWA ressemble plus à celle d’une application mobile native (au moins la coquille de celui-ci), cela oblige la conception elle-même à être plus taillé en arrière qu’un site Web mobile.

Si vous avez du mal à accélérer votre site Web après la mise en œuvre de toutes les optimisations de performances traditionnelles que vous êtes censé, ce serait maintenant un bon moment pour transformer votre site Web mobile en UN PWA.

Permettez-moi de vous montrer pourquoi:

Imaginez que vous prévoyez un voyage à Chicago avec un ami. Vous êtes dans un bar ou un café discuter du voyage, puis se rendre compte que vous n’avez aucune idée où séjourner. Ainsi, vous faites une recherche pour « hôtels du centre-ville de Chicago » sur l’un de vos smartphones.

Vous ne pensez pas encore à acheter une chambre; vous voulez juste rechercher vos options. Donc, vous cliquez sur les liens du site Web pour deux des meilleures annonces Google vous fournit.

Il s’agit de l’application web progressive pour le Meilleur hôtel Western River North :

C’est le site web de la Palmer Maison Hilton , un hôtel à proximité dans le centre-ville de Chicago:

Pour commencer, le PWA est beaucoup plus beau et plus facile à naviguer sur votre smartphone, il va donc gagner des points majeurs là-bas. Il y a aussi la question de la vitesse :

Le River North Hotel se charge en 2,4 secondes sur mobile tandis que son concurrent Hilton se charge en 4 secondes. (Vous pouvez réellement voir dans la capture d’écran Hilton que le site n’avait pas complètement chargé encore.) C’est une différence que les visiteurs sont sûrs de remarquer.

Même si nous ne faisons pas une comparaison côte à côte entre les sites Web concurrents, le River North Hotel PWA souffle son ancien site Web mobile hors de l’eau.

Marketing numérique Brewer , l’agence qui a développé la PWA pour eux, a partagé ce qui s’est passé après qu’ils ont fait le commutateur au-dessus. L’hôtel a vu une augmentation de 300% des revenus et une augmentation de 500% des nuits réservées avec la PWA.

5. Convertissez votre site Web ou blog en AMP

Nous avons Google à remercier pour un autre truc de conception rapide pour le web mobile. Celui-ci est appelé Accelerated Mobile Pages, ou AMP, pour faire court.

Initialement, AMP a été publié pour aider les éditeurs à dépouiller leurs pages de blog ou de nouvelles pour un chargement plus rapide sur les appareils mobiles. Cependant, AMP est un cadre de composants Web que vous pouvez utiliser pour concevoir des sites Web entiers ou juste des parties spécifiques d’entre eux (comme les messages de blog). Une fois implémentées, les pages se chargent presque instantanément à partir de la recherche.

Pourquoi l’AMP est-elle si rapide à charger ? Il y a un certain nombre de raisons :

Avec AMP , vous ne pouvez charger javaScript asynchrone et CSS en ligne sur votre site Web, ce qui signifie que votre code ne bloquera pas ou ne retardera pas le rendu de page.

Les images sont également une autre source de temps de chargement plus lent. Toutefois, AMP résout ce problème en chargeant automatiquement la mise en page avant les ressources (images, annonces, etc.) Pensez-y comme une forme de chargement paresseux.

Il ya beaucoup plus à elle, mais l’idée de base est qu’il coupe les éléments qui ont tendance à faire glisser les sites Web vers le bas et oblige les concepteurs à dépendre principalement de HTML léger pour construire leurs pages.

Si vous voulez voir un exemple de cela en action, vous pouvez regarder à peu près n’importe quel magazine numérique de premier plan ou site de nouvelles. Si vous n’êtes pas familier avec le contenu AMP, il suffit de rechercher l’icône éclair qui apparaît à côté du nom de page Web dans la recherche Google. Comme ça:

Gizmodo Gizmodo est un bon exemple de contenu AMP:

En fait, lorsque Gizmodo a fait la transition vers l’AMP en 2016, il a connu d’énormes augmentations de performance. Ses vitesses de page ont augmenté de 300% et il a obtenu 50% plus d’impressions de page en conséquence.

Si vous voulez vraiment tirer le meilleur parti des vitesses AMP, Mobify suggère de jumeler AMP avec votre PWA . De cette façon, vous pouvez charger vos pages Web ultra-rapide pour les visiteurs:

Mobify rend compte des temps de chargement de l’AMP (Source : Mobify)

Ensuite, maintenez ces temps de chargement rapide avec le PWA :

Mobify rapports sur les temps de chargement des PWA (Source: Mobify)

Il suffit d’être prudent avec AMP et PWA.

Regardez les tableaux ci-dessus et vous verrez que certains sites ont mis en œuvre ces tactiques de conception rapide et ils ne battent toujours pas de Google de 2,5 secondes de référence pour le chargement mobile. Ce n’est pas parce qu’il y a une promesse de chargement plus rapide des pages Web avec les deux, que cela ne signifie pas nécessairement que votre site Web sera automatiquement rapide comme l’éclair.

Emballage vers le haut

Comme Google fait plus pour récompenser les sites Web mobiles sur le bureau, ce n’est pas vraiment une question que vous pouvez tabler pour beaucoup plus longtemps. Toutes les versions de votre site Web — mais mobiles en particulier — 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 soin des optimisations de performance traditionnelles pour accélérer le site, il est temps pour le concepteur d’apporter quelques changements de leurs propres. Dans certains cas, des changements simples comme la façon dont les polices sont servies par le biais du site Web aidera. Dans d’autres cas, des questions plus drastiques peuvent devoir être prises en considération, comme la refonte de votre site Web en tant que PWA.

Tout d’abord, considérez la lectase du site Web de votre client. Ensuite, examinez ce qui cause le plus gros problème sur mobile. Coupez la graisse, petit à petit, et voyez ce que vous pouvez faire en tant que concepteur pour compléter les optimisations de vitesse technique du développeur.