WPO, cómo optimizar la velocidad de tu web

Para entender la importancia de la optimización de los contenidos servidos en nuestra web debemos hacer un pequeño viaje en el tiempo (será breve, lo prometo).

Nos adentramos en la época oscura de los módems de 56 kb/s, cuando el mundo de las páginas webs comenzaba a aflorar. Muy pocos disponían de conexión en casa y la mayoría de los que la tenían era para gestionar su mailing de trabajo. En esa época, los ordenadores tenían un poder computacional muy inferior a cualquier móvil de hoy en día y la mayoría de los recursos servidos eran de muy baja calidad (un buen punto si asociamos que a mayor calidad de una imagen más pesada es).

Poco a poco, el internet se fue expandiendo y ya eran bastantes los que empezaban a plantearse disponer de una página web. Al mismo tiempo, se empezó a instaurar el ADSL como tecnología más habitual que ofrecía una tasa de descarga superior al módem anteriormente citado.

Con los años se probaron diferentes tecnologías como internet coaxial, PLC centralizado… y fibra óptica siendo esta última la más extendida por su capacidad de respuesta y la velocidad que ofrece.

El uso de este tipo de tecnologías de la información, que permite descargar muchos recursos en poco tiempo, ha descuidado la necesidad de optimizar al máximo el contenido de la web puesto que, aunque la página sea más pesada tenemos más tasa de transferencia.

Sin embargo, a día de hoy, hay que contar con un elemento más en todo el marco de las tecnologías de la información: el móvil. Hoy en día accedemos en proporción casi tanto o más a internet desde un dispositivo móvil que desde el ordenador.

Muchos cuentan con 4G (capaz de bajar y subir datos mucho más rápido que las conexiones de fibra óptica doméstica) pero están limitados a una cuota de descarga y subida de datos dependiendo de la tarifa. Además, tenemos que pensar que la mayoría de los dispositivos móviles funcionan con tecnología ARM la cual, en términos generales, es menos potente que la arquitectura de 64 bits de un ordenador doméstico por poner un ejemplo.

Esto nos vuelve a recordar la necesidad de optimizar nuestro contenido web, para asegurar la mejor experiencia para aquellos que tienen peor conexión, peor móvil o sencillamente se les ha acabado el plan de datos de máxima velocidad de su tarifa telefónica.

¿Cómo lo hacemos?

Hay una cantidad inmensa de herramientas gratuitas online que hacen métricas de nuestros sitios webs y nos desglosan unos resultados con documentación “how-to” de cómo proceder para optimizar el sitio. Yo me voy a centrar en Google Pagespeed, y en concreto voy a citar y a explicar las que han demostrado ser más complicadas de implementar tanto para desarrolladores amateurs como para desarrolladores expertos.

¿Tengo que optimizar mi página web?

Es una pregunta complicada de responder. En el mejor de los casos te lanzaría la siguiente pregunta: ¿Sacrificarías un poco de usabilidad de tu página para obtener una mejora en la velocidad?

Si la respuesta es “si” te estás confundiendo. La velocidad es básicamente usabilidad y si sacrificas un poco para ganar un poco te quedas como antes, a lo que le tendrás que sumar el tiempo y dinero invertido para quedarte igual.

Pagespeed no se diseñó para decirte qué hacer para mejorar tu resultado en el test, se diseñó como una herramienta de aprendizaje de buenas praxis cara a la usabilidad de tu página web. Ten muy claro que a día de hoy rendimiento y SEO no va de la mano (no vas a posicionar mejor por tener una web más rápida), pero no te olvides que si tu web está bien optimizada y ofrece un buen contenido va a ser más complicado que el usuario final salga inmediatamente de ella y por tanto mejorarás tu tasa de rebote (elemento que sí afecta al posicionamiento web).

Consejos para optimizar la velocidad de tu página web

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

Comenzamos por el CSS

Google dice lo siguiente: Toda página web deberá contener en su cabecera estrictamente la cantidad de CSS necesaria para cargar los elementos que se visualizarían en un monitor de 1024 x 768 píxeles. Además, como condición, todo el contenido que se va a renderizar en esa superficie tiene que estar en los primeros ~15KB de tu página web.

Parece complicado pero en esencia viene a decir lo siguiente:

<!DOCTYPE html>
    <head>
        <title>Title</title>
        <style>
            *{margin:0;padding:0}body{filter:none;overflow-y:scroll;overflow-x:hidden;overflow:hidden;font-family:
            Helvetica}h3{font-size:50px;color:#636363;padding:10px;text-align:justify}#logo{display:block;margin:auto;
            max-width:800px;padding-top:30px}.container{bottom:30px;position:absolute;width:100%}.text{display:block;
            margin:auto;max-width:800px}
            …
        </style>
    </head>
    <body id="page">
        <div class="wrapper">
            <img id="logo" src=".png"/>
            <div class="container">
                <div class="text">
                    <h3>Página en construcción.<br> <span id="soon">Volvemos en un rato</span><span class="one">.</span><span class="two">.</span><span class="three">.</span></h3>
                </div>
            </div>
        </div>
    </body>
