En un nuevo video de Google, el Developer Advocate Alan Kent comparte seis formas de optimizar JavaScript para mejorar el rendimiento de su sitio.
Kent detecta problemas comunes de rendimiento relacionados con JavaScript y toma las medidas necesarias para solucionarlos.
Contenido del Articulo
1. Evita duplicar archivos JavaScript
Evite multiplicar la cantidad de archivos JavaScript en su sitio.
La cantidad de archivos JavaScript podría ser demasiado grande si no tiene cuidado, especialmente si cada elemento de la interfaz de usuario está en un archivo separado.
Reducir la cantidad de archivos JavaScript que un navegador necesita descargar puede mejorar el rendimiento del sitio.
como localizar
Él Oportunidad parte de Perspectivas de velocidad de página El informe enumera sugerencias específicas para su sitio.
Busque la recomendación para mantener bajos los tamaños de las solicitudes y los tamaños de las transferencias pequeñas.
Haga clic en la recomendación para obtener un resumen de la cantidad y los tamaños de los tipos de recursos solicitados, incluidos los archivos JavaScript.
Cómo hacer
Hay varias maneras de solucionar este problema. Una opción que sugiere Google es combinar archivos más pequeños para tener un solo archivo más grande para descargar.
Otra solución es admitir HTTP2 en su sitio, ya que puede mejorar el rendimiento sin vincular archivos.
2. Evita búsquedas excesivas de DNS
Evite búsquedas DNS excesivas de archivos de referencia de JavaScript, ya que esto puede ralentizar la primera visita de un usuario a su sitio.
como localizar
PageSpeed Insights puede mostrarle una lista de nombres de dominio utilizados en URL en secciones como reducir el tiempo de ejecución de JavaScript.
La pestaña Red en las Herramientas para desarrolladores de Chrome es otra forma de ver todos los nombres de dominio enumerados.
Cómo hacer
Para reducir la cantidad de búsquedas de DNS, Google sugiere que considere alojar una copia de los archivos JavaScript a los que se hace referencia externamente en su sitio.
3. Eliminar el JavaScript ineficaz
Minimice o elimine JavaScript ineficiente, ya que puede ralentizar las páginas web y generar experiencias de usuario deficientes.
como localizar
Busque las siguientes oportunidades en el informe de Google PageSpeed Insights:
- Reducir el tiempo de ejecución de JavaScript: Esto informa escenarios en los que se dedicó una gran cantidad de tiempo de CPU a analizar o ejecutar código JavaScript.
- Borrar recursos de exclusión de rendimiento: incluye JavaScript que se puede ejecutar antes de mostrar la página, lo que hace que el usuario espere más tiempo para ver cualquier contenido.
- Documento Escribir: Si se usa incorrectamente, esto puede causar problemas de rendimiento significativos en una página, ya que impide que se realicen otras funciones.
- No utiliza oyentes pasivos.: un oyente pasivo es una pista para el navegador de que el código JavaScript no invocará una función que impida el desplazamiento, lo que permite que el navegador se desplace por la página incluso cuando JavaScript aún se está ejecutando.
Cómo hacer
La eliminación de JavaScript ineficiente es un problema mayor que va más allá del video de Google.
Las soluciones generalmente involucran diferentes secuencias de comandos de JavaScript. Las técnicas incluyen la creación de perfiles de código existentes y la compilación de sus propias versiones reducidas de elementos más potentes.
4. Eliminar JavaScript no utilizado
JavaScript no utilizado también es ineficaz, pero Google dice que este problema es lo suficientemente común como para resolverlo por sí solo.
La reutilización de código en sitios web puede dar lugar a la inclusión de JavaScript innecesario.
El JavaScript que nunca se usa todavía necesita ser descargado y analizado por el navegador web, lo cual es una pérdida de recursos.
como localizar
Busque las siguientes oportunidades en el informe de Google PageSpeed Insights:
- Reducir JavaScript no utilizado: Esto le muestra JavaScript que no se ejecutó como parte de la carga de una página.
- Evite las enormes cargas útiles de la red: esto identifica áreas de mejora llamando a descargas de bibliotecas grandes.
- Minimice el trabajo en el hilo principal: incluye el tiempo dedicado a analizar, compilar y ejecutar JavaScript.
Cómo hacer
Google está proponiendo una técnica llamada agitación de árboles, que se puede usar para localizar JavaScript que nunca se ha llamado y que es seguro eliminar.
5. Comprimir archivos JavaScript
Asegúrese de que los archivos JavaScript estén comprimidos cuando los descargue. Si bien el navegador web necesita gastar más tiempo de CPU para descomprimir el contenido del archivo, Google dice que la compresión es una victoria general.
como localizar
El informe de PageSpeed Insights tiene una sección que identifica los archivos JavaScript que pueden beneficiarse de la compresión.
Haciendo click Habilitar la compresión de texto le mostrará qué archivos se recomienda comprimir.
Cómo hacer
La mayoría de los navegadores web o sistemas de administración de contenido tienen soporte integrado para comprimir descargas si se configuran correctamente.
6. Establecer longitudes de caché adecuadas para el código JavaScript
Compruebe que los archivos JavaScript se devuelvan con los encabezados de tiempo de espera de caché adecuados.
Esto ayuda a los navegadores a evitar la carga de verificar si los archivos JavaScript en su caché están desactualizados, lo que mejora el rendimiento.
como localizar
En el Redes su ficha Herramientas para desarrolladores de Chrome puede verificar los encabezados de respuesta HTTP para los archivos JavaScript descargados. Busque encabezados como Prueba de caché.
En PageSpeed Insights busca la oportunidad del título Servicio de datos estáticos con una política de caché efectiva. Al hacer clic en él, se mostrará una lista de recursos, incluidos los archivos JavaScript, que pueden aprovechar los encabezados de caché configurados correctamente.
Cómo hacer
Una forma de mejorar el almacenamiento en caché de los archivos JavaScript de uso común es informar de los archivos de un sitio público compartido.
Si un usuario visita sitios que reutilizan el mismo archivo JavaScript, el navegador puede usar la copia del archivo descargado anteriormente, lo que mejorará el rendimiento.
Para obtener más detalles sobre cualquiera de las sugerencias de optimización de JavaScript anteriores, vea el video completo de Google a continuación:
Imagen seleccionada: Visual Generation / Shutterstock
