Para entender la importancia de la optimizaci\u00f3n de los contenidos servidos en nuestra web\u00a0debemos hacer un peque\u00f1o viaje en el tiempo (ser\u00e1 breve, lo prometo).<\/p>\n
Nos adentramos en la \u00e9poca oscura de los m\u00f3dems de 56 kb\/s, cuando el mundo de las p\u00e1ginas webs comenzaba a aflorar. Muy pocos dispon\u00edan de conexi\u00f3n en casa y la mayor\u00eda de los que la ten\u00edan era para gestionar su mailing de trabajo. En esa \u00e9poca, los ordenadores ten\u00edan un poder computacional muy inferior a cualquier m\u00f3vil de hoy en d\u00eda y la mayor\u00eda de los recursos servidos eran de muy baja calidad (un buen punto si asociamos que a mayor calidad de una imagen m\u00e1s pesada es).<\/p>\n
Poco a poco, el internet se fue expandiendo y ya eran bastantes los que empezaban a plantearse disponer de una p\u00e1gina web. Al mismo tiempo, se empez\u00f3 a instaurar el ADSL como tecnolog\u00eda m\u00e1s habitual que ofrec\u00eda una tasa de descarga superior al m\u00f3dem anteriormente citado.<\/p>\n
Con los a\u00f1os se probaron diferentes tecnolog\u00edas como internet coaxial, PLC centralizado\u2026 y fibra \u00f3ptica siendo esta \u00faltima la m\u00e1s extendida por su capacidad de respuesta y la velocidad que ofrece.<\/p>\n
El uso de este tipo de tecnolog\u00edas de la informaci\u00f3n, que permite descargar muchos recursos en poco tiempo, ha descuidado la necesidad de optimizar al m\u00e1ximo el contenido de la web puesto que, aunque la p\u00e1gina sea m\u00e1s pesada tenemos m\u00e1s tasa de transferencia.<\/p>\n
Sin embargo, a d\u00eda de hoy, hay que contar con un elemento m\u00e1s en todo el marco de las tecnolog\u00edas de la informaci\u00f3n: el m\u00f3vil. Hoy en d\u00eda accedemos en proporci\u00f3n casi tanto o m\u00e1s a internet desde un dispositivo m\u00f3vil que desde el ordenador.<\/p>\n
Muchos cuentan con 4G (capaz de bajar y subir datos mucho m\u00e1s r\u00e1pido que las conexiones de fibra \u00f3ptica dom\u00e9stica) pero est\u00e1n limitados a una cuota de descarga y subida de datos dependiendo de la tarifa. Adem\u00e1s, tenemos que pensar que la mayor\u00eda de los dispositivos m\u00f3viles funcionan con tecnolog\u00eda ARM la cual, en t\u00e9rminos generales, es menos potente que la arquitectura de 64 bits de un ordenador dom\u00e9stico por poner un ejemplo.<\/p>\n
Esto nos vuelve a recordar la necesidad de optimizar nuestro contenido web, para asegurar la mejor experiencia para aquellos que tienen peor conexi\u00f3n, peor m\u00f3vil o sencillamente se les ha acabado el plan de datos de m\u00e1xima velocidad de su tarifa telef\u00f3nica.<\/p>\n
Hay una cantidad inmensa de herramientas gratuitas online que hacen m\u00e9tricas de nuestros sitios webs y nos desglosan unos resultados con documentaci\u00f3n \u201chow-to\u201d de c\u00f3mo 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\u00e1s complicadas de implementar tanto para desarrolladores amateurs como para desarrolladores expertos.<\/p>\n
Es una pregunta complicada de responder. En el mejor de los casos te lanzar\u00eda la siguiente pregunta: \u00bfSacrificar\u00edas un poco de usabilidad de tu p\u00e1gina para obtener una mejora en la velocidad?<\/p>\n
Si la respuesta es \u201csi\u201d te est\u00e1s confundiendo. La velocidad es b\u00e1sicamente usabilidad y si sacrificas un poco para ganar un poco te quedas como antes, a lo que le tendr\u00e1s que sumar el tiempo y dinero invertido para quedarte igual.<\/p>\n
Pagespeed no se dise\u00f1\u00f3 para decirte qu\u00e9 hacer para mejorar tu resultado en el test, se dise\u00f1\u00f3 como una herramienta de aprendizaje de buenas praxis cara a la usabilidad de tu p\u00e1gina web. Ten muy claro que a d\u00eda de hoy rendimiento y SEO no va de la mano (no vas a posicionar mejor por tener una web m\u00e1s r\u00e1pida), pero no te olvides que si tu web est\u00e1 bien optimizada y ofrece un buen contenido va a ser m\u00e1s complicado que el usuario final salga inmediatamente de ella y por tanto mejorar\u00e1s tu tasa de rebote (elemento que s\u00ed afecta al posicionamiento web).<\/p>\n
Eliminar el JavaScript que bloquea la visualizaci\u00f3n y el CSS del contenido de la mitad superior de la p\u00e1gina:<\/strong><\/p>\n Comenzamos por el CSS<\/p>\n Google dice lo siguiente: Toda p\u00e1gina web deber\u00e1 contener en su cabecera estrictamente la cantidad de CSS necesaria para cargar los elementos que se visualizar\u00edan en un monitor de 1024 x 768 p\u00edxeles. Adem\u00e1s, como condici\u00f3n, todo el contenido que se va a renderizar en esa superficie tiene que estar en los primeros ~15KB de tu p\u00e1gina web.<\/p>\n Parece complicado pero en esencia viene a decir lo siguiente:<\/p>\n Si os fij\u00e1is bien, no estamos cargando ning\u00fan CSS externo mendiante link rel=\u201dstylesheet\u201d. Esto b\u00e1sicamente nos pintar\u00eda la parte que se va a renderizar al cargar la p\u00e1gina pero, \u00bfqu\u00e9 pasa con el resto de la p\u00e1gina?<\/p>\n S\u00f3lo tendr\u00edamos que insertar el recurso tras el body para que la descarga se realizara una vez le\u00eddo todo el bloque de la web. Quedar\u00eda tal que as\u00ed:<\/p>\n Entiendo que es complicado hacer esto a mano, por ello os propongo los siguientes recursos:<\/p>\n En Css Above the fold<\/strong> podr\u00e9is introducir la URL de vuestra web y os sacar\u00e1 la lista de CSS necesaria para importar en la cabecera de tu documento. Adem\u00e1s, para los m\u00e1s veteranos ofrecen un servicio REST que lo hace con llamadas a su API. S\u00f3lo quedar\u00eda 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.<\/p>\n Para hacer el cotejo suelo emplear la herramienta\u00a0Css Compressor<\/strong><\/a>\u00a0con la compresi\u00f3n en high, introduzco todo el CSS, comprimo y me da una l\u00ednea por regla, las paso a una hoja de c\u00e1lculo y la ordeno alfab\u00e9ticamente, as\u00ed es mucho m\u00e1s sencillo comprar. La imaginaci\u00f3n mueve el mundo.<\/p>\n Esta regla suele ser la m\u00e1s complicada de todas, sobretodo cara a implementarla en CMS, por eso es la que m\u00e1s me gusta. Todos somos muy amigos de librer\u00edas de JS externas como jQuery, Bootstrap o Prototype (la lista sigue hasta el infinito), pero tenemos que ser conscientes de que estas librer\u00edas suelen ser bastante pesadas y que si adem\u00e1s generamos scripts que dependen de las mismas nos complica la tarea de cargar de forma as\u00edncrona los scripts.<\/p>\n Hay bastantes formas de plantear la ecuaci\u00f3n, pero yo me quedo con la siguiente:<\/p>\n Esta tarea es complicada puesto que hay que aislar muy bien todas las llamadas a JS y a las librer\u00edas de nuestra web, pero aporta unos resultados incre\u00edbles en lo que respecta a la carga.<\/p>\n<!DOCTYPE<\/span> html>\n <head<\/span>>\n <title<\/span>>Title<\/title<\/span>>\n <style<\/span>>\n *<\/span>{margin:0;padding:0}body<\/span>{filter:none;overflow-y:scroll;overflow-x:hidden;overflow:hidden;font-family:\n Helvetica}h3<\/span>{font-size:50px;color:#636363;padding:10px;text-align:justify}#logo<\/span>{display:block;margin:auto;\n max-width:800px;padding-top:30px}.container<\/span>{bottom:30px;position:absolute;width:100%}.text<\/span>{display:block;\n margin:auto;max-width:800px}\n \u2026\n <\/style<\/span>>\n <\/head<\/span>>\n <body<\/span> id<\/span>=<\/span>\"page\"<\/span>>\n <div<\/span> class<\/span>=\"wrapper\"<\/span>>\n <img<\/span> id<\/span>=<\/span>\"logo\"<\/span> src<\/span>=\".png\"<\/span>\/>\n <div<\/span> class<\/span>=\"container\"<\/span>>\n <div<\/span> class<\/span>=\"text\"<\/span>>\n <h3<\/span>>P\u00e1gina en construcci\u00f3n.<br<\/span>> <span<\/span> id<\/span>=<\/span>\"soon\"<\/span>>Volvemos en un rato<\/span<\/span>><span<\/span> class<\/span>=\"one\"<\/span>>.<\/span<\/span>><span<\/span> class<\/span>=\"two\"<\/span>>.<\/span<\/span>><span<\/span> class<\/span>=\"three\"<\/span>>.<\/span<\/span>><\/h3<\/span>>\n <\/div<\/span>>\n <\/div<\/span>>\n <\/div<\/span>>\n <\/body<\/span>>\n<\/html<\/span>>\n<\/pre>\n<\/html<\/span>>\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> type<\/span>=\"text\/css\"<\/span> href<\/span>=\"http:\/\/mipagina.com\/mi-css.css\"<\/span> media<\/span>=\"all\"<\/span> \/>\n<\/pre>\nVamos con el JavaScript<\/h4>\n
var<\/span> dfLoadStatus =<\/span> 0<\/span>;\n\nvar<\/span> dfLoadFiles =<\/span> [\n [\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js\"<\/span>],\n [\n \"\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.10.3\/jquery-ui.min.js\"<\/span>,\n \"blabla...\"<\/span>\n ]\n];\n\nfunction<\/span> downloadJSAtOnload<\/span>() {\n if<\/span> (!<\/span>dfLoadFiles.length<\/span>) return<\/span>;\n var<\/span> dfGroup =<\/span> dfLoadFiles.shift<\/span>();\n dfLoadStatus =<\/span> 0<\/span>;\n for<\/span> (var<\/span> i =<\/span> 0<\/span>; i <<\/span> dfGroup.length<\/span>; i++<\/span>) {\n dfLoadStatus++<\/span>;\n var<\/span> element =<\/span> document<\/span>.createElement<\/span>('script'<\/span>);\n element.src<\/span> =<\/span> dfGroup[i];\n element.onload =<\/span> element<\/span>.onreadystatechange<\/span> =<\/span> function<\/span> () {\n if<\/span> (!<\/span>this<\/span>.readyState<\/span> ||<\/span> this<\/span>.readyState<\/span> ===<\/span> 'complete'<\/span>) {\n dfLoadStatus--<\/span>;\n if<\/span> (dfLoadStatus ===<\/span> 0<\/span>) {\n \/\/Si se ha cargado jQuery carga el resto de scripts<\/span>\n if<\/span> (dfGroup.length<\/span> ===<\/span> 1<\/span>) {\n downloadJSAtOnload();\n \/\/Si todos los scripts se han cargado,<\/span>\n \/\/lanza las acciones diferidas<\/span>\n } else<\/span> {\n performDeferredActions();\n }\n }\n }\n };\n document<\/span>.body<\/span>.appendChild<\/span>(element);\n }\n}\n\nif<\/span> (window<\/span>.addEventListener) {\n window<\/span>.addEventListener(\"load\"<\/span>, downloadJSAtOnload, false<\/span>);\n} else<\/span> if<\/span> (window<\/span>.attachEvent) {\n window<\/span>.attachEvent<\/span>(\"onload\"<\/span>, downloadJSAtOnload);\n} else<\/span> {\n window<\/span>.onload =<\/span> downloadJSAtOnload;\n}\n\nfunction<\/span> performDeferredActions<\/span>(){\n \/\/Esto s\u00f3lo se ejecutara una vez est\u00e9n todas las librer\u00edas cargadas<\/span>\n $<\/span>(\"h3\"<\/span>).css(\"color\"<\/span>, \"red\"<\/span>);\n}\n<\/pre>\n