Cómo eliminar el bloqueo de renderizado JS y CSS para mejorar la velocidad del sitio web

Aunque la estética del sitio web es importante, el contenido y la velocidad de carga harán 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 como archivos de script. Suelen estar mal optimizados. Por lo tanto, pueden ralentizar significativamente su sitio web.

Esto puede ser frustrante para los lectores. Entonces, en esta guía, veremos cómo encontrar y eliminar estos scripts que bloquean imágenes y le mostraremos cómo mejorar la velocidad de carga de su sitio de WordPress.

¿Qué son los scripts de bloqueo de imágenes JS y CSS y por qué son malos?

La mayoría de las páginas web constan de tres componentes clave: JavaScript, CSS y lenguaje de marcado de hipertexto. HTML como la principalmientras que JavaScript y CSS están integrados en él. Hoy, sin embargo, es más tradicional incrustar llamadas a scripts externos en documentos HTML.

Estos scripts se almacenan en la cola que utiliza su navegador web para mostrar páginas web. La forma más fácil de ver un script utilizado por una página web sin ver el código fuente es descargarlo desde (Ctrl + S) un navegador web. El navegador web descargará el documento HTML y la carpeta que contiene todos (o la mayoría) de los scripts, imágenes y otros archivos utilizados por la página web.

Cuanto más complejo sea el script que su página web tiene que llamar desde la cola, más tiempo tardará en mostrarse. Por lo general, los navegadores web descargan recursos de la página web, como secuencias de comandos e imágenes, en su caché local para cargar las páginas web más rápido. Y los usuarios del lado del cliente pueden acelerar el tiempo de procesamiento de la página. Deshabilitar JavaScript, aumente el tamaño del caché y use AdBlockers, que no es una solución ideal. La carga debe recaer en el desarrollador web.

Si recibe una queja o nota un problema con su sitio que muestra su contenido, no es demasiado tarde para solucionarlo.

Cómo optimizar su sitio web encontrando y corrigiendo secuencias de comandos de bloqueo de imágenes

Antes de decidir qué secuencias de comandos terminar u optimizar, debe evaluar la velocidad de su sitio web o página web. Puedes usar una plataforma en línea como GTmetrix o Speed ​​Insights de Google. Simplemente inserte la URL del sitio web o página web que desea probar y la herramienta lo evaluará y proporcionará información adicional.

También ofrecerán auditorías que puede utilizar para hacer que su sitio web sea más rápido. Por ejemplo, le recomendarán que use menos elementos en sus páginas web o que reduzca el CSS y JavaScript no utilizados. GTmetrix intentará mostrarle qué secuencias de comandos deben optimizarse.

Alternativamente, puede usar Pestaña Superposición de Chrome DevTools Le muestra los datos de uso del script. Una vez que haya determinado qué secuencias de comandos son subóptimas, hay algunas cosas que puede hacer para corregirlas. Sin embargo, estos pasos requerirán importantes habilidades de codificación para implementarlos con éxito. Necesita al menos una comprensión básica de la programación funcional con JavaScript.

Unirse a lecciones de programación (o campamentos de capacitación) también es una buena idea para ayudarlo a desarrollar aún más sus habilidades. En promedio, un campamento de capacitación de programación puede tomar hasta Quince semanas para completarAunque esto suena largo, vale la pena, dado que la alfabetización básica de código es una habilidad importante en el mundo de hoy. Sin embargo, aquí hay cinco formas de corregir los scripts de bloqueo de renderizado y mejorar la velocidad de la página web.

1. Optimiza el orden de carga

parte de la cabeza () se utiliza para precargar elementos. La base de su página web debe colocarse aquí para que cuando el usuario cargue su página web, no haya una pantalla en blanco. Aunque el CSS incorporado está bien, debe evitar colocar JavaScript aquí.

Una vez que optimizas tu cabeza, necesitas optimizar tu cuerpo. La mayoría de los navegadores web muestran las páginas web de arriba a abajo. Debe ordenar las llamadas de script en función de su importancia y complejidad. Debe recuperar guiones que no son críticos para la visualización de la última página y guiones complejos que toman tiempo.

2. Minimiza el código

Minimizar el código implica reescribirlo y eliminar caracteres innecesarios como espacios, comentarios, comas, saltos de línea y más. Esto hace que el código sea más limpio y compacto, lo que finalmente reduce el tamaño del script y aumenta el tiempo de carga de la página web.