</html>

Si os fijáis bien, no estamos cargando ningún CSS externo mendiante link rel=”stylesheet”. Esto básicamente nos pintaría la parte que se va a renderizar al cargar la página pero, ¿qué pasa con el resto de la página?

Sólo tendríamos que insertar el recurso tras el body para que la descarga se realizara una vez leído todo el bloque de la web. Quedaría tal que así:

</html>
<link rel="stylesheet" type="text/css" href="http://mipagina.com/mi-css.css" media="all" />

Entiendo que es complicado hacer esto a mano, por ello os propongo los siguientes recursos:

En Css Above the fold podréis introducir la URL de vuestra web y os sacará la lista de CSS necesaria para importar en la cabecera de tu documento. Además, para los más veteranos ofrecen un servicio REST que lo hace con llamadas a su API. Sólo quedaría contrastar las reglas de CSS que hemos incrustado en el header con el resto de reglas CSS que tenemos cargada en el resto de recursos externos, eliminar las duplicidades de los externos y listo.

Para hacer el cotejo suelo emplear la herramienta Css Compressor con la compresión en high, introduzco todo el CSS, comprimo y me da una línea por regla, las paso a una hoja de cálculo y la ordeno alfabéticamente, así es mucho más sencillo comprar. La imaginación mueve el mundo.

Vamos con el JavaScript

Esta regla suele ser la más complicada de todas, sobretodo cara a implementarla en CMS, por eso es la que más me gusta. Todos somos muy amigos de librerías de JS externas como jQuery, Bootstrap o Prototype (la lista sigue hasta el infinito), pero tenemos que ser conscientes de que estas librerías suelen ser bastante pesadas y que si además generamos scripts que dependen de las mismas nos complica la tarea de cargar de forma asíncrona los scripts.

Hay bastantes formas de plantear la ecuación, pero yo me quedo con la siguiente:

var dfLoadStatus = 0;

var dfLoadFiles = [
    ["https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"],
    [
        "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
        "blabla..."
    ]
];

function downloadJSAtOnload() {
    if (!dfLoadFiles.length) return;
    var dfGroup = dfLoadFiles.shift();
    dfLoadStatus = 0;
    for (var i = 0; i < dfGroup.length; i++) {
        dfLoadStatus++;
        var element = document.createElement('script');
        element.src = dfGroup[i];
        element.onload = element.onreadystatechange = function () {
            if (!this.readyState || this.readyState === 'complete') {
                dfLoadStatus--;
                if (dfLoadStatus === 0) {
                    //Si se ha cargado jQuery carga el resto de scripts
                    if (dfGroup.length === 1) {
                        downloadJSAtOnload();
                    //Si todos los scripts se han cargado,
                    //lanza las acciones diferidas
                    } else {
                        performDeferredActions();
                    }
                }
            }
        };
        document.body.appendChild(element);
    }
}

if (window.addEventListener) {
    window.addEventListener("load", downloadJSAtOnload, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", downloadJSAtOnload);
} else {
    window.onload = downloadJSAtOnload;
}

function performDeferredActions(){
    //Esto sólo se ejecutara una vez estén todas las librerías cargadas
    $("h3").css("color", "red");
}

Esta tarea es complicada puesto que hay que aislar muy bien todas las llamadas a JS y a las librerías de nuestra web, pero aporta unos resultados increíbles en lo que respecta a la carga.

Además, podríamos mejorarlo aún más empleando algún compresor de JS como Closure Compiler.

Optimizar imágenes

Este punto es probablemente el más crítico de todos. Engloba dos reglas, la primera: Mostrar el tamaño de imágenes adecuado al tamaño original de la imagen. Lo que viene a decir que si tenemos un div de 200 x 200 y le ponemos una imagen que originalmente es de 400 x 400 acotada al tamaño del div estamos cargando casi un 40% más de tamaño independientemente de lo optimizada que esté la imagen.

Es conveniente identificar estos recursos y re-escalarlos al tamaño adecuado.

La segunda: Mostrar imágenes optimizadas para ser visualizadas en la web.

Para esto, podemos emplear herramientas “server side” como jpeg optim u optipng o podemos emplear programas informáticos que hagan la optimización de forma masiva y luego subir los ficheros por ftp (por poner un ejemplo). Te decantes por lo que te decantes, lee bien la documentación del programa o aplicación primero para evitar excederte o quedarte corto en la compresión.

En Hiberus diseñamos experiencias digitales únicas, con una tecnología escalable y optimizado a resultados. Ponte en contacto con nosotros y estaremos encantados de ayudarte.