Repare Google PageSpeed ​​Elimine el JavaScript que bloquea la visualización y el CSS en el contenido de la mitad superior de la página

Resolver el bloqueo de renderizado Javascript y CSS

La prueba de  Google PageSpeed   ​​[1] Elimina el JavaScript que bloquea la visualización y el CSS en el contenido de la mitad superior de la página le propone que entregue los archivos JS y CSS de su sitio después de que el HTML esté completamente cargado y, por lo tanto, no pause su carga HTML para descargarlos

Definición de secuencia de comandos de bloqueo de procesamiento: secuencias de comandos que se cargan antes de que se haya analizado el DOM HTML completo. Por ejemplo, scripts incluidos en el encabezado o dentro del contenido, sin ninguna instrucción específica para que los navegadores retrasen la carga del script hasta después de la pintura HTML.

Elimine JavaScript y CSS que bloquean la representación en el contenido de la mitad superior de la página: muestre cómo solucionarlo

1. Tenga un sistema externo que optimice su sitio web para usted
   
2. Utilice una CDN que realice todas las optimizaciones posibles en su nombre, incluidas las tres siguientes optimizaciones necesarias para corregir la eliminación de los recursos de bloqueo de procesamiento:
   
3. Aplazar la carga de archivos Javascript
   
4. Cargar CSS después de cargar HTML
   
5. Utilice un complemento de WordPress
   

Hay muchas optimizaciones necesarias para corregir la eliminación de los recursos de bloqueo de procesamiento y puede ser tedioso implementarlas usted mismo; además, tendrá que buscar constantemente nuevas pruebas incluidas en Chrome LightHouse y Google PageSpeed, entre otras pruebas de velocidad de página.

No existe una solución para eliminar los recursos que bloquean la representación en el código htaccess, ya que el problema está relacionado con DOM, es decir, el contenido del sitio web y el orden en el que se cargan los recursos incluidos, como Javascript y CSS, pero no solo. Estos no se pueden activar en Htaccess, sino solo en el contenido DOM de HTML.

Si resuelve estos problemas para el escritorio, al mismo tiempo eliminará los recursos de bloqueo de procesamiento para dispositivos móviles, ¡ya que ambos son exactamente iguales!

Did you know that you can even have all these steps executed automatically for you by using an external  Acelerador de velocidad del sitio   technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

Aplazar carga de archivos Javascript

Para posponer la carga de sus archivos JS [2], puede agregar la instrucción async o diferir a sus enlaces de scripts. Async no garantiza que se carguen en la misma secuencia; por lo tanto, si tiene varios scripts que deben ejecutarse uno tras otro, es preferible diferir para garantizar la secuencia:

Cargar CSS después de cargar HTML

Para que el CSS se cargue después de que se transmita el HTML completo, Google propone [3] este fragmento de código para agregar al final de su HTML, por ejemplo, después de la etiqueta de cierre del pie de página y antes de la etiqueta de cierre del cuerpo:

Para optimizar su sitio web, también es una buena idea eliminar el código CSS no utilizado, una operación que puede ser tediosa si no tiene conocimiento en el diseño web. Si no ha creado su tema de su sitio web usted mismo, podría ser más sabio usar un sistema externo para eliminar el código CSS no utilizado en sus páginas en su nombre, como el salto ezoico, por ejemplo, la nueva versión (y totalmente gratuita) de su increíble sitio Acelerador de velocidad.

¡Pase la prueba de velocidad del sitio de Google!

Esto me permitió aprobar la prueba de  Google PageSpeed   ​​[1] Eliminar el JavaScript que bloquea la visualización y el CSS en el contenido de la mitad superior de la página (junto con Leverage browser caching [4]) en un sitio web, subiendo desde una puntuación de 51 en el móvil ( Fig 1) a 72 (Fig 2), y desde 59 (Fig 3) a 79 en el escritorio (Fig 4).

Cómo eliminar los recursos de bloqueo de render en WordPress

Para eliminar los recursos de bloqueo de procesamiento en WordPress, es necesario instalar un complemento como JetPack.

Luego, vaya a las opciones, para las cuales debe ser administrador, y vaya a las opciones de JetPack> Escritura> Rendimiento y velocidad> marque Habilitar el acelerador del sitio, acelere los tiempos de carga de imágenes, acelere los tiempos de carga de archivos estáticos y habilite la carga lenta para imagenes

