Como crear una web: 5 Gtmetrix y la optimización

Una vez que ya tenemos el diseño creado de nuestra web, es muy importante verificar si este diseño es óptimo o si por el contrario debe sufrir algunas modificaciones para que el rendimiento en general de la web sea mayor. Para todo ello, el administrador cuenta con una serie de herramientas, con las cuales puede “medir” lo bien diseñada que está la web.

Conceptos clave en la optimización

Para la optimización de páginas web, hay una serie de conceptos que se deben conocer tanto qué son, como el cómo afecta a mi web. Aquí detallo las más importantes:

• Tiempo de carga de página (Page load time): este concepto es bastante sencillo, se refiere al tiempo que tarda nuestra página en cargarse por completo. Según algunas informaciones Google toma en cuenta los tiempos de carga de página para el posicionamiento y este debería siempre estar en la medida de lo posible por debajo de 5s. Es muy recomendable tiempos de carga entorno a 2s ya que el usuario suele abandonar si tarda mucho nuestra página en cargar, además desde redes móviles los tiempos de carga suelen ser mayores, con lo que se agrava el problema.
• Tamaño de la página (Total page size): es lo que pesa nuestra página, hace un par de años, era un concepto poco importante porque nuestras conexiones eran lo suficientemente rápidas en este aspecto, hoy en día nadie quiere que al visitar x página gaste 15MB de su tarifa de datos. Así que hay que mantener esto lo más bajo posible, se recomienda que no sea muy superior a 1MB.
• Número de peticiones (Total number of requests): es el número de peticiones que debe realizar nuestro ordenador al servidor, para cargar la página completa. Una petición se puede generar por muy diversos motivos como: cargar una imagen, cargar un archivo javascript, cargar una hoja de estilos etc. El problema es que el servidor tarda un tiempo en atender cada petición, así que por muy rápido que sea nuestro servidor, si realizamos 200 peticiones siempre tardará un mínimo de tiempo, por el tiempo de procesar la petición. Aquí se recomiendan utilizar una única hoja de estilos para toda la web, pocos archivos de javascript y combinar las distintas imágenes o cambiarlas por código CSS si son botones, para reducir las peticiones.
• Número de peticiones a la base de datos: este dato no sale en GTmetrix, pero si nos sale a los administradores en nuestros CMS (si tenemos alguno instalado), esto nos indica cuantas consultas se tienen que hacer en la base de datos para mostrar la página. Como en el apartado anterior hay que minimizar al máximo el número de consultas.

Algoritmos de análisis web y GTmetrix

Principalmente hay 2 algoritmos de análisis web, que nos indican los bien que está diseñada nuestra web, basándose en los conceptos anteriores y nos suelen proporcionar algunas sugerencias que nos indican como mejorar.

En lugar de usar cada uno de ellos por separado vamos a usar la web de GTmetrix que utiliza las dos herramientas de forma simultánea y además, nos da algunos datos como las recomendaciones de cada uno de ellos, un histórico de los análisis anteriores o un gráfico viendo que recursos son los que más se tardan en cargar.

Este servicio es gratuito y cuenta con algunas opciones más avanzadas en un plan de pago. Podéis acceder desde aquí.

Hasta que grado hay que llegar

Bueno, este es un tema muy complicado de explicar, ya que no hay una decisión clara y algunas páginas son mas optimizables que otras pero to creo que con llegar a 90% en cada uno de los dos algoritmos yo lo daría por una buena optimización. Como siempre os recomendamos que comparéis resultados de antes y después, ya que las mejoras suelen ser notables.

Para finalizar os dejamos una captura de esta herramienta, analizando nuestra web y os invitamos a que nos mandéis vuestras capturas y reportes para ver lo que habéis aprendido y hasta que grado habéis llegado. Esperamos que esto sea un “pique” sano, entre todos nuestros lectores.

LightHouse la herramienta de Google para medir el rendimiento

En los últimos tiempos la optimización web ha cobrado relevancia, siendo cada vez más importante en cuestiones como el SEO o el UX. Por esta razón, nunca esta demás comprobar con otra herramienta el rendimiento de nuestra web. En este caso, es muy sencillo ya que LightHouse viene incluido dentro de Chrome. Aunque también se puede lanzar desde la consola, lo cual es muy importante para monitorizar una web de manera contínua.

Esta herramienta comprueba los siguientes factores:

• El rendimiento de una web, atendiendo a distintas métricas
• La accesibilidad de la misma
• El cumplimiento de un conjunto de buenas prácticas
• La adecuación a las reglas de SEO que Google propone
• La verificación de que la web cumple con las directivas para ser PWA

Algunos recursos de utilidad que deberías consultar:

• Front-End Performance Checklist 2020