Page Speed o cuando Google nos mira feo

La publicación de un artículo de Google Webmaster Central Blog el pasado viernes y su difusión en cientos de sitios, sólo me ha provocado dolor de cabeza porque ha sido un fin de semana donde me abrumaron con preguntas que no puedo contestar y que, en cierto modo, tampoco me interesan demasiado porque me siento bastante lejos de ese mundo preocupado por las histerias de Google o sus intentos de monopolizar internet, estableciendo reglas para afuera y no cumpliéndolas hacia adentro.

Seguramente, muchos han leido del tema o han visto breves reseñas del asunto y se han asustado frente a frases como: Google nos enviará al final de su lista de resultados si nuestro sitio es lento ya que, desde ahora, utilizará la velocidad de carga como una variable más para determinar la relevancia de las páginas.

Las preguntas frente a esto son variadas y muchas de ellas sólo pueden ser respondidas de forma subjetiva.

Lo básico, como frente a cualquier otra situación, es regirse por el sentido común que no está exento de ideología ¿Qué quiero de mi blog? ¿Puedo hacer algo? ¿Me corto las venas porque Google me mira feo?


Me voy a olvidar un rato de mi falta de interés y voy a tratar de concentrarme en cosas concretas.

Primero que nada, entro en las Herramientas para Desarrolladores, y allí, en el apartado Labs veo algo llamado Rendimiento del sitio que se supone que muestra las estadísticas de velocidad de carga de nuestra páginas. Los resultados variarán pero, casi siempre, dirán que es lento, no importa si está alojado en Blogger, Wordpress, un hosting propio o en Google Sites. De entrada, nomás, lo más común es que nos digan: Es MAS lento que el tanto% de los sitios o lo que es lo mismo, nos dicen que la gran mayoría es más rápido que nosotros; así, sin anestesia ... y es un sopapo que nos deja temblando porque usa una frase que no es casual, dice es más lento que otros y recalco eso. Papá se enojó y nos compara siempre con alguien que es "mejor".

¿Es así? La verdad, puede ser que si y puede ser que no, las estadísticas suelen servir sólo para acomodar la realidad y ya se sabe que eso del vaso medio lleno y medio vacio es algo que podemos aplicar a cualquier otro dato. De todos modos, voy a seguir adelante a ver qué me dice Google que debo hacer para mejorar ya que ellos nos proponen usar herramientas de evaluación y análisis. Fundamentalmente, hablan de ir a Speed, un sitio de Google Code donde podemos descargar esas herramientas aunque muchas de ellas estan disponibles online.

Google también provee de un agregado para quien usa Firefox y Firebug, llamado Page Speed que es el que recomiendan utilizar así que una vez instalado, lo pruebo a ver qué dice.


Al ejecutarlo, nos mostrará una lista desplegable de items analizados y cada uno de ellos estará marcado con un ícono distintivo; rojo de alerta cuando se trata de cosas graves que deberían corregirse para mejorar la performance; amarillo cuando la prioridad del problema es relativa y verde cuando todo está en orden o el problema detectado es mínimo. Confuso, demasiado técnico y para colmo, en inglés asi que vamos a ver si es posible comprender ese galimatías y si podemos sacar alguna conclusión, por ejemplo, saber si mi pobre blogcito tiene la culpa o si hay alguien mas que debería hacerse responsable del asunto.

En rojo sangre aparecen cuatro:

Leverage browser caching:
No quiero tratar de entender esto pero, dicho de manera burda, hace referencia a que ciertos recursos cargados no son cacheados correctamente ya que el servidor que los aloja no está bien configurado. Si lo desplegamos, nos mostrará la lista ¿Qué recursos son? Por ejemplo, todas las imágenes ¿Y dónde están guardadas esas imágenes? En Blogger ... ahhhhh.

