Vous êtes passionnés comme moi de machines basse-consommation, ARM, Atom : rendez visite à mon partenaire !
Vitesse d'affichage de site web améliorée épisode 2
mardi 14 décembre 2010 à 07:00 | Performance
Poursuivons la série optimisation de site web, pour améliorer le ressenti utilisateur. Mes 2 articles précédents : Vitesse d'affichage de site web améliorée et Google mod_pagespeed, accélérer Apache, présentaient des techniques et optimisations possibles. Des problèmes demeurent comme la parallélisation des téléchargements de CSS et Javascript. HeadJS est LA solution ?
Head.js est un mini-framework, qui va permettre de contourner certains problèmes, mais avant plantons le décors.
La section HEAD du fichier HTML, est l'endroit le pire pour y placer le chargement des scripts Javascript et des CSS. Ça ralentit tout le processus, d'autant, qu'ils sont souvent volumineux. Si vous placez à la fin du fichier HTML, les résultats avec HTML5 et CSS3 sont erratiques et les "performances" sont identiques !
Sur le site de Head.js, il y a même un test a réaliser :
Pour les développeurs de Head.js, combiner les scripts en un seul et même script, n'est pas une bonne solution, car :
- les browsers modernes parallélisent certains téléchargements
- si le gros script est modifié, il sera re-téléchargé et l'on perdra le bénéfice du cache client
- de nombreux frameworks sont hébergés sur des CDN, comme j'en parlais dans mon précédent article
- l'iPhone 3.x ne sait pas "cacher" des fichiers plus grands que 15Ko et l'iPhone 4 est limité à 25Ko, avant compression ! Donc, avec un seul "gros" script, pas de cache client sur les iPhones
Un anneau unique pour les gouverner tous, c'est ce que propose Head.js, il se charge de télécharger, en parallèle, les scripts. Lui ne pèse que 2.3Ko ! Mais, il permet bien d'autres choses : la détection des possibilités CSS3 du navigateur, il ajoute la compatibilité HTML5 dans tous les navigateurs, il détecte la taille de l'écran, ...
Un outil qui débute, mais, que je vous encourage a utiliser pour rendre la consultation de vos sites plus agréable et plus rapide. Head.js est un bon outil !
A propos de Vincent RABAH
Je suis DSI depuis 10 ans. Spécialiste en systèmes d'information et réseaux.
Expert en management, GreenIT et virtualisation de serveurs. Vous pouvez consulter l'ensemble de mon parcours.
I do speak English even if my blog is written in French ... Feel free to leave comments, I'll answer you !
- Déploiement en continu, capacity planning
- Performance de l'auto-hébergement avec le DockStar
- Vitesse d'affichage de site web améliorée
- Scalabilité Linux et le multicore
- NodeJS-News
- Statistiques du blog it-wars.com Juin 2011
- Linux network performance tuning épisode 2
- Performance web Node.JS
- Analyser les logs Nginx avec GoAccess
- Linux network performance tuning épisode 1
Vous pouvez lire également :
Partagez cet article :
Merci pour ce lien Pomeh, moi, j'utilise plus spécifiquement une sous-partie de head.js : head.load.min.js - JavaScript loader only. Je viens de regarder le document dont tu indiques le lien : PASSIONNANT !!
Vraiment, un énorme merci :)
Head.js est pas mal mais un peu trop "fourre tout" selon moi. Il fait trop de choses différentes, et à force d'en faire trop il risque de les faire mal (ou en tout cas moins bien que s'il en faisait moins).
Et puis par exemple, la partie CSS modernizer / HTML5 enabler a été récupéré du projet Modernizr. C'est une bonne chose, sauf que:
- Modernizr évolue très régulièrement donc il faut maintenir head.js en conséquence,
- Modernizr peut être utilisé en standalone, et depuis la version 2 on peut "construire" sa version Modernizr sur mesure (=inclure que les tests dont on a besoin), donc ce sont 2 arguments pour utiliser Modernizr tel quel. Si on inclus en plus head.js, du code sera redondant voir carrément inutile, ce qui augmentera le temps d'éxécution du Javascript ce qui augmentera le temps de chargement de la page... Dommage pour un script qui est justement censé améliorer ce point ^^
Son point fort, ou en tout cas son but principal, est l'amélioration de la vitesse d'affichage des sites via le téléchargement parallèle et l'exécution des scripts Javascript (c'est d'ailleurs le sujet de cet article). C'est donc dommage qu'il ait tous ces "a côtés" qui sont souvent superflus ou redondants avec d'autres outils.
Pour information, il existe de nombreux autres outils/script pour améliorer la vitesse de téléchargement et d'exécution de ses scripts. Une liste est en train d'être créée et sera maintenue au fil du temps par de nombreuses personnes et est déjà disponible en ligne: https://spreadsheets.google.com/ccc?key=0Aqln2akPWiMIdERkY3J2OXdOUVJDTkNSQ2ZsV3hoWVE#gid=2
Je pense mettre en oeuvre head.js ce mois-ci sur mon blog ... Si je trouve le temps ?
A+
Je viens de mettre Head.js en fonction sur mon site, la vitesse est impressionnante ! C'est un optimisation de site web magnifique :) MERCI
Très intéressant, à tester.