Mejora la puntuación en PageSpeed Insights.

Cómo eliminar el JavaScript que bloquea la visualización del contenido de la mitad superior de la página.

Un error bastante común al analizar nuestros sitios con PageSpeed Insights el siguiente:

“Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página”

PageSpeed Insights mide el rendimiento de las páginas para dispositivos móviles y para ordenadores. Obtiene la URL dos veces, una vez con un agente de usuario para móviles, y otra con un agente de usuario para ordenadores. La puntuación de PageSpeed va de 0 a 100 puntos. Cuanto más alta sea la puntuación, mejor.

Google PageSpeed InsightsPara solucionar este problema los archivos JS deben cargarse en el footer, justo antes del cierre de la etiqueta </body>.

Cuando un navegador carga una página web, los recursos JavaScript y CSS normalmente impiden que se muestre la página web hasta que se descarguen y procesen por el navegador. Algunos recursos deben ser descargados y procesados antes de mostrar cualquier elemento. Para obtener la experiencia más rápida posible para nuestros usuarios, es necesario cargar los scripts al final del documento, justo antes del cierre.
Para esto deberemos cargar los ficheros JS de la siguiente forma:

Si estamos utilizando plugins que cargan archivos JS en el head debemos añadir una función más para mover los scripts del head al footer de nuestro sitio:

 

Atributo ‘defer’
Defer se usa para evitar que los scripts bloqueen la presentación del resto de nuestra página. Indica que el script se ejecute cuando la página ha terminado de analizar todo su código.
Para esto añadimos el siguiente fragmento de código en nuestro archivo functions.php:

Posted in: Diseño Web, Wordpress

Comentarios

Sé el primero en comentar

Deja un comentario


Puede utilizar estas etiquetas y atributosHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*


*

Efecto Magenta - Diseño Web
© Efecto Magenta 2017
Síguenos