21 abr. 2013

Mide el rendimiento de tu sitio web o blog

¿Cómo es de rápido el servicio que prestas con tu web?, ¿es suficientemente ágil la navegación por tu blog?. Siempre los creadores de contenidos para Internet nos cuestionamos qué tal verán los usuarios finales nuestra web en sus navegadores, siempre nos preguntamos si nuestras páginas se ejecutan a la velocidad adecuada en los ordenadores de los usuarios, sin recurrir a la memoria caché de sus archivos temporales.

Dicen que la primera impresión es la que cuenta y ciertamente, no sólo "cuenta" que nuestras páginas sean visualmente atractivas, es necesario también que se carguen rápidamente porque sólo en ese instante inicial, dependiendo del tiempo que transcurra en la carga, ya podemos estar perdiendo lectores.

Para mejorar los tiempos de acceso a nuestro público, debemos tomar medidas que palíen problemas derivados de un uso incorrecto de imágenes, de hojas de estilos u otros componentes web que empobrecen una navegación de calidad.

Si te interesa mejorar la velocidad de tu sitio o simplemente comprobar cuán rápido es y qué respuesta le ofrece al usuario, este artículo te interesa.



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 neustros resultados de cara al usuario.

Cómo utilizar Google PageSpeed


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 en pantalla:

 7) Obtienes los resultados de tu análisis.

Consideraciones de los resultados:


  • En primer lugar se aprecia bajo "Overview" que se presenta una puntuación promedio basada en el análisis realizado por el propio Google PageSpeed. Calculará en función de los problemas que detecte en los componentes o la realización de nuestro sitio, así como de aquello que detecte correctamente construído un resultado total que es el promedio al lado del texto "overall PageSpeed score". La puntuación que asigna PageSpeed no está basada en los tiempos en que se llegan a cargar las páginas, sino que profundiza en todo aquello que los alarga para sugerirnos cambios que puedan mejorar el rendimiento general.
  • Justo bajo la puntuación, aparece "Suggestion Summary", donde se nos ofrecen las sugerencias que podrían incrementar la optimización de nuestro sitio web o blog para alcanzar mejores prestaciones a nivel de rendimiento.
  • A la izquierda, asignará prioridades a cada aspecto detectado que requiera tu atención, siendo "High Priority" las que más drásticamente pueden mejorar el rendimiento general, "Medium Priority" las que pueden mejorar notoriamente la velocidad y "Low Priority" las que menos impacto pueden estar produciendo en el resultado final.
  • Al realizar "clic" sobre cualquiera de las sugerencias informadas en el menú izquierdo, nos llevará a una descripción detallada donde nos dará el enlace al componente que puede mejorarse.
  • Muchas de las optimizaciones que se presentan no tienen porqué necesariamente realizarse, partamos de la base de que si eres un usuario de Blogger, salvo que hayas realizado cambios muy drásticos sin el conocimiento adecuado en las páginas, no deberías tener problemas realmente graves. Sí es interesante comprobar cómo el peso de las imágenes (tamaño en KB), los vídeos utilizados, las redirecciones incorrectas, las hojas de estilo u otros componentes, siempre pueden reducirse para ahorrar espacio en el limitado ancho de banda del usuario y así obtener unos tiempo de carga mucho mejores. 
    • Te ofrecerá aquellos componentes de tu sitio que más tardan en cargarse, contándote los milisegundos en que se muestran en pantalla.
    • Qué imágenes pueden mejorarse por su excesivo peso o su costoso escalado dependiendo de las resoluciones empleadas por los usuarios.
    • Controlar el uso de Javascript o de CSS de gran tamaño.
    • Te ayudará a controlar el tiempo que debes mantener en caché ciertos componentes de tu página.
    • Un montón de características para analizar que harán las delicias de los que gustan de exprimir el máximo rendimiento a sus creaciones.
  • Cada mejora entregada, en su detalle proporciona siempre un "Learn more" donde te explican qué puedes hacer para mejorar el problema. Muchos cambios aquí son de nivel "avanzado" o requieren conocimientos técnicos para saber lo que se está haciendo, no os adentréis a realizar cambios sin el conocimiento adecuado.

Una herramienta Google "redonda", fácil de usar, de sencillo acceso, que te proporciona a cambio información muy beneficiosa para mantener tu sitio web a punto para tus usuarios.

Si tenéis cualquier duda, tenéis disponible los comentarios donde intentaré ayudaros.

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.

