Clicky

Google hace mis páginas más lentas

Google Page Sspeed

El mayor número de problemas a solucionar para mejorar el rendimiento viene de sitios externos

Si, como lo oyes.  Y no es que lo diga yo, lo dice el mismo Google desde su herramienta Google PageSpeed.

La velocidad de las páginas web es una de las variables que Google toma en cuenta para valorar la calidad de las páginas y su clasificación en los resultados de búsqueda. De vez en cuando yo hago una comprobación del tiempo de carga de las páginas mediante los complementos de Firefox YSlow y el mismo Page Speed que están integrados en Firebug.

Google Page Speed

Si lanzamos el análisis de la página del ejemplo vemos en la parte inferior derecha de la pantalla que la página tarda en cargar alrededor de 3 segundos (este tiempo puede variar dependiendo del tiempo que Firefox haya estado trabajando, la velocidad de vuestra conexión o incluso la fluidez en el tráfico global de internet en ese momento).

Google Page Speed Vista al Mar, herramienta de Firebug

Si abrimos la herramienta tendremos un detalle de todas las cualidades de la página que son valoradas para medir su tiempo de carga y consejos para optimizarlas, como son Especificar caché del navegador, Especificar un validador de caché, Minificar JavaScript, etc. La valoración total de la página es de 95/100, que no está mal. Si nos vamos hasta el final veremos que, en el caso que estamos viendo, hay cuatro variables que deberíamos corregir: Avoid a character set in the meta tag, Defer loading of JavaScript, Remove unused CSS y Use efficient CSS selectors.

Google Page Speed Vista al Mar, herramienta de Firebug problemas a corregir

Desde Firebug no podemos averiguar el detalle de cada consejo, así que nos iremos a la página online de Google PageSpeed para ver qué nos dice al respecto:

Google Page Speed Vista al Mar

High priority (0). These suggestions represent the largest potential performance wins for the least development effort. However, there are no high priority suggestions for this site. Good job!

Medium priority (4). These suggestions may represent smaller wins or much more work to implement. You should address these items next:
    Improve server response time, Habilitar compresión, Especificar caché de navegador, Minimizar redireccionamientos

Low priority (9). These suggestions represent the smallest wins. You should only be concerned with these items after you've handled the higher-priority ones:
    Aplazar el análisis de JavaScript, Optimizar imágenes, Ofrecer imágenes a escala, Minificar JavaScript, Especificar un validador de caché, Minificar HTML, Introducir recursos CSS en el encabezado del documento, Eliminar las cadenas de consulta de recursos estáticos, Especificar una cabecera "Vary" con el valor "Accept-Encoding"

Already done! (15). There are no suggestions for these rules, since this page already follows these best practices. Good job!

Como vemos, hay cuatro sugestiones de arreglo de prioridad media y 9 de baja prioridad. Las vemos una a una y contamos a quien pertenecen las URLs culpables de nuestro bajo rendimiento:

Prioridad media:

Improve server response time

Suggestions for this page
Long web server response times delay page loading. Reduce your response times to make your page load faster.

    http://feeds.feedburner.com/vistaalmar.1.gif (0,44 segundos)
    http://googleads.g.doubleclick.net/.../ads?... (0,24 segundos)
    http://googleads.g.doubleclick.net/.../ads?... (0,17 segundos)
    http://googleads.g.doubleclick.net/.../ads?... (0,29 segundos)
    http://googleads.g.doubleclick.net/.../ads?... (0,22 segundos)
    http://www.facebook.com/.../like.php?... (0,20 segundos)

FeefBurner 1 = 0,44s, Google AdSense 4 = 0,92s, Facebook 1 = 0,20s

Habilitar compresión

Compressing resources with gzip or deflate can reduce the number of bytes sent over the network

Suggestions for this page
Si se comprimen los recursos indicados a continuación con gzip, se puede reducir el tamaño de transferencia en 47,8 KB (lo que supone una reducción del 73%).

    Si se comprime http://code.taggify.net/ta.ashx?id=1158&async=0&ver=8, se pueden ahorrar 47,1 KB (lo que supone una reducción del 74%).
    Si se comprime http://ads.adpv.com/ads_control.js, se pueden ahorrar 685 B (lo que supone una reducción del 59%).

