Lineas JS inferior en HTML

bathory84 · #1 (**permalink**) 29/02/2020, 12:23

Saludos amigos, me podrian ayudar con un inconveniente que tengo:

Hay unas Lineas JS en mi hoja HTML en la parte inferior:

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/plugins-jquery.js"></script>
<script>var plugin_path = 'js/';</script>
<script src="js/custom.js"></script>

Pero cuando las coloco en la parte superior <HEAD> del HTML ya no funcionan, lo que quiero es colocarlas arriba para que la Pagina Cargue mas rapido, tarda muchos segundos en cargar.

Que me está impidiendo que estos JS ya no funcionen por cambiarlos hacia la parte superior del HTML?

bathory84 · #2 (**permalink**) 29/02/2020, 12:26

Saludos amigos, me podrian ayudar con un inconveniente que tengo:

Hay unas Lineas JS en mi hoja HTML en la parte inferior:

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/plugins-jquery.js"></script>
<script>var plugin_path = 'js/';</script>
<script src="js/custom.js"></script>

Pero cuando las coloco en la parte superior <HEAD> del HTML ya no funcionan, lo que quiero es colocarlas arriba para que la Pagina Cargue mas rapido, tarda muchos segundos en cargar.

Que me está impidiendo que estos JS ya no funcionen por cambiarlos hacia la parte superior del HTML?

Triby · #3 (**permalink**) 29/02/2020, 22:26

Es difícil hacer un diagnóstico con la poca información que proporcionas y, de hecho, se recomienda que las etiquetas script vayan al final de la página, precisamente, para acelerar la carga.

Ahora, habría que ver tu página para saber qué es lo que impide que carguen los scripts si los pones en head.

Panino5001 · #4 (**permalink**) 02/03/2020, 05:53

Seguramente tienes en tus 2 últimos scripts referencias a algún elemento html del body y es por esto que, al no encontrarlo cuando el script es interpretado, se produce un fallo. Al colocarlos al final, esos elementos ya cargaron y entonces tus scripts no fallan. Si quieres cargarlos arriba, para que no se produzca el fallo puedes aplicar el atributo defer: https://developer.mozilla.org/es/doc...lemento/script

Pero lo cierto es que tu página tardará en cargar de todas maneras. Lo que debes hacer para disminuir el tiempo de carga es reducir el peso de tus scripts, estilos css e imágenes u otras referencias externas que use tu página, como videos, sonidos, fuentes, etc.

Para imágenes puedes usar herramientas de reducción de peso como https://tinypng.com/ o usar sprites, para minimizar los requests al servidor y cargar varias de una vez. Y para estilos css y javascript puedes usar herramientas de deploy como GULP: https://anexsoft.com/gulp-js-como-mi...hivos-css-y-js

ArturoGallegos · #5 (**permalink**) 02/03/2020, 11:00

@bathory no dupliques temas,
http://www.forosdelweb.com/f4/lineas...-html-1163848/

bathory84 · #6 (**permalink**) 04/03/2020, 11:36

Muchas Gracias por la Respuesta. Lo de las imagenes reducidas ya lo había hecho.

Esta Linea pudiese estar haciendo daño en el Rendimiento?:


<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,500,500i,600,70 0,800,900|Poppins:200,300,300i,400,400i,500,500i,6 00,600i,700,700i,800,800i,900">

Se trata de unas Hojas de Fuentes para unos Iconos.

ArturoGallegos · #7 (**permalink**) 04/03/2020, 16:49

Madres, el propio google te devio advertir del rendimiento, estas cargando demaciadas fuentes, debes cargar solo las necesarias y preferiblemente no mas de 3

En tu caso lo dejaria en

Código HTML:

Ver original<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400|Poppins:200,400">

Aunque solo sono 2 tipografias el hecho de especificar la variante tambien cuenta, en este caso estarias cargando 1 de monserrat y 2 de poppins

cargar tantas variantes es innecesario, salvo en los casos donde si esta muy marcada la diferencia, como puede ser de font-weight 200 a 700,

400 es el punto medio utilizar font-weight bold o font-weight 700. ya suele marcarse la diferencia y es poco probable quenecesites cargar la tipografia para ese font-weight

bathory84 · #8 (**permalink**) 08/03/2020, 12:42

Gracias ArturoGallegos, pero descubrí que no eran las Letras. Otra cosa que les quería preguntar a los mas expertos en esto de la velocidad de carga.

Que carga mas rapido?

Un Banner Principal con Video-Fondo que se autoreproduce desde VIMEO ó Un Banner Principal con Video-Fondo que se autoreproduce desde un MP4 local de mi Servidor.

Cual de esos 2 me conviene más? o es lo mismo para la velocidad de carga de la pagina web? Porque el video de mi servidor pesa 1,50 MB y es el mismo Video Subido a VIMEO.

ArturoGallegos · #9 (**permalink**) 08/03/2020, 15:55

Generalmente cuando se tiene problemas en la carga de un sitio web, no suele ser problema de una sola cosa, sino una acomulacion de malas practicas.