Combine external JavaScript:
Como cada vez que se carga un script que está alojado en un servidor externo, se tarda un cierto tiempo en "comunicarse" con ese servidor, lo razonable, dentro de lo posible, es que haya la menor cantidad posible de archivos diferentes y que los pongamos todos en uno solo. Veamos la lista de los scripts que Google dice que deberían combinarse; hay ocho archivos que agrega Blogger:
http://www.google.com/jsapi
http://www.google.com/friendconnect/script/friendconnect.js
http://www.blogger.com/static/v1/jsbin/4148828077-comment_from_post_iframe.js
http://www.blogger.com/static/v1/widgets/585470096-widgets.js
http://www.blogger.com/static/v1/jsbin/525636886-cmt_es.js
http://www.google.com/uds/?file=search...
http://www.google.com/uds/api/search/...
http://vagabundia.blogspot.com/...?action=backlinks...
y hay otros dos que nos vemos obligados a usar porque el servicio no tiene nada que nos permita listar Entradas Relacionadas o Comentarios Recientes y por lo tanto, debemos recurrir a los feeds para leerlos:
http://vagabundia.blogspot.com/feeds/posts/default/-/Blogger?alt=json-in-script...
http://vagabundia.blogspot.com/feeds/comments/default?alt=json-in-script...
El resto, son los scripts de Prototype + Scriptaculous que se cargan desde ajax.googleapis.com que también, casualmente, es un sitio de Google.

Minimize DNS lookups:
También demasiado técnico, se refiere a llamadas a sitios externos diferentes y lo ideal sería que todo estuviera en el mismo servidor pero claro, eso es imposible si tenemos estadísticas, Feedburner o mostramos Twitter, por ejemplo. Curiosamente, allí tambien puede aparecer alguna imagen que hayamos subido al mismo Blogger pero ese detalle es para el proximo item.

Minimize redirects:
Es uno de los pocos que podemos resolver y con paciencia, poner en verdecito. Es interesante; lo que nos muestra es que hay ciertas direcciones agregadas a nuestro sitio que, en realidad, son redirecciones; es decir, cargamos un archivo desde tal lugar pero en realidad está en tal otro así que estamos perdiendo tiempo. Al desplegarlo, veremos una lista con las dos direcciones, la primera es la original y la segunda es la que deberíamos usar. ¿Qué me encontré? No, no es chiste, había no menos de una docena y TODAS eran imágenes alojadas en Blooger así que, por ejemplo:
http://bp3.blogger.com/_.../s00/icoPopUp.gif
pasó a ser:
http://4.bp.blogspot.com/_.../s00/icoPopUp.gif
y no pregunten por qué pero, a eso me refería en Minimize DNS lookups. Puede ser que, si la imagen es algo que subimos hace mucho tiempo, la URL sea vieja y, aunque siga funcionando, deberíamos cambiarla. Por ejemplo, esta imagen había sido subida hace años y si se fijan, la URL que daba Blogger en ese tiempo es completamente diferente a las que nos da ahora:
http://photos1.blogger.com/blogger2/323/4098/200/boxcerrar.gif
¿Otra vez Blogger? Esto ya me está gustando, parezco Pilatos lavándome las manos pero ...

En amarillo aparecen algunas:

Combine external CSS:
Al igual que los scripts, si tenemos hojas de estilo externas, lo razonable es que estén todas en un solo archivo. Me marca dos:
http://www.blogger.com/static/v1/widgets/119427095-widget_css_bundle.css
http://www.blogger.com/dyn-css/authorization.css
y son archivos que agrega Blogger por defecto.

