50 Astuces pour des applications Web plus rapides

Jatinder Mann, chef de produit Internet Explorer chez Microsoft, a présenté la session "50 astuces pour rendre vos sites et applications HTML5 plus rapides" au BUILD 2012, offrant de nombreux conseils pour la création d'applications Web plus rapides.

Les conseils fournis par Mann étaient organisés autour des six principes suivants.

1. Répondre rapidement aux demandes du réseau.

• Éviter les redirections. 63% des 1000 meilleurs sites Web utilisent des redirections. Ils pourraient augmenter la vitesse de leurs pages de 10% en n'effectuant pas de redirection.
• Éviter les Meta-Refresh. 14% des URL dans le monde utilisent des Meta-Refresh.
• Minimiser le temps de réponse du serveur à l'aide de CDN situés au plus près de l'utilisateur
• Maximiser l'utilisation de connexions simultanées en téléchargeant les ressources depuis différents domaines
• Réutiliser les connexions. Ne pas fermer la connexion au moment de répondre à une demande.
• S'assurer que les données servies par les sites partenaires ne retardent pas le chargement de la page
• Comprendre le calendrier des composants réseau : Redirect, Cache, DNS, Requête, Réponse... Utiliser l'API Navigation Timing sur IE 9 & 10 pour mesurer le temps passé par le navigateur sur chaque opération.

2. Minimiser les octets téléchargés. Réduiser la quantité de données téléchargées lorsqu'une page Web est chargée. En moyenne, les sites téléchargent 777Ko de données, dont 474ko d'images, 128Ko de scripts, 84Ko de Flash.

• Demander des données compressées
• Conserver les ressources locales dans des packages tels que le Package Resource Index généré pour les applications Windows Store. De cette façon, celles-ci sont facilement disponibles en cas de besoin.
• Mettre en cache les ressources statiques dans le "HTML5 Application Cache". Ce cache permet de ne télécharger les ressources qu'une seule fois, évitant ainsi les appels réseaux multiples. Le cache va automatiquement re-télécharger les ressources lorsque la version de l'application change.
• Mettre en cache le contenu si possible, en utilisant le champ «Expires» dans la réponse.
• Utiliser des requêtes conditionnelles en réglant le champ "If-Modified-Since" de la requête.
• Mettre en cache les requêtes de données -HTTP, XML, JSON, etc —, car environ 95-96% des requêtes ne changent pas au cours de la journée. Même si cela semble une bonne idée, moins de 1% des sites Web cachent les requêtes reçues.
• Normaliser la capitalisation de nommage des fichiers. Alors qu'un serveur peut reconnaître que Icon.jpg en tant que icon.jpg, ce sont des ressources différentes pour les navigateurs Web, générant des requêtes différentes.

3. Structure de balisage efficace. Pour IE utiliser la dernière norme de balise car c'est la plus rapide. Les styles de balises antérieures de IE6-IE9 sont reconnus par IE 10, mais ne sont pas aussi efficaces que la dernière norme

• Utiliser le champ d'en-tête HTTP "X-UA-Compatible: IE = EmulateIE7" au lieu de la balise HTML <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> pour forcer IE à fonctionner dans un mode "legacy", nécessaire pour certaines applications web d'entreprise. Il est plus rapide de cette façon.
• Les feuilles de style doivent être déclarées dans la partie supérieure de la page, à l'intérieur de l'en-tête, après la balise <title> afin de fournir un meilleur rendu.
• Les feuilles de style ne doivent jamais être déclarées au bas de la page. La page pourrait clignoter pendant le chargement.
• Éviter les "@import" pour les styles hiérarchiques, car il bloque de manière synchrone la création de structures de données CSS et le "paint" de l'écran.
• Éviter les styles embarqués inline, car ils forcent le navigateur à faire un changement de contexte entre le HTML et les analyseurs CSS.
• Inclure uniquement les styles nécessaires. Éviter de télécharger et parser des styles qui ne seront pas utilisés.
• Déclarer le JavaScript seulement au bas de la page. Cela permet de s'assurer que les images, CSS, etc sont déjà chargés afin que les scripts puissent travailler avec des ressources déjà chargées et éviter ainsi les changements de contexte.
• Ne pas déclarer de JavaScript dans le début de la page. Utiliser l'attribut "defer" si certains scripts doivent être chargés au début.
• Éviter le JavaScript embarqué inline pour éviter le changement de contexte
• Utiliser l'attribut' "async" pour charger le JavaScript afin de rendre l'ensemble du chargement du script et son exécution asynchrone.
• Éviter la duplication de code. 52% des pages web contiennent 100 lignes ou plus de code dupliqué comme par exemple l'import d'un fichier JavaScript plusieurs fois.
• Choisir un framework JavaScript et s'y tenir, que ce soit jQuery, Dojo, Prototype.js, etc. Le navigateur n'aura pas à charger plusieurs frameworks qui fournissent essentiellement les mêmes fonctionnalités.
• Ne pas charger les scripts Facebook, Twitter, etc - juste pour être cool. Ils sont en concurrence avec les ressources.

