Cómo eliminar JS y CSS que bloquean el renderizado para la velocidad del sitio

Si bien la estética de un sitio web es importante, su contenido y la velocidad 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. Suelen estar mal optimizados. Como tales, pueden ralentizar considerablemente su sitio web.

Esto puede ser 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 JS y CSS que bloquean el renderizado y por qué son malos?

La mayoría de las páginas web en Internet están compuestas por tres componentes clave: JavaScript, CSS y lenguajes de marcado de hipertexto. HTML sirve como base, mientras que JavaScript y CSS están integrados en él. Sin embargo, en estos días, es más convencional incrustar llamadas a scripts externos en el documento HTML.

Estos scripts se mantienen en una cola que su navegador web utiliza para mostrar 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 descargándolo desde 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 complejas sean las secuencias de comandos que su página web tenga que llamar desde la cola, más tiempo tardará en procesarse. A menudo, los navegadores web descargarán recursos de páginas web, como secuencias de comandos 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 memoria 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 mostrar su contenido, no es demasiado tarde para solucionarlo.

Cómo optimizar su sitio web encontrando y reparando secuencias de comandos que bloquean el renderizado

Antes de decidir qué scripts terminar u optimizar, debe evaluar la velocidad de su sitio web o página web. Puede utilizar una plataforma en línea como GTmetrix o PageSpeed ​​Insights de Google. Todo lo que deberá hacer es insertar la URL del sitio web o la página web que desea probar, y la herramienta lo calificará y proporcionará otros conocimientos.

También sugerirán auditorías que puede usar para hacer que su sitio web sea más rápido. Por ejemplo, le propondrán que use menos elementos en su página web o reduzca el CSS y JavaScript no utilizados. GTmetrix irá tan lejos como para mostrarle qué secuencias de comandos 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 son subóptimos, puede hacer algunas cosas para corregirlos. Sin embargo, estos pasos requerirán bastante habilidad de codificación para implementarlos con éxito. Al menos necesitará una comprensión básica de la programación funcional de JavaScript.

Unirse a un curso tutorial de codificación (o bootcamp) también es una buena idea para ayudar a desarrollar aún más sus habilidades. En promedio, un bootcamp de codificación puede tardar hasta quince semanas en completarse y, si bien 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 que bloquean el renderizado y aumentar la velocidad de su página web.

1. Optimiza el orden de carga

La sección de cabecera (</head></head> ) de la página web se utiliza para precargar elementos. La base de su página web debe ir aquí, de modo que una pantalla blanca no salude al usuario cuando carga su página web. Si bien el 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 según su importancia y complejidad. Debe realizar llamadas a secuencias de comandos que no son cruciales para la representación de la página web en último lugar junto con secuencias de comandos complejas que toman tiempo.

2. Minificar código

Minimizar 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 minimizar manualmente su código de secuencia de comandos con una herramienta en línea gratuita como JavaScript Minifier.

3. Utilice la carga diferida y asíncrona 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.

Puede usar el atributo asíncrono para cargar el script en paralelo con la página web y ejecutarlo tan pronto como esté disponible. Alternativamente, puede utilizar el atributo de aplazamiento para aplazar el análisis de 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 los atributos asíncrono o diferido en secuencias de comandos utilizadas para representar y mostrar elementos visuales. Los equivalentes de palabras clave de JavaScript para estos atributos son las palabras clave async y await . Puede usarlos para cargar sus Javascripts 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.

Entonces apareció CSS ​​3. Presentó nuevos colores, sombras de cuadro, opacidad, etc. JavaScript es excelente para agregar controles de interfaz de usuario complejos. Sin embargo, Javascript consume más 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 tomar el relevo donde las versiones anteriores de CSS fallaron, 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. Elimina 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 secuencias de comandos 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 menos utilizados en su página web y luego eliminarlos.

Una vez que elimine todas las funciones o etiquetas innecesarias, puede combinar secuencias de comandos cuyas funciones sean similares. Si ya sabe cómo manejar el código fuente de su página web, entonces esta no debería ser una tarea difícil para usted. Sin embargo, los usuarios que no tienen tanta experiencia o conocimiento en diseño web no deben preocuparse. WordPress le facilita la identificación de secuencias de comandos en su sitio web y su edición mediante 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 de WP. Aunque algo de experiencia ayudaría. Sin embargo, existe una gama de complementos orientados a la optimización de secuencias de comandos. Algunos de ellos usan IA para minimizar el código, cambiar el orden de carga y reemplazar scripts infrautilizados con código y scripts más eficientes.

Algunos de los mejores complementos para la optimización de secuencias de comandos incluyen:

• WP Rocket : este es uno de los complementos más populares para la optimización web. Puede detectar automáticamente qué scripts son problemáticos y corregirlos por usted. Puede usarlo para almacenamiento en caché rápido, deferencia, compresión y minificación.
• Optimización automática : esto puede diferir y eliminar secuencias de comandos no esenciales, integrar CSS en línea y minimizar secuencias de comandos, HTML e imágenes. Autoptimize es altamente personalizable a través de una API abierta y opciones avanzadas.
• W3 Total Cache : este complemento requiere un poco de trabajo para usar. Deberá rastrear 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.
• Async Javascript : un complemento de código abierto presentado por WordPress. Le permite detectar JavaScript que bloquea el renderizado y luego diferirlo o cargarlo de forma asíncrona.

Entonces, ¿por qué no 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 la minificación, la carga asíncrona y el orden de carga. Le facilitará la resolución de cualquier problema de carga en caso de que falle uno de sus scripts.