Google : secret de sa rapidité (2)

Url ancré compatible avec un marque page.

Pour créer les urls rechargeables, tout en restant sur une même page sans rechargement à la navigation, le mieux est d’utiliser un des framework javascript moderne comme backbone.js

En effet, backbone.js utilise une class Router qui permet d’associer un chemin d’ancre avec une fonction dans laquelle on peut manipuler les éléments de la pages :

var Workspace = Backbone.Router.extend({

  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",    // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },

  help: function() {
    ...
  },

  search: function(query, page) {
    ...
  }

});

On récupère ainsi facilement les paramètres de chemin de l’url comme des arguments.

Mais backbone.js offre énormément plus pour ainsi offrir des class View et Model qui interagissent afin que votre contenu se synchronise avec le serveur en ajax.

Vous obtenez ainsi, comme google, une page qui est prête à tous les usages sans avoir à redemander au serveur tous vos styles et scripts.

Mais les styles et scripts, que google minifie directement dans son header, parlons en.

Styles et scripts minifiés

Vous avez maintenant ajouté backbone pour la navigabilité, vous êtes inséparable de jquery. Vous adoré les effets dynamique de jquery-ui. Et vous avez intégré plein d’autre plugin exotique pour donner du caractère à votre site. Vous utilisez Bootstrap ou Fundation pour la « responsivité ». Mais voilà, la performance en pâtit car votre navigateur fait du yoyo en http pour récupérer tout ce petit monde.

Pas de problème ! Il existe pour la plus part de ses librairies js et css des version minifié. Mais cela fait tout de même, malgré le gain de poids et de parsage, des quantités de fichiers.

Dans ce cas, pourquoi ne pas copier toutes ses sources dans le bon ordre et les concaténer dans un des « minifier » disponible en ligne tel que http://minify.avivo.si/#results

Vous obtenez ainsi une belle ligne interminable à insérer dans votre header.

CDN

Utiliser un cdn peut être une bonne idée pour gagner en performance car il y a des chance que votre lib préférée soit déjà dans le cache du navigateur en utilisant un répertoire de cdn populaire comme http://cdnjs.com/

un exemple avec bootstrap :

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Voilà. Votre serveur va gagner en bande passante en plus !

Sprite css

En effet en mettant toutes les images répétées sur toutes les pages dans un même fichier on gagne en requêtes http. Et on évite par la même occasion des flickering dans des effet de hover.

Le sprite CSS est facile à générer dans Photoshop par exemple : http://www.youtube.com/watch?v=8x1dh3TDnss

Puis vous écrivez votre code css à la mano.

Ou vous pouvez, là aussi, utiliser un service en ligne tel que http://draeton.github.io/stitches/

Vous obtener un png, du code css et html

Image encodée

Enfin comme la photo de Patrice, il existe, dans beaucoup de langages, des moyens d’encoder une image en data.
Par exemple en php :

$image = 'mon-image.jpg';
$imgData = base64_encode(file_get_contents($image));
$srcAttr = 'data: '.mime_content_type($image).';base64,'.$imgData;
echo '<img alt="" src="',$srcAttr,'" />';

Mais vous pouver aussi le faire en ligne comme ici : http://dopiaza.org/tools/datauri/index.php

Conclusion

Voila, la performance de google n’a plus de secret coté navigateur.
Si en plus vous installez des datacenters de fou dans les glaciers d’Islande, vous pouvez surement dire comme nous que google est votre concurrent numéro 1 ! (:-p)

 

Speak Your Mind

*