8 sept 2013

Mejora la velocidad de tu Blog con Google PageSpeed.

Page Speed controla múltiples parámetros que analizan una página web  para evaluar su rendimiento y ofrecer un conjunto de sugerencias que pueden ayudar a mejorarlo. Para ello utiliza un conjunto de reglas que estamos analizando en cada entrega de esta guía de rendimiento para Bloggers.

Vamos a conocer cómo podemos medir objetivamente la velocidad de nuestra página utilizando Google PageSpeed Insights.




El sistema de medición "todo-en-uno" de Google que te permitirá detectar  analizar todo aquello que está haciendo que tu Blog vea lastrada su velocidad de ejecución en los ordenadores de tus usuarios.

Page Speed te proporcionará un listado de sugerencias a cambiar en tus páginas web para conseguir mejorar la experiencia de usuario y optimizar el posicionamiento. Cuenta con información detallada para cada sugerencia dada en base a los problemas detectados, además informa y pondera con una puntuación final la velocidad a la que se ejecutará tu página tanto en dispositivos móviles como en ordenadores. 


Sugerencias de Page Speed analizadas paso a paso hasta el momento:

Conceptos previos imprescindibles:


Midiendo el rendimiento objetivo de nuestro sitio web o Blog: 
  • La medición o benchmark de páginas web no es nada nuevo dentro de esta enorme red de redes que es internet. Si bien es cierto que depende de diversos factores ajenos al propio creador del sitio, también es verdad que se pueden poner los medios necesarios para reducir o atenuar dichos problemas. El usuario puede tener un ancho de banda determinado, problemas de conexión de cierto tipo pero si además le sumamos una incorrecta gestión de la velocidad de trabajo de nuestro sitio, el cóctel resultante le llevará a buscar otra página que "funcione mejor". 
  • Google pone a nuestra disposición un conjunto de herramientas de optimización para la mejora del rendimiento que nuestro sitio web puede dar a los usuarios, su nombre es "PageSpeed". Aprendamos cómo utilizarlo paso a paso con unos simples ejemplos, que a modo de guía básica, permitan luego a los más curiosos o entrenados creadores poner a punto su blog o sitio web. 
  • PageSpeed nos dará un resultado promediado de la eficiencia en materia de rendimiento que nuestro sitio es capaz de ofrecer, dándonos las recomendaciones adecuadas en aquello que pueda afectarnos en nuestros resultados de cara al usuario. 
Mide el rendimiento objetivo de tu sitio web o Blog con Google Page Speed Insights. Paso a Paso:

Utilizando Google Page Speed Insight para analizar el rendimiento de nuestro sitio Web


1) En primer lugar, para poder utilizar "Google PageSpeed" es necesario estar registrado con un usuario Google (de GMAIL, BLOGGER, etc...). Si ya has hecho login en alguna herramienta Google, no te pedirá ni siquiera validación de usuario. Es recomendable realizar el uso de esta herramienta desde un navegador Google Chrome
2) Teclea la URL en la barra de direcciones de tu navegador:
https://developers.google.com/speed/pagespeed/ 
3) Verás una pantalla como la que te muestro a continuación: 

4) En ella, pulsa la opción "Analyze your site online" para que se muestre una pantalla como la que presento a continuación: 

5) Estarás en Google Page Speed Insights. Introduce en la caja de texto de entrada en la que pone "Enter a Web page URL" (debajo del slogan "Make your web faster") la dirección de tu sitio web o blog. Por ejemplo, para un blogger:
http://nombre_blog.blogspot.com.es/
donde "nombre_blog" es el nombre de tu blog. 
6) pulsa el botón "Analyze" para proceder con un análisis de tu sitio web que comprobará todo lo referente al rendimiento del mismo. Cuando termine el análisis (tarda unos segundo, aunque depende del tamaño de la  web a analizar) aparecerá una pantalla como la que te muestro:


 7) Obtienes los resultados de tu análisis. En esta nueva versión de Page Speed te ofrecerá dos "pestañas" con resultados distintos: aquellos que pertenecen a tu sitio web ejecutado desde un cliente "Mobile" o desde un ordenador.
La puntuación del apartado "Mobile" ha ganado mucho peso en los resultados de Page Speed por la importancia que Google le está dando al "mundo móvil": smartphones, tablets, smartclocks, smartv, etc... la apuesta de futuro por esta clase de sistemas no es anecdótica, el uso de estos dispositivos para navegador por Internet está ampliamente extendido y poco a poco irá a más. Es por ello que ahora, más que nunca, debemos prestarle especial valor a dichos resultados.

