Cómo eliminar JS y CSS que bloquean la representación para mejorar la velocidad del sitio - Calendae | Informática, Electrónica, CMS, Ciberseguridad

Cómo eliminar JS y CSS que bloquean la representación para mejorar la velocidad del sitio

Hola, ¿qué tal colega?. Yo soy Samuel López y esta vez vamos a hablar sobre Cómo eliminar JS y CSS que bloquean la representación para mejorar la velocidad del sitio

Cómo eliminar JS y CSS que bloquean la representación para mejorar la velocidad del sitio

Si bien la estética de un sitio web es importante, su contenido y velocidad de carga hacen que la gente regrese. WordPress proporciona a los usuarios un complemento sofisticado y una caja de herramientas temática 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 significativamente 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 de bloqueo de renderizado y le mostraremos cómo aumentar la velocidad de carga de su sitio web de WordPress.

¿Qué son los scripts JS y CSS que bloquean la representación y por qué son maliciosos?

La mayoría de las páginas web en Internet se componen de tres componentes clave: JavaScript, CSS y lenguaje de marcado de hipertexto. HTML sirve de 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 el 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 desde el 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 utilizados por 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. Los navegadores web a menudo descargan activos de páginas web, como secuencias de comandos e imágenes, en una memoria caché local para cargar las páginas web más rápido, mientras que los usuarios del lado del cliente pueden acelerar los tiempos de visualización de las páginas web. deshabilitar JavaScript, al aumentar el tamaño de la caché y usar AdBlockers, esta no es una solución ideal. La carga debería 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 corrección de scripts de bloqueo de 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 Online como GTmetrix o PageSpeed ​​Insights de Google. Todo lo que se le pedirá que haga es ingresar la URL del sitio web o la página web que desea probar y la herramienta lo evaluará y proporcionará otras ideas.

También le sugerirán auditorías que puede utilizar para que su sitio web funcione más rápido. Por ejemplo, le ofrecerán utilizar menos elementos en su página web o reducir CSS y JavaScript no utilizados. GTmetrix le mostrará qué scripts deben optimizarse.

Alternativamente, puede usar Pestaña Cobertura de Chrome DevTools para mostrarle los datos de uso de sus scripts. Una vez que haya identificado qué scripts no son óptimos, puede hacer algunas cosas para solucionarlos. Sin embargo, estos pasos requerirán algunas habilidades de codificación para implementarlos con éxito. Necesitará al menos un conocimiento básico de la programación funcional de JavaScript.

Tomar una clase de codificación (o bootcamp) también es una buena idea para desarrollar aún más tus habilidades. En promedio, programar un bootcamp puede llevar hasta quince semanas para completar, y aunque puede parecer mucho tiempo, vale la pena si 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

Sección de la cabeza () de la página web se utiliza para precargar los 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 poner JavaScript aquí.

Una vez que se ha optimizado la sección de la cabeza, es necesario optimizar el cuerpo. La mayoría de los navegadores web muestran las páginas web de arriba a abajo. Las llamadas a los scripts deben clasificarse según 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. Minimizar código

La reducción de código implica reescribir 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 Online gratuita como JavaScript Minifier.

3. Utilice la carga de JavaScript diferida y asincrónica

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 diferir de 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.

No recomendamos utilizar el asincrónico o diferir de atributos en los scripts utilizados para representar y mostrar elementos visuales. Las palabras clave de JavaScript equivalentes a estos atributos son le asincrónico Y Esperar palabra clave. Puedes usarlos para cargue su JavaScript de forma más asincrónica sin cambiar 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 centrales y controles deslizantes.

Luego vino CSS 3. Presentaba nuevos colores, sombras de caja, opacidad, etc. JavaScript es ideal para agregar controles complejos a la interfaz de usuario. Sin embargo, Javascript es más pesado en recursos que CSS.

Por lo tanto, el uso de una cantidad excesiva de JavaScript ralentiza considerablemente su sitio web. Si nota que su página web está usando JavaScript para ponerse al día con el juego donde las versiones anteriores de CSS se aplanaron, 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 vino con nuevas etiquetas que harían inútiles algunas operaciones de CSS y JS. El uso de HTML en lugar de scripts hace que sus páginas web se carguen más rápidamente.

Entonces, la mejor manera de optimizar la velocidad de su sitio web es eliminar todos los scripts infrautilizados. Tendrás que analizar qué scripts son completamente inútiles y eliminarlos. Nuevamente, puede usar la pestaña Chrome DevTools o GTmetrix Coverage para encontrar los scripts más infrautilizados en su página web y luego eliminarlos.

Después de eliminar 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 son tan expertos o competentes en diseño web no deberían preocuparse. WordPress le permite identificar más fácilmente los scripts en su sitio web y editarlos usando varios complementos de optimización. Los cubriremos más tarde.

6. Uso de complementos para optimizar su sitio web de WordPress

Nuevamente, no se requieren conocimientos prácticos de programación para optimizar su sitio web WP. Aunque un poco de experiencia ayudaría. Sin embargo, existe una gama de complementos orientados a la optimización de scripts. Algunos de ellos usan inteligencia artificial 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 web más populares. 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.
  • Optimización automática: Esto puede diferir y eliminar scripts no esenciales, integrar CSS Online y minimizar scripts, HTML e imágenes. Autoptimize es altamente personalizable a través de una API abierta y opciones avanzadas.
  • Caché total W3: Este complemento requiere algo de trabajo para su uso. Deberá rastrear e identificar manualmente los scripts antes de eliminarlos o modificarlos. En la mayoría de los casos, este complemento ya está disponible con su paquete de WordPress.
  • Javascript asincrónico: Un complemento de código abierto presentado por WordPress. Le permite detectar la representación de bloqueo de JavaScript y luego posponerla o cargarla de forma asincrónica.

Entonces, ¿por qué no recomendamos los 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 que no sea 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 si falla uno de sus scripts.

No te olvides compartir en en tu Twitter y Facebook para que tus amigos lo consulten

??? ? ? ???

Comparte