Si bien la estética de un sitio web es importante, su contenido y velocidades de carga hacen que la gente regrese. WordPress proporciona a los usuarios una sofisticada caja de herramientas de complementos y temas para crear rápidamente sus propios sitios web personalizados.
Sin embargo, estos temas y complementos requieren JavaScript (JS) y hojas de estilo en cascada (CSS) para funcionar. WordPress los crea automáticamente en forma de archivos de script. A menudo están mal optimizados. Como tal, pueden ralentizar considerablemente su sitio web.
Esto puede resultar frustrante para los lectores. Por lo tanto, en esta guía, exploraremos cómo encontrar y eliminar estos scripts que bloquean el procesamiento y le mostraremos cómo aumentar las velocidades de carga de su sitio web de WordPress.
¿Qué son los scripts CSS y JS que bloquean el renderizado y por qué son malos?
La mayoría de las páginas web en Internet están formadas por tres componentes clave: JavaScript, CSS y lenguajes de marcado de hipertexto. HTML sirve como base, mientras que JavaScript y CSS están incrustados en él. Sin embargo, en estos días, es más convencional incrustar llamadas a scripts externos en el documento HTML.
Estos scripts se guardan en una cola que su navegador web usa para representar la página web. La forma más fácil de ver qué scripts usa una página web sin mirar el código fuente es descargarlo de su navegador web (Ctrl + S). El navegador web descargará el documento HTML junto con una carpeta con todos (o la mayoría) de los scripts, imágenes y otros archivos que utiliza la página web.
Cuanto más complejos sean los scripts que tenga que llamar su página web desde la cola, más tiempo tardará en procesarse. A menudo, los navegadores web descargarán recursos de la página web, como scripts e imágenes, en un caché local para cargar las páginas web más rápido. Si bien los usuarios del lado del cliente pueden acelerar los tiempos de representación de la página web al deshabilitar JavaScript, aumentar el tamaño de la caché y usar AdBlockers, esta no es una solución ideal. La responsabilidad debe recaer en el desarrollador web.
Si recibe quejas o ha notado que su sitio web tiene problemas para reproducir su contenido, no es demasiado tarde para solucionarlo.
Cómo optimizar su sitio web mediante la búsqueda y reparación de secuencias de comandos de bloqueo de procesamiento
Antes de decidir qué scripts terminar u optimizar, debe evaluar su sitio web o la velocidad de su página web. Puede utilizar una plataforma en línea como GTmetrix o PageSpeed Insights de Google. Todo lo que se le pedirá que haga es insertar la URL del sitio web o la página web que desea probar, y la herramienta la calificará y proporcionará otras ideas.
También le sugerirán auditorías que puede utilizar para hacer que su sitio web sea más rápido. Por ejemplo, te propondrán que uses menos elementos en tu página web o que reduzcas CSS y JavaScript no utilizados. GTmetrix llegará tan lejos como para mostrarle qué scripts deben optimizarse.
Alternativamente, puede usar la pestaña Cobertura de Chrome DevTools para mostrarle los datos de utilización de sus scripts. Una vez que identifique qué scripts no son óptimos, puede hacer algunas cosas para corregirlos. Sin embargo, estos pasos requerirán bastante destreza en la codificación para implementarlos con éxito. Necesitará al menos un conocimiento básico de la programación funcional de JavaScript.
Unirse a un curso tutorial de codificación (o bootcamp) también es una buena idea para ayudarlo a desarrollar aún más sus habilidades. En promedio, un bootcamp de codificación puede tardar hasta quince semanas en completarse, y aunque esto puede parecer mucho tiempo, vale la pena si se considera que la alfabetización básica en código es una habilidad importante en el mundo moderno. Sin embargo, aquí hay cinco formas de corregir los scripts de bloqueo de procesamiento y aumentar la velocidad de su página web.
1. Optimiza el orden de carga
La sección de la cabeza ( ) de la página web se utiliza para precargar elementos. La base de su página web debe ir aquí, por lo que una pantalla en blanco no saluda al usuario cuando carga su página web. Si bien CSS incrustado está bien, debe evitar colocar JavaScript aquí.
Una vez que haya optimizado la sección de la cabeza, debe optimizar el cuerpo. La mayoría de los navegadores web muestran las páginas web de arriba a abajo. Debe ordenar las llamadas a los scripts de acuerdo con su importancia y complejidad. Debe realizar llamadas a los scripts que no son cruciales para la representación de la página web en último lugar junto con scripts complejos que llevan tiempo.
2. Minificar código
Minificar el código implica reescribirlo y eliminar caracteres innecesarios como espacios en blanco, comentarios, comas, saltos de línea, etc. Esto hace que el código sea más conciso y compacto, lo que finalmente reduce el tamaño del script y aumenta los tiempos de carga de su página web.
Los complementos y herramientas como W3TC tienen módulos que minimizan JavaScript y CSS en sus temas. Alternativamente, puede minificar manualmente su código de secuencia de comandos con una herramienta en línea gratuita como JavaScript Minifier.
3. Utilice la carga diferida y asincrónica de JavaScript
Los navegadores web leen el código de arriba a abajo. Cuando encuentran una etiqueta de secuencia de comandos, dejan de cargar la página web y leen el archivo de secuencia de comandos. Esto ralentiza el renderizado.
Puedes usar el asincrónico atributo para cargar el script en paralelo con la página web y ejecutarlo tan pronto como esté disponible. Alternativamente, puede utilizar el aplazar atributo para aplazar el análisis de los scripts. Esto significa que también cargará el script en paralelo a la página web, pero solo lo ejecutará cuando el navegador analice la página web.
Le recomendamos que no utilice el asincrónico o aplazar atributos en los scripts utilizados para representar y mostrar elementos visuales. Las palabras clave de JavaScript equivalentes a estos atributos son las asincrónico y esperar palabras clave. Puede usarlos para cargar sus JavaScript de forma más asincrónica sin editar las etiquetas HTML en su página web.
4. Reemplace los elementos visuales de JavaScript con CSS3
En el pasado, CSS no era tan versátil como lo es hoy. Por ejemplo, CSS 1.0 y 2.0 carecían de herramientas de interfaz de usuario como controles básicos y controles deslizantes.
Luego apareció CSS 3. Presentaba nuevos colores, sombras de cuadro, opacidad, etc. JavaScript es ideal para agregar controles de interfaz de usuario complejos. Sin embargo, Javascript es más pesado en recursos que CSS.
Por lo tanto, el uso de cantidades excesivas de JavaScript ralentiza considerablemente su sitio web. Si nota que su página web está usando JavaScript para compensar donde las versiones anteriores de CSS fracasaron, debe modificarlo y reemplazar todo el JavaScript innecesario con CSS, donde pueda. Esto permitirá que las páginas web se carguen más rápido.
5. Elimine todos los scripts innecesarios
El propósito de JS y CSS es expandir la funcionalidad a las páginas web y agregar lógica donde HTML no puede. Sin embargo, HTML 5.3 llegó con nuevas etiquetas que harían innecesarias algunas operaciones de CSS y JS. El uso de HTML en lugar de scripts, naturalmente, hace que sus páginas web se carguen más rápido.
Por lo tanto, la mejor manera de optimizar la velocidad de su sitio web es eliminar todos los scripts infrautilizados. Deberá analizar qué scripts son completamente innecesarios y eliminarlos. Nuevamente, puede usar la pestaña Cobertura de Chrome DevTools o GTmetrix para encontrar los scripts más infrautilizados en su página web y luego eliminarlos.
Una vez que elimine todas las funciones o etiquetas innecesarias, puede combinar scripts cuyas funciones sean similares. Si ya sabe cómo manipular el código fuente de su página web, esta no debería ser una tarea difícil para usted. Sin embargo, los usuarios que no tienen tanta experiencia o conocimientos en diseño web no deben preocuparse. WordPress le facilita identificar los scripts en su sitio web y editarlos utilizando varios complementos de optimización. Los cubriremos a continuación.
6. Uso de complementos para optimizar su sitio web de WordPress
Nuevamente, no necesita un conocimiento práctico de programación para optimizar su sitio web WP. Aunque algo de experiencia ayudaría. Sin embargo, existe una gama de complementos orientados a la optimización de scripts. Algunos de ellos usan IA para minimizar el código, cambiar el orden de carga y reemplazar los scripts infrautilizados con códigos y scripts más eficientes.
Algunos de los mejores complementos para la optimización de scripts incluyen:
- Cohete WP: Este es uno de los complementos más populares para la optimización web. Puede detectar automáticamente qué scripts son problemáticos y solucionarlos por usted. Puede usarlo para almacenamiento en caché rápido, deferencia, compresión y minificación.
- Autoptimizar: Esto puede diferir y eliminar scripts no esenciales, integrar CSS en línea y minimizar scripts, HTML e imágenes. Autoptimize es altamente personalizable a través de una API abierta y opciones avanzadas.
- Caché total de W3: Este complemento requiere un poco de trabajo para su uso. Deberá realizar un seguimiento e identificar los scripts manualmente antes de eliminarlos o editarlos. En la mayoría de los casos, este complemento ya está disponible con su paquete de WordPress.
- JavaScript asíncrono: Un complemento de código abierto presentado por WordPress. Le permite detectar JavaScript que bloquea la representación y luego diferirlo o cargarlo de forma asincrónica.
Entonces, ¿por qué no solo recomendamos complementos en primer lugar? Desafortunadamente, algunos de estos complementos le costarán. Por ejemplo, Autoptimize cuesta $ 49 por año. Si bien es una tarifa razonable, puede no ser ideal para las personas que ya están pagando una gran cantidad de dinero por el alojamiento y otras aplicaciones y complementos.
Sin embargo, independientemente de si está utilizando complementos o buscando scripts manualmente, debe comprender conceptos como minificación, carga asincrónica y orden de carga. Le facilitará la resolución de problemas de carga en caso de que falle uno de sus scripts.
