Rendimiento Insights

about me

Piorizar recursos es esencial para mejorar la velocidad de carga de tu web. No todos los bytes que se envían por el cable al navegador tienen el mismo grado de importancia, y el navegador lo sabe. Los navegadores tienen heurísticas que intentan hacer una mejor estimación de los recursos más importantes que se deben cargar primero, como CSS antes que los scripts y las imágenes.


Prioridades predeterminadas en el navegador


El navegador asigna diferentes prioridades relativas a diferentes tipos de recursos en función de cuán críticos puedan ser. Por ejemplo, <script> etiqueta en su página <head> se cargaría en Chrome con una prioridad alta (debajo de CSS, en la más alta), pero esa prioridad cambiaría a bja si tiene el async atributo (lo que significa que se puede cargar y ejecutar de forma asíncrona).


Las prioridades se vuelven importantes al investigar el rendimiento de carga de su sitio. Más allá de las técnicas habituales de medir y analizar la ruta de renderización crítica, es útil conocer la prioridad de Chrome para cada recurso.


Soluciones Declarativas


  • <link rel="preload"> Informa al navegador que se necesita un recurso como parte de la navegación actual y que debería comenzar a buscarse lo antes posible.
  • <link rel="preconnect"> Informa al navegador que su página tiene la intención de establecer una conexión con otro origen y que desea que el proceso comience lo antes posible.
  • <link rel="prefetch">, es algo diferente de <link rel="preload"> y <link rel="preconnect">, , en que no intenta hacer que algo crítico suceda más rápido; en cambio, intenta hacer que algo no crítico suceda antes, si existe la posibilidad.

Optimiza tus imágenes


Tienes que elegir el formato de imagen correcto. La primera pregunta que debes hacerte es si, de hecho, se requiere una imagen para lograr el efecto que buscas. Un buen diseño, simple y limpio, siempre dará el mejor rendimiento. Si puede eliminar un recurso de imagen, que a menudo requiere una gran cantidad de bytes en relación con HTML, CSS, JavaScript y otros activos en la página, entonces esa es siempre la mejor estrategia de optimización. Dicho esto, una imagen bien colocada también puede comunicar más información que mil palabras, por lo que depende de ti encontrar ese equilibrio.


Una gran tipografía es fundamental para un buen diseño, marca y legibilidad, pero el texto en imágenes ofrece una mala experiencia de usuario: el texto no se puede seleccionar, no se puede buscar, no se puede ampliar, no se puede acceder a él y no es compatible con dispositivos de alta resolución. El uso de fuentes web requiere su propio conjunto de optimizaciones, pero aborda todas estas preocupaciones y siempre es una mejor opción para mostrar texto.


Cada formato de imagen tiene su propio conjunto de pros y contras. Los formatos vectoriales son ideales para imágenes que constan de formas geométcias simples como logotipos, texto o iconos. Ofrecen resultados níticos en cada resolución y configuración de zoom, lo que los convierte en un formato ideal para pantallas y recursos de alta resolución que deben mostrarse en diferentes tamaños.


Sin embargo, los formatos vectoriales se quedan cortos cuando la escena es complicada (por ejemplo, una foto): la cantidad de marcado SVG para describir todas las formas puede ser prohibitivamente alta y la salida aún puede no parecer "fotorrealista". Cuando ese es el caso, es entonces cuando tienes que utilizar un formato de imagen rasterizada como PNG, JPEG o WebP.


Herramienta ANALIZAR VELOCIDAD WEB


Inicio Siguiente Volver