Mar 242015
 
Artículo Administración de Servidores

En artículos anteriores hemos resaltado la importancia de reducir el tiempo que tarda en cargarse completamente una página web en el navegador del usuario. Por una parte, la impresión de los usuarios es mucho más favorable si el contenido de la página aparece rápidamente en pantalla. Pero además, el tiempo total de carga de la página es un factor que los principales motores de búsqueda, incluido Google, tienen en cuenta en sus algoritmos de posicionamiento.

A menudo, lo que más influye en el tiempo total de carga de una página es la descarga y el procesamiento recursos externos. De entre ellos, las librerías javascript y las hojas de estilo CSS utilizadas por la página tienen con frecuencia un impacto considerable.

En nuestro anterior artículo sobre “Cómo reducir el tiempo de carga de una página web con javascript asíncrono” ya hemos explicado la manera de realizar la carga del código javascript externo de manera que no bloquee la presentación de la página.

En este artículo veremos las opciones existentes para cargar del mismo modo las reglas de estilo CSS contenidas en un recurso externo.

Análisis del tiempo de carga de una página

Hay muchas herramientas que permiten analizar la contribución de cada uno de los elementos que componen una página web al tiempo total de carga de la misma. De entre ellas, Google Pagespeed Insights resulta especialmente interesante, al ser la herramienta que el principal motor de búsqueda de internet poner a disposición de los webmasters.

Comenzamos por analizar la página home del sitio que queremos optimizar, http://deutschland-strasse.openalfa.com, para ver la situación de partida:

render-blocking-css-1

Como vemos, la puntuación (94/100) que obtiene la página para equipos de sobremesa ya es bastante buena, tras haber aplicado el procedimiento que se explica en nuestro anterior artículo para eliminar el cuello de botella que supone la carga de recursos javascript externos. Pero el análisis todavía indica que existen recursos bloqueantes. Si pulsamos sobre el enlace “Show how to fix” que hay debajo, comprobamos que la hoja de estilo utilizada por la página es la responsable de esto:

render-blocking-css-2

Por lo tanto, la optimización de la página se conseguirá mediante la carga asíncrona de esta hoja de estilo. Pero para la carga de hojas de estilo externas, no existen los atributos “defer” o “async”, como en el caso de la carga de recursos javascript externos. Afortunadamente, hay otras formas de conseguir nuestro objetivo, como veremos a continuación

Descargar LoadCSS

Para  realizar la descarga asíncrona de las hojas de estilo CSS vamos a utilizar un pequeño script disponible en github llamado “loadCSS”.

Accediendo a la página de descarga de LoadCSS en github, descargamos el fichero loadCSS-master.zip, y extraemos su contenido.

El fichero principal loadCSS.js es un pequeño script que contiene la definición de la función loadCSS().

Sustituir las referencias a recursos CSS por llamadas a loadCSS

Examinando el código HTML de la página que queremos optimizar, podemos encontrar en la sección <head> las referencias a los recursos CSS externos que utiliza. Por ejemplo:

<html>
<head>
...
<link rel='stylesheet' id='theme-css' href='/merged.min.css?ver=4.4.7' type='text/css' media='all' />
<link rel='stylesheet' id='jetpack_css-css'
          href='/wp-content/plugins/jetpack/css/jetpack.css?ver=3.3.2' type='text/css' media='all' />
...
</head>

Para realizar la carga asíncrona de las hojas de estilo, comenzamos por eliminar lasa referencias que hayamos encontrado a recursos CSS externos.

A continuación, insertamos en la sección <head> un bloque de código javascript, en el que copiamos la definición de la función loadCSS:

<script>
function loadCSS( href, before, media, callback ){
...
}

y finalizamos el bloque de código añadiendo una llamada a loadCSS para cada una de las referencias que hemos eliminado a las hojas de estilo utilizadas por la página:

loadCSS('/merged.min.css');
loadCSS('/wp-content/plugins/jetpack/css/jetpack.css');
</script>

A continuación, probamos a cargar de nuevo la página en el navegador. Normalmente, el contenido de la página aparece brevemente sin ningún estilo aplicado, indicando que se ha realizado la carga sin esperar a que finalice la carga de las hojas de estilo. Al cabo de unos instantes, una vez descargadas, se aplican las reglas de estilo y la página aparece con el aspecto que tenía originalmente.

Cómo evitar la presentación momentánea del contenido sin estilo

Si queremos evitar el efecto indeseado que hemos comentado previamente, deberemos seleccionar un conjunto mínimo de las reglas CSS que más influyen en el diseño de la página (layout, tipos y tamaños de letra,…), e insertarlas “inline” en la sección <head>, dentro de un bloque <style>…</style>. No existe un procedimiento general para realizar esta tarea, ya que en cada caso dependerá del diseño utilizado en el sitio web que se está optimizando.

Comprobar el resultado

Por último, una vez modificada la página, volvemos a analizarla con Pagespeed:

render-blocking-css-3

y podemos comprobar que hemos obtenido el resultado deseado: ya no aparece el aviso relativo a elementos CSS bloqueantes, y la puntuación de la página ha pasado de 94 a 96.

Y eso es todo!

 Publicado por en 6:42 pm

 Deja un comentario

(requerido)

(requerido)