JQUERY MOBILE: POUR OU CONTRE?

Jquery mobile pour ou contre

C’est une question bien fréquente. On parle souvent de jQuery : on dit que cette bibliothèque est trop vaste. De toute façon il n’y a pas de preuves qu’elle endommage les fonctionnalités du site. Pour vérifier cela, il faut estimer sa vitesse de téléchargement sur un appareil mobile. C’est l’objectif principal de cet article.

Cependant, pour commencer il faut comprendre ce qui se passe à l’intérieur de la balise.

En fait, quand notre navigateur voit ce code il exécute beaucoup d’actions différentes. Les plus importantes sont les suivantes:

  • La réception d’un fichier ;
  • le parsing et l’exécution du script.

 Téléchargement de jQuery

Pour obtenir de meilleurs résultats supposons qu’un utilisateur visite votre site pour la première fois. Donc, il n’y a pas de données enregistrées dans le cache. Dans ce cas-là le navigateur est obligé de télécharger tous les fichiers depuis le serveur. Pour mesurer le temps de téléchargement il faut comprendre qu’il y a 2 facteurs importants : le débit et le temps de chargement.

Le débit

En 2012 la vitesse de téléchargement pour les réseaux mobiles était entre 2 Mb et 1Mb (dans les pays asiatiques). Aujourd’hui cette vitesse augmente. Par exemple, parmi les réseaux 4G on peut distinguer :Virgin Mobile – la vitesse de téléchargement est entre 3 et 6 Mb ; Verizon Wireless – 5-12 Mb ; LTE propose une vitesse de 6,5 Mb pour les Etats-Unis et 24,5Mb pour l’Australie.

Nous allons donc tester la vitesse de téléchargement de jQuery (la version 2.1.0, 28.65 Kb).

Avec une vitesse de 1Mb on peut télécharger à un débit réel de 125 Kb/s. Donc il est possible de télécharger la bibliothèque jQuery 4,36 fois en une seconde. Autrement dit il nous faut 229 ms pour la télécharger une fois avec un débit faible (1Mb), 46 ms avec un débit moyen de 5 Mb et 19 ms avec un débit élevé de 12Mb.

De toute façon ce n’est pas l’essentiel. Pour trouver la réponse il faut analyser le temps de chargement.

Le temps de chargement

Il existe une valeur très importante RTT (Round Trip Time). Elle intervient de façon cruciale dans l’efficacité de nombreux systèmes : par exemple, lors du chargement d’une page web en utilisant le protocole HTTP, le téléchargement de chaque élément de la page nécessite l’ouverture et la fermeture d’une connexion TCP.

Pour les appareils mobiles le temps de chargement pose un vrai problème.

En 2012 ce temps était de 344 ms en moyenne. Maintenant c’est mieux. Selon Virgin Mobile le temps moyen de  chargement est environ de 150 ms.

Il y a une petite astuce pour réduire le temps de chargement. Au lieu de télécharger un fichier avec la bibliothèque jQuery vous pouvez l’ajouter à votre script et les télécharger ensemble.

Le parsing et l’exécution du script

Ayant téléchargé un fichier le navigateur doit exécuter un bytecode. C’est un processus assez compliqué. Pour l’instant il faut juste comprendre combien de temps prend le parsing et l’exécution du script.

Dans le tableau ci-dessous sont présentés les résultats pour différents  navigateurs

Navigateur Système d’exploitation Durée de parsing et d’exécution de jQuery 2.1.0 (ms)
IE 11 Windows 8.1 18, 21, 14, 16, 15
Chrome 33 OS X 10.9.2 15, 8, 5, 7, 6
Safari 7 OS X 10.9.2 9, 5, 3, 3, 2
Firefox 27 OS X 10.9.2 12, 12, 11, 12, 12
Safari iOS 7 178, 125, 44, 87, 96
DefaultAndroid Android 2.2 1184, 268, 299, 216, 422
DefaultAndroid Android 4.0 603, 465, 106, 145, 243
Chrome 33 Android 4.4 219, 86, 38, 86, 123
Firefox 27 Android 4.4 269, 367, 400, 381, 264

Tous les navigateurs pour ordinateurs ont montré de bons résultats. Par contre la situation est totalement différente en ce qui concerne les indicateurs pour les appareils mobiles. Alors que Mobile Safari pour iOS7 et Chrome pour Android ont des résultats acceptables, le navigateur standard d’Android a montré de mauvais résultats. Par contre on voit une tendance positive si on compare les versions 2.2 et 4.0.

En tout cas c’est déjà un motif suffisant pour utiliser des petites bibliothèques JavaScript au lieu de jQuery.

Il faut dire que la taille de jQuery n’est pas si énorme qu’on le dit. Les résultats obtenus permettent d’affirmer que les anciennes versions de navigateurs sous Android 2.2 utilisent 1s de trop.

Donc, premièrement il faut analyser votre public cible et ensuite faire un choix: utiliser ou ne pas utiliser jQuery. Il faut étudier la statistique de la page pour savoir combien de visiteurs utilisent des navigateurs anciens.

Néanmoins il ne faut pas oublier les autres avantages de jQuery. Malgré tout «avec jQuery Mobile on écrit moins, pour créer plus». En plus vous pouvez nettoyer la bibliothèque en supprimant les modules inutiles et par conséquent en augmentant la vitesse de chargement.

En plus il existe encore plusieurs possibilités pour augmenter  l’efficacité.

Voici les caractéristiques d’une page web moyenne (selon les données de HTTP archive http://httparchive.org/trends.php) :

  • la taille moyenne d’une page web est supérieure a 1.7 Mb
  • requêtes HTTP: plus de 90
  • scripts JS: supérieur a 275Kb
  • images:1 Mb
  • 46% de la page est en cache.

Donc, premièrement il faut faire attention aux aspects suivants :

  • minimiser CSS/JS ;
  • réunir tous les fichiers CSS/JS en un seul ;
  • utiliser des utilitaires spécifiques pour compresser les fichiers HTML/CSS/JS ;
  • compresser les images ;
  • permettre au navigateur de sauvegarder les fichiers dans le cache ;
  • supprimer les requêtes HTTP inutiles.

Articles similaires