Creación del sitio web maestro: ¡Inscríbase ahora!

Transforme su presencia digital con nuestro curso integral de creación de sitios web: ¡comience su viaje para convertirse en un experto web hoy!

Inscribirse aquí

Esto eliminará los recursos de bloqueo de procesamiento en WordPress y cargará las páginas más rápido al permitir que JetPack optimice sus imágenes y sirva sus imágenes y archivos estáticos (como CSS y JavaScript) desde su red global de servidores.

Además, no se olvide de posponer la carga de imágenes fuera de pantalla usando una función de carga perezosa. Si bien solía ser difícil y requiere una biblioteca externa para posponer la carga de imágenes fuera de la pantalla, ¡ahora es posible de forma nativa en HTML5!

Para implementar la carga perezosa de las imágenes en sus sitios web, simplemente agregue los valores perezosos a la carga de los atributos de las imágenes de su sitio web, y los navegadores recientes entenderán que estas imágenes solo deben solicitarse y cargarse si se muestran, lo que significa que el usuario se desplaza hacia abajo Los marcadores de posición de la imagen.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>

Además de eso, la carga perezosa también funciona con iFrames, y es una implementación importante para eliminar los recursos de bloqueo de procesos de sus páginas web.

Una vez que los recursos de bloqueo de la representación tendrán instrucciones para cargar después del contenido principal, lo que significa que el HTML DOM, ya obtendrá muchos puntos en la prueba de Google Fighthouse, la prueba de Page Speed ​​Insights, o los vitales web de Google Core.

Haga que un sistema externo optimice su sitio web por usted

¿Sabe que podría resolver todos los problemas de  Google PageSpeed   ​​en su nombre, sin mucho esfuerzo de su sitio, excepto registrarse para una prueba gratuita y cambiar su DNS?

Usando la tecnología del  Acelerador de velocidad del sitio   de la plataforma Ezoic, todos los problemas habituales de  Google PageSpeed   ​​serán resueltos por su sistema, que será el intermediario entre su sitio web y los visitantes. Ellos optimizarán la página web para usted antes de mostrarla a su visitante.

Conviértase en verde simplemente registrándose para una prueba gratuita en la plataforma Ezoic y pruébelo usted mismo: harán que su sitio web alcance los más altos estándares de optimización de la velocidad de la página en unos pocos días: renderice imágenes webp de próxima generación, optimice CSS y JavaScript eliminando CSS no utilizado y JS, imágenes de carga diferida, cambiar el tamaño de las imágenes, almacenar en caché las páginas de su sitio, optimizar las fuentes, conectarse previamente a todos los sitios incluidos y mucho más.

No se requiere tarjeta de crédito, todo lo que tiene que hacer es registrarse de forma gratuita y probarlo. Además, si su sitio web está ganando dinero con los anuncios gráficos, además de hacer que su sitio web sea mucho más rápido, también pueden hacer que gane varias veces más dinero que con Google AdSense al optimizar sus anuncios con aprendizaje automático e inteligencia artificial avanzada.

Preguntas Frecuentes

¿Cómo eliminar JavaScript y CSS de bloqueo de renderizado en el contenido superior?

Para eliminar JavaScript y CSS de bloqueo de renderizado para el contenido anterior, debe asegurarse de que los archivos JS y CSS de su sitio se carguen después de que el HTML esté completamente cargado. Esto significa no detener el proceso de carga HTML para descargar estos archivos. Puede diferir los archivos JavaScript con el atributo async o diferir, y para CSS, puede usar un código específico para cargarlo después del HTML. Un sistema de optimización externo como Ezoic también puede manejar esto automáticamente.

¿Cómo pueden los desarrolladores web abordar la recomendación de Google PageSpeed ​​para eliminar JavaScript y CSS de bloqueo de renderizado?

Los desarrolladores web pueden optimizar su sitio minificando los archivos JavaScript y CSS, utilizando la carga asíncrona para JavaScript, en la incrustación de CSS críticos directamente en el HTML y diferiendo la carga de CSS no críticos y archivos JavaScript. La implementación de estas estrategias puede mejorar significativamente los tiempos de carga y los puntajes de PageSpeed.

Puntuación perfecta del faro de Chrome: ¿Qué pasa?