Los complementos y herramientas como W3TC tienen módulos que minimizan JavaScript y CSS en los temas. Alternativamente, puede minimizar manualmente el código del script usando herramienta gratuita en línea como JavaScript Minifier.

3. Carga diferida y asíncrona usando 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 ralentizará el renderizado.

puedes usarlo asincrónico propiedad para cargar el script paralelo a la página web y ejecutarlo tan pronto como esté disponible. Alternativamente, puede usar pospongo atributo para programar el análisis de secuencias de comandos. 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 asincrónico o pospongo Propiedades de script utilizadas para mostrar y mostrar elementos visuales. Las palabras clave de JavaScript equivalentes para estas propiedades son asincrónico y Espere Palabras clave. Puedes usarlas para Obtenga su Javascript cargado de forma asíncrona No es necesario editar etiquetas HTML en las páginas web.

4. Reemplace elementos visuales de JavaScript con CSS3

En el pasado, CSS no era tan flexible como lo es hoy. Por ejemplo, CSS 1.0 y 2.0 no tenían herramientas de interfaz de usuario como controles básicos y controles deslizantes.

Luego vino CSS 3. Representa nuevos colores, sombras de cuadro, opacidad y más. JavaScript es excelente para agregar controles de interfaz de usuario sofisticados. Sin embargo, Javascript consume más recursos que CSS.

Por lo tanto, usar demasiado JavaScript puede ralentizar significativamente su sitio web. Si descubre que sus páginas web usan JavaScript para complementar las versiones anteriores de CSS, debe cambiarlo y reemplazar todo el JavaScript innecesario con CSS, siempre que sea posible. Esto hará que las páginas web se carguen más rápido.

5. Elimina todos los scripts innecesarios

El objetivo de JS y CSS es ampliar la funcionalidad de las páginas web y agregar lógica donde HTML no puede. Sin embargo, HTML 5.3 trae nuevas etiquetas que harán innecesarias algunas manipulaciones de CSS y JS. El uso de HTML en lugar de scripts acelerará naturalmente la carga de sus páginas.

Por lo tanto, la mejor manera de optimizar la velocidad de su sitio web es eliminar todos los scripts infrautilizados. Debe analizar qué scripts son completamente innecesarios y eliminarlos. Del mismo modo, puede usar la pestaña de cobertura de Chrome DevTools o GTmetrix para encontrar los scripts más no utilizados en sus páginas y eliminarlos.

Después de eliminar todas las funciones o etiquetas innecesarias, puede combinar secuencias de comandos con funciones similares. Si ya sabes cómo manipular el código fuente de una página web, esta no debería ser una tarea difícil para ti. Sin embargo, los usuarios sin experiencia o con conocimientos en diseño web no deben preocuparse. WordPress le facilita identificar scripts en su sitio web y editarlos con varios complementos de optimización. Los consideraremos más adelante.

6. Use complementos para optimizar su sitio de WordPress

Nuevamente, no necesita conocimientos de programación para optimizar su sitio WP. Aunque un poco de experiencia ayudará. Sin embargo, hay un conjunto de complementos optimizados para scripts. Algunos 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 de optimización de secuencias de comandos incluyen:

• cohete WP: Este es uno de los complementos de optimización web más populares. Puede detectar automáticamente qué secuencias de comandos tienen problemas y solucionarlos por usted. Puede usarlo para el almacenamiento rápido en caché, la referencia, la compresión y la minimización.
• Optimización automática: Esto retrasa y elimina scripts innecesarios, integra CSS incorporado y minimiza scripts, HTML e imágenes. Autooptimize es muy personalizable a través de API abiertas y opciones avanzadas.
• Caché total W3: Este complemento requiere algo de trabajo para usar. Debe rastrear e identificar manualmente los scripts antes de eliminarlos o editarlos. En la mayoría de los casos, su paquete de WordPress ya proporciona este complemento.
• Javascript asíncrono: un complemento de código abierto proporcionado por WordPress. Le permite detectar JavaScript que bloquea imágenes y luego ralentizarlo 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, Autooptimize cuesta $ 49 al año. Si bien esta es una tarifa razonable, puede que no sea ideal para alguien que ya paga mucho dinero por el alojamiento y otras aplicaciones y complementos.

Sin embargo, ya sea que use un complemento o busque scripts manualmente, debe comprender conceptos como la minimización, la carga asíncrona y el orden de carga. Esto le facilitará la solución de problemas de arranque si alguno de sus scripts falla.