Foros del Web » Programando para Internet » Javascript »

Lineas JS inferior en HTML

Estas en el tema de Lineas JS inferior en HTML en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/02/2020, 11:23
Avatar de bathory84  
Fecha de Ingreso: junio-2010
Ubicación: Venezuela
Mensajes: 254
Antigüedad: 9 años, 9 meses
Puntos: 1
Lineas JS inferior en HTML

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?
  #2 (permalink)  
Antiguo 02/03/2020, 04:53
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.106
Antigüedad: 15 años, 10 meses
Puntos: 792
Respuesta: Lineas JS inferior en HTML

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
  #3 (permalink)  
Antiguo 02/03/2020, 10:00
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.638
Antigüedad: 12 años, 1 mes
Puntos: 1109
Respuesta: Lineas JS inferior en HTML

@bathory no dupliques temas,
http://www.forosdelweb.com/f4/lineas...-html-1163848/
  #4 (permalink)  
Antiguo 04/03/2020, 10:36
Avatar de bathory84  
Fecha de Ingreso: junio-2010
Ubicación: Venezuela
Mensajes: 254
Antigüedad: 9 años, 9 meses
Puntos: 1
Respuesta: Lineas JS inferior en HTML

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?:

<!-- font -->
<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.
  #5 (permalink)  
Antiguo 04/03/2020, 15:49
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.638
Antigüedad: 12 años, 1 mes
Puntos: 1109
Respuesta: Lineas JS inferior en HTML

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
  1. <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
  #6 (permalink)  
Antiguo 08/03/2020, 12:42
Avatar de bathory84  
Fecha de Ingreso: junio-2010
Ubicación: Venezuela
Mensajes: 254
Antigüedad: 9 años, 9 meses
Puntos: 1
Respuesta: Lineas JS inferior en HTML

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.
  #7 (permalink)  
Antiguo 08/03/2020, 15:55
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.638
Antigüedad: 12 años, 1 mes
Puntos: 1109
Respuesta: Lineas JS inferior en HTML

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.

Última edición por ArturoGallegos; 09/03/2020 a las 12:33
  #8 (permalink)  
Antiguo 17/03/2020, 14:14
Avatar de bathory84  
Fecha de Ingreso: junio-2010
Ubicación: Venezuela
Mensajes: 254
Antigüedad: 9 años, 9 meses
Puntos: 1
Respuesta: Lineas JS inferior en HTML

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.
  #9 (permalink)  
Antiguo 17/03/2020, 17:51
 
Fecha de Ingreso: abril-2006
Mensajes: 379
Antigüedad: 14 años
Puntos: 80
Respuesta: Lineas JS inferior en HTML

Cita:
Iniciado por bathory84 Ver Mensaje
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
  1. Carga en la pagina index, solo lo necesario que necesites , no cargues CSS si no se usara en la pagina que se esta visualizando
  2. 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
  3. 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
  4. 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
__________________
Mis aportes te ayudaron??, te hicieron ahorrar valiosos tiempo??, si quieres puedes agradecerme con un Gracias o con una donacion
https://paypal.com/pools/c/8lmNLmWnG9
  #10 (permalink)  
Antiguo 18/03/2020, 10:39
Avatar de bathory84  
Fecha de Ingreso: junio-2010
Ubicación: Venezuela
Mensajes: 254
Antigüedad: 9 años, 9 meses
Puntos: 1
Respuesta: Lineas JS inferior en HTML

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%).



La zona horaria es GMT -6. Ahora son las 10:18.