Cómo eliminar JS y CSS que impiden la renderización para aumentar la velocidad del sitio

Aunque la belleza de un sitio web es importante, su contenido y velocidad de carga harán que la gente lo vuelva a visitar. 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. Por lo general, no están bien optimizados. Por lo tanto, reducirán significativamente la velocidad de su sitio web.

Esto puede decepcionar al lector. Por lo tanto, en esta guía, exploraremos cómo encontrar y eliminar estos scripts de bloqueo de imágenes y le mostraremos cómo mejorar la velocidad de carga de su sitio web de WordPress.

¿Qué son los scripts CSS y JS que impiden el renderizado 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 sirve como base, y JavaScript y CSS están integrados en él. Sin embargo, hoy en día es más tradicional incrustar llamadas de script externas en documentos HTML.

Estos scripts se almacenan en la cola que utiliza el navegador web 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 descargarlo desde un navegador web (Ctrl + S). El navegador web descargará carpetas y documentos HTML que contienen 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 al que su página necesita llamar desde la cola, más tardará en procesarse. En muchos casos, los navegadores web descargan recursos web (como scripts e imágenes) en el caché local para cargar las páginas web más rápido. Aunque los usuarios del cliente pueden acelerar el tiempo de renderizado de la página deshabilitando JavaScript, aumentando el tamaño de la caché y usando AdBlockers, esta no es una solución ideal. La responsabilidad debe ser asumida por el desarrollador web.

Si recibe una queja o un aviso de que su sitio web tiene problemas para copiar su contenido, no es demasiado tarde para solucionarlo.

Cómo optimizar su sitio web mediante la búsqueda y corrección de scripts de procesamiento de bloques

Antes de decidir qué scripts completar u optimizar, debe evaluar la velocidad de su sitio web o página web. Puede utilizar plataformas en línea como GTmetrix o Google PageSpeed ​​â ???? yo ???? Perspectivas. Todo lo que tiene que hacer es ingresar la URL del sitio web o página web que desea probar, y la herramienta lo evaluará y proporcionará información adicional.

También le ofrecerán reseñas que puede utilizar para acelerar su sitio. Por ejemplo, le recomendarán que utilice menos elementos en su página web o reduzca CSS y JavaScript no utilizados. GTmetrix incluso le mostrará qué scripts deben optimizarse.

Alternativamente, puede usar la pestaña Cobertura de Chrome DevTools para mostrarle cómo usar el script. Una vez que haya determinado qué scripts no son óptimos, puede hacer algo para solucionarlos. Sin embargo, estos pasos requieren importantes habilidades de codificación para implementarse con éxito. Necesita al menos un conocimiento básico de la programación funcional de JavaScript.

Participar en una lección de codificación (o bootcamp) también es una buena idea para ayudarlo a desarrollar sus habilidades. En promedio, la capacitación en codificación puede demorar hasta 15 semanas. Si bien esto puede parecer mucho tiempo, vale la pena, dado que la alfabetización básica en codificación es una habilidad importante en el mundo actual. Sin embargo, aquí hay cinco formas de modificar los scripts de bloqueo de imágenes y mejorar la velocidad de la página web.

1. Optimiza el orden de carga

parte principal () Se utiliza para precargar el proyecto. La base de su página web debe colocarse aquí para que cuando el usuario cargue su página web, la pantalla en blanco no salude al usuario. Aunque el CSS incorporado es excelente, debe evitar poner JavaScript aquí.

Después de optimizar la parte de la cabeza, es necesario optimizar el cuerpo. La mayoría de los navegadores web muestran las páginas web de arriba a abajo. Debe clasificar las llamadas de script de acuerdo con su importancia y complejidad. Necesita llamar scripts que no son importantes para la representación final de la página web y scripts complejos que llevan tiempo.

2. Minimiza el código

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

Los complementos y herramientas como W3TC pueden minimizar JavaScript y CSS en el tema. Alternativamente, puede usar gratis herramientas en línea como JavaScript Minifier para minimizar manualmente el código de secuencia de comandos.

3. Utilice JavaScript para una carga lenta y asincrónica.

El navegador web lee el código de arriba a abajo. Cuando encuentren la etiqueta de secuencia de comandos, dejarán de cargar la página web y leerán el archivo de secuencia de comandos. Esto ralentizará la velocidad de renderizado.