17comentarios:

  1. Lo he hecho, pero no entiendo ninguna de las sugerencias que me ha dado Google jeje.

    ResponderEliminar
    Respuestas
    1. Lo importante es comprobar si hay algo que está realmente mal. En un Blogger es difícil que haya muchos problemas. Si quieres ve preguntando y lo comentamos.

      Primero - ¿Qué puntuación general te ha salido?
      Segundo - ¿Hay algún error grave?.

      Eso puede hacernos más facil poder entender si hay algo que realmente requiera atención.

      Saludos!

      Eliminar
  2. Hola. No sé en que entrada colocar esta pregunta por si me puedes ayudar:
    En una entrada mía quise hacer un enlace a mi entrada de Foix, de tal manera que lo que hice, es sustituir la entrada de Foix por aquélla. Solamente conserva las etiquetas originales que le puse. Lo demás se ha sustituido por esta otra entrada.
    Soy tan, pero tan ignorante que no tenía hecha ni siquiera una copia en word. ¿Hay alguna manera de recuperar, al menos el texto?

    ResponderEliminar
    Respuestas
    1. Sin copia de seguridad si salvaste es casi imposible. Todo se va guardando en el servidor y no se puede recuperar si es "machcacado". Quizás una oportunidad sería buscarlo por google para ver si se puede recuperar desde allí.

      Eliminar
  3. Realiza tus prueba de carga de tus aplicaciones web de marca empresarial de una manera rápida y eficaz.Con la ayuda de colectores de rendimiento
    Agileload puedes delimitar umbrales y monitorear el CPU, disco duro, uso de memoria, adaptadores de red, sesiones de usuario, hilos, conjuntos de bases de datos, cache entre otros .

    ResponderEliminar
  4. Hola, me encanta tu blog, he hecho con mucha facilidad las cosas que tan bien explicas, pero el informe de Google PageSpeed, no termino de entender¿serías tan amable de decirme que es lo que tengo que hacer? mi blog es http://lavidaelamoryvos.blogspot.com/
    Solo una guia para solucionar lo que me pide,Te lo agradesco.

    ResponderEliminar
    Respuestas
    1. Bueno,
      el rendimiento de tu sitio web es bastante bueno. No obstante, puedes aplicar diversas mejoras. Te recomiendo que realices estas guías a tal efecto para mejorar considerablemente el rendimiento:

      Este en primer lugar puede venirte bien:

      http://diariosdelanube.blogspot.com.es/2013/05/como-solucionar-los-problemas-de.html

      Luego haz estos:

      http://diariosdelanube.blogspot.com.es/2013/05/mejora-la-velocidad-de-tu-blog-i.html

      http://diariosdelanube.blogspot.com.es/2013/05/mejora-el-rendimiento-de-tu-blog-ii.html

      http://diariosdelanube.blogspot.com.es/2013/06/mejora-la-velocidad-de-tu-blog-iii.html

      http://diariosdelanube.blogspot.com.es/2013/06/mejora-la-velocidad-de-tu-blog-iv-que.html

      En cuanto tengas cualquier duda o te atasques en cualquier punto, aquí me tienes para ayudarte.

      Un saludo!.

      Eliminar
  5. Hola Miguel , acabo de hacer un analisis del blog y como resultado me da un 75% en móvil y un 77% en escritorio, me recomienda que retire un 2 bloqueos de Java Script,y dos bloqueos de CSS y que optimice la entrega CSS..uff, pero yo no me atrevo a tocar nada, aparte, no entiendo exactamente que es lo que debo cambiar, estoy hecha un lio...y te agradezco mucho tu post, pero me hace falta un empujoncito, si tienes un ratito y puedes , te agradeceria que me explicases que debo hacer, muchisimas gracias por compartir tus conocimientos,

    ResponderEliminar
    Respuestas
    1. Hola Macu,
      en primer lugar, en Blogger los CSS, salvo que sean metidos por tí, no vas a poder cambiarlos. Así pues olvida los CSS.

      En segundo lugar, revisa los scripts o aplicaciones externas que tienes puestas en el Blog de las cuales puedes prescindir o sustituir por otras.

      En tercer lugar, realiza la parte de la guía dedicada a las imágenes, ese punto es fundamental para conseguir una buena puntuación.

      En cuanto te atasques avísame.

      Un saludo y muchas gracias.

      Eliminar
  6. Excelente dato!
    Tengo 100/100 =)
    la seguiré usando en adelante.

    ResponderEliminar
    Respuestas
    1. Muy bueno Natalie!,
      eso te garantiza un posicionamiento mejor frente a otros sitios de menor rendimiento. Enhorabuena.

      Eliminar
  7. Hola, he hecho el analisis y sale algo mal pero no lo entiendo , no sé que debo arreglar ni como, osea, inutil total para ententer esto.¿podrias verlo y decirme que hacer , por favor?muchas gracias.
    mi blog es :http://lavidaelamoryvos.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Voy a lanzar un nuevo tutorial al respecto en breve porque han introducido muchos cambios. No obstante te comento lo que significa lo que te marcan como prioritario y en la guía intentaré explicar como solucionarlo:

      -"Your page has 6 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page.": Te alertan del uso de hojas de estilo (archivos .css que sirven para darle formato a lo que sale por tu blog) en archivos externos, esto hace que Blogger tenga que realizar accesos desde su servidor a estos ficheros externos con la consiguiente pérdida de tiempo. Aquí la opción es hacer "css y javascript inline", lo explicaré en la guía. Este punto es complejo y el cambio puede costarte hacerlo. Aún teniendo el error de bloqueo de css se puede llegar a sacar un 92.

      - "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." Aquí sí que no podrás hacer nada porque se trata de tocar las cabeceras HTTP del servidor de tu Blog. Las cabeceras HTTP le dicen al navegador de tus usuarios cómo debe comportarse con la caché a la hora de "dibujar" los componentes que conforman tu Blog. Como no tienes acceso a las cabeceras HTTP al ser un Blog alojado en Blogger, no puedes cambiarlo. No pasa nada porque puedes llegar hasta un 97/98 a pesar de esta advertencia. No te preocupes por ella.

      "Compressing resources with gzip or deflate can reduce the number of bytes sent over the network." Este te sale porque estás utilizando aplicaciones externas a Blogger en tu Blog que no comprimen con gzip sus scripts. Aquí se trata de buscar qué aplicaciones son y ver si se puede prescindir de ellas o buscar un script de las mismas que sí pase por gzip.

      "Properly formatting and compressing images can save many bytes of data." Esto sí puedes solucionarlo, se trata de que optimices las imágenes que te presentan en la lista, haz este tutorial: http://diariosdelanube.blogspot.com.es/2013/05/mejora-la-velocidad-de-tu-blog-i.html

      Las demás aluden a la compresión del texto de la página y los javascripts. Esto es "complejo" y es preferible que cuando finalice el tutorial, lo hicieras a partir de él.

      Por ahora lo que veo que mejoraría tu puntuación es claramente la optimización de imágenes.

      Es un tema complejo, pero el rendimiento mejora muchísimo el posicionamiento y hace la experiencia mucho más agradable a los usuarios.

      Iré haciendo tutoriales sobre este tema en específico para facilitarlo más.

      Un saludo!,

      Eliminar
  8. Hola como pongo el widget que tienes en tu blog, lado izquierdo el que dice likes, twits, g+, share¡

    ResponderEliminar
  9. Hola Musica de la buena, escribí esta guía para hacerlo paso a paso: http://diariosdelanube.blogspot.com.es/2013/09/introduce-una-barra-lateral-deslizante.html

    Ejecútalo y me cuentas. Cualquier cosa aquí estoy. Un saludo!

    ResponderEliminar
  10. Hola Miguel!
    Tengo una duda en cuanto a este asunto. Para mejorar la velocidad de carga del blog indicando la fecha de caducidad de la caché del navegador, ¿se puede hacer en blogs de Blogger con dominio propio? Sé que en los blogspot no se puede acceder al htaccess, pero ¿teniendo dominio propio sí?

    ResponderEliminar
    Respuestas
    1. Hola Ana,
      el rendimiento ayuda a la mejora del posicionamiento y a la experiencia de uso de la gente que visita tu Blog. Te recomiendo esta lectura: http://www.diariosdelanube.com/2013/09/la-guia-de-rendimiento-para-bloggers_17.html

      En cuanto a la consulta, el problema en Blogger es que no puedes controlar la cache directamente por htaccess ni aunque tengas dominio propio (ya que en Blogger las páginas residen en el servidor de Blogger y el dominio propio es una redirección de nombre).

      No te preocupes por ello porque tampoco es una condición indispensable en Pagespeed. Lo fundamental sobre todo es la optimización de imágenes y la utilización inline de CSS y Javascript. Todo ello lo encontrarás en la anterior guía.

      Por supuesto para cualquier duda, será un placer poderte ayudar en lo que necesites.

      Un saludo y muchas gracias por participar!!!

      Eliminar

 

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