Clignotant entre les chargements de page

Ce qui se passe parce que les DOMLoaded événement est déclenché assez millisecondes avant que la page ne génère.

En un mot, cela signifie que vous devez optimiser votre site web de la vitesse. Cela ne veut pas dire faire télécharger plus rapidemais il moyen de télécharger dans le bon ordre, dans un non-bloquant.

Première étape: Votre balisage

1)
Il semble que il ya beaucoup que vous pouvez faire pour optimiser votre balisage. Tout d'abord, l'ordre des feuilles de style css et de Javascript peut être optimisée. Pour assurer la CSS de fichiers sont téléchargés de manière asynchrone, vous devez toujours inclure CSS externe avant de les fichiers JavaScript externes. style.css est téléchargé après certains/tous vos appels JavaScript.

Il y a 1 bloc de script se trouve dans la tête entre un fichier CSS externe, et une autre ressource. Pour permettre parallèle télécharger, déplacer le script en ligne avant que le fichier CSS externe, ou après la prochaine des ressources.

2)
Le principal de votre fichier JavaScript est insérée dans votre balisage. Ceci n'a pas seulement bloquer la page de téléchargement jusqu'à ce que le script a fini le téléchargement, mais l'avoir avant votre contenu est probablement à l'origine (ou ajouter) le blanc-flash.

Chargement de votre script de manière asynchrone dans la tête est ma méthode préférée. Ensuite, vous aurez pour déclencher votre script lorsque le DOM a fini de charger, ou vous pouvez obtenir le même résultat en plaçant le script en bas de la balise body.

Étape deux: afin d'exploiter les capacités du navigateur

1) en observant les en-têtes http, il y a 28 éléments servi comme HTTP distinct des appels, qui ne sont pas dans le cache du navigateur (y compris les pages html, jpg images, feuilles de style et les fichiers JavaScript).

Ces éléments sont explicitement non mis en cache, et cela peut être facilement corrigé en modifiant votre serveur de configuration.

2) Activer la compression gzip. La plupart des navigateurs web (oui, même IE) prend en charge de décompression gzip, et la plupart (si pas tous) des serveurs web de support de la compression à l'aide de gzip. On pourrait même aller exagéré, et regarder dans SPDY, qui est une alternative plus légère HTTP (protocole de prise en charge dans Chrome et Firefox).

Étape trois: diffusion de Contenu

Il y a environ 30 éléments individuels d'être servi à partir de votre domaine. Tout d'abord, voyez comment vous pouvez réduire ce nombre de demandes. 30 requêtes HTTP par page vue est beaucoup. Vous pouvez lutter contre ce en utilisant les méthodes suivantes:

1) en Parallèle les téléchargements à travers de multiples noms d'hôte. Les navigateurs actuellement de limiter le nombre de connexions simultanées à un seul domaine. Au service de vos images à partir d'un autre domaine (par exemple, img.bigtim.ca) peut leur permettre d'être servi en parallèle à d'autres contenus.

2) Combiner plusieurs objets en un seul. De nombreux éléments qui sont téléchargés sont purement style de contenu, tels que le logo, les éléments de menu, etc. Ceux-ci peuvent être combinées en une seule image (téléchargé qu'une seule fois), et les séparer à l'aide de CSS. Ceci est appelé CSS spriting. Un Débordement de pile fait ceci: regardez ici.

3) Si vous ne pouvez pas réduire la quantité d'éléments nécessitant le téléchargement, vous pouvez réduire la charge sur votre serveur (et, à son tour, le navigateur du client) par portion de contenu statique à partir d'une cookieless domaine. Un Débordement de pile le fait avec tout leur contenu statique, tels que des images, feuilles de style et scripts.

Quatrième étape: Optimiser votre propre code

Il ya seulement tellement que HTTP et de la technologie du navigateur pouvez faire pour aider votre site web de la vitesse. Cette dernière étape est à vous de voir.

1) Est-il une raison pour laquelle vous choisissez d'héberger jquery-vous? Jquery est la page de téléchargement de montre de multiples réseaux de diffusion de contenu où vous pouvez pointer sur pour rapide, la mise en cache script de téléchargement.

2) Il existe actuellement plus de 20 inutilisés des règles CSS dans vos feuilles de style (c'est 36% de l'ensemble de votre fichier CSS). Une re-pense à ce qui est vraiment nécessaire.

3) Le principal morceau de JavaScript (en haut de votre balise body) semble être un hack pour tenter d'accélérer les choses, mais n'est probablement pas aider tout.

Un cookie est fixé pour spécifier si oui ou non la page a disparu dans l'instant. Non seulement êtes-vous à l'aide de JavaScript pour effectuer une transition qui peut heureusement être effectuée par le CSS, mais plus de la moitié du script est utilisé afin de définir les fonctionnalités de lecture et d'écriture du cookie.

De voir des choses comme ceci: $("body").css ("background-image", "url('images/background.png')"); et $("#website").show (); obtient habituellement me rodomontades sur "la séparation des préoccupations", mais cette réponse est assez long maintenant donc j'espère que vous pouvez voir que c'est une mauvaise pratique de mélange de style et de fonctionnalité dans le même code.

Addendum: en Regardant le code, il n'y a pas besoin de jquery à tous
effectuer ce que vous faites. Mais là encore, il n'est pas nécessaire pour
effectuer ce que vous faites, de sorte que vous pourriez probablement faire mieux sans
JavaScript.