Generalidades
Este artículo proporciona información sobre cómo optimizar JavaScript para mejorar el rendimiento de tu sitio WordPress.
Consejos para optimizar JavaScript
JavaScript puede mejorar tu sitio, aunque también puede hacer que las páginas se carguen más lentamente si no se implementa correctamente. En estas secciones se describen varias formas de optimizar JavaScript en tu sitio WordPress.
Usar una herramienta en línea para analizar tu sitio
Puedes utilizar una herramienta en línea para analizar tu sitio web. Estas herramientas proporcionan un desglose de lo que puede estar causando que tu sitio se cargue más lento de lo esperado y brindan información para solucionar problemas adicionales.
Bloqueo de renderizado de JavaScript
JavaScript se renderiza cuando el navegador lee la página web (de arriba hacia abajo). Cuando se encuentra un archivo JavaScript, el navegador deja de mostrar la página hasta que el archivo JavaScript se haya leído completamente. Esto se conoce como bloqueo de renderizado de JavaScript y puede causar un retraso mientras se carga la página.
Usar JavaScript remoto
En lugar de insertar JavaScript remoto en la parte superior de la página, puedes agregarlo justo antes de la etiqueta </body> en tu tema. Debido a la forma en que se maneja el orden de carga en el navegador, esto permite que tu contenido comience a renderizarse y mostrarse en la página antes de esperar a los archivos remotos (que se cargan primero si están en el encabezado). También hay algunos plugins disponibles que pueden hacer esto por ti.
Usar JavaScript local
Colocar el código JavaScript local en la parte inferior de la página también puede acelerar el tiempo de carga. Puedes editar tu tema migrando cualquier código JavaScript local de header.php a footer.php.
Comprimir código de JavaScript
Si bien mod_deflate comprime el código JavaScript, puedes reducir aún más el uso de recursos si almacenas previamente en caché la compresión. Para ello, debes guardar una copia gzip del código JavaScript de tu tema en el mismo directorio que tus archivos actuales.
Algunos temas intentan comprimir JavaScript y CSS agregando un .php al final del nombre del archivo. En realidad, esto procesa el archivo a través de PHP innecesariamente y puede causar sobrecarga significativa. Si notas que tu tema está haciendo esto, puedes modificarlo utilizando el método gzip que se describe a continuación.
- Haz SSH a tu servidor.
- Navega al directorio wp-content/themes/.
- Cuando encuentres el código JavaScript de tu sitio, corre el siguiente comando. Asegúrat de reemplazar javascript.js con el nombre del archivo real que deseas comprimir:
[server]$ gzip javascript.js
- Repite el proceso para todos tus archivos. Se creará una versión comprimida de tus archivos .js.
The benefit of this is that once you complete these steps, no further action is required.
Ver también
Enlaces de DreamHost