¡Llegamos a 27.278.323 visitas gracias a ustedes! ☆

Page Speed

De WikicharliE
Page Speed
Bienvenido a Departamento de Sistemas e Informática de WikicharliE

Presentación

Logo Page speed.jpg

Page Speed es una herramienta de análisis del rendimiento basada en web que proporciona sugerencias de optimización a los desarrolladores.[1].

WikicharliE Patrimonio de Chile

Contenido

Page Speed es una extensión o complemento para Firefox open source desarrollado ni mas ni menos por Google para todos los diseñadores o programadores web. Que tiene como razón de existir asistirnos en la mejora de nuestros código para una correcta optimizaron y un excelente desempeño. Esto da como resultado que nuestro sitio sea:

  • Mas rápido
  • Mas liviano
  • Mas barato de mantener
  • Mas eficiente

Definición de PageSpeed por Google

Page Speed realiza varios tests en la configuración del servidor web de un sitio y en su código. Estos tests están basados en una serie de buenas prácticas para mejorar el rendimiento de una página web. Los webmaster que ejecuten Page Speed en sus páginas obtendrán una serie de puntuaciones para cada página, al igual que sugerencias útiles para mejorar su desempeño.

Cuando hablamos de optimización del código de nuestros sitios web uno debe hablar de forma obligada de tres programas que son casi imprescindibles, tanto por lo fácil que resulta utilizarlos como la ayuda que nos proveen, ellos son Firefox, Firebug y Pagespeed.

Prioridades e implementación

Para cada regla, Page Speed nos da sugerencias específicas para su mejoramiento, y le da a la página una puntuación en la que pesan varios factores. Estos incluyen el impacto potencial de la regla (basada en la experiencia de Google), la dificultad de implementación y la severidad de la variación de la página respecto a la regla. El último factor varía de acuerdo a la regla específica, pero consiste en una medida cuantitativa del “fallo” de la página a la hora de aplicar la regla. Por ejemplo, puede ser un porcentaje del número total de archivos revisados.

Prioridad alta

Estas sugerencias representan que, al ser corregidas, se obtendrá la mayor ganancia potencial de desempeño para un esfuerzo de desarrollo relativamente pequeño. Vamos, que ganaremos mucho trabajando poco. Debes solucionar estos aspectos primero.

Prioridad media

Estas sugerencias pueden representar ganancias menores o más trabajo que las anteriores para implementarlas. Soluciona estos aspectos a continuación de los anteriores.

Funciona bien o prioridad baja

Si estas sugerencias son acompañadas de un signo +, probablemente representan ganancias mucho menores. En el caso de que no estén acompañadas de nada, es que funcionan bien. Son las últimas que deben ser solucionadas.

Mensajes de información

Algunos de estos aspectos no se aplican a la página o hubo un problema al ejecutar el test. Si aparecen muchos mensajes de información es que probablemente has intentado correr el test antes de que la página se haya terminado de cargar.

La extensión cuenta con algunas funciones más avanzadas que no vamos a repasar aquí. Hay que resaltar que, como se ve en las imágenes, los resultados que ofrece están en inglés, por lo que si no dominas aunque sea un poco la lengua de Shakespeare, lo vas a tener un poco difícil para usarla.

En resumen, una extensión a la que le pueden sacar más partido los desarrolladores que un blogger “de a pie”. Sin embargo, estos últimos pueden usarla revisando las incidencias que Page Speed ofrece, solucionando las que tengan menos dificultad y documentándose para solucionar las mayores o que le parezcan más complicadas, de manera que al tiempo que amplíen sus conocimientos, puedan ir mejorando el rendimiento de su web.

Tutorial básico

Como instalar Page Speed

Se necesitan tres cosas, todas gratuitas.

  • Primero instalar Firefox, navegador que ya deberías tener instalado hace tiempo
  • Tener instalado otra extensión: Firebug también gratis, liviana y que sirve para otras cosas, es imprescindible.
  • Instalar la extensión de Page Speed.

Como utilizar Page Speed

