Il est aujourd’hui un critère chère à nos internautes, et encore plus à nos moteurs de recherche préférés : le temps de chargement.
Plus encore, chacun des internautes devient un juge impitoyable : quelques secondes de trop et c’est votre taux de rebond qui grimpe en flèche !
Voici 3 conseils pour comprendre cette méthode, réelle part de l’optimisation des temps de chargement : la définition des priorités de chargement…
Pour commencer il n’existe pas de méthode universelle pour définir l’ordre de chargement, mais quelques astuces à connaître :
Attendez que le DOM soit prêt (DOM ready)
Il est possible de charger certains éléments de votre site via le javascript lorsque la page est chargée. Exemple avec JQuery :
$(document).ready(function() {
// Chargement des derniers tweets
// Chargement de la fanbox facebook
// etc.
});
Ce genre de technique permet de différer le chargement d’éléments secondaires de votre page, et d’éviter les risques de « freeze » de votre page si une requête est un peu longue (eg. si les serveurs de twitter sont un peu trop long à répondre).
Note : cette méthode ne doit pas être utilisée sur des éléments primordiaux pour votre référencement, ces derniers ne seront pas lus par les moteurs de recherche.Mettre les scripts à la fin du document
Comme nous dit Yahoo dans « Best Practices for Speeding Up Your Web Site« , il est conseilé de mettre l’appel à vos scripts JavaScript en bas du document pour éviter de bloquer la parallélisation des téléchargements.
Cette solutions est à mettre en place pour l’ensemble des scripts n’influençant pas l’affichage de la page : pour éviter d’avoir un site incomplet avant le téléchargement de votre script.
Concrètement, il faut séparer les requêtes effectuant les requêtes ajax et les traitements divers et variés, des scripts qui vont manipuler le DOM (ajout de classe, modifications graphiques) ce qui donne dans la balise <head>:
<!-- Les feuilles de styles --> <link href='votrefeuilledestyle.css' rel='stylesheet'/> <!-- Les scripts influençant la mise en page --> <script type='text/javascript' src='mise_en_page.js'></script>
…et avant la balise </body>:
<!-- Les scripts de traitement de données ou de chargement d'API --> <script type='text/javascript' src='traitement_et_requetes.js'></script>
Différer le chargement des images
La dernière astuce consiste à différer le chargement des images comme le fait Google dans la recherche d’images.
Cette technique aussi appelée « lazy load » (j’adore ce terme) permet de charger les images uniquement lorsque l’utilisateur scroll suffisamment dans la page pour les apercevoir. Génial non !?
Un plugin JQuery est là pour vous aider, en plus, l’utilisation est simplisime, il suffit d’ajouter une classe à vos images à « lazy loader », et d’initialiser le script avec une ligne de javaScript.
Mais comme un exemple vaut mieux qu’un long discourt, la demo est ici et le site du plugin là.