4. Optimisation de l'utilisation des médias. Les images sont la ressource la plus utilisée sur les sites avec en moyenne, 58 images téléchargées.

• Éviter de télécharger des images trop nombreuses, en conservant leur nombre à un maximum de 20-30 à cause du temps de chargement des pages.
• Utiliser des sprites d'image pour combiner plusieurs images en une seule. Cette technique permet de réduire le nombre de connexions réseau, le nombre d'octets téléchargés et les cycles GPU.
• Utiliser le format PNG: meilleur compromis entre taille de téléchargement, temps de décodage, compatibilité et taux de compression. JPEG peut-être utilisé pour les photographies.
• Utiliser la résolution d'image native afin d'éviter d'inutiles téléchargements et de traitement du processeur pour la mise à l'échelle.
• Remplacer les images avec les gradients CSS3 lorsque cela est possible.
• Remplacer les images avec les border radius CSS3 lorsque cela est possible.
• Utiliser les transformations CSS3 pour créer, déplacer, faire pivoter ou les effets d'inclinaison.
• Utiliser les Data URI pour les petites images individuelles. Il évite le téléchargement d'une image.
• Éviter les SVG complexes qui nécessitent plus de traitement et de téléchargement.
• Spécifier une image "preview" lors de l'inclusion d'une vidéo HTML5. Le navigateur n'aura pas à télécharger la vidéo complète pour la trouver.
• Utiliser HTML5 au lieu de Flash, Silverlight, ou QuickTime. HTML5 est plus rapide par rapport aux plug-ins externes qui nécessitent plus de ressources systèmes.
• Télécharger dès que possible les médias importants, de manière asynchrone pour ensuite les conserver dans le cache.

5. Écrire du JavaScript performant.

• Utiliser des entiers si possible lorsque vous effectuez des opérations mathématiques en JavaScript. Les opérations sur des float prennent beaucoup plus de ressources en JavaScript que leurs correspondants avec les entiers. Convertir des float en entiers avec Math.floor et Math.ceil, en particulier pour les opérations de calcul intensif.
• Minifier code JavaScript afin d'avoir des téléchargements plus petits et une meilleure performance lors de l'exécution.
• Initialiser le JS sur demande. Charger le JS dynamiquement en cas de besoin.
• Minimiser les interactions DOM par la mise en cache des variables tels que "document", "body", etc
• Utiliser le code intégré dans le DOM comme element.firstChild ou node.nextSibling. Ils sont hautement optimisés, mieux que ce qu'une bibliothèque tierce pourrait fournir.
• Utiliser querySelectorAll pour accéder à un grand nombre d'éléments DOM.
• Utiliser .innerHTML pour construire des pages dynamiques.
• Maintenir un DOM petit - maximum 1 000 éléments.
• JSON est plus rapide que XML.
• Utiliser des méthodes natives de votre navigateur pour manipuler du JSON.
• Ne pas abuser de l'utilisation des expressions régulières.

6. Savoir ce que fait votre application

• Comprendre les timers JavaScript: setTimeout et clearInterval. Ne pas laisser tourner des timers sauf si vous les utilisez pour quelque chose.
• Aligner les timers sur l'affichage des frames de 16,7 ms si le rafraîchissement du moniteur est à 60Hz.
• Utiliser requestAnimationFrame pour les animations dans IE 10/Chrome/Firefox. Il utilise un callback lors du "repaint", il n'y a donc pas besoin de timer.
• Utiliser l'API de visibilité (document.hidden, VisibilityChange) pour déterminer la visibilité de l'application, et diminuer la bande passante lorsque la page est cachée. Diminue l'utilisation CPU et batterie.

Mann a recommandé d'utiliser les outils de performance Windows pour mesurer la performance des pages Web dans Internet Explorer et l'optimisation des pages pour utiliser moins de temps CPU et améliorer le parallélisme.