La page de recherche Google ne contient qu’une seule image
Voici une découverte que j’ai faite au bahut par inadvertance : la page de recherche Google ne contient qu’une seule image.
Alors que la grande question que tout le monde se pose est : « Comment Google parvient-il a rendre ultra-légère ses pages et donc ultra-rapides ? », voici une partie de la réponse.
Comme tout le monde le sait, les images sont souvent sources de temps de chargement élevé. Les médias en général, autre que le texte, sont généralement plus ou moins lourd à charger. Alors imaginez maintenant que vous mettiez dans une seule image toutes les autres images que vous avez besoin et cela une fois (vous allez comprendre).
Et bien vous feriez des économies en tout point !
Voici donc l’unique image d’une page de recherche Google :
Remarquez donc que le ‘O’ jaune qui est dupliqué tout en bas d’une page de recherche en fonction du nombre de pages suivantes disponible, n’apparait qu’une seule fois.
Economie réalisée !
Alors techniquement, je ne sais pas du tout comment cela est mis en place. A vrai dire, ca m’intéresse mais je ne suis pas allé fouiller. Javascript peut-etre ?
Pour l’afficher vous-même, faites un clic droit sur le logo Google en haut d’une page et faite : « Afficher l’image ».
Votez sur :
Ces articles peuvent vous intéresser :
- Google vous propose de consulter votre historique de recherche Alors que je promenais gaiement sur mon moteur de recherche préféré par défaut, j’ai apercu une nouveauté proposée par Gooooooooogle.......
- Evolution de mon Page Rank Google, il passe de 0 à 3 Youhou ! Google met en ce moment les Page Rank a jour et je suis aller voir le mien sur......
- Google risque d’endommager votre ordinateur ! Aujourd’hui le moteur de recherche de Google a l’air de bien bugger… et c’est la première fois que je vois......
- Explication du web 2.0 en une image Un petite explication assez succincte de la différence entre le web1.0 et le web2.0. Image crée par Aysoon2.0 Cette image,......
- Google lance Sky dans Google Earth et vous permet de scruter les étoiles ! Vous connaissez tous Google Earth ? Bon, ba Google vient de lancer Sky, il vient donc de rajouter le ciel......
Si vous avez apprécié cet article, s'il vous plait, prenez le temps de laisser un commentaire ou de souscrire au flux afin de recevoir les futurs articles directement dans votre lecteur de flux.
Commentaires
par 
. Plus optimisé tu meurs ^^
par 
par Anthony Cette technique est très utilisée sur les sites à fort trafic, et relativement simple à mettre en place.
Dans le jargon des intégrateurs on parle souvent de « CSS spriting ».
J’ai utilisé cette technique à de nombreuses reprises, notamment sur le portail Orange.
Tout est basé sur la propriété CSS background-position, qui te permet de décaler ton image de background.
Cela impose cependant certaines contraintes en terme d’intégration et de compatibilité navigateur…
par 
par Effy En réalité le gain pour l’utilisateur est pas tres important. Le truc c’est que pour un site comme google le temps d’acces (demande, réponse, début du téléchargement…) ne se fait que sur de toutes petites images, et donc en en ayant une seule de taille moyenne il n’y a qu’un téléchargement à faire. La réalitée c’est que sur un site « normal » ca serait une vrai perte de performance. Dans tous les cas, toutes les images sont mise en cache coté client…
Les portes coulissantes ne servent que pour ne pas avoir d’effet de « clignottement » lorsque l’on veut simuler un bouton avec des images en css, rien a voir avec un gain de performance (sauf si on s’apelle google et qu’on a 3 images dans son site…)
par Anthony Les portes coulissantes sont couramment utilisée pour améliorer les performances d’affichage. En effet cela permet de diminuer le poids global des images sur une pages web (une image au lieu de plusieurs, donc on gagne sur la taille du fichier), mais aussi et surtout de diminuer le nombre de requêtes envoyées au serveurs (autant de temps de gagner durant l’affichage d’une page qui par exemple comporterai une vingtaine d’images, avec un css spriting, certes on aura une image plus grosse à charger, mais on y gagne en temps d’affichage sur les 19 autres requêtes supprimées….) Tout est une affaire de bon compromis…
J’ai pas regardé comment eux l’ont mis en place, mais sur beaucoup d’autres sites c’est dans le fichier css.
Ca s’appelle « portes coulissantes », ca sert surtout pour les menus (par exemple le site d’apple, tout le menu est la: http://images.apple.com/fr/glo.....bg0907.png) mais tu peux t’en servir pour tout le reste, une fois l’image dans le cache du navigateur, c’est super rapide, pratique pour le changement d’etat des boutons par exemple.