Esto sucede porque el evento DOMLoaded se activa suficientes milisegundos antes de que la página realmente se presente.
En pocas palabras, esto significa que debe optimizar la velocidad de su sitio web. Esto no significa hacer que descargue más rápido, pero significa descargar en el orden correcto, en una forma sin bloqueo.
Paso uno: su margen de beneficio
1) Parece que hay muchas cosas que puede hacer para optimizar su margen de beneficio. En primer lugar, se puede optimizar el orden de las hojas de estilo y JavaScripts. Para garantizar que los archivos CSS se descarguen de manera asincrónica, siempre debe incluir CSS externo antes de los archivos JavaScript externos. style.css se descarga después de algunas/todas sus llamadas de JavaScript.
Hay 1 bloque de script encontrado en el encabezado entre un archivo CSS externo y otro recurso. Para permitir la descarga paralela, mueva la secuencia de comandos en línea antes del archivo CSS externo o después del siguiente recurso.
2) Su archivo JavaScript principal está en línea dentro de su marcado. Esto no solo bloquea la descarga de la página hasta que el script haya terminado de descargarse, sino que al tenerlo antes de, su contenido probablemente esté causando (o agregando) el destello blanco.
Mi método preferido es cargar la secuencia de comandos de forma asincrónica en la cabeza. Luego deberá disparar su script cuando el DOM haya terminado de cargarse, o puede lograr el mismo resultado colocando el script en la parte inferior de la etiqueta del cuerpo.
Segundo paso: Arnés de las capacidades del navegador
1) Mirando a las cabeceras HTTP, hay 28 elementos que se sirven como llamadas HTTP separadas, que no están siendo almacenados en la caché del navegador (incluyendo las páginas HTML, imágenes JPG , hojas de estilo y archivos de JavaScript).
Estos elementos son explícitamente no almacenados en caché, y esto se puede solucionar fácilmente editando la configuración de su servidor web.
2) Habilita la compresión gzip. La mayoría de los navegadores web (sí, incluso IE) admiten la descompresión de gzip, y la mayoría (si no todos) los servidores web admiten la compresión mediante gzip. Incluso podría exagerar y buscar en SPDY, que es un protocolo HTTP alternativo más ligero (compatible con Chrome y Firefox).
Paso tres: Contenido servir
Hay alrededor de 30 elementos individuales que se sirven de su dominio. En primer lugar, considere cómo podría reducir este número de solicitudes. 30 solicitudes HTTP por vista de página es mucho. Puede combatir esto usando los siguientes métodos:
1) Descargas paralelas en varios nombres de host. Los navegadores actualmente limitan el número de conexiones concurrentes a un solo dominio. El servicio de sus imágenes desde un dominio separado (por ejemplo, img.bigtim.ca) puede permitir que se sirvan en paralelo a otro contenido.
2) Combina múltiples elementos en uno solo. Muchos elementos que se descargan son puramente de contenido de estilo, como el logotipo, elementos de menú, etc. Estos se pueden combinar en una sola imagen (se descargan solo una vez) y se dividen usando CSS. Esto se llama CSS spriting. Stack Overflow hace esto: look here.
3) Si no puede reducir la cantidad de elementos que necesitan ser descargados, podría reducir la carga en su servidor (y, a su vez, el navegador del cliente) sirviendo contenido estático de un dominio sin cookies. Stack Overflow lo hace con todo su contenido estático, como imágenes, hojas de estilo y scripts.
Paso cuatro: Optimizar su propio código
Sólo hay tanto que HTTP y la tecnología del navegador puede hacer para ayudar a la velocidad de su sitio web. Este último paso depende de ti.
1) ¿Hay alguna razón por la que elige alojar jquery usted mismo? La página de descarga de Jquery muestra múltiples CDN donde puede apuntar para una descarga de scripts rápida y en caché.
2) Actualmente hay más de 20 reglas de CSS sin usar en sus hojas de estilo (es decir, el 36% de todo el archivo CSS). Reflexiona sobre lo que realmente se necesita.
3) La parte principal de JavaScript (en la parte superior de la etiqueta de su cuerpo) parece ser un truco para intentar acelerar las cosas, pero probablemente no está ayudando nada.
Se está configurando una cookie para especificar si la página se ha desvanecido todavía o no. No solo está usando JavaScript para realizar una transición que felizmente puede realizar CSS, sino que más de la mitad de la secuencia de comandos se utiliza para definir la funcionalidad de lectura y escritura de la cookie.
Viendo cosas como esta: $("body").css ("background-image", "url('images/background.png')"); y $("#website").show(); por lo general me pone despotricar sobre "separación de intereses", pero esta respuesta es el tiempo suficiente ahora así que espero que se puede ver que es una mala práctica de mezclar el estilo y la funcionalidad en el mismo código.
Adición: mirando el código, no hay necesidad de jquery en absoluto para realice lo que está haciendo. Pero, de nuevo, no hay necesidad de realizar lo que está haciendo, por lo que probablemente podría hacer mejor sin ningún JavaScript en absoluto.
¡Guau, gracias esto es increíble! –