Comprobando los resultados 
  • Page Speed utilizará unas reglas con las que evaluar el contenido de tu sitio web. Recorrerá su contenido buscando aquello que cumpla o no cumpla sus reglas, para luego poderte hacer un listado de aquello que está correcto o lo que deberías corregir.
  • En la lista de resultados, siempre aparecerán primero las sugerencias que requieren atención especial (prioritarias), después las que su arreglo mejora el rendimiento pero no lo bloquea como sucede con las prioridatarias (intermedias) y, por último, las ya realizadas o las que directamente ha cumplido tu sitio web o Blog y no necesitas arreglar.
  • Debes comprobar los resultados tanto en "Mobile" como en "Desktop". La pestaña "Mobile" ofrece el análisis de ejecución en dispositivos móviles (tablets, smartphones, smartclock, etc...). "Desktop" te informa de la ejecución en ordenadores portátiles o de sobremesa. 
  • Cada resultado de la lista ofrece un enlace en color azul donde te explican qué medidas debes  tomar para solucionar el problema y mejorar tu rendimiento para ofrecer una mejor experiencia de usuario y obtener un mejor posicionamiento.

Nuevas reglas en PageSpeed:



  • Habrás observado que muchas de las reglas aplicadas del año pasado en las diversas guías de Diarios de la nube para resolver estos problemas continúan valiendo en esta nueva versión de Page Speed, pero así mismo, notarás que han aparecido múltiples novedades.
  • Fundamentalmente este año se hace especial hincapié en la optimización total de las peticiones que desde nuestro sitio web o Blog se realizan al servidor donde se está ejecutando. Google ha decido centrarse en ponderar con el "mayor peso", al problema de "tener que ir a buscar un recurso fuera de nuestro sitio web o Blog". Es por ello que el uso de CSS (hojas de estilo que proporcionan la presentación al Blog) o de javascripts externos, penalizan notablemente la puntuación final en Page Speed.
  • Se está apostando por el "CSS y Javascript inline" frente a la solución de "modularizar" estos contenidos en archivos externos a la página.
  • Siguiendo la normas de bajar la cantidad de accesos al servidor, otra de las novedades es que se apuesta por el uso de "sprites" frente a varias imágenes distintas para los pequeños iconos que utilicemos para compartir nuestros contenidos en Internet y otras tareas.
  • En suma, Google prefiere una menor carga de llamadas al servidor desde la página web que evite los tiempos de espera en los accesos al mismo y mejore la velocidad con que los componentes se van dibujando en pantalla. El resultado, aunque puede ser controvertido es claramente, objetivamente, más veloz que utilizando los métodos tradicionales.

Las próximas entradas:

  • Analizaremos con especial atención las reglas y la solución para cada una, explicada al detalle para que pueda abordarse sin dudas por personas con nulos o escasos conocimientos informáticos. Podremos llegar a conseguir resultados de 90 sobre 100 sin necesidad de abordar temas de complejidad como el nuevo tratamiento que hay que dar a las CSS o Javascripts.
  • Para los usuarios más avanzados, nos aproximaremos a 100 todo lo posible. Ofreceremos las soluciones a las nuevas reglas sobre CSS y Javascript que se plantean, alcanzado resultados máximos de 98-99. Emplearemos técnicas de CSS Sprite y compresión de HTML y CSS que mejorarán considerablemente los resultados.
  • En resumen, me propongo en las próximas entregas que mejores tus resultados de rendimiento con tu Blog, tengas los conocimientos que tengas.

Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

