Cómo eliminar los JS y CSS

Cómo eliminar los JS y CSS que bloquean el renderizado para acelerar el sitio web

Cómo eliminar los JS y CSS para mejorar la velocidad y evitar que que bloquean el renderizado

Aunque la estética de un sitio web es importante, su contenido y la velocidad de carga hacen que la gente vuelva. WordPress ofrece a los usuarios un sofisticado conjunto de plugins y temas para crear rápidamente sus propios sitios web personalizados.

Sin embargo, estos temas y plugins requieren JavaScript (JS) y hojas de estilo en cascada (CSS) para funcionar. WordPress los crea automáticamente como archivos de script. A menudo están mal optimizados. Por ello, 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 la renderización y le mostraremos cómo aumentar la velocidad de carga de su sitio web de WordPress.

¿Qué bloquea la renderización de los scripts CSS y JS y por qué son malos?

Cómo eliminar los JS y CSS

Cómo eliminar los JS y CSS
Cómo eliminar los JS y CSS

La mayoría de los sitios web de Internet están formados por tres componentes clave: JavaScript, CSS y lenguajes de marcado de hipertexto. El HTML sirve de base, con JavaScript y CSS integrados en él. Hoy en día, sin embargo, es más común incrustar llamadas a scripts externos en el documento HTML.

Estos scripts se almacenan en una cola que el navegador utiliza para mostrar la página web. La forma más fácil de ver qué scripts utiliza una página web sin mirar el código fuente es descargarlos desde el navegador web (Ctrl + S). El navegador web descargará el documento HTML junto con una 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 complejas sean las secuencias de comandos que su página web necesita llamar desde la cola, más tiempo tardará en procesarse. A menudo, los navegadores web descargan recursos de la página web, como scripts e imágenes, en una caché local para que las páginas web se carguen más rápido. Aunque los usuarios del lado del cliente pueden acelerar los tiempos de representación de las páginas web desactivando JavaScript, aumentando el tamaño de la caché y utilizando bloqueadores de anuncios, ésta no es una solución ideal. La responsabilidad debe recaer en el desarrollador de la web.

Si recibe quejas o comprueba que su sitio web tiene dificultades para reproducir sus contenidos, no es demasiado tarde para solucionarlo.

Cómo optimizar su sitio web encontrando y arreglando los scripts que se bloquean durante el procesamiento

Antes de decidir qué scripts se van a utilizar o cambiar, es necesario evaluar la velocidad de su sitio web o de su página web. Puedes utilizar una plataforma online como GTmetrix o PageSpeed Insights de Google. Todo lo que tienes que hacer es introducir la URL del sitio o página web que quieres probar y la herramienta lo evaluará y te dará más ideas.

También le sugerirán auditorías que pueden ayudarle a hacer su sitio web más rápido. Por ejemplo, sugieren utilizar menos elementos en su sitio web o reducir el CSS y el JavaScript no utilizados. GTmetrix le muestra incluso los scripts que hay que cambiar.

Ficha de cobertura de Chrome DevTools

También puedes utilizar la pestaña Cobertura de Chrome DevTools para ver los datos de uso de tus scripts. Una vez que haya identificado los guiones que no son óptimos, puede seguir algunos pasos para solucionarlos. Sin embargo, estos pasos requieren considerables conocimientos de programación para su aplicación con éxito. Necesita al menos una comprensión básica de la programación funcional de JavaScript.

Tomar un curso tutorial de codificación (o bootcamp) también es una buena idea para desarrollar tus habilidades. Por término medio, un curso de iniciación a la programación puede durar hasta quince semanas y, aunque pueda parecer mucho tiempo, merece la pena, dado que los conocimientos básicos de código son una habilidad importante en el mundo moderno. Sin embargo, aquí hay cinco maneras de arreglar las secuencias de comandos de bloqueo de la renderización y aumentar la velocidad de su sitio web.

Optimizar la secuencia de carga

La sección de cabecera ( ) de la página web se utiliza para precargar elementos. La base de su sitio web debe estar aquí para que el usuario no sea recibido con una pantalla en blanco cuando su sitio web se cargue. Aunque el CSS incrustado está bien, evita el JavaScript aquí.

Ahora que has modificado el cabecero, tienes que modificar el cuerpo. La mayoría de los navegadores muestran las páginas web de arriba a abajo. Hay que ordenar las llamadas de script por importancia y complejidad. Debe llamar a las secuencias de comandos que no son esenciales para la representación de la página web, así como a las secuencias de comandos complejas que requieren tiempo. Cómo eliminar los JS y CSS:

Minimizar el código

Minimizar el código significa reescribirlo y eliminar los caracteres innecesarios, como los espacios en blanco, los comentarios, las comas, los saltos de línea, etc. Esto hace que el código sea más conciso y compacto, lo que en última instancia reduce el tamaño del script y aumenta los tiempos de carga de su página web. 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 su página web.

