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.
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
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:
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.
Lo he hecho, pero no entiendo ninguna de las sugerencias que me ha dado Google jeje.
ResponderEliminarLo 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.
EliminarPrimero - ¿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!
Hola. No sé en que entrada colocar esta pregunta por si me puedes ayudar:
ResponderEliminarEn 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?
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í.
EliminarRealiza 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
ResponderEliminarAgileload 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 .
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/
ResponderEliminarSolo una guia para solucionar lo que me pide,Te lo agradesco.
Bueno,
Eliminarel 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!.
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,
ResponderEliminarHola Macu,
Eliminaren 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.
Excelente dato!
ResponderEliminarTengo 100/100 =)
la seguiré usando en adelante.
Muy bueno Natalie!,
Eliminareso te garantiza un posicionamiento mejor frente a otros sitios de menor rendimiento. Enhorabuena.
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.
ResponderEliminarmi blog es :http://lavidaelamoryvos.blogspot.com/
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:
Eliminar-"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!,
Hola como pongo el widget que tienes en tu blog, lado izquierdo el que dice likes, twits, g+, share¡
ResponderEliminarHola 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
ResponderEliminarEjecútalo y me cuentas. Cualquier cosa aquí estoy. Un saludo!
Hola Miguel!
ResponderEliminarTengo 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í?
Hola Ana,
Eliminarel 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!!!