puedes usarlo asincrónico Propiedades para cargar el script en paralelo con la página web e iniciarlo tan pronto como esté disponible. O puede usar Yo pospongo Script para resolución de atributo retrasada. Esto significa que también cargará el script en paralelo con la página web, pero solo lo ejecutará cuando el navegador analice la página web.

Le recomendamos que no utilice asincrónico Esta Yo pospongo Atributos en los scripts utilizados para mostrar y mostrar efectos visuales. Las palabras clave de JavaScript equivalentes a estos atributos son asincrónico sí Previsto Palabras clave. Puede usarlos para cargar JavaScript de forma más asincrónica sin editar el marcado HTML en la página web.

4. Reemplaza los efectos 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 carecen de herramientas de interfaz de usuario como controles básicos y controles deslizantes.

Luego está CSS â ???? yo ???? 3. Hay nuevos colores, sombras de caja, opacidad, etc. JavaScript es ideal 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 nota que su página web utiliza JavaScript para compensar el error de la versión anterior de CSS, debe modificarlo y reemplazar todo el JavaScript innecesario con CSS tanto como sea posible. Esto acelerará la carga de la página.

5. Elimine todos los scripts innecesarios

El propósito de JS y CSS es ampliar la funcionalidad de las páginas web y agregar lógica que no se puede lograr con HTML. Sin embargo, HTML 5.3 viene con nuevas etiquetas que harán innecesarias algunas operaciones de CSS y JS. El uso de HTML en lugar de scripts puede acelerar la carga de sus páginas web.

Por lo tanto, la mejor manera de optimizar la velocidad del sitio web es eliminar todos los scripts infrautilizados. Debe analizar qué scripts son completamente innecesarios y eliminarlos. Del mismo modo, puede utilizar Chrome DevTools o la pestaña Cobertura de GTmetrix para encontrar el script menos utilizado en la página web y eliminarlo.

Después de eliminar cualquier característica o etiqueta innecesaria, puede combinar scripts con características similares. Si ya sabe cómo manipular el código fuente de una página web, esto no debería ser una tarea difícil para usted. Sin embargo, los usuarios que no tengan tanta experiencia o conocimientos en diseño web no deben preocuparse. WordPress le permite identificar fácilmente los scripts en su sitio web y editarlos con varios complementos optimizados. Los presentaremos a continuación.

6. Utilice complementos para optimizar su sitio de WordPress

Del mismo modo, no necesita conocimientos prácticos de programación para optimizar su sitio web WP. Aunque un poco de experiencia ayudará. Sin embargo, hay varios complementos optimizados para scripts. Algunos 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 de optimización de scripts incluyen:

• Cohete wp: Este es uno de los complementos de optimización de páginas web más populares. Puede detectar automáticamente qué scripts tienen problemas y solucionarlos por usted. Puede usarlo para almacenamiento en caché, emparejamiento, compresión y reducción rápidos.
• Optimizador automático: Esto puede aplazar y eliminar scripts innecesarios, incrustar CSS incrustado y minimizar scripts, HTML e imágenes. Autooptimize se puede personalizar en gran medida a través de API abiertas y opciones avanzadas.
• Caché total W3: Este complemento requiere algo de trabajo para su uso. Antes de eliminar o editar la secuencia de comandos, debe rastrear e identificar manualmente la secuencia de comandos. En la mayoría de los casos, este complemento ya se proporciona con su paquete de WordPress.
• JavaScript como ncrono: un complemento de código abierto que incluye WordPress. Le permite detectar JavaScript que impide el procesamiento y luego ralentizarlo o cargarlo de forma asincrónica.

Entonces, ¿por qué no recomendamos complementos en primer lugar? Desafortunadamente, algunos de estos suplementos le costarán. Por ejemplo, Autooptimize cuesta $ 49 al año. Si bien esta es una tarifa razonable, puede que no sea ideal para las personas que ya han pagado mucho por el alojamiento y otras aplicaciones y complementos.

Ya sea que utilice complementos o busque scripts manualmente, debe comprender conceptos como minimización, carga asincrónica y secuencia de carga. Si uno de sus scripts falla, le resultará más fácil resolver el problema de carga.