Taggify 1 = ahorro 47,1 KB , Adpv 1 = ahorro 685 B

Especificar caché de navegador

Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.

Suggestions for this page
El período de validez de los siguientes recursos que se pueden almacenar en caché es muy breve. En el futuro, especifique un período de caducidad de al menos una semana para los siguientes recursos:

    http://ads.adpv.com/ads.js (caducidad no especificada)
    http://ads.adpv.com/ads_control.js (caducidad no especificada)
    http://code.taggify.net/i/rollover.png (caducidad no especificada)
    http://feeds.feedburner.com/vistaalmar.1.gif (15 minutos)
    http://platform.twitter.com/widgets.js (30 minutos)
    http://ajax.googleapis.com/.../mootools-yui-compressed.js (60 minutos)
    http://pagead2.googlesyndication.com/pagead/osd.js (60 minutos)
    http://pagead2.googlesyndication.com/pagead/show_ads.js (60 minutos)
    http://feeds.feedburner.com/~fc/vistaalmar?... (2 horas)
    http://external.labs.ebuzzing.es/.../getrank?... (8,3 horas)

Adpv 2, Taggify 1, FeedBurner 2, Twitter 1, Google mootools 1, Google Adsense 2, Ebuzzing 1

Minimizar redireccionamientos

Minimizing HTTP redirects from one URL to another cuts out additional RTTs and wait time for users.

Suggestions for this page
Si es posible, elimine la siguiente cadena de redireccionamientos:

    http://external.wikio.es/.../getrank?...
    http://external.labs.ebuzzing.es/.../getrank?...

Si es posible, elimine la siguiente cadena de redireccionamientos:

    http://natureblognetwork.com/button.php?u=chupi
    http://natureblognetwork.com/images/buttonsun.png

Si es posible, elimine la siguiente cadena de redireccionamientos:

    http://www.google.com/pagead/drt/ui
    https://googleads.g.doubleclick.net/.../si?...

Wikio 1, Ebuzzing 1, Natureblognetwork 2, Google Adsense 2

Prioridad baja:

Aplazar el análisis de JavaScript

By minimizing the amount of JavaScript needed to render the page, and deferring parsing of unneeded JavaScript until it needs to be executed, you can reduce the initial load time of your page.

Suggestions for this page
Durante el proceso de carga inicial de la página, se analiza 247,9 KB de JavaScript. Debe aplazar el análisis de JavaScript para reducir los bloqueos al mostrar la página.

    http://ajax.googleapis.com/.../mootools-yui-compressed.js (60,4 KB)
    http://platform.twitter.com/.../follow_button.1368146021.html (37,5 KB de JavaScript insertado)
    http://www.vistaalmar.es/.../jcemediabox.js?... (37 KB)
    http://www.vistaalmar.es/.../jscss.php?... (26 KB)
    http://www.vistaalmar.es/.../jcomments-v2.1.js?v=7 (23 KB)
    http://pagead2.googlesyndication.com/pagead/show_ads.js (13,1 KB)
    http://googleads.g.doubleclick.net/.../ads?... (4,8 KB de JavaScript insertado)
    http://www.vistaalmar.es/.../engine.js (4,8 KB)
    http://googleads.g.doubleclick.net/.../ads?... (4,8 KB de JavaScript insertado)
    http://www.vistaalmar.es/.../engine.js (4,3 KB)
    http://googleads.g.doubleclick.net/.../zrt_lookup.html (3,9 KB de JavaScript insertado)
    http://www.vistaalmar.es/ (3,1 KB de JavaScript insertado)
    http://www.vistaalmar.es/.../engine_compress.js (3,1 KB)
    http://www.vistaalmar.es/.../ajax.js?v=3 (3,1 KB)
    http://www.vistaalmar.es/.../engine_standard_compressed.js (2,7 KB)
    http://www.facebook.com/.../like.php?... (2,4 KB de JavaScript insertado)
    http://www.vistaalmar.es/.../menu.php?... (2 KB)
    http://www.vistaalmar.es/.../mediaobject.js?... (1,9 KB)
    http://www.google.es/cse/brand?form=cse-search-box&lang=es (1,5 KB)
    http://www.vistaalmar.es/.../default.js?... (1,5 KB)
    http://www.vistaalmar.es/.../LazyLoad-yui-compressed.js (1,3 KB)
    http://www.vistaalmar.es/.../engine.js (1 KB)
    http://googleads.g.doubleclick.net/.../ads?... (1.011 B de JavaScript insertado)
    http://googleads.g.doubleclick.net/.../ads?... (917 B de JavaScript insertado)
    http://pagead2.googlesyndication.com/.../abg.js (894 B)
    http://ads.adpv.com/ads_control.js (763 B)
    http://ads.adpv.com/ads.js (695 B)
    http://www.vistaalmar.es/.../engine_compress.js (337 B)
    http://code.taggify.net/ta.ashx?id=1158&async=1&ver=8 (146 B)
    http://www.vistaalmar.es/.../importer.php?... (138 B)
    http://www.vistaalmar.es/.../importer.php?... (105 B)

