L'infrastructure technique de Google+ pour le rendu des pages

Par Olivier Duffez, Lundi 9 janvier 2012

Mark Knichel, ingénieur dans l'équipe infrastructure de Google+, donne quelques informations sur les technologies utilisées par Google pour concevoir son réseau social. Voici 4 techniques utilisées par Google pour accélérer l'affichage des pages sur son réseau social.

Closure

Google adore Closure et utilise sa bibliothèque, ses templates et son compilateur pour le rendu de n'importe quel élément d'une page sur Google Plus, y compris le Javascript utilisé sur les pages.

Les templates Closure sont utilisés en Java et en Javascript, côté serveur et côté client (navigateur). Le contenu arrive plus rapidement tandis que le Javascript peut être chargé en tâche de fond.

Vous trouverez plus de détails sur Closure sur le site Google Code.

Le bon JavaScript au bon moment

Google découpe son code Javascript en plusieurs modules qui peuvent être chargés indépendamment et de façon asynchrone (pour ne pas ralentir le chargement de la page). Ainsi, l'internaute ne télécharge que le minimum de code Javascript nécessaire. C'est sur la base de ce framework que Google peut faire en sorte le plus possible que l'utilisateur n'ait pas besoin de recharger toute la page.

La navigation sans recharger toute la page

A partir du moment où le JavaScript est chargé, Google effectue le rendu sans recourir à des accès serveur pour éviter de ralentir. Un Event Listener détecte les clics sur les liens : tant que c'est possible, ce clic est géré par une navigation interne à la page, sans la recharger complètement. Si ce n'est pas possible, le clic est géré de façon traditionnelle par le navigateur.

Ce qui est très pratique à l'usage, c'est que malgré tout l'attribut href des liens contient l'URL réelle, si bien qu'on peut faire un copier coller sans récupérer une URL Javascript ou intégrant du tracking. Par exemple, ce n'est pas ce qui est fait dans les SERP et c'est pénible de ne pas pouvoir faire un copier-coller d'une URL figurant dans les résultats...

Utilisation des chunks HTML

Google envoie vers le navigateur des chunks HTML au fur et à mesure qu'ils sont construits, afin de permettre l'affichage du début de la page sans attendre que tout ait été envoyé. Les chunks HTML sont des blocs de code HTML indépendants, valides de façon isolée (par exemple ils n'ont pas besoin d'une balise fermante pour être valides). Ce système permet également à Google de charger dès que possible les CSS, Javascript, images et autres ressources.

Utilisation d'iframe pour charger le Javascript

Pour charger le Javascript en parallèle, il est situé dans une iframe au tout début du body. Ceci complique les choses pour le reste du code mais Google a estimé que la vitesse ainsi gagnée était vraiment intéressante.

Vos avis et réactions ?

N'étant pas développeur web, j'ai pu laisser de côté certains aspects importants ou mal expliquer certains d'entre eux. N'hésitez pas à donner votre avis !

Source

Vous avez aimé cet article ? Partagez-le ! Tweet

Vous aimez WebRankInfo ? Suivez-nous !

Si vous souhaitez publier un extrait de cet article sur votre site, assurez-vous de respecter les conditions générales d'utilisation de WebRankInfo.