Accélérez !

[ph.gras]

Si je mets ça:

Code: Tout sélectionner

$(document).ready(function(){
   $("img").slideDown();
});

1). Mes pages se chargeront-elles plus rapidement ?
2). Aura-t-on l'impression qu'elles se chargent plus vite ?
3). Ni l'un, ni l'autre abruti !

J'ai pensé à ça pour différer le chargement des fichiers les plus gros à la fin du chargement du DOM,
parce qu'en regardant dans la console et dans la cascade de chargement des fichiers, un hide arrête
le chargement de l'élément. Je me dis alors dans ma petite tête qu'un slideDown (ou un fadeIn) va le
stopper le temps que le document soit chargé, et pour le charger après, il n'a pas besoin de charger
l'élément avant les autres fichiers…

[Galdon]

J'ai pensé à ça pour différer le chargement des fichiers les plus gros à la fin du chargement du DOM

Ça ne sert à rien car c'est déjà le cas, le DOM est déjà chargé avant que les images ne soient téléchargées.
L’événement DOM ready se produit dès que le navigateur a terminé construire le DOM en parsant le code HTML.
A ne pas confondre avec l'événement load (window.onload) qui lui intervient une fois que toutes les ressources externes de la page sont chargées (css, js, images...).

Si tu veux charger les images seulement lorsqu'on a a besoin (pour par exemple ne pas charger les image "hors champ" qui ne sont visible que lorsqu'on scroll), tu peux utiliser le plugin jQuery lazy load : http://www.appelsiini.net/projects/lazyload.

[ph.gras]

Les ressources externes sont chargées après le DOM ? Non, pas forcément… Ces 2 événements
doivent être indépendants, non ? J'aimerais qu'on charge d'abord les CSS et les JS, puis le HTML,
et enfin les IMG.

Si tu veux charger les images seulement lorsqu'on a a besoin (pour par exemple ne pas charger les image "hors champ" qui ne sont visible que lorsqu'on scroll), tu peux utiliser le plugin jQuery lazy load : http://www.appelsiini.net/projects/lazyload.

Ça a l'air cool. C'est surtout pour le mobile que le téléchargement me pose un problème…

D'un autre côté, j'attends des plombes que les CSS et les JS (avec le jQuery…) se chargent avant d'avoir le moindre aperçu de quelque chose. Alors si je bourre le fichier jQuery de trucs…

[Galdon]

Les ressources externes sont chargées après le DOM ? Non, pas forcément… Ces 2 événements doivent être indépendants, non ? J'aimerais qu'on charge d'abord les CSS et les JS, puis le HTML, et enfin les IMG.

Tu te prends la tête pour rien, c'est au navigateur de gérer ça, en plus les éléments ne sont pas chargés de manière séquentielle (les un après les autres) mais en parallèle, car le navigateur ouvre plusieurs connexions TCP avec le serveur.

Si tes JS et CSS ralentissent le chargement de la page, il faut plutôt chercher pourquoi et essayer de les optimiser (par exemple en utilisant la minification, la compression gzip, et surtout le cache HTTP en envoyant les bon headers, comme Cache-Control: max-age=...).

Chrome fourni tout un tas de très bon conseils, tu peux l'utiliser pour analyser la page en question, en faisant F12, onglet Audits :

[ph.gras]

Si tes JS et CSS ralentissent le chargement de la page, il faut plutôt chercher pourquoi et essayer de les optimiser (par exemple en utilisant la minification, la compression gzip, et surtout le cache HTTP en envoyant les bon headers, comme Cache-Control: max-age=...).

Ça, c'est fait. Mais peut-être que tu as raison et que je me prends la tête pour rien.

J'étais cet après midi au bord de la Seine et j'ai fait un test avec mon site et la démo du Lazy Loading. La différence n'était plus aussi sensible que lorsque j'en fais sur mon parcours de promenade habituel, sur les hauteurs de Saint-Cucufa.

C'est pratique : je suis à la fois au point culminant et le plus bas en altitude du département. C'est au niveau du réseau que se fait toute la différence, en fait… Mais pour ça, je ne peux rien faire du tout !