Comment garder la rapidité de son site en étant mobile friendly

site mobile friendly

Cindy Krum a récemment publié une amorce de lecture incontournable sur les changements à venir pour les sites mobile friendly que je recommande vivement de vérifier avant de procéder. Vous comprenez ? Super. Avec la course folle pour optimiser les sites mobiles avant le 21 Avril (Date de la prochaine mis à jour Google), il peut être très facile de sacrifier la performance dans le processus. Nous nous souviendrons, Google l’a mentionné à plusieurs reprises que la performance d’un site Web est également un facteur dans le classement de recherche, la première fois en 2010 pour les sites de bureau et de nouveau en 2013 pour les sites mobiles.

Dans ce post, je vais vous présenter les quelques meilleures pratiques à garder en tête lorsque vous effectuerez la conception de votre site mobile. De plus, je vous suggère de consulter quelques bonnes documentations sur Google à propose des sites mobile-friendly.

La mesure de performance de votre site mobile

[emaillocker id=11971]

La première étape indispensable pour améliorer les performances de votre site mobile est de savoir où vous en êtes. Il y a un grand nombre d’outils gratuit et payant pour faire cela.  mais deux de mes favoris sont intégrés dans les outils et WebPageTest développeurs de Google Chrome. Par souci de simplicité, J’utiliserais Chrome developper tools dans cet article.