Google mootools 1, Twitter 1, Vista al Mar 17, Google Adsense 6, Taggify 1, Adpv 2, Facebook 1

Optimizar imágenes

Properly formatting and compressing images can save many bytes of data.

Suggestions for this page
Si se optimizan las imágenes que se indican a continuación, se puede reducir su tamaño en 7,4 KB (lo que supone una reducción del 26%).

    Si se comprime http://www.vistaalmar.es/.../csg-d4e7c573f2de07b7d86cf0f1b60a6229.png sin pérdida, se pueden ahorrar 2,7 KB (lo que supone una reducción del 97%).
    Si se comprime http://www.google.es/.../google_custom_search_watermark.gif sin pérdida, se pueden ahorrar 1,4 KB (lo que supone una reducción del 67%).
    Si se comprime http://code.taggify.net/i/rollover.png sin pérdida, se pueden ahorrar 881 B (lo que supone una reducción del 65%).
    Si se comprime http://www.vistaalmar.es/images/ico_ff.gif sin pérdida, se pueden ahorrar 733 B (lo que supone una reducción del 79%).
    Si se comprime http://www.vistaalmar.es/images/ico_facebook.gif sin pérdida, se pueden ahorrar 724 B (lo que supone una reducción del 81%).
    Si se comprime http://www.vistaalmar.es/.../agregacion-jurel-ojon.jpg sin pérdida, se pueden ahorrar 583 B (lo que supone una reducción del 3%).
    Si se comprime http://www.vistaalmar.es/.../stories.webcam-peniscola-articulo.jpg sin pérdida, se pueden ahorrar 543 B (lo que supone una reducción del 23%).

Vista al Mar 4, Taggiffy 1, Google 1

Ofrecer imágenes a escala

Properly sizing images can save many bytes of data.

Suggestions for this page
En HTML y CSS, se modifica el tamaño de las imágenes que se indican a continuación. Si se ofrecen imágenes con otro tamaño, se pueden ahorrar 20,5 KB (lo que supone una reducción del 62%).

    En HTML y CSS, el tamaño de http://www.vistaalmar.es/.../agregacion-jurel-ojon.jpg cambia de 640x428 a 260x170. Si se ofrece una imagen con otro tamaño, se pueden ahorrar 16,3 KB (lo que supone una reducción del 83%).
    En HTML y CSS, el tamaño de http://www.vistaalmar.es/templates/gk_twn/images/logo.png cambia de 350x85 a 288x75. Si se ofrece una imagen con otro tamaño, se pueden ahorrar 3,1 KB (lo que supone una reducción del 28%).
    En HTML y CSS, el tamaño de http://www.vistaalmar.es/.../valid-rss-rogers.png cambia de 88x31 a 57x20. Si se ofrece una imagen con otro tamaño, se pueden ahorrar 1,2 KB (lo que supone una reducción del 58%).

Vista al Mar 3

Minificar JavaScript

Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time.

Suggestions for this page
Si se minimizan los recursos JavaScript que se indican a continuación, se puede reducir su tamaño en 16,6 KB (lo que supone una reducción del 27%).

    Si se minimiza http://code.taggify.net/ta.ashx?id=1158&async=0&ver=8, se pueden ahorrar 16,6 KB (lo que supone una reducción del 27%).

Taggify 1

Especificar un validador de caché

