JavaScript - Problema de bloqueo de visualizacion de la pagina

 
Vista:

Problema de bloqueo de visualizacion de la pagina

Publicado por israel (2 intervenciones) el 09/06/2018 22:19:04
Buenas! Soy Israel. Tengo una agencia de viajes online, y tenemos un problema con el slide de la cabecera de la web.
www.goldviajes.com

El tema es que pagespeed de Google nos alerta acerca del bloqueo que hace el javascript en la primera mitad de la pagina. Un tema que llevamos semanas tratando de solucionar sin éxito.


El problema principal es que el slide de la cabecera de la web bloquea la carga de contenido.
Si desactivamos el SLIDE rotativo de la web la puntuacion en pagespeed es superior al 90%. (BUENA)
El resultado tambien es igualmente bueno si el codigo lo pasamos a la cola de la pagina. (Pero esto no es una
solucion porque el slide se reproduce antes del footer; y mover con CSS el slide nuevamente a la cabecera vuelve a generar el mismo problema pese a estar insertado al final de la pagina)
Pagespeed identifica el problema de esta forma:

Quitar el JavaScript que bloquea la visualización de contenido:

http://code.jquery.com/jquery-1.11.0.min.js
http://code.jquery.com/ui/1.9.1/jquery-ui.js
http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
http://www.goldviajes.com/fonction/multi_motor.js
http://turipano360.net/goldviajes/engine1/jquery.js




El codigo insertado para esa cabecera en la estructura de la web ocupa el primer lugar; y es el siguiente:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<link rel="stylesheet" type="text/css" href="http://turipano360.net/goldviajes/engine1/style.css" />
<script type="text/javascript" src="http://turipano360.net/goldviajes/engine1/jquery.js"></script>
 
<script>
setInterval(function(){
   $(".ws_next").click();
},4000);
</script>
 
<style>
#header_fondo_horizontal{
  background-color:transparent;
}
#header_fondo_horizontal.scroll{
  background-color:#111;
}
.container-background:before{
display:none;
}
</style>
 
 
<div id="wowslider-container1">
 <div class="ws_images">
 
<div class="container baseContainer" style="padding-top: 0px;height: 100%;">
<div id="credit" style="z-index:9999 !important;">VIAJA<br><span class="textoexplicativo">a tu manera</span>
</div>
</div>
 
<ul>
    <li><div style="width:100%;height:100%;background:url(http://turipano360.net/goldviajes/slide1.jpg);background-size:cover;background-position:center;"></div></li>
    <li><div style="width:100%;height:100%;background:url(http://turipano360.net/goldviajes/slide2.jpg);background-size:cover;background-position:center;"></div></li>
    <li><div style="width:100%;height:100%;background:url(http://turipano360.net/goldviajes/slide3.jpg);background-size:cover;background-position:center;"></div></li>
    <li><div style="width:100%;height:100%;background:url(http://turipano360.net/goldviajes/slide4.jpg);background-size:cover;background-position:center;"></div></li>
  </ul></div>
 
 <div class="ws_bullets"><div>
   <a href="#" title="Slide1"><span><img src="http://turipano360.net/goldviajes/data1/images/1.jpg" alt="Slide1"/>1</span></a>
   <a href="#" title="Slide2"><span><img src="http://turipano360.net/goldviajes/data1/images/af6c04a2155f50dc1f62620207d84828.jpg.png" alt="Slide2"/>2</span></a>
    <a href="#" title="Slide3"><span><img src="data1/images/control_and_escape1680x1050.png" alt="Slide3"/>3</span></a>
   <a href="#" title="Slide4"><span><img src="http://turipano360.net/goldviajes/data1/images/darksimpleanimewallpaper.jpg" alt="Slide4"/>4</span></a>
  <div class="ws_shadow"></div>
</div>
 
<script type="text/javascript" src="http://turipano360.net/goldviajes/engine1/wowslider.js"></script>
<script type="text/javascript" src="http://turipano360.net/goldviajes/engine1/script.js"></script>


Hemos probado de añadir a los 3 SCRIPTS de este codigo el atributo ASYNC y DEFER de varias formas
pero sin ningun resultado optimo. Asi como seguir las sugerencias de pagespeed pero tampoco hemos obtenido resultados...

estamos al limite y si alguien estubiera dispuesto a ayudarnos al respecto podemos hablarlo..

Muchisimas gracias!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 2.678
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema de bloqueo de visualizacion de la pagina

Publicado por xve (2094 intervenciones) el 10/06/2018 09:11:49
Hola Israel, la solucion es hacer lo que te comenta google, y es poner los archivos js al final de la pagina.

Lo que no entiendo es cuando dices: el slide se reproduce antes del footer

La solución, es no iniciar el slider hasta que se haya cargado el footer... esa es la manera correcta!!

Con el código que nos muestras, no me queda muy claro como inicias el slider...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema de bloqueo de visualizacion de la pagina

Publicado por Israel (1 intervención) el 10/06/2018 10:14:56
Gracias! Si, me refiero a que si cargo este mismo codigo al final de la pagina, el slide evidentemente se reproduce al final de la pagina. Dando buena puntuacion en pagespeed pero no siendo una buena solucion ni visual ni bien estructurada.

Hemos añadido el atributo async o defer al final del footer a los js que alerta pagespeed pero sin resultado..

Creo que lo hemos probado casi todo ya :(
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 2.678
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema de bloqueo de visualizacion de la pagina

Publicado por xve (2094 intervenciones) el 10/06/2018 21:38:29
Nooo, el slider tienes que ponerlo es su lugar correcto, pero no tienes que iniciar el código javascript que genera el movimiento en el mismo hasta que se haya cargado la pagina por completo, incluidos los archivo js al final de la misma.

Como inicializas el slider en tu código?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema de bloqueo de visualizacion de la pagina

Publicado por Israel (2 intervenciones) el 11/06/2018 00:47:50
Hola!
Si, eso mismo es lo que hemos hecho, colocar la llamada de los JS al final de la pagina, y dejando el html en el head pero sin exito.
Incluso añadiendo los elementos async o defer.
Pero nada ha funcionado...
La verdad, ya no sabemos que mas probar...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 2.678
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problema de bloqueo de visualizacion de la pagina

Publicado por xve (2094 intervenciones) el 11/06/2018 07:58:01
Como inicializas el slider en tu código?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar