La nouvelle version du navigateur d’Apple est sortie le 7 juin. Voici une brève revue de l’outil sous l’angle de l’optimisation des performances web et de la rapidité de rendu des pages internet.

Une mise à jour plus esthétique que fonctionnelle ?

Alors que la plus grande nouveauté réside dans un meilleur support du HTML5 (ce qui m’enthousiasme !), il s’avère que cette nouvelle mouture est pauvre en ce qui concerne les performances web, par rapport à la précédente, Safari 4.0.5.

Parmi les nouveautés, citons le DNS prefetching qui permet au navigateur de lancer une requête DNS pour résoudre les noms de domaine des sites web vers lesquelles renvoie la page en cours et tout cela de manière transparente. Par exemple, si vous êtes sur une page dont un des liens amène vers example.com, le navigateur va résoudre le DNS de example.com de manière à ce qu’il soit prêt au cas où vous cliqueriez dessus.

Apple annonce aussi une amélioration de la mise en cache des pages web, sans pour autant donner plus de précision.

Enfin, une nouveauté spéciale Windows : Safari 5 supporte l’accélération matérielle. Cela permet un rendu plus fluide et plus rapide des pages gourmandes en ressources. Cela se voit donc plutôt sur des applications complexes ou sur des machines lentes.

Coté JavaScript

Les amateurs d’optimisation web trouveront donc plus de réconfort du coté des performances JavaScript de Safari 5. La nouvelle version de Nitro, le moteur JS introduit dans la version 4 du navigateur, offre une rapidité d’exécution accrue. Apple le décrit comme étant 2 fois plus rapide que celui de Firefox 3.6 et 3% plus rapide que Chrome 5 (sous Mac). Ce n’est pas trop étonnant, Chrome tourne mieux sous Windows tandis que Safari est optimisé pour les Mac.

Des nouvelles fonctionnalités natives

Le support des nouvelles fonctionnalités HTML5 peut amener une meilleure rapidité et réactivité des sites web, notamment les WebWorkers, les WebSockets, EventSource, l’attribut draggable et la validation de formulaires. En devenant natives au navigateur, ces spécifications permettent désormais de se passer de l’utilisation de JS. Le code est plus léger et la page plus stable.

En bref

Rien de bien croustillant à se mettre sous la dent pour les aficionados de l’optimisation des performances web. Mais ne boudons pas notre plaisir de voir le parc des navigateurs internet devenir un peu plus rapide à chaque mise à jour.

Et comme d’habitude cette nouvelle version est disponible sous Mac et sous Windows, alors profitez-en !

Lorsqu’il s’agit de sites dont le contenu est en japonais, il est possible d’alléger le poids de la page en appliquant quelques recettes simples.
Certaines suggestions de ce billet s’appliquent sûrement aussi aux autres langues à encodage multi-octet comme le Chinois ou le Coréen. Mais je n’ai jamais eu à créer des sites dans ces langues.

Choisir judicieusement l’encodage

Il existe 3 encodages principaux pour les caractères japonais. Le plus utilisé est Shift_JIS, puis EUC-JP. Il existe également l’SO-2202-JP, mais je ne crois pas avoir jamais vu de site web l’utiliser.

Bien entendu, le japonais peut être encodé en UTF-8. C’est même sur celui-ci que votre choix devra se porter si votre contenu est, par ailleurs, disponible en d’autres langues ou si vous utilisez des API externes fournissant du contenu en UTF-8. Cela vous évitera des opérations d’encodage/réencodage du jeu de caractères couteuses en ressources serveur.

Les 3 encodages typiquement japonais ne sont pas égaux en terme de poids. Le codage des caractères est plus ou moins couteux selon celui qui est employé.
J’ai procédé à une comparaison de sites à fort contenu en japonais et comparé le poids gzippé d’une même page dans différents encodages.

On constate rapidement que l’UTF-8 est bien plus lourd. Ce n’est pas vraiment une surprise. Sur les autres encodages, les caractères sino-japonais (kanji) utilisent généralement 2 octets, en UTF-8, il n’est pas rare que ceux-ci soient codés sur 3, 4 octets, voire plus. Le Shift_JIS et le EUC-JP se valent en terme de poids. Il est donc recommandé d’utiliser l’un d’entre eux lorsque cela est possible. Suprise, tandis que l’ISO-2202-JP est le second encodage le plus lourd après l’UTF-8, il se compresse mieux et donne au final un poids plus léger une fois gzippé.