Siguiendo los simples pasos anteriores y si no se presento ningún problema al iniciar Firefox vamos a encontrarnos con una pequeña cucaracha en el borde inferior derecho de la pantalla.

Ahora al hacer click sobre ella, se abrirá lo que instalamos en el paso anterior, es decir, Firebug, ahora lo que tenemos que hacer e ir a la solapa “Page Speed” donde veremos un botón central que debería decir “Analyze Performance” haciendo Click en el esta maravillosa extensión comenzara a analizar automáticamente el sitio que esta abierto en ese momento en Firefox.

Evaluación

Page Speed va a evaluar el desempeño de nuestro sitio por una serie de factores, dependiendo de la situación marcara con tres distintos estados a cada uno, estos son:

  • Tilde Verde: Todo funciona perfecto, no hace falta hacer nada, la vida es bella.
  • Alerta Amarilla: Si buen funciona podría mejorarse.
  • Alerta Rojo: Tarea requerida y es aquí donde debemos prestar especial atención porque Page Speed acaba de detectar un factor por el cual podremos obtener una mejora sustancial.

En total existen 21 posibles escenarios por los cuales page speed va a evaluar nuestro sitio, con la ayuda de Tamara a continuación pasamos a hacer una muy pequeña introducción de cada uno, obviamente en la ayuda oficial de Pagespeed encontraran mas información, pero como este es un tutorial básico de uso no queríamos dejar de contarles mas o menos de que trata cada factor.

Índice

1 Leverage browser caching

Colocando una fecha de caducidad o edad máxima en los headers del HTTP para recursos estáticos, permite que el explorador cargue previamente los recursos descargados desde el disco local, en lugar de utilizar la red.

2 Remove unused CSS

Este punto nos dice que estamos teniendo declaradas varias cosas dentro de nuestra hoja de estilos que no estamos utilizando, algo que es bastante normal y que si no es exagerado no es para nada nocivo, una buena practica para evitar este tipo de problemas es utilizar distintos css dependiendo de la sección o parte del sitio, es decir, si por ejemplo declaramos x cantidad de clases en nuestro css para mostrar cierta imagen en la home del sitio, quitarla en el css del archivo individual.

Obviamente y como venimos viendo en este tutorial todo depende de la situación en concreto.

3 Serve static content from a cookieless domain

Brindar recursos estáticos desde un dominio sin cookies, reduce el tamaño total de solicitudes hechas desde una página.

4 Put CSS in the document head

Esto es fácil y bien simple. Primero una recomendación: es mas eficiente utilizar la propiedad <link> que @import y por otro lado debemos colocar los estilos bien arriba dentro del <head></head> del documento. Mas fácil imposible, la diferencia se nota bastante.

5 Use efficient CSS selectors

Obviando claves selectoras ineficientes, que combinen con un gran número de elementos puede acelerar la visualización de la página.

6. Leverage proxy caching

Habilitando el caching en los headers HTTP para recursos estáticos, permite al explorador descargar fuentes desde un servidor proxy cercano, en lugar de un servidor de origen remoto.

7. Minify CSS

Compactar nuestras hojas de estilo pueden ahorrarnos algunos kb que pueden parecer insignificantes pero que no lo son tanto cuando comenzamos a multiplicar por el numero de visitantes. Existen varias herramientas para optimizar archivos css.

8. Minify JavaScript

Similar al caso anterior, compactar correctamente nuestras bibliotecas javascript se traduce directamente no solo en un ahorro de transferencia de archivos sino también en mejores tiempo de carga, recuerden que cuanto menos pesa nuestro sitio mas rápido podrá ser descargado.

También recuerden que muchas veces y cuando se habla de bibliotecas comunes como jQuery, mootools, etc. podemos utilizar libremente a Google para que nos preste el alojamiento completamente gratis, y ahorrar toda esa transferencia de datos.

9. Optimize images

El formato correcto, el tamaño y la pérdida de compresión de imágenes puede salvar muchos bytes de información.

10. Minimize cookie size

Manteniendo las cookies lo más pequeñas posible, asegura que una solicitud HTTP pueda entrar en un solo paquete.

11. Enable gzip compression

Utilizar la compresión Gzip es una de las grandes mejoras que podemos hacer para acelerar la descarga de nuestros sitios, en WordPress se puede hacer de forma mas o menos simple, en mi caso instale un plugin y listo pero dependiendo de la configuración de nuestro servidor habilitar la compresión se puede hacer de varias formas.

Como no todo es WordPress les deje otro enlace para activar la compresión gzip desde el htaccess.

12. Combine external JavaScript

Combinar scripts externos en la menor cantidad de archivos posibles, acorta los RTTs y retrasa la descarga de otros recursos.

13. Minimize DNS lookups

Reducir el número de nombres de dominios únicos, desde donde los recursos son brindandos, acorta el número de resoluciones de DNS que el explorador debe hacer, y en consecuencia, el retraso RTT.

14. Optimize the order of styles and scripts

Ordenar las hojas de estilo y los scripts inline externos, permite mejor paralelización de las descargas y acelera el tiempo de visualización del explorador.

15. Serve resources from a consistent URL

Es importante brindar un recurso desde una URL única, para eliminar los bytes duplicados de descarga y RTTs adicionales.

16. Avoid CSS expressions

Las expresiones CSS degradan la performance de la visualizacion; reemplazandolas con alternativas, mejorará la visualización, en especial para usuarios de Internet Explorer.

Nota: Estas prácticas aplican solamente a Internet Explorer 5 a 7, que soportan expresiones CSS. Las expresiones CSS son desaprobados por IE 8, y no soportados por otros exploradores.

17. Combine external CSS

La idea principal de esto es que evitemos hacer muchas solicitudes, es decir, no exagerar haciendo llamados a CSS externos, algo que Google recomienda es utilizar hasta un máximo de 3 archivos externos, pero preferentemente que sean solo 2, esto se logra combinando, por ejemplo podemos juntar los que poseen unas pocas lineas logrando así un solo archivo en lugar de 4 o 5.

18. Specify image dimensions

Simplemente definir las dimensiones de las imágenes utilizando height y width.

19. Minimize redirects

Minimizar redirecciones HTTP desde una URL a otra, acorta los RTT adicionales y el tiempo de espera para los usuarios.

20. Defer loading of JavaScript

Diferir la carga de funciones JavaScript que no son necesarias al comienzo, reducen la descarga incial, permitiendo que otros recursos sean descargados en paralelo, y acelerando la ejecución y el tiempo de visualización.

21. Parallelize downloads across hostnames

Servir recursos desde cuatro o cinco nombres de dominio diferentes, aumenta la paralelización de descargas.

Finalmente, Page Speed no es la respuesta definitiva y es una herramienta de tremenda utilidad pero no es la respuesta definitiva en cuanto a optimización de recursos se refiere, inclusive no siempre sus sugerencias deben ser tomadas absolutamente al pie de la letra.

Page Speed provee una serie de lineamientos, y no a todos los sitios estos consejos les resultan de igual utilidad, ni siquiera significa que lograr pasar al 100% esta validación sea lo mejor, lo que recomiendo es prestar atención a sus consejos pero tampoco enloquecer por cumplirlos a todos.[2]

Pizarra

Logo Pizarra WikicharliE.JPG
  • A no ser que tengas millones de visitas por día los cambios no marcan la diferencia, no obstante la acumulación de mejoras hace que el resultado final sea siempre mucho mejor.

Fuentes y Enlaces de interés

  1. Page Speed Online tiene un API nueva y reluciente / Blog
  2. http://www.kabytes.com

Visita otros de nuestros artículos

TODAS LAS PAGINAS.png
Haz click en el ícono
Herramientas personales
Espacios de nombres

Variantes
Vistas
Acciones
Navegación
Herramientas
Contacta a Orquesta Tabaco y Ron para Eventos y Matrimonios http://tabacoyron.cl/