20comentarios:

  1. Interesante, pero me pierdo. Mi blog http://streamordie.blogspot.com.es/ ha sacado 79 y 81/100. Eso es aceptable? o debería calentarme la cabeza y arreglarlo? Mis conocimientos en estos aspectos son bastante escasos.. De todas formas la guía me parece muy interesante..

    ResponderEliminar
  2. Hola Ramón c.Cada punto de sugerencia que PageSpeed realiza ha sido analizado para que pueda entenderse el problema y darle solución.

    81 no está nada mal, en mi opinión, creo que sí podrías modificar las imágenes de la portada, de la página principal, es algo más asequible y quizás no te cueste tanto: http://diariosdelanube.blogspot.com.es/2013/09/la-guia-de-rendimiento-para-bloggers_16.html

    Con paciencia y poco a poco se puede conseguir algo de mejor rendimiento y conseguir mejores tiempos de ejecución. La optimización de imágenes de la portada te puede ayudar.

    No obstante, en la visita que he realizado no he visto grandes problemas.

    Para cualquier cosa aquí me tienes, un saludo!.

    ResponderEliminar
    Respuestas
    1. Gracias por la respuesta. He cambiado alguna fuente que no era de blogger y ya me ha subido a 84.. Seguiré investigando..

      Eliminar
    2. ¡Genial!, es bueno quitarse añadidos que realmente no aportan nada y que sean externos. Por otro lado, si ahora optimizas un poco las imágenes seguro que aumenta tu puntuación final.

      Aquí estoy si necesitas algo. Un saludo!

      Eliminar
  3. Hola Miguel.
    He seguido las instrucciones y me sale 79/100 en el teléfono y 85/100 en el ordenador y en las sugerencias me dice:
    "Tu página tiene 2 recursos CSS que provocan un bloqueo. Ello causa un retraso en el procesamiento de la página."y
    "Establecer una fecha de caducidad o una edad máxima en las cabeceras HTTP de los recursos estáticos indica al navegador que cargue los recursos descargados previamente del disco local en lugar de hacerlo a través de la red."
    Si pudieras explicarme que tengo mal y que es lo que hay que hacer te lo agradecería. soy muy torpe en estas cosas.
    Ah! y otra cosa: mi page rank siempre que lo consulto mes sale 0 ¿como es posible?
    Gracias y un gran saludo!!

    ResponderEliminar
  4. ¡Hola amiga!,
    85 sobre 100 ya es un "verde", es decir el icono de la puntuación lo verás en verde porque indica que tu página web tiene una velocidad aceptable (amarillo sugiere la posibilidad de realizar cambios y rojos sugiere que es necesario realizar cambios).

    - Los 2 recursos CSS bloqueantes son típicos de Blogger, porque trae sus propias hojas de estilo y al estar en un servidor externo a tu página pueden producir un leve bloqueo. No es un problema grave y todos los Blogs lo tiene, salvo que hagan "CSS Inline". Si quieres hacer CSS Inline (aunque desde ya te digo que en tu caso no es necesario) puedes realizar este tutorial: http://www.diariosdelanube.com/2013/09/la-guia-de-rendimiento-para-bloggers_10.html

    - El segundo aviso, el referente a la caducidad de las cabeceras http no tiene solución en Blogger. No puedes reescribir las cabeceras HTTP de tu Blog, no sirve de nada intentarlo con metadatos tampoco, así que ni te preocupes. Si quieres aprender algo más sobre este tema: http://www.diariosdelanube.com/2013/09/activar-la-compresion-de-contenidos.html

    Así pues, no tienes ningún problema importante o destacable, es normal.

    El PageRank tampoco debe preocuparte... ¡yo soy pr 0!... las páginas que calculan el pr lo hacen por estimaciones en función de la cantidad de enlaces a tu sitio web de que dispones. Google jamás dará tu Pagerank a nadie y si te fijas en casi todas pone "calcula" porque no es el verdadero valor asignado.

    La relevancia de una página, sobre todo con las últimas actualizaciones que ha implementado Google ya no se basan exclusivamente en la cantidad de enlaces (pues ha sido un tema con el que se ha cometido bastante "fraude").

    Lo fundamental para ganar relevancia es hacer contenido de calidad, lo demás no sirve para nada. Te recomiendo esta lectura: http://www.diariosdelanube.com/2013/09/5-sencillos-consejos-sobre-seo-y.html

    Un saludo para ti también.

    ResponderEliminar
  5. Hola como estas, primero que nada felicitarte por el artículo y segundo pedirte una mano ya que el sitio de mi firma cada día es más lento y ando un poco perdido si es posible quedo atento a cualquier información que veas que me pueda ayudar por lo menos para tratar intentar ponerlo sobre 80.

    Un abrazo.

    Andrés.
    @Dequr

    ResponderEliminar
    Respuestas
    1. Es que Pagespeed ha cambiado y actualizado las reglas recientemente y se ha vuelto más riguroso. Pero con cada regla que te expongo en la guía alcanzas el 90 seguro. Sobre todo repasa la parte del CSS render blocking y el javascript blocking: http://www.diariosdelanube.com/2013/09/la-guia-de-rendimiento-para-bloggers_10.html

      También han actualizado mucho la sensibilidad contra la priorización del javascript para contenido visible: http://www.diariosdelanube.com/2013/09/prioriza-el-contenido-visible-en-tu.html

      Ve intentando hacer la guía con copias de seguridad y donde te atasques pregunta. Me tienes aquí para ayudar.

      También hago yo mismo las optimizaciones pero debido al tiempo que consume realizarlas fijo un presupuesto primero con cada cliente.

      En tu caso, inténtalo primero y te doy el soporte que necesites por comentario, en caso extremo también tienes la otra opción.

      Un saludo,

      Eliminar
  6. Hola Rafa, la velocidad para ordenador que tienes no está mal, lo que sucede que la de móvil se ve lastrada porque las normas son un poco más exigentes para esta clase de dispositivos (debido a sus limitaciones tecnológicas).

    Los pasos en general para realizar una optimización profunda requieren cierto conocimiento técnico. Tengo está guía paso a paso para ir resolviendo cada sugerencia de Pagespeed: http://www.diariosdelanube.com/2013/09/la-guia-de-rendimiento-para-bloggers_17.html

    Cualquier cosa aquí me tienes.

    ResponderEliminar
  7. Gracias Miguel. Creo que me voy a arriesgar a tratar de modificar la plantilla. De cualquier modo, siempre la puedo volver a importar. Sin embargo, me encuentro con un problema nada más empezar: al seleccionar "exportar blog", me sale un error 404. ¿Por qué puede ser esto?

    ResponderEliminar
  8. La verdad que no lo sé con exactitud. Al exportar debería bajarte el archivo sin más. Quizás sea algún tema de firewall que impide que puedas bajarte el archivo. En este caso escribe tu problema aquí: https://productforums.google.com/forum/#!categories/blogger-es y a ver si pueden decirte qué es con exactitud.

    Un saludo.

    ResponderEliminar
  9. Debía ser un error pasajero, porque ya puedo exportarlo, aunque con algún fácil arreglillo me conformo. Lo que he hecho ha sido simplemente suprimir algún elemento que dificultaba la carga y, además de mejorar algunos puntos la velocidad, en la valoración del estado del sitio de Adsense ya me ha dado los cinco puntos. Con eso me doy por satisfecho. Si más adelante veo que retrocede la puntuación, ya modificaré la plantilla como indicas. Gracias por toda la información que presentas y por tu paciencia. Un saludo.

    ResponderEliminar
  10. Me alegro que te haya funcionado. Para mi es un placer intentar ayudar. Cualquier cosa aquí estoy.

    Un saludo!!!

    ResponderEliminar
  11. Hola muy inteesante el articulo, mi blog es http://botijasdemipais.blogspot.com/ . El analisis me dio 77/100 en el ordenador y 100/100 en el móvil, me gustaría saber que es posible mejorar para que en el ordenador me evaluara mejor. Gracias por el tiempo y un abrazo desde Montevideo. Uruguay

    ResponderEliminar
    Respuestas
    1. Hola Julio,
      tus evaluaciones son buenas, no creas que todo el mundo consigue un 77. En Blogger, lo mejor es que ejecutes paso a paso la guía: http://www.diariosdelanube.com/2013/09/la-guia-de-rendimiento-para-bloggers_17.html (especialmente la parte de bloqueo en css y js).

      Cualquier duda puedes irme preguntando en cualquiera de las entradas de la guía anterior y con gusto te atenderé (es que la pregunta es muy genérica, verás que podrás centrarla más ejecutando la guía).

      Un saludo!.

      Eliminar
  12. Hola, conocerás a alguien que realice la optimización de un blog de Blogger? No me atrevo a tocar nada... Gracias!

    ResponderEliminar
    Respuestas
    1. Hola, yo mismo puedo realizar estas optimizaciones pero es algo que tiene precios altos. De todas formas, siguiendo mis instrucciones puedes hacerlo tú mismo y te ahorras dinero.

      Cualquier cosa aquí estoy para ayudar en caso de que lo intentes.

      Un saludo!

      Eliminar
    2. Gracias, intentaré a ver; sino comienzo a ahorrar en mi piggy bank ;)

      Eliminar
    3. No, no, pregunta tus dudas tranquilamente e intento ayudarte. Es paciencia y a la vez esfuerzo.

      Cualquier cosa aquí estoy.

      Un saludo!

      Eliminar
  13. Te agradezco estos buenos consejos Miguel para mejorar nuestro entorno web, muchas gracias!

    ResponderEliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.