17 jun 2014

Ayuda con tu Google Pagespeed

Portada Ayuda Pagespeed
Esta es una entrada de soporte para todos aquellos que necesiten mejorar el rendimiento de su Blog o sitio web. Para conseguirlo vamos a utilizar Google Pagespeed Insights: la herramienta de medición y mejora de rendimiento y usabilidad de Google. Lo único que tienes que hacer es crear un comentario para que pueda darte soporte, de manera que  plantees tus dudas del informe de Pagespeed y pueda asesorarte en todas ellas para solucionarlas. ¿Empezamos?.



¿Qué es Google Pagespeed Insights?

Se trata de un servicio de Google Developers que te permitirá conocer aquellos puntos de tu web que deben ser mejorados para conseguir un rendimiento y una usabilidad aceptable para tus usuarios.


  • Pagespeed analizará el código fuente de tu web para ofrecerte las mejoras en materia de rendimiento que debes aplicar. Te avisará cuando tengas código que bloquee el correcto dibujado de la página o cuando utilices imágenes sin optimizar que puedan representar un problema para tu velocidad de ejecución.
  • Adicionalmente, Pagespeed hará un análisis de la usabilidad de tu sitio web para móviles y dispositivos portátiles. Controlará si hay botones, zonas de tu web o código que pueda no estar adaptado o preparado para funcionar en móviles o tabletas.

¿Qué ventajas me ofrece un buen rendimiento y usabilidad en mi Blog?

Pagespeed te ayuda fundamentalmente a mejorar la calidad de tu Blog. Dicha calidad puede redundar en un mejor posicionamiento: el contenido de calidad apoyado por un buen rendimiento y usabilidad siempre será mejor posicionado que el que no ha sido optimizado.

¿Cómo funciona esta ayuda de Google Pagespeed para tu Blog?

Simplemente realiza un análisis de tu Blog siguiendo los pasos explicados abajo y plantea tus dudas en los comentarios. Trataré de responder en riguroso orden cada duda paso a paso para darte soluciones a las sugerencias que PageSpeed te informa.

¿Qué tengo que hacer para probar mi Blog con Pagespeed?

1) Es necesario estar registrado con un usuario Google (de GMAIL, BLOGGER, etc...). Si ya has hecho "login" (accedido) 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.
8) Con los resultados o las dudas que te surjan me preguntas en los comentarios lo que necesites. No es necesario que pongas todo el informe Pagespeed, sólo plantea tus dudas.

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.