Vous n’êtes pas développeur ? Pas de soucis, utiliser les outils Chrome dont vraiment facile :

  1. Ouvrer Chrome
  2. Cliquer sur le petit Hamburger en haut sur le côté droit. (Ceux sont les 3 lignes pour paramétrer votre session.
  3. Selectionner “Plus d’outils” et “Outil de développeur”

 

Vous verrez un écran avec beaucoup d’infos juteuse. Plus important encore, au sommet il ya un menu déroulant avec de nombreux émulateurs mobiles et tablettes. Ce qui est plutôt très intéressant.

Maintenant, sélectionnez un dispositif d’intérêt, Inscrivez Apple iPhone 6. Entrez votre adresse WEB dans la barre d’adresse, tapez Entrée et voila! Vous avez maintenant la possibilité de voir votre site comme un Iphone 6 le fait. Faites défiler vers le bas pour voir des statistiques de performances intéressantes comme le temps total de chargement de page, la taille de la page, et le nombre total de demandes. Cliquez sur l’onglet « Réseau » pour une vue particulièrement utile de diagramme en cascade, comme indiqué ci-dessous :

Optimisation des images pour mobile :

Selon l’Archive HTTP, les images représentent en moyenne plus de 60% de votre contenu total de pages. Assez intuitif, les images gouvernent le web à l’heure actuelle. Allez-y et vérifiez votre propre page avec Chrome Developer Tools et vous verrez probablement des chiffres similaires. Lors du téléchargement de votre site sur mobile, si vous disposez d’image lourde, le chargement sera très long.

Il existe toujours des bonnes pratiques pour optimiser les images de votre site, Il y a d’autres consideration à prendre en compte pour les sites mobile friendly. En effet, Les grandes images de 1 600 PX que vous utilisez sur votre bureau seront totalement gâchés pour un affichage plus petit sur téléphone ou tablette.

La solution ? Privilégiez le téléchargement d’images plus petite pour vos utilisateurs mobiles. Cela montrera à Google que vous faîtes attention à vos internautes.

Rapide point de vue : Pour cet exemple, et votre site mobile en général, soyons sur que vous ayaez spécifié la balise meta viewport dans la section de la tête de votre page. Actuellement, cela prouve que votre site mobile est responsive, et que vous n’essayez pas d’auto régler votre grand site pour bureau au site mobile.  De plus, si cette balise ne est pas présente, vous obtiendrez des résultats différents dans votre Chrome teste ci-dessous.

<meta name= »viewport » content= »width=device-width, initial-scale=1.0″ />

Le mauves choix

Le responsive design fait un usage intensif de requêtes de médias de style CSS afin  d’adapter les tailles aux sites mobiles, C’est donc une approche à écarter afin de ne pas obtenir quelque chose comme ceci :

 

Ce code affiche une image lorsque la résolution d’écran est large, et une plus petite image différente / lorsque la résolution est plus petite.

 

Cela semble très bien sur la page rendue, mais il y a un gros problème: les deux images sont téléchargées! Pour vérifier, charger cet échantillon dans Chrome et vous verrez quelque chose comme ceci :

Cel n’est pas bon; en fait, cela est encore pire! Vous perdez votre temps  pour le téléchargement d’une image qui ne sera même pas représenté!

La bonne technique d’un site mobile friendly

Au lieu de cela, pensez à utiliser le style background-image sur un DIV pour obtenir le même effet, par exemple:

Charger sur les outils Chrome et vous verrez cela :

Seule l’image mobile a été chargé … c’est beaucoup mieux! Bien sûr, il ya une mise en garde: vous devez utiliser background-image avec un DIV, vous devez fournir également la largeur et la hauteur de l’image dans le CSS pour cette classe. Cela peut être gênant pour beaucoup d’images, ou pour les images qui changent fréquemment de taille, mais si vos images « héros » sont relativement statiques dans la nature, l’utilisation stratégique de cette technique pourrait apporter une amélioration significative de la performance de votre site mobile.

A prendre en compte : Lorsque cela est possible, utiliser les requêtes de médias CSS et le style background-image pour rendre conditionnellement images mobiles. Cela ne peut faire sens pour vos plus grandes images.

Donner de l’importance au Jquery

Oui vous avez bien lu, jQuery est la bibliothèque de choix pour l’écriture de JavaScript, C’est un élément indispensable dans le monde du web.

jQuery est en effet très utile, mais rappeler-vous que l’un des objectifs de conception d’origine était de fournir une interface cohérente qui correspond au W3C recommandé API à travers  divers navigateurs comportement des normes différentes (et souvent brisées) d’implémentassions. jQuery vous permet d’éviter d’écrire « si Internet Explorer faire cela, sinon cela » code.

MAIS, une interface unificatrice de jQuery est beaucoup moins nécessaire sur mobile. Le Mobile est dominé par les navigateurs WebKit qui est un dérivé tels que Safari ou Chrome, donc il ya moins de problèmes d’en faire abstraction. Pesant près de 200 KB, jQuery est une bibliothèque importante à télécharger, même avec une utilisation libérale de la mise en cache. Après avoir comprésser les fichier, vous serez autour des 30 KB.

Mais attendez, vous dites; vous voulez toujours gardez l’interface JavaScript jQuery ? Il est assez agréable à utiliser c’est vrai – alors penchez vous sur Zepto Js à la place. Bien qu’il ne soit pas aussi riche en fonctionnalités que jQuery, il pèse à peine 5 Ko lorsqu’il est compressé, soit à peu près six fois plus petit! Depuis que Zepto est largement compatible avec jQuery vous ne devriez pas avoir à réécrire de code pour l’utiliser. Pour la plupart des sites JavaScript de base, Zepto est plus que suffisant.

Mon conseil: Réduisez les bibliothèques tierces que vous incluez, et envisager d’utiliser Zepto Js comme une alternative à jQuery si vos besoins en javascript sont basiques.

Revoyez vos options Cache

Les développeurs web intelligents réduisent la taille de leurs ressources dans le but de minimiser les temps de chargement. Cependant les meilleurs développeurs web empêchent le besoin de télécharger ces ressources en premier lieu.

C’est là que le cache du navigateur entre en jeu. Si vos images, CSS, JavaScript changent que très rarement, pensez à les mettre en cache. De cette façon, vos utilisateurs ne téléchargeront qu’une fois les ressources nécessaires, et de ce fait, lorsqu’ils entreront à nouveau votre site internet, ils n’auront plus la nécessité de télécharger les ressources.

Pour cela Mobify a une belle est très utilisé sur la mise en-têtes de mise en cache, et il y abeaucoup de grands outils gratuits qui peuvent tester vos paramètres de mise en cache, y compris l’REDbot super cool, WooRank, et notre propre Zoompf. Si vous utilisez un serveur web Apache ou nginx, envisager de permettre mod_pagespeed afin de simplifier la configuration de votre cache. Si vous avez un site WordPress, le plugin W3 Total Cache est excellent.

A retenir : la mise en cache est l’un des moyens d’optimisations de performance les plus efficaces que vous pouvez utilsier surtout pour les sites mobiles.

Vous aimez les GIF animés ? Votre navigateur n’en fait pas 

Les GIF animés ont connu leurs limite, mais le format est daté et nous voyons qu’il est désormais très ancien, surtout au niveau technologique qui n’est plus adapté. Datant de près de 30 ans, des GIF animés sont gonflés et lourd à télécharger, surtout quand votre GIF animé est un vidéo-clip. Pensez à utiliser la vidéo HTML5 au lieu d’un film d’animation GIF. Tous les navigateurs modernes prennent en charge, et les vidéos HTML5 sont généralement de 10% ou moins de la taille d’un GIF animé équivalent.

Une autre option est Imgur. Lorsque vous téléchargez des GIF animés à Imgur, ils seront automatiquement convertit dans un format qu’ils appellent GIFV. GIFV est essentiellement juste une vidéo HTML5, mais avec une taille optimisée de manière significative. Imgur gère l’hébergement de vos vidéos, et sert éventuellement le fichier jusqu’à au GIFV ou GIF en fonction des capacités du navigateur de vos utilisateurs (bien que la plupart de tous les navigateurs modernes prennent en charge la vidéo HTML5).

A retenir : Essayez d’éviter des GIF animés pour les clips vidéo ou des animations complexes. Les protocoles vidéo modernes sont utilisés par la vidéo HTML5 et GIFV offrent la hausse de performance et réduit  les temps de téléchargement pour vos utilisateurs.

Le futur : HTTP/2

Le web évolue lentement vers HTTP / 2, et ce n’est pas trop tôt. HTTP / 1.1 est présent depuis  plus de 15 ans et montrent des signes de l’âge, surtout quand il s’agit de la connectivité fiable / intermittente dans les appareils mobiles.

HTTP / 2 jouit déjà des navigateurs généralisés et des supporst du serveur. Bien que je ne recommanderais pas de se précipiter dans un HTTP / 2 pour le 21e Avril (date de la prochaine mise à jour de Google pour les sites mobile-friendly).

A retenir:Prévoyez une date dans le futur proche pour adopter HTTP2

Pour conclure :

Construire un site web réactif, mobile-friendly nécessite beaucoup plus que de peaufiner les styles et les étiquettes pour plaire au robot Google. Il y a  des nuancées, des considérations spécifiques mobiles qui, si elles sont ignorées, peuvent ralentir de manière significative votre site mobile et de tuer votre expérience d’utilisateur. Heureusement, il existe de nombreux outils gratuits pour vous aider à évaluer les performances de votre site mobile, y compris WebPageTest, Chrome Developer Tools, Google Insights PageSpeed et Rapport gratuit Zoompf. Et bien sûr, assurez-vous de tester avec le propre outil de test mobile-friendly de Google.

Article susceptible de vous intéresser : Le guide du SEO

Source : MOZ

[/emaillocker]

Commentaires