Forcer les navigateurs pour charger les CSS avant d'afficher la page

J'ai fait une version mobile de mon site. Lors du chargement de la page, cependant, le site est d'abord montré sans le CSS appliqué, et après une seconde (pour la plupart), il applique le CSS et le restitue correctement. Ce comportement est compatible sur tous les navigateurs (y compris mobile).

Avez-vous une idée comment je pouvais forcer les navigateurs pour charger le CSS le premier (ce qui est vraiment minuscule en taille) et puis rendre le contenu? J'ai vu quelque chose sur le fait d'inclure les fichiers CSS à l'extérieur de la head, mais pour autant que je sais que c'est contre les specs, et je crains que de telles hack mai frein de choses sur certains navigateurs mobiles.

Merci!

Mise à jour

Voici la source

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Albite BOOKS mobile</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
    <meta name="description" content="Free e-books for Java Mobile phones."/>
    <meta name="keywords" content="free ebooks, free books, book reader, albite reader, albite books, java mobile"/>
    <meta name="language" content="en_GB"/>
    <meta name="classification" content="public"/>

    <link rel="shortcut icon" href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link href="/stylesheets/mobile.css?1289644607" media="screen" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <!-- .... -->
  </body>
</html>

Êtes-vous à l'aide de @import au lieu de <link>?
Avez-vous pensé de la mise en cache de votre fichier CSS?
Le ?1289644607 changer à chaque chargement de page?
les changements d'identité uniquement lorsque le fichier contenu a changé.

OriginalL'auteur Albus Dumbledore | 2010-11-13

25

Je crois que j'ai trouvé une meilleure façon de gérer cela...

En haut de votre fichier de sortie, placez la ligne suivante:
```
<head><div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div></head>
```
Puis sur la dernière ligne de votre dernier chargement du fichier CSS:
```
#loadOverlay{display: none;}
```
Il utilise essentiellement le problème contre lui-même. Le premier bit de affichables html qui est chargé de lieux une toile vierge au-dessus de tout, tout en CSS charges et des processus, le dernier peu de CSS à charger et de processus supprime la toile. De mon test, ce qui résout complètement le problème.

Cela affecte le RÉFÉRENCEMENT?
Bonne question et la réponse est que je ne sais pas, il aurait besoin d'être testé. Pensées: Les éléments de la page se charge à la même vitesse, ils ne le seraient autrement, mais ils seront cachés de l'utilisateur, mais pas à partir d'un moteur de recherche spider. Donc, à partir de l'araignée de point de vue, vous devriez obtenir les mêmes mesures, sauf s'ils sont la cartographie ce que l'utilisateur va voir réellement. Si c'est le cas, alors il serait inférieur de RÉFÉRENCEMENT. Cet article à MOZ (moz.com/learn/seo/page-speed) indiquent que cette pratique ne devrait pas faire mal à tous, que Google (et assumé d'autres) ne sont cote à temps pour le premier octet.
Cependant, la perception de la vitesse de chargement EST une mesure importante pour les utilisateurs du site. Donc, si cela nettoie d'une demi-seconde du temps de chargement alors que c'est pas un gros problème, mais si vous vous déplacez à partir de la première perception de la charge à une seconde, quatre secondes, alors que c'est un gros problème.

OriginalL'auteur Nate Bunney
1

Navigateurs lire le code à partir du haut vers le bas, de sorte que plus le code est sur la page, et comment compacter le code de l'est, aura un effet sur le temps de chargement de la page. Vous ne pouvez pas vraiment de pré-charge comme vous le feriez avec des images ou quelque chose, donc je voudrais vraiment regarder dans la mise en cache du fichier, c'est probablement la meilleure solution. Désolé, theres pas de meilleure alternative de ce. Mais pour être honnête, une seconde de temps de chargement n'est pas vraiment trop mauvais.

OriginalL'auteur Blake
1

Nathan Bunney - bonne idée que ispired moi, mais je pense que la meilleure façon est de supprimer la superposition avec javascript après le document est entièrement chargé.

$(document).ready(function(){ $("#loadOverlay").css("display","none"); });

C'est pire parce que les utilisateurs ayant désactivé javascript ne verrez pas votre page à tous!
Vous n'avez pas besoin de tirer jQuery (qui est incroyablement lourd) pour ce faire: document.addEventListener('load',function(){document.getElementById("loadOverlay").style.display="none";});
Si quelqu'un a javascript désactivé, ils ne peuvent pas voir que la moitié du web. Personnellement, je ne vous inquiétez pas à propos de ces gens, surtout depuis que je fais la plupart de mon travail dans des frameworks javascript. Mais si vous voulez, vous pouvez mettre un avertissement à l'aide de la <noscript> balise au milieu de la superposition.

OriginalL'auteur user2690424
1

Avez-vous déjà utilisé requirejs?
vous pouvez définir après votre
```
requirejs.config(<confObj>);
```
quelque chose comme cela
```
require(Array[<all your CSS & JS >]);
```
requirejs fera le cache (comme) des trucs pour vous!
requirejs api

OriginalL'auteur Lazaros Kosmidis
0

Vous pouvez vous assurer qu'un élément HTML n'est pas affiché jusqu'à ce que son CSS est chargé avec cette technique simple:
```
//CSS
#my-div { display:block !important; }

//HTML
<div id = "my-div" style = "display:none;">

  <p>This will be display:none until the CSS is applied!</p>

</div>
```
Parce que la balise div a display:none comme style en ligne, il ne sera pas affiché jusqu'à ce que après le CSS est appliqué. Lorsque le display:block !important règle est appliquée, la div est de style en ligne sera ignorée et le div apparaît complètement de style.

OriginalL'auteur Frank

Vous devez vous connecter pour publier un commentaire.