25comentarios:

  1. Esta entrada me viene al pelo porque justo hoy he estado mirando la velocidad de carga de la página y ronda los 5 segundos de media.
    Mi blog es detijerarapida.blogspot.com.es y como prioridades me pone:
    - Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página
    y por otro lado optimizar imágenes.

    Respecto al JavaScript estuve buscando en foros y blogs como solucionarlo y todo lo que he leído me suena a chino. Y sobre las imágenes, ultimamente redimensiono a 400x600 píxeles y las pongo en tamaño real, pero no se si será suficiente.

    Cualquier pista que me pueda ayudar me vendrá genial, muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola Laura, vamos parte por parte como puede ser extenso hagamos una primera parte y lego vamos "atacando" las demás:

      1) OPTIMIZACIÓN DE IMÁGENES NECESARIA (primero nos centramos en este punto y luego pasaremos a los demás):

      Si se comprime http://1.bp.blogspot.com/…Y/dWTWdXh-dQ8/s1600/Mei+tai+mapaches.jpg sin pérdida de información, supondría un ahorro de 22,6 KB (reducción del 16%).
      Si se comprime http://2.bp.blogspot.com/…1igFNfKWMEw/s1600/Mei+tai+elefantes-.jpg sin pérdida de información, supondría un ahorro de 20,1 KB (reducción del 18%).
      [...]

      Para resolver el problema de las imágenes sin optimizar debes utilizar dos programas que Google recomienda en su ayuda de Pagespeed: Optipng y jpegtran.

      Ambos son "raros" de utilizar al principio, pero luego verás que es algo que se hace rápidamente.

      Para optimizar el rendimiento de tus imágenes tienes esta guía detallada: http://www.diariosdelanube.com/2013/06/mejora-la-velocidad-de-tu-blog-iii.html

      El resumen es el siguiente:

      1) PARA IMÁGENES PNG:

      te descargas optipng de aquí: http://sourceforge.net/projects/optipng/files/OptiPNG/optipng-0.7.5/optipng-0.7.5-win32.zip/download?use_mirror=heanet&download=

      En una ventana de comandos de windows te diriges a la carpeta donde tengas tus imágenes en formato .png y escribes "optipng -o7 *.png". Esto hará que queden optimizadas todas las imágenes png.

      También puedes optimizar las imágenes con http://ezgif.com/optipng, una web donde subes la imagen o imágenes y te las devuelve optimizadas.

      2) PARA IMÁGENES JPG:

      Te descargas jpegtran de aquí: http://jpegclub.org/jpegtran.exe

      En una ventana de comandos de windows te diriges a la carpeta donde tengas tus imágenes en formato .jpg y escribes "jpegtran -optimice nombre_de_jpg_origen.jpg nombre_de_jpg_destino.jpg". Esto hará que queden optimizadas todas las imágenes jpg.

      Otra alternativa si te resulta complicado el jpegtran es conectarte a http://jpeg-optimizer.com/ y meter la lista de imágenes que deseas optimizar.


      Realiza primero esta parte y cualquier duda me vuelves a preguntar. Hazlo por el momento sólo con las imágenes que te indica la lista de Pagespeed.

      Un saludo y cualquier cosa aquí estoy, ve preguntado lo que necesites (verás qué diferencia cuando optimices las imágenes ;)

      Eliminar
    2. Este comentario ha sido eliminado por un administrador del blog.

      Eliminar
    3. Este comentario ha sido eliminado por el autor.

      Eliminar
  2. Yo no tengo dudas ya que gracias a tus guías y a tu ayuda mi blog va a 100 en versión móvil y PC en Pagespeed. Millones de gracias Miguel!!!

    ResponderEliminar
  3. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  4. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  5. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  6. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. Perdonad que tuve un problema con el sistema de comentarios, ya está de nuevo en marcha todo y recuperado. Un saludo.

      Eliminar
  7. Excelente entrada Miguel, Felicitaciones, no sé como le haces para tener una web tan chula e interactiva en la parte superior y a la vez tan rapida (ojo que me la he comprobado en el page speed :-).

    Voy a hechar un vistazo cuando estee por mi ordenador porque mi web carga poco lenta en móviles.

    Un consejo a considerar si es que alguien me lee es "No importar 'demasiadas' fuentes (las de Google Fonts por ejemplo) a tu plantilla de blogger". Creo que a la larga te pasa la factura.

    Saludos desde www.soporteparapc.com y muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Andrés, es que las fuentes muchas veces se meten vía .css en el head y sobrecargan esa zona, pero no es uno de los puntos más negativos.

      Tengo pendiente sacar una entrada con el manejo de scripts para un rendimiento óptimo, ese es uno de los puntos que más afecta la velocidad de dibujado en el navegador.

      Un saludo!

      Eliminar
  8. Hola Miguel:

    Un artículo fantástico, me han salido un montón de cosas, así que empezaré con el primer comentario porque me da el mismo resultado entre otros.

    Y ya veré los demás. Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Ana, no te preocupes, comienza primero por la optimización de imágenes: http://www.diariosdelanube.com/2013/05/como-solucionar-los-problemas-de.html y este otro puede ayudar también: http://www.diariosdelanube.com/2013/06/mejora-la-velocidad-de-tu-blog-iii.html

      Y cualquier duda tienes aquí mi soporte total. Un saludo!

      Eliminar
    2. Muchas gracias, si no entiendo algo de tus tutoriales te aviso.

      Excelente trabajo.

      Eliminar
    3. Aquí estoy para cualquier duda. Es un poco técnico el tema pero merece la pena. Un saludo!

      Eliminar
  9. Pues he intentado con el enlace de tu artículo de tus imágenes. Pero por más que paso el ratón por encima de fotos una y otra vez de todas las maneras no me sale ninguna opción al lado. No hay manera

    ResponderEliminar
    Respuestas
    1. Hola Ana, es que esos enlaces desde comentarios no se pueden hacer clic, son para copiar y pegar en la barra de direcciones de tu navegador.

      ¿Era esa tu duda?, si no es vuélveme a escribir y te digo.

      Un saludo!

      Eliminar
  10. Hola Miguel, muchas gracias por hacernos la luz en este tema de la optimización. Ahora, el cmd lo sé usar y ejecutar, sólo que me surge la siguiente pregunta: tengo que hacer esto con CADA una de las fotos que tengo subidas al blog? O sea, después de "optimizarlas", debería entrar en cada artículo, borrar la imagen gorda, subir la flaca y eso con CADA imagen? Perdón, puede que no haya entendido bien sino.

    Además, al ejecutar el CMD e incluir el nombre de la foto... si tengo una foto que se llama "Ruta del Mate.jpg"... ¿cómo pongo los espacios?

    Ayyy! Help! Saludos!!! :)

    ResponderEliminar
    Respuestas
    1. Gracias a ti Flor, un placer ayudar, para eso estoy aquí.

      El jpegtran es un poco incordio porque no admite el comodín *.jpg pero optipng si... por eso hago todo en png y optimizo ahí.

      Si son muchas imágenes, lo mejor es un optimizador web que utilice jpegtran u optipng.

      Lo de los espacios te lo debería identificar.

      Yo lo más fácil que he visto (aunque tengo que hacer una guía de ello) es usar la extensión de Pagespeed para Google Chrome. En ella pasas el análisis y en los resultados te devuelve en la lista de imágenes, cada imagen optimizada automáticamente ¡es una pasada! si te atreves a usarlo.

      Un saludo!!!

      Eliminar

 

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