por ejemplo
- imágenes muy grandes o pesadas (me encontre un cliente subiendo fotos de 55 megas)
- imágenes en formato incorrecto - hay fanaticos del PNG que no saben que ese formato es el peor que puedes usar cuando se trata de fotografias.
- librerías javascript en exceso - por ejemplo hay gente que se aferra a jquery cuando puedes hacerlo con vanilla
- uso de videos como background - mala idea siempre sera mas lento que una imagen
- css innecesario
- y muchos otros motivos pueden afectar, se tiene que hacer una revision completa al sitio.

Para el tema de tu video, usa el que mas te plazca lo que si es que no lo cargues directamente en tu sitio, en su lugar usa una imagen estática y cuando termine de cargar tu sitio ahora si con javascript carga el video, de esta forma sera mas rápida la carga

Edito

Algunos sitios que te pueden ayudar a revisar que problemas tienes en tu sitio

https://gtmetrix.com/
https://developers.google.com/speed/...nsights/?hl=es

Trata de conseguir la mejor calificación posible.

bathory84 · #10 (**permalink**) 17/03/2020, 14:14

Excelentes herramientas ArturoGallegos, ésta es una que está dando problemas al cargar la página:

https://www.youtube.com/s/player/5e4.../en_US/base.js (1.0MiB)

Fijate que se agarra 1 MB de peso, me imagino que es del Reproductor de YouTube, tengo que colocar mejor un Reproductor que tome un Video de via Local (Servidor) ?

Ese JS de arriba yo no lo agregué a la Página, me imagino que lo toma automatico al Agregar el EMBED de YouTube.

tuadmin · #11 (**permalink**) 17/03/2020, 17:51

Cita:

Iniciado por bathory84

Excelentes herramientas ArturoGallegos, ésta es una que está dando problemas al cargar la página:

https://www.youtube.com/s/player/5e4.../en_US/base.js (1.0MiB)

Fijate que se agarra 1 MB de peso, me imagino que es del Reproductor de YouTube, tengo que colocar mejor un Reproductor que tome un Video de via Local (Servidor) ?

Ese JS de arriba yo no lo agregué a la Página, me imagino que lo toma automatico al Agregar el EMBED de YouTube.

poner el video en tu servidor puede ser un grabe problema por que gastaras recursos de tu servidor.

mira te pongo como ejemplo, si tienes en tu servidor un archivo JS, este sera cacheado por el navegador del cliente, y al usar Archivos compartidos, como hace google con su Javascript https://www.youtube.com/s/player/5e4.../en_US/base.js (1.0MiB)

es que si tu cliente vino de otra pagina, y usaba el mismo archivo, usara la Cache que tiene almacenada ,

veelo de este modo

tu servidor es como una manguera de Agua y tu cliente viene y solicita una poca

tu server CLiente
▓▓▓▓▓▓▓▓▓▓▓▓ ----------------

todo bien no, pero viene viene 20 clientes o el doble de lo que soporta tu server
cuando ocurre ello, la lentitud es notable
tu server 20 CLientes
▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓

ahora sabes que pasa lo mismo cuando tienes un Cliente que en lugar de tener una manguera tiene una de manguera de bombero

tu server CLiente con plan GOLD
▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓

si pones un video y tu servidor no esta optimizado para repartir videos, limitar clientes balancear puertos, etc etc.

ese cliente se descargara tu video en 3 segundos o 10 digamos si tu video es de 200mb exagerando,

pero ese tiempo q se descarga perjudicara a tus otros clientes dando la sensacion de lentitud

recuerda que existen ya velocidades de 1GB de descarga, y lo mismo ocurre cuando tienes en tu Server Archivos , imagenes, CSS, que sean pesados, el tenerlos solo para tu servidor, significa que cada nuevo cliente, se descargara todos esos recursos,

por lo cual, las aplicaciones hechas con Babel o Webpack , son lentas a la primera carga, por que todo es empacado en 1 Javascript , y dara la sensacion de lentitud

si quieres dar la sensacion de Rapidez, tendras que cambiar la forma de tu pagina web, y tratar de usar recursos globales o CDN, lo de la api google para los videos de youtube, diria que son algo acertado, te quitas la faena del problema de los Videos , aunque te vuelvas dependiente de estos

recomendaciones para aligerar la carga del server

Carga en la pagina index, solo lo necesario que necesites , no cargues CSS si no se usara en la pagina que se esta visualizando
verifica si tu servidor es de hospedaje web es fiable, muchos servidores de paga, tienen su ancho de banda compartido y eso tambien merma la velocidad, como consejo cambiate de HOST
en las imagenes, procura hacer uso de 2 imagenes la reducida de baja calidad y la imagen original, y que la imagen original sea usada, cuando sea necesaria
en el javascript, trata de cambiar la forma de tu web para dar mas rapidez, haciendo mas uso de AJAX

para todo lo demas ya te dieron los consejos necesarios. recuerda que vivimos en tiempos mas modernos, ten en cuenta ello

bathory84 · #12 (**permalink**) 18/03/2020, 10:39

Aqui entre tantas cosas para Analizar puede que sea problema del Servidor Hosting, les dejo las que creo que pueden ser las causas:

1. Banda ancha 2,4 GB / ∞ (Ustedes me avisan si 2,4 GB es mucho o Normal).

2. Uso de Memoria Física 153,88 MB / 2 GB (7,51%).

3. Uso de CPU 0 / 100 (0%).