En un nuevo video de Google, el Developer Advocate Alan Kent comparte seis formas de optimizar JavaScript para mejorar el rendimiento de su sitio web.
Kent identifica problemas de rendimiento comunes causados por JavaScript y repasa los pasos que puede seguir para solucionarlos.
1. Evite la proliferación de archivos JavaScript
Evite la proliferación en la cantidad de archivos JavaScript en su sitio.
La cantidad de archivos JavaScript podría volverse excesiva si no tiene cuidado, especialmente si cada componente de la interfaz de usuario está en un archivo separado.
Reducir la cantidad de archivos JavaScript que un navegador tiene que descargar puede mejorar el rendimiento del sitio web.
Cómo detectar
Él Oportunidad sección de la Perspectivas de PageSpeed El informe enumera recomendaciones específicas para su sitio.
Busque la recomendación para mantenga el número de solicitudes bajo y los tamaños de transferencia pequeños.
Haga clic en la recomendación para obtener un resumen de la cantidad y el tamaño de los tipos de recursos solicitados, incluidos los archivos JavaScript.
Como arreglar
Puede solucionar este problema de varias maneras diferentes. Una opción que recomienda 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 unir archivos.
2. Evite búsquedas de DNS excesivas
Evite un número excesivo de búsquedas de DNS para los archivos JavaScript de referencia, ya que esto puede ralentizar la primera visita de un usuario a su sitio.
Cómo detectar
PageSpeed Insights puede mostrarle una lista de los nombres de dominio utilizados en las URL en secciones como reducir el tiempo de ejecución de JavaScript.
La pestaña de red en Chrome Developer Tools es otra forma de ver todos los nombres de dominio a los que se hace referencia.
Como arreglar
Para reducir la cantidad de búsquedas de DNS, Google sugiere que considere alojar una copia de los archivos JavaScript de referencia externa en su propio sitio.
3. Eliminar JavaScript ineficiente
Reduzca o elimine JavaScript ineficiente, ya que puede ralentizar las páginas web y generar experiencias de usuario deficientes.
Cómo detectar
Busque las siguientes oportunidades en el informe PageSpeed Insights de Google:
- Reducir el tiempo de ejecución de JavaScript: Esto informa secuencias de comandos en las que se dedicó una gran cantidad de tiempo de CPU a analizar o ejecutar código JavaScript.
- Elimine los recursos de bloqueo de renderizado: Esto incluye JavaScript que puede ejecutarse antes de que la página pueda mostrarse, lo que hace que el usuario espere más tiempo para ver cualquier contenido.
- Documento.escribir: si se usa incorrectamente, esto puede provocar problemas de rendimiento significativos en una página, ya que bloquea la realización de otras operaciones.
- No utiliza oyentes pasivos: un oyente pasivo es una pista para el navegador de que el código JavaScript no llamará a una función que impida el desplazamiento, lo que permite que el navegador se desplace por la página incluso mientras el JavaScript aún se está ejecutando.
Como arreglar
La eliminación de JavaScript ineficiente es un tema más amplio que va más allá del alcance del video de Google.
Las soluciones generalmente implican escribir el código JavaScript de manera diferente. Las técnicas incluyen la creación de perfiles de código existente y la escritura de sus propias versiones reducidas de componentes más potentes.
4. Eliminar JavaScript no utilizado
JavaScript no utilizado también es ineficiente, pero Google dice que este problema es lo suficientemente común como para solucionarlo por sí solo.
La reutilización del código en los sitios puede conducir a la inclusión de JavaScript que no es necesario.
El navegador web aún debe descargar y analizar el JavaScript que nunca se utiliza, lo que es una pérdida de recursos.
Cómo detectar
Busque las siguientes oportunidades en el informe PageSpeed Insights de Google:
- Reducir JavaScript no utilizado: Esto le muestra JavaScript que no se ejecutó como parte de la carga de una página.
- Evite enormes cargas útiles de red: esto identifica áreas de mejora llamando a las descargas de bibliotecas grandes.
- Minimice el trabajo del subproceso principal: incluye el tiempo dedicado a analizar, compilar y ejecutar JavaScript.
Como arreglar
Google recomienda una técnica llamada agitación de árboles que se puede usar para identificar JavaScript que nunca se llama, que es seguro de eliminar.
5. Comprimir archivos JavaScript
Asegúrese de que sus archivos JavaScript estén comprimidos cuando los descargue. Mientras que el navegador web tiene que gastar más tiempo de CPU para descomprimir el contenido del archivo, Google dice que la compresión es una victoria general.
Cómo detectar
El informe de PageSpeed Insights tiene una sección que destaca los archivos JavaScript que pueden beneficiarse de la compresión.
haciendo clic Habilitar la compresión de texto le mostrará qué archivos se recomienda comprimir.
Como arreglar
La mayoría de los navegadores web o sistemas de administración de contenido tienen soporte integrado para comprimir descargas si están configurados correctamente.
6. Establecer duraciones de caché adecuadas para el código JavaScript
Verifique que sus archivos JavaScript se devuelvan con los encabezados de tiempo de caducidad de caché apropiados.
Esto ayuda a los navegadores a evitar la sobrecarga de verificar si los archivos JavaScript en su caché están desactualizados, lo que mejora el rendimiento.
Cómo detectar
En el Redes ficha de Herramientas para desarrolladores de Chrome puede verificar los encabezados de respuesta HTTP para los archivos JavaScript que se descargan. Busque encabezados como Control de caché.
En PageSpeed Insights, busque la oportunidad titulada Servir activos estáticos con una política de caché eficiente. Al hacer clic en él, se le mostrará una lista de recursos, incluidos los archivos JavaScript, que pueden beneficiarse de los encabezados de caché configurados adecuadamente.
Como arreglar
Una forma de mejorar el almacenamiento en caché de los archivos JavaScript de uso común es hacer referencia a los archivos desde una ubicación pública compartida.
Si un usuario visita sitios que reutilizan el mismo archivo JavaScript, el navegador puede usar la copia descargada previamente del archivo, lo que mejorará el rendimiento.
Para obtener más detalles sobre cualquiera de las recomendaciones anteriores para optimizar JavaScript, vea el video completo de Google a continuación:
Imagen destacada: Visual Generation/Shutterstock
Consultar el artículo en la publicación original