Prendre avantage des caractères demi-chasse

Cette astuce est loin d’être nouvelle et remonte au début du développement de sites pour mobiles iMode.
Cela consiste à utiliser une particularité des encodages japonais qui proposent pour certains caractères des version étroites (demi-chasse) codées à l’aide d’un seul octet.
Les caractères disponibles sont les katakana. Bien qu’ils soient plus fins, ils restent lisibles.
Notons cependant que les marques pour les syllabes voisées ou plosives utilisent un caractère supplémentaire. Ainsi le katakana « Pa » compte pour 2 caractères (Ha + la marque de la plosive).
Il est très facile de convertir en PHP entre les caractères simple chasse et double chasse via la fonction mb_convert_kana().

Pour les mêmes raisons, il est fortement déconseillé d’utiliser les versions double-chasse (ou pleine chasse) des caractères alphabétiques. Outre le fait qu’ils sont codés sur 2 octets, et pèsent donc 2 fois plus lourds, ils sont d’une esthétique discutable et rendent un texte carrément illisible. La fonction PHP mb_convert_kana() prend également en charge la conversion des caractères alphabétiques de double-chasse en demi-chasse (et vice versa).

Conclusion

En résumé, si votre site est uniquement en japonais, il est vivement conseillé d’utiliser l’encodage SHIFT_JS ou EUC-JP qui vous permettra de gagner sur le poids de la page, ou encore ISO-2022-JP si vous activez la compression Gzip. Vous pouvez très facilement réaliser des conversions d’encodage en PHP à l’aide des fonctions mb_convert_encoding() ou iconv(). D’autre part, utilisez autant que possible les versions demi-chasse des caractères qui sont moins lourdes que leurs équivalents double chasse.

頑張ってください。

Optimisation is not a crime

Il y a deux semaines, Google annonçait que la rapidité d’affichage des sites web était désormais prise en compte dans son algorithme de classement des résultats de recherche.
Cette annonce enfonce le clou. Depuis plusieurs mois déjà la performance des sites web était devenu un des chevaux de bataille du moteur de recherche.
Mais Yahoo! bien avant lui avait déjà mis cette problématique au centre de sa réflexion en offrant de nombreux conseils et outils pour les développeurs afin d’optimiser leurs sites web.

L’optimisation web, c’est quoi ?

L’optimisation des sites web consiste en un ensemble de pratique visant à réduire le temps de chargement des pages et accélérer leur rendu sur les navigateurs. La plupart de ces techniques se font coté client, mais certaines nécessitent une mise en place coté serveur.
C’est pour cela qu’on dit aussi « optimisation frontend » ou « coté client ».

Quel est l’état de l’optimisation des sites web dans le paysage actuel ?

On assiste à l’émergence de nouveaux outils de mesure et d’amélioration des performances des pages internet. Mais il semble qu’une prise de conscience globale de cette problématique soit encore loin d’être atteinte. Les frameworks et CMS prennent déjà en compte l’optimisation coté serveur et tous proposent des fonctionnalités SEO natives.
Mais concernant l’optimisation coté client, les choses sont nettement moins aisées. Les palliatifs existent mais lorsqu’ils sont mis en application, il s’agit plus souvent d’illustrer une technique que de généraliser son utilisation en production. Ceci dit, il existe de nombreux plugins ou module permettant d’intégrer dans sa gestion de contenu des outils visant à optimiser le site web mais il s’agit rarement de capacités natives à l’application. Il reste encore beaucoup à faire pour la performance des sites web.

Partant de ce constat, ce blog se propose de rassembler les pratiques déjà éprouvées pour améliorer la rapidité des sites et l’expérience utilisateur, mais aussi de tester des techniques nouvelles et lancer des projets open source faisant défaut aux applications actuelles. La thématique globale de ce blog est la rapidité des sites web, aussi certains billets seront consacrés à l’optimisation des sites coté serveur.

L’objectif de ce blog étant d’exposer ces techniques au public le plus large possible. Pour cela, même si la plupart des billets seront certainement très techniques, j’espère pouvoir également écrire pour les non spécialistes. C’est à cela que serviront les catégories « Général », ou « Actualités ». Dans cette même optique, des articles sur l’optimisation coté serveur seront également publiés.

Ce blog est tout jeune, aussi, en attendant que son contenu s’enrichisse, je vous recommande la lecture de ce site :
http://performance.survol.fr