Empêcher d'afficher une page non formatée lors d'une actualisation de page

Question

Comment puis-je empêcher mon affichage d'une page non affichée pendant le chargement de la page? Je pense que c'est probablement à cause de l'ordre de chargement des différents fichiers JavaScript. Existe-t-il une meilleure pratique, par exemple le chargement de plugins avant mon propre code? Est-ce que toutes les fonctions jQuery/.js doivent être appelées après document.ready ou windows.load?

link to page

Merci

Answer 1

YSlow vous donnera quelques bonnes idées pour les points à partir de cette page. Je cite en cours d'exécution sur votre www.cewas.org:

1. grade D sur Réduire le nombre d'éléments DOM. Il y a 1489 éléments DOM sur la page. Une page complexe signifie plus d'octets à télécharger, et cela signifie également un accès DOM plus lent en JavaScript. Réduisez le nombre d'éléments DOM sur la page pour améliorer les performances.

2. Grade E sur Faire moins de demandes HTTP Cette page a 11 scripts Javascript externes. Essayez de les combiner en un seul. Cette page a 5 feuilles de style externes. Essayez de les combiner en un seul. Réduire le nombre de composants sur une page réduit le nombre de requêtes HTTP requises pour rendre la page, ce qui entraîne un chargement plus rapide des pages. Voici quelques façons de réduire le nombre de composants: combiner des fichiers, combiner plusieurs scripts en un seul script, combiner plusieurs fichiers CSS en une seule feuille de style et utiliser des sprites CSS et des images cliquables.

3. Qualité F sur Compresser des composants avec gzip. Il y a 15 composants en texte brut qui devraient être envoyés compressés ... La compression réduit les temps de réponse en réduisant la taille de la réponse HTTP. Gzip est la méthode de compression la plus populaire et efficace actuellement disponible et réduit généralement la taille de la réponse d'environ 70%. Environ 90% du trafic Internet actuel passe par des navigateurs qui prétendent prendre en charge gzip.

4. Qualité F sur Ajouter Expire les en-têtes. Il y a 61 composants statiques sans date d'expiration future. Les pages Web deviennent de plus en plus complexes avec plus de scripts, de feuilles de style, d'images et de Flash. Une première visite sur une page peut nécessiter plusieurs requêtes HTTP pour charger tous les composants. En utilisant les en-têtes Expires, ces composants peuvent être mis en cache, ce qui évite les requêtes HTTP inutiles sur les pages vues suivantes. Les en-têtes Expires sont le plus souvent associés à des images, mais ils peuvent et doivent être utilisés sur tous les composants de la page, y compris les scripts, les feuilles de style et Flash.

---

Pour ajouter mes propres 2 cents: vous pouvez masquer tous les éléments jusqu'à ce que les charges entières page. Cela semble être ce que vous voulez avec la barre de progression, mais le nombre d'éléments et de scripts/styles sur votre page semble l'empêcher. Vous pouvez charger le sous-ensemble minimal de CSS/JS/HTML pour configurer la barre de progression, puis charger le reste des éléments dans un Javascript asynchrone, affichant uniquement la page entière une fois qu'ils sont tous chargés (à la manière de Gmail).

Answer 2

Je suppose que vous utilisez une feuille de style externe? Si vous incorporez simplement tous vos styles dans la page, il ne s'affichera pas. En outre, placez la définition de feuille de style avant tout code javascript dans l'en-tête.

Answer 3

Il est communément connu comme FOUC - Flash de contenu non-styl. Les options de la réponse ci-dessus ont un sens éminent, mais il est toujours impossible de l'éliminer en toutes circonstances.Initialement c'était et problème d'IE mais s'est passé beaucoup plus récemment dans Safari et est probablement à la méthode sous-jacente utilisée dans l'application de navigateur elle-même et donc ne peut pas être remédiable.

Des add-ons ponctuels tels que jQuery et typekit peuvent exacerber le problème et prêter attention aux différents scénarios de chargement.

Answer 4

Le principal problème avec votre site est le fait que vous essayez de charger tout en une seule fois au chargement initial de la page. Le rapport sur la taille du document de la barre d'outils du développeur Web affiche un total de 1,1 Mo de contenu, soit près de 750 Ko d'images et 385 Ko de scripts. Chargement de cette quantité de contenu en une seule fois est vraiment pas recommandé, en particulier pour les vitesses de connexion plus lentes. La solution évidente serait de tout cacher et de ne l'afficher que lorsque les scripts sont prêts, mais c'est une très mauvaise solution - vos visiteurs regarderont plus de 10 secondes ou plus d'une page vierge. Ce que vous devriez faire est de restructurer le site - repensez votre architecture pour cela. Les sites Web ne sont pas destinés à être téléchargés d'un seul coup - il y a trop de données et l'une des raisons pour lesquelles les utilisateurs n'aiment pas les sites Flash, car Flash doit télécharger tous les éléments en une seule fois. temps d'attente.

Vous devez soit découper les pages en documents HTML normaux, qui seront chargés traditionnellement, soit utiliser ajax pour charger le contenu de façon séquentielle. Demandez à votre script de réorganiser intelligemment le chargement des contenus - le contenu de la page d'accueil en premier, puis lorsque l'utilisateur choisit où il va, le site derrière son dos charge les ressources pour ces pages. Les images sont le gros problème ici - vous avez .7mb d'entre eux, et le chargement de tous bloque le chargement du site, y compris les scripts, par un très long laps de temps.

Ce ne sont pas une tâche facile par tous les moyens, mais c'est la meilleure méthode pour résoudre le problème. Voici quelques solutions plus immédiates à vos problèmes: @matt b - activer la compression gzip, combiner tous vos scripts et feuilles de style en un seul fichier, etc. Vous devriez également envisager d'utiliser des sprites CSS pour vos images afin de réduire le nombre de requêtes HTTP. Il y a un grand nombre de plugins jQuery qui sont les principaux candidats pour la consolidation, et vous chargez également jQuery deux fois - en ajoutant près de 100 ko à la quantité de choses que vous devez charger.