By specifying a cache validator - a Last-Modified or ETag header - you ensure that the validity of cached resources can efficiently be determined.

Suggestions for this page
Los recursos que se indican a continuación no especifican un validador de caché y no se podrán actualizar de forma eficiente si no se especifica dicho validador. Especifique una cabecera "Last-Modified" o "ETag" para que se pueda validar la caché de los siguientes recursos:

    http://feeds.feedburner.com/~fc/vistaalmar?...
    http://www.google.es/cse/brand?form=cse-search-box&lang=es

FeedBurner 1, Google Search 1

Minificar HTML

Compacting HTML code, including any inline JavaScript and CSS contained in it, can save many bytes of data and speed up downloading, parsing, and execution time.

Suggestions for this page
Si se minimizan los recursos HTML que se indican a continuación, se puede reducir su tamaño en 2,6 KB (lo que supone una reducción del 12%%).

    Si se minimiza http://www.vistaalmar.es/, se pueden ahorrar 2,6 KB tras la compresión (lo que supone una reducción del 12%).

Vista al Mar 1

Introducir recursos CSS en el encabezado del documento

Moving inline style blocks and <link> elements from the document body to the document head improves rendering performance.

Suggestions for this page
Incluir recursos CSS en el cuerpo del documento afecta negativamente al rendimiento de la representación
http://googleads.g.doubleclick.net/.../ads?... incluye los siguientes recursos CSS en el cuerpo del documento:

    Es necesario mover 2 bloque(s) de estilo del cuerpo del documento al encabezado.

http://googleads.g.doubleclick.net/.../ads?... incluye los siguientes recursos CSS en el cuerpo del documento:

    Es necesario mover 1 bloque(s) de estilo del cuerpo del documento al encabezado.

http://www.vistaalmar.es/ incluye los siguientes recursos CSS en el cuerpo del documento:

    Es necesario mover 1 bloque(s) de estilo del cuerpo del documento al encabezado.

Google Adsense 1, Vista al Mar 1

Eliminar las cadenas de consulta de recursos estáticos

Enabling public caching in the HTTP headers for static resources allows the browser to download resources from a nearby proxy server rather than from a remote origin server.

Suggestions for this page
Algunos servidores proxy en caché no almacenan en caché recursos cuya URL contenga el signo "?". Elimine la cadena de consulta y codifique los parámetros de la URL de los siguientes recursos:

    http://external.labs.ebuzzing.es/.../getrank?...
    http://feeds.feedburner.com/~fc/vistaalmar?...
    http://www.google.es/cse/brand?form=cse-search-box&lang=es

Ebuzzing 1, FeedBurner 1, Google Search 1

Especificar una cabecera "Vary" con el valor "Accept-Encoding"

Instructs proxy servers to cache two versions of the resource: one compressed, and one uncompressed. This helps avoid issues with public proxies that do not detect the presence of a Content-Encoding header properly.

Suggestions for this page
Los siguientes recursos que se pueden comprimir y almacenar en caché deben tener una cabecera "Vary" con el valor "Accept-Encoding":

    http://ads.adpv.com/ads.js
    http://ads.adpv.com/ads_control.js
    http://pagead2.googlesyndication.com/.../expansion_embed.js
    http://pagead2.googlesyndication.com/.../abg.js
    http://pagead2.googlesyndication.com/.../show_ads_impl.js
    http://pagead2.googlesyndication.com/pagead/osd.js
    http://pagead2.googlesyndication.com/pagead/show_ads.js
    http://www.google.es/cse/brand?form=cse-search-box&lang=es

Adpv 2, Google Adsense 5, Google Search 1

Si hacemos una suma total de los diferentes dominios resulta lo siguiente:

Adpv 7
Ebuzzing 3
Facebook 2
FeedBurner 5
Google 26
Natureblognetwork 2
Taggify 5
Twitter 2
Wikio 1
Vista al Mar 26

En los totales vemos que el mayor número de problemas a solucionar viene de sitios externos con 53 sugerencias (Gogle 26 y si le sumamos FeedBurner 31), cuya solución, por otra parte, no está en nuestras manos, por eso el titular de este artículo. Para Joomla recomiendo vivamente instalar el plugin JCH Optimize que en mis caso reduce la carga de las páginas en un 50%.

Jesus_Caceres