Los plugins y herramientas como W3TC tienen módulos que minimizan JavaScript y CSS en sus temas. Como alternativa, puede minificar manualmente el código de su script con una herramienta online gratuita como JavaScript Minifier.

Utilizar la carga lenta y asíncrona de JavaScript

Los navegadores web leen el código de arriba a abajo. Cuando encuentran una etiqueta de script, dejan de cargar la página web y leen el archivo de script. Esto ralentiza el renderizado.

Puedes utilizar el atributo async para cargar el script en paralelo con la página web y ejecutarlo en cuanto esté disponible. También puede utilizar el atributo Defer para aplazar el análisis del script. Esto significa que también cargará el script en paralelo con la página web, pero sólo lo ejecutará cuando el navegador analice la página web.

Se recomienda no utilizar atributos asíncronos o diferidos en los scripts utilizados para renderizar y mostrar los visuales. Las palabras clave de JavaScript equivalentes a estos atributos son las palabras clave async y wait. Puede utilizarlos para cargar su JavaScript de forma más asíncrona sin cambiar las etiquetas HTML de su página web.

Sustituir los visuales de JavaScript por CSS3

En el pasado, el CSS no era tan versátil como ahora. Por ejemplo, las versiones CSS 1.0 y 2.0 carecían de herramientas de interfaz de usuario, como controles básicos y deslizadores.

Entonces llegó el CSS 3. Presentaba nuevos colores, sombras de caja, opacidad, etc. JavaScript es ideal para añadir 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 observa que su página web utiliza JavaScript para compensar el fallo de las versiones anteriores de CSS, debería modificarla y sustituir cualquier JavaScript innecesario por CSS, si es posible. Esto permitirá que las páginas web se carguen más rápido.

Eliminar todos los scripts innecesarios

El propósito de JS y CSS es ampliar la funcionalidad de las páginas web y añadir lógica donde el HTML no puede. Sin embargo, HTML 5.3 incluye nuevas etiquetas que hacen innecesarias algunas operaciones de CSS y JS. El uso de HTML en lugar de scripts hará 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. Hay que analizar qué scripts son totalmente innecesarios y eliminarlos. De nuevo, puedes utilizar la pestaña Cobertura de Chrome DevTools o GTmetrix para encontrar los scripts menos utilizados en tu sitio web y eliminarlos.

Después de eliminar las funciones o etiquetas innecesarias, puede combinar scripts cuyas funciones sean similares. Si ya sabe cómo manipular el código fuente de su sitio web, esto 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 la identificación de los scripts de su sitio web y su edición con varios plugins de optimización. Los cubriremos a continuación.

Utilizar plugins para optimizar su sitio web de WordPress.

Una vez más, no necesitas ningún conocimiento práctico de programación para optimizar tu sitio web de WP. Aunque algo de experiencia sería útil. Sin embargo, hay una serie de plugins orientados a la optimización de los scripts. Algunos de ellos utilizan la IA para minimizar el código, cambiar el orden de carga y sustituir los scripts infrautilizados por otros más eficientes.

Cómo eliminar los JS y CSS

Algunos de los mejores plugins para la optimización de scripts son:

  • WP Rocket – Este es uno de los plugins más populares para la optimización web. Puede detectar automáticamente qué scripts son problemáticos y arreglarlos por ti. Puede utilizarlo para el almacenamiento rápido en caché, la deferencia, la compresión y la minimización.
  • Optimización automática: puede aplazar y eliminar las secuencias de comandos no esenciales, incrustar CSS en línea y minimizar las secuencias de comandos, el HTML y las imágenes. Autoptimize es altamente personalizable a través de una API abierta y opciones avanzadas.
  • W3 Total Cache – Este plugin requiere un poco de trabajo. Es necesario rastrear e identificar manualmente los scripts antes de eliminarlos o editarlos. En la mayoría de los casos, este plugin ya está disponible con su paquete de WordPress.
  • Async Javascript – Un plugin de código abierto para WordPress. Permite detectar la renderización que bloquea JavaScript y luego moverla o cargarla de forma asíncrona.

¿Por qué no recomendamos los plugins en primer lugar? Lamentablemente, algunos de estos complementos le costarán. Autoptimize, por ejemplo, cuesta 49 dólares al año. Aunque es una tarifa razonable, puede no ser ideal para las personas que ya pagan mucho dinero por el alojamiento y otras aplicaciones y plugins.

Cómo eliminar los JS y CSS

Sin embargo, tanto si se utilizan plugins como si se buscan manualmente los scripts, es necesario entender conceptos como la minimización, la carga asíncrona y el orden de carga. Le facilita la solución de los problemas de carga si uno de sus scripts falla. Cómo eliminar los JS y CSS

En Estrategia Creativa tenemos toda la información que necesitas sobre el mundo de digital y en especial para tus emprendimiento Si quieres seguir leyendo información útil  ¡echa un vistazo a nuestros artículos!  Guía fragmentos destacados Google

Nuestra puntuación
Etiquetas: , , , , , , ,

Deja una respuesta