Ayudándote a mejorar Google Pagespeed Insight

miguelcolomer · 2 Jun 2014

¿Qué es Google Pagespeed Insights?

Se trata de una herramienta desarrollada por Google Developers para analizar un sitio web desde la perspectiva del rendimiento y la experiencia de usuario de un sitio web.

Pagespeed realiza mediciones que comprueban punto por punto el código utilizado en una web para indicarle sugerencias de mejora que se dividen en dos partes:

Mejoras de rendimiento

Ofrece sugerencias para mejorar cada apartado de una web en el que pueda afectarse al rendimiento de la misma. Analiza el peso de las imágenes, el uso de las CSS, el Javascript, la caché, etc... dando una puntuación general y soluciones a modo de sugerencia para arreglar aquellos problemas que puedan poner en riesgo la calidad del sitio por tener un rendimiento pobre.

Mejoras de experiencia de usuario

Se centra fundamentalmente en la experiencia de usuario para móviles y cualquier dispositivo portátil de pantallas reducidas. Analiza si los componentes se están mostrando o pueden mostrarse en pantalla de manera adecuada al usuario. Si un botón es excesivamente pequeño para ser "pulsado" desde un móvil o el texto puede ser ilegible, Pagespeed informará al usuario ofreciendo una sugerencia a tal efecto.

¿Cómo funciona Google Pagespeed?

Simplemente accede a esta dirección e introduce la dirección de tu sitio web para analizarlo y ver qué mejoras de rendimiento puedes realizar.

¿Qué puedo hacer para mejorar mi rendimiento?

Tienes este hilo completo donde se ayuda a solucionar las sugerencias que Pagespeed presta.

alevin00 · 2 Jun 2014

Estupenda iniciativa
Primer tema, me gusta utilizar el bloque de enlaces 728x15 y me da problemas para móviles por lo que lo he quitado, probé con el adaptable, pero solo funciona con bloques de anuncios y no con bloque de enlaces.
¿¿Hay alguna solución??.

. ,

miguelcolomer · 2 Jun 2014

alevin00 dijo:
Estupenda iniciativa
Primer tema, me gusta utilizar el bloque de enlaces 728x15 y me da problemas para móviles por lo que lo he quitado, probé con el adaptable, pero solo funciona con bloques de anuncios y no con bloque de enlaces.
¿¿Hay alguna solución??.

. ,

Hola!,
los bloques de anuncios, sean adaptables o no, no pueden retocarse bajo ningún concepto pues esto conlleva la suspensión inmediata del uso de AdSense.

Yo lo que he hecho es no utilizar bloques de anuncio en la página principal y dejarlos exclusivamente para el detalle de las entradas.

En cuanto a AdSense para bloques de enlaces, en mi web estoy utilizando anuncios de display y texto y creo que funciona adecuadamente, el problema es que dependes del anunciante en cuanto a si ha optimizados las imágenes, los scripts y de más.

No obstante, una puntuación "en verde" (creo que por encima de 80), ya mantiene un buen nivel de rendimiento que debe verse acompañado de una buena adaptación para ejecución en móviles para conseguir un mejor posicionamiento.

Don Gato · 2 Jun 2014

Gracias compañero, buena iniciativa, quedo a la espera de la guía si decides compartirla :encouragement:

miguelcolomer · 2 Jun 2014

Hola,
la publicaría pero no soy administrador y no sé si contraviene las normas publicar enlaces externos. De todas formas, preguntad lo que necesitéis que para eso creé el hilo

Un saludo!!!

leit0s · 2 Jun 2014

Gracias amigo por compartir, dime en blogger has encontrado alguna manera de optimizar los botones sociales que son los que generan peso en nuestros blogs; mira este hilo tambien hablado del mismo tema pero orientado a webs no blogger. http://forobeta.com/tutoriales/334814-maxima-puntuacion-posible-google-pagespeed.html

miguelcolomer dijo:
Buenos días,
inicio este hilo por si desean realizar optimizaciones de rendmimiento en Google Pagespeed. Es mi manera de intentar colaborar con ForoBeta, participo en los grupos de Google de soporte a la herramienta y bueno, qué mejor que hacerlo en un sitio como ForoBeta.

Si tienen cualquier duda pregunten lo que prefieran.

No sé si incluir la temática y los enlaces completos de la guía que tengo realizada para no hacer spam indebido de mi web, en esto haré lo que digan los administradores.

Un saludo,

miguelcolomer · 3 Jun 2014

leit0s dijo:
Gracias amigo por compartir, dime en blogger has encontrado alguna manera de optimizar los botones sociales que son los que generan peso en nuestros blogs; mira este hilo tambien hablado del mismo tema pero orientado a webs no blogger. http://forobeta.com/tutoriales/334814-maxima-puntuacion-posible-google-pagespeed.html

Hola,
no sé si es correcto o no, en caso de equivocarme ruego a los administradores me lo indiquen para quitar los enlaces porque no sé exactamente cómo funciona esta cuestión en forobeta.

Los botones para redes sociales son un "enemigo" del rendimiento... pero hay manera de combatirlo:

1 -CSS Sprite: CSS-SPRITE - Pon tus iconos para redes sociales a la máxima velocidad

2- If cond: Otra opción, en Blogger (la que yo recomiendo), es utilizar el "if cond" (una condición) para que éstos no afecten a la página principal y sólo se encuentren en el interior del detalle de las entradas. Aquí tienes un ejemplo con AddThis (en el paso 5): La guÃ*a para añadir botones para conectar con las redes sociales tu Blog Lo que hago es poner <b:if cond='data:blog.pageType == "item"'> de esta manera evitas en gran medida la carga en la página principal.

Debes poner los botones con:

<b:if cond='data:blog.pageType == "item"'>
<script del botón/>
</b:if>

3- Un ejemplo con barra deslizante: Te dejo un ejemplo de cómo pongo yo mi barra para compartir con redes sociales con AddThis: Introduce una barra lateral deslizante para que tus usuarios puedan compartir tus contenidos por las redes sociales En ella he metido [MENTION=16931]medi[/MENTION]a para hacer el código responsive en las hojas de estilo y verás que sólo se dibuja en el detalle de las entradas (es una AddThis "tuneada").

4- script asíncrono: Utiliza siempre en la medida de lo posible los scritps asíncronos (asynchronous version). Siempre suelen tener scripts que se ejecutan de manera asíncrona. Es decir, cuando la página se dibuja en el navegador del cliente, el dibujado de ésta no depende de que el script finalice, continúa con el resto de la página sin "bloquearse" hasta que se dibuje el citado script.

Yo me inclinaría por quitar las llamadas a los botones para redes sociales fuera de la página principal y sólo los dejaría en las entradas principales. Así mismo, la medida más efectiva para la puntuación con Pagespeed es atacar el problema del CSS y JS render Blocking, eso mejorará bastante tu rendimiento.

Cualquier duda me dices. Un saludo!!!

Ayudándote a mejorar Google Pagespeed Insight

miguelcolomer Seguir

alevin00

miguelcolomer

Don Gato

miguelcolomer

leit0s

miguelcolomer