Por qué y cómo eliminar fácilmente los recursos que bloquean el renderizado

Por que y como eliminar facilmente los recursos que bloquean

En los primeros días de la web, las primeras páginas web se crearon en una versión simplificada de XML llamada HTML. Blanco con texto negro. Si veía una oración con un subrayado azul, sabía que podía hacer clic en ella. Si era morado, sabías que ya habías hecho clic.

La vida era sencilla.

Actualmente, HTML suele ser la parte más pequeña de cualquier página web. Cuando un navegador solicita una página, obtiene el HTML, pero tiene que separarlo y descargar los recursos.

  • CSS
  • JavaScript
  • Imágenes
  • Orígenes
  • …y otros archivos externos necesarios para proporcionar la experiencia del usuario

No todas las características son iguales. Algunos recursos que deben cargarse pueden ralentizar la visualización de la página web. Estas funciones se denominan "Funciones de bloqueo de procesamiento" y este artículo le mostrará algunas tácticas que puede usar para reducir la cantidad de funciones de bloqueo de procesamiento en su sitio y cómo aplicarlas manualmente o usando el complemento SiteGround Optimizer.

Índice

    ¿Qué significa eliminar las funciones de bloqueo de procesamiento?

    Representación es el término técnico para "pantalla". En este artículo, cada vez que hablamos de representación, nos referimos al proceso de mostrar su sitio web en una pantalla.

    Con eso en mente, el bloqueo de procesamiento es cualquier cosa que detenga o ralentice este proceso.

    Al principio, todo se cargaba en el orden en que estaba codificado en HTML. Si su encabezado tenía 5 etiquetas de JavaScript que debían cargarse, compilarse y ejecutarse antes el encabezado está completo, pueden ralentizar su sitio. Es por eso que comenzamos a colocar etiquetas de JavaScript en el pie de página para que no bloqueen la visualización de la página.

    Tipos de recursos de bloqueo de procesamiento

    Cada recurso cargado en su sitio tiene el potencial de ser un recurso de bloqueo de procesamiento.

    • Si una imagen es grande y lenta para cargar, es potencialmente un recurso que bloquea el renderizado.
    • Si JavaScript tiene que ejecutarse en de su página, por lo que es potencialmente una función de bloqueo de procesamiento.
    • Si el CSS es grande y su página no se puede mostrar hasta que esté completamente cargada, entonces es potencialmente una característica de bloqueo de procesamiento.
    • Si carga algún recurso de otro sitio y ese sitio es más lento que el suyo, ese recurso es potencialmente un recurso que bloquea el procesamiento.
    • Si tiene muchos complementos y cada uno tiene sus propios archivos CSS y JavaScript, estos son recursos potencialmente bloqueadores de procesamiento.

    En resumen, cualquier cosa que tenga en su HTML para cargar es potencialmente una función de bloqueo de procesamiento.

    ¿Cómo puedo probar si mi sitio tiene funciones de bloqueo de visualización?

    Hay muchas herramientas en la web para mostrarle cómo se carga su sitio. Mis favoritos son estos dos:

    Opción “Inspeccionar elemento” del navegador:

    Prefiero una herramienta que me muestre una pantalla de "cascada" de cómo se cargó mi página. Todos los navegadores modernos mostrarán una versión básica de una pantalla en cascada. Simplemente haga clic derecho en una página web, haga clic en "Inspeccionar" y busque la pestaña "Red".

    Una vez hecho esto, recarga la página. Debería ver algo como esto:

    El lado derecho de la imagen de arriba muestra la pestaña "Red". Las pequeñas barras en el extremo derecho son la pantalla "Cascada". Me dicen cuánto tiempo se tarda en cargar un determinado recurso. La delgada línea azul en la página me indica cuándo comenzó a mostrarse la página. Muchos de mis recursos en esta página se cargan antes de que se cargue la página, y eso probablemente no sea algo bueno. Esto significa que en esta página en particular, puedo tener algo de margen de mejora.

    Esta vista previa es excelente cuando solo está haciendo pequeños cambios, pero en realidad todo lo que dice es qué tan rápido se cargan las cosas en su computadora. Puede que no sea una métrica real. Por ejemplo, si hago todo mi desarrollo localmente, la rapidez con la que se cargan las cosas en mi navegador desde un servidor que se ejecuta en la misma computadora no me dice mucho.

    Es por eso que cuando me tomo en serio medir cosas, uso herramientas en línea como https://www.webpagetest.org/

    Prueba de página web:

    Si vas a WebPageTest e ingresas tu URL, tendrás una visión mucho mejor de la realidad. Además, puede jugar con la configuración para obtener la prueba exacta que desea.

    La mayoría de las veces te recomiendo que hagas lo mismo que yo:

    • Prueba el escritorio primero
    • Seleccione un servidor que no esté cerca de donde está alojado su sitio
    • Seleccione Chrome a menos que necesite específicamente otro navegador
    • Puede ajustar la configuración en “Configuración avanzada“.
    Herramienta WebpageTest para eliminar las funciones de bloqueo de procesamiento

    Luego haga clic en "Iniciar evaluación".

    Resultados de WebPageTest para eliminar las funciones de bloqueo de visualización

    Ahora, tendrás una pantalla en cascada mucho más útil. Es un poco pequeño, así que haz clic en él y te llevará a una versión más grande. Una de las cosas que le mostrará es una lista de recursos que bloquean el renderizado.

    Visualización en cascada de WebPageTest para eliminar las funciones de bloqueo de procesamiento

    En este caso, tengo 32 recursos de bloqueo de procesamiento. Casi todos son archivos CSS, los últimos son archivos JavaScript.

    Los archivos JavaScript son fáciles de entender, pero ¿por qué los archivos CSS bloquean el renderizado? La página no se puede mostrar hasta que sepa todo el CSS necesario para mostrar lo que está en la pantalla. Entonces, si su sitio está cargando muchos archivos CSS y cerca del final de la lista hay una regla CSS utilizada para mostrar el primer elemento de la página, su página tendrá que esperar hasta que se cargue esa regla antes de que el navegador pueda continuar " pintar la pantalla". Así es como CSS puede ser un recurso de bloqueo de renderizado.

    Cómo eliminar las funciones de bloqueo de procesamiento

    A lo largo de los años, las técnicas para reducir o eliminar las funciones que bloquean el renderizado han variado. Algunas de estas técnicas funcionan.

    Cómo eliminar JavaScript que bloquea el renderizado

    Para evitar que una etiqueta de JavaScript sea un recurso que bloquee el renderizado, ahora puede usar los atributos DEFER o ASYNC.

    • DEFER le dice al navegador que descargue archivos a medida que se procesa la página y ejecuta los archivos en orden secuencial después de que se procesa la página.
    • ASYNC le dice al navegador que descargue archivos a medida que se procesa la página y que los ejecute tan pronto como estén disponibles.

    El mejor de estos dos es DEFER si es posible. De esta manera, la pantalla puede terminar de mostrarse y luego se puede ejecutar el JavaScript. Como puede ver en el ejemplo anterior, pospongo la carga de jQuery hasta que la página esté lista. Luego, una vez cargado, se ejecutará. Dado que jQuery es una biblioteca grande, diferirla ayudará con la carga a menos que mi página tenga algo que requiera jQuery.

    Cómo eliminar el CSS que bloquea el renderizado

    CSS es un poco complicado de organizar. Cuando el navegador ve un elemento CSS en el código, necesita hacer referencia a las reglas que ha cargado hasta el momento y ver si tiene esa regla. Si aún no ha cargado esta regla, debe pausar el procesamiento hasta que se cargue la regla.

    Google acuñó el término “CSS crítico”. El CSS crítico es el CSS al que se hace referencia en la parte de la página que puede ver cuando se muestra la página. Por ejemplo, si tiene un pie de página con una regla de CSS que lo diseña, si ese pie de página no está visible hasta que el espectador se desplaza hacia abajo en la página, entonces esa regla de CSS no es crítica.

    Google recomienda extraiga todo el CSS crítico e insértelo en HTML. Esto hace que CSS ya no sea un recurso de bloqueo de procesamiento porque el navegador tiene todo el CSS que es absolutamente necesario para mostrar la parte visible de la página.

    Esto es complicado porque significa que tienes que mirar todo tu CSS y extraer partes. La mejor manera es utilizar la herramienta de cobertura de Google Chrome. Mostrará el CSS que está cargando que es no crítico (barra roja) y crítico (barra verde).

    Herramienta de cobertura de Chrome para eliminar el CSS de bloqueo de procesamiento

    Al extraer el CSS crítico y ponerlo en línea, puede eliminar el CSS como un recurso que bloquea el renderizado.

    Esto suena fácil, pero en realidad refactorizar CSS de esta manera puede ser muy difícil ya que es una técnica avanzada.

    Te puede Interesar  Técnicas de seguridad en la internet para evitar ataques cibernéticos

    Artículos Relacionados

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.

    Subir

    Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo. Más Información