Remove unused CSS:
Nos dice, ¡quiten todas estas definiciones de estilo que no se usan! pero, hay dos problemas. Un blog es una página dinámica; es posible que ciertas cosas no se usen "siempre" pero debamos tenerlas igual porque las usaremos en alguna entrada. El segundo problema es que, otra vez, la parte sustancial del CSS sin uso, la agrega Blogger a la fuerza:
http://www.blogger.com/static/v1/widgets/119427095-widget_css_bundle.css
http://www.google.com/uds/css/gsearch.css
http://www.blogger.com/dyn-css/authorization.css
Acá sí hay algo que podemos hacer pero con prudencia. Primero que nada, podemos revisar las definiciones de estilo que tengamos, sin llegar al extremo de intentar minimizarlas o comprimirlas hasta que sean ilegibles, podemos eliminar aquello que no usamos. Lo mismo puede decirse de definiciones de estilo de entradas especiales, una galería que mostramos en una entrada eventual o cosas similares; podemos sacar todo eso de la plantilla misma y colocarlo directamente en el post. Otra forma de minimizar el CSS es usar los condicionales para, por ejemplo, cargar las definiciones de estilo de los comentarios sólo en las paginas individuales y no en el resto del blog.

Serve static content from a cookieless domain:
Esto también se refiere a la carga de archivos (imágenes por ejemplo) y bueno, todas las referencias dicen lo mismo, o son archivos que agrega Blogger o son imágenes alojadas en Blogger.

Minify HTML:
Comprimir el código HTML y ohhhhhhhhhh ¿dice algo del blog mismo? no, ¿de quién será la culpa? Adivinen:
Minifying http://www.blogger.com/comment-iframe.g?blogID=... could save 1.6KiB.
Minifying http://www.blogger.com/navbar.g?targetBlogID=... could save 623B.

Minify JavaScript:
Lo mismo pero referido a archivos JS:
Minifying http://ajax.googleapis.com/ajax/services/feed/load?q=... could save 4B.

Use efficient CSS selectors:
Dice que podría reducirse el CSS usando reglas de estilo más eficientes y nos lista cuales; me olvido de las de Blogger sobre las que nada puedo hacer y me centro en las de la plantilla porque son sugerencias "dudosas" y la verdad, no estoy muy de acuerdo con el asunto. Por ejemplo, dice que esto es ineficiente:
.post-resumen h2 a
ya que podría ponerse:
h2 a
o bien
.post-resumen a
pero ¿y si tengo más de un h2, o si dentro de ese elemento hay otros enlaces y quiero que se vean diferentes? Como toda herramienta automática, son cosas que hay que tomar muy pero muy entre comillas;

Además, perdón pero ¿quién es Google para andar dando lecciones de diseño cuando en el siglo 21 aún sigue poniendo enlaces de color azul subrayados y los gadgets que nos ofrece suelen ser más feos que pegarle a la madre? ¿Alguien se ha puesto a analizar con seriedad, el desperdicio de código que hay en las nuevas plantillas de Blogger? ¿Vamos camino a una internet uniforme? Avísenme, así desempolvo los viejos diskettes e instalo Windows 95.

Put CSS in the document head:
Hay que poner todo el CSS dentro del head de la página y no debería haber etiquetas style en el body. Esto, sería posible si Blogger no inyectara su propio CSS con definiciones que ni usamos ni queremos; como lo hace, no hay más remedio que sobrescribirlo después.

Si me sigo lavando las manos, voy a necesitar más jabón.

Minimize request size:
Siempre lo mismo, cosas que usamos y requieren tiempos de carga excesivos. Hay dos: la navbar de Blogger (269 bytes) y Twitter (91 bytes)

Leverage proxy caching:
No entiendo que significa Due to a bug in some proxy caching servers, the following publicly cacheable, compressible resources should use "Cache-Control: private" or "Vary: Accept-Encoding": pero hablan de friendconnect:
http://www.google.com/friendconnect/script/friendconnect.js

Del resto, Google no me dijo nada pero igual lo enumero porque hay un par que vale la pena tener en cuenta:

Optimize images:
Esto puede ser útil en ciertos casos. Hay imágenes que pueden ser optimizadas y la herramienta nos muestra la diferencia de tamaño entre ambas y nos permite descargar la mejora así que, si ven alguna, conviene que la cambien, sobre todo, si se trata de imágenes de la plantilla misma.

Serve scaled images:
También es importante pero no es un descubrimiento de Google. Si usamos una imagen, siempre es conveniente que no la redimensionemos con CSS o con atributos en la etiqueta. Si es grande y la queremos mostrar pequeña, subamos una pequeña.

Optimize the order of styles and scripts:
Revisen eso, a veces, veo plantillas desorganizadas, no cuesta nada ponerlas en orden y además, luego es más fácil editarlas. Pongan todo el CSS junto, luego los scripts; siempre, debajo de </b:skin> salvo que se indique lo contrario; no coloquen ninguna etiqueta antes de <head> ni después </body> ni entre </head> y <body>. Una página web sólo tiene dos partes, lo que está entre <head> y </head> y lo que está entre <body> y </body>; todo lo demás, es el limbo, aunque funcione.

Specify image dimensions:
Otra cosa que deberíamos hacer siempre es poner el tamaño de las imágenes en la etiqueta img:
<img src='la_imagen' width=valor' height='valor' />
eso, ayuda a que el navegador reserve el espacio necesario y la carga mejorará, evitando algunos saltos.

Minify CSS:
Minimizar el código CSS ... cuidado con esto. Entre optimizar y minimizar hay una diferencia abismal.

El resto no tiene uso práctico ya que si estuviera mal, nada podríamos hacer porque no podemos configurar el servidor.

Ahhhh ya me aburrí.

¿Acaso da la sensación de que estoy diciendo que no debemos hacer nada? No. Eso no es así. Siempre se puede mejorar y siempre podemos optimizar algo; lo que no debemos, de ninguna manera, es aceptar imposiciones subjetivas o seguir reglas que no compartimos; mucho menos, tratándose de empresas que suelen disfrazar sus intereses tras supuestas banderas o slogans. Lo mejor es tomar distancia, dudar y sacar nuestras propias conclusiones.

Hay una casi evidente. Cuando ejecutamos este análisis en diferentes páginas nos encontaremos con una verdad indiscutible: en casa de herrero, cuchillo de palo ...

canal YouTubeGoogle Webmaster Centralbuscador Googleescritorio Bloggereste pobre blogcito
click para anoliar las imágenes.

En Blogger es poco lo que podemos hacer; como se ve en los listados de ejemplo y cualquiera podrá comprobarlo con su propio sitio, es el mismo Blogger el que hace que nuestros sitios sean lentos y es Google el que no sigue las reglas que intenta imponer a los demás. Es Blogger el que nos enchufa código inncesario para cosas que no utilizamos; el que define estilos que nos vemos obligados a cambiar; el que no nos da un espacio para alojar nuestros archivos y de ese modo optimizar la carga; el que no dispone de librerías que podamos agregar; el que no tiene estadísiticas propias; el que crea gadgets que usan iframes y por lo tanto, son lentos. Y ni hablar del esperpento llamado Seguidores ni del ineficiente manejo de los comentarios cuyo script colapsa cada dos por tres.

Blogger pertenece a Google y Google tambien nos agobia con sus scripts que son, por lejos, los que más tardan en cargarse: el API de su buscador y Analytics.

Es el tandem Blogger/Google quien debería preocuparse por brindar servicios medianamente eficientes y dejar que el resto de los mortales se las arregle como pueda en lugar de advertirnos o castigarnos como si fuera alguna clase de DIos al cual debamos obedecer a piejuntillas. Es Blogger/Google el que tiene millones de páginas en internet con millones de usuarios esperando que alguna vez se pongan a trabajar en serio en lugar de dar órdenes.

Si estos cambios afectarán a cada uno de nosotros, no lo sé porque en realidad, no creo que nadie lo sepa, ni siquiera el mismo Google.

Si sé que un blog no es eso que ellos imaginan. Sí se que me da lo mismo esperar 5, 10,30 segundos o más para que se abra una página que quiero leer. Si sé que me gustaria que se abriera mas rápido y que probablemente, hasta pudiera mejorarse para que eso ocurra pero no es algo que me quite el sueño.

No es que me sobre el tiempo, es que no me gustan que me apuren.

0 comentarios:

Publicar un comentario