Oct 312017
 
Artículo Apache

La herramienta “Page Speed Insights” que ofrece Google permite analizar muchos aspectos que influyen en el tiempo total de carga de una página web en el navegador del usuario.

El tiempo de carga es un factor importante porque influye directamente en la experiencia del usuario, y también es una señal que utiliza el buscador de Google para el posicionamiento de la página en la lista de resultados.

Uno de los consejos que pueden aparecer cuando se analiza una página web en PageSpeed Insights es “Eliminate Render blocking CSS”. En este artículo vamos a presentar un procedimiento para eliminar este aviso y aumentar la puntuación que PageSpeed Insights asigna a la página.

Carga no bloqueante del código CSS de la página

Un página web típica utiliza una o varias hojas de estilo CSS a las que hace referencia mediante una serie de tags “<link>” incluidos en la cabecera del código HTML. Por ejemplo:

Cuando el navegador web comienza a procesar la página, al encontrarse con estos tags realiza la descarga de los ficheros css especificados, y espera a que estén descargados antes de continuar el proceso.

Para evitar este comportamiento, se puede solicitar la carga de las hojas de estilo con un código distinto:

Como vemos, en este caso se carga la hoja de estilo con el atributo ‘rel=”preload”‘, y sólo después de cargada se cambia este atributo mediante javascript (onload=”this.rel=’stylesheet'”).

Para considerar el caso de navegadores que no soportan javascript, se añade un bloque <noscript>…</noscript> en el que se incluye también la carga “normal” de la hoja des estilo.

Con este cambio, la carga de las hojas de estilo deja de ser bloqueante, como se puede comprobar volviendo a analizar la página con Google Page Speed Insights.

El problema que se presenta al aplicar este cambio es que en este caso el navegador presenta primero el contenido de la página antes de haber aplicado ningún estilo. Después de descargar las hojas CSS, aplica los estilos y vuelve a presentar la página en pantalla, lo que provoca un efecto indeseable.

Identificación del código CSS “crítico”

Para evitar este efecto, se puede incluir “inline” en el propio código HTML de la página (entre los tags <style>…</style>), el conjunto mínimo de código CSS que permite la visualización definitiva de la parte visible de la página.

Pero identificar manualmente este código CSS es una tarea tremendamente laboriosa. Afortunadamente, existen aplicaciones que permiten automatizar este trabajo. En este artículo, vamos a utilizar la aplicación “Critical” de github (https://github.com/addyosmani/critical).

Instalación de npm

El package manager “npm” se instala como parte del paquete “nodejs”.

La manera más sencilla de obtener la versión más reciente de Node.js es añadir el PPA (personal package archive) mantenido por NodeSource.
Este repositorio contiene versiones de Node.js más actualizadas que las existentes en los repositorios oficiales de Debian.

En primer lugar, añadimos el PPA de NodeSource:

Y a continuación realizamos la instalación del paquete nodejs

Por último, comprobamos las versiones de nodejs y npm instaladas:

Instalación de critical

La aplicacion se instala con el package manager “npm”:

Ejecución de critical y obtención del código CSS crítico

Con esto, ya estamos en condiciones de analizar el contenido de una página web de nuestro site, para obtener el código CSS crítico.

En primer lugar descargamos el código html de la página, utilizando por ejemplo el comando wget:

y después realizamos el análisis:

La opción “–base /var/www” indica la ubicación del “DocumentRoot” del sitio, y es utilizada por la aplicación “critical” para obtener los ficheros auxiliares (imágenes, ficheros javascript, hojas de estilo css,…) utilizados por la página. Deberemos sustituir el valor /var/www por el que corresponda para el sitio web que está siendo analizado.

El fichero pru.critical.html generado contiene en el interior del header un bloque <style type=”text/css”>…</style> con el código CSS crítico para la visualización de la página.

Ya sólo nos queda incorporar dicho código en las páginas de nuestro site, y comprobar el resultado.

Hay que tener en cuenta que el código CSS crítico puede ser distinto para cada una de las páginas del sitio.

Referencias

 Publicado por en 5:10 pm

 Deja un comentario

(requerido)

(requerido)