Seleccionar página

Curso de Velocidad Web

En PageSpeed Insights (PSI) se proporcionan datos sobre el rendimiento real de las páginas tanto en dispositivos móviles como en ordenadores, y se dan consejos para mejorarlas.Puede consultar la ayuda al respecto.

En PSI se determina en qué grado se siguen las prácticas de rendimiento óptimas en una página, que se puntúa del 0 al 100, calificación con la que se indica el rendimiento. En concreto, se determina si puede mejorarse el rendimiento de una página en estas dos áreas:

  • Tiempo de carga de la mitad superior de la página. El tiempo que transcurre desde el momento en que un usuario solicita una página hasta que se muestra el contenido de su mitad superior en el navegador.
  • Tiempo de carga completa de la página. El tiempo que transcurre desde el momento en que un usuario solicita una página nueva hasta que se muestra completamente en el navegador.

Herramienta ANALIZAR VELOCIDAD WEB

ANÁLISIS INSIGHTS

En el Análisis se describen los ciclos de ida y vuelta que se necesitan para cargar los recursos que bloquean el renderizado de una página, así como el total de bytes que esta utiliza, y se comparan con la media de estos valores del conjunto de datos.Indica también si aumentaría la velocidad de la página en el caso de que se modificaran su apariencia y funciones.

La optimización para mejorar el rendimiento se basa en el tránsito entre la recepción de los bytes de HTML, CSS y JavaScript, y el procesamiento necesario para convertirlos en píxeles.

El lenguaje de marcado HTML define relaciones entre etiquets diferentes (algunas etiquetas están contenidas en otras), los objetos creados se vinculan en una estructura en forma de árbol que también captura las relaciones entre objetos primarios y secundarios definidas en el lenguaje de marcado original: el objeto HTML es un elemento primario del objeto body, el objeto body es un elemento primario del objeto paragraph, etc. Más Información

Rendimiento

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.

Optimizar

La precarga es una solicitud de búsqueda declarativa que le dice al navegador que solicite un recurso lo antes posible. Carge previamente los recursos críticos agregando una <link> etiqueta rel="preload" al encabezado de su documento HTML:

<link rel="preload" as="style" href="css/style.css">

El navegador establece un nivel de prioridad más apropiado para el recurso al fin de intentar descargarlo antes sin retrasar el window.onload evento.

Precarga de archivos CSS

Si está utilizando el critical CSS approach, divide su CSS en dos partes. EL CSS crítico requerido para representar el contenido de la mitad superior de la página está incluido en el <head> del documento y el CSS no crítico suele cargarse de forma diferida con JavaScript. Esperar a que JavaScript se ejecute antes de cargar CSS no crítico puede causar retrasos en la representación cuando los usuarios se desplazan, por lo que es buena idea utilizar <link rel="preload"> para iniciar la descarga antes.

Precarga de archivos JavaScript

Debido a que los navegadores no ejecutan archivos precargados, la precarga es útil para separar la obtención de la execution que puede mejorar métricas como Time to Interactive. La precarga funciona mejor si divide sus paquetes de JavaScript y solo precarga los fragmentos críticos.

How to implement rel=preload #

La forma más sencilla de implementar preload es agregar un <link> etiqueta al <head> del documento:

<head>
<link rel="preload" as="script" href="critical.js">
</head>

Proporcionar el as atributo ayuda al navegador a establecer la prioridad del recurso precargado de acuerdo con su tipo, establecer los encabezados correctos y determinar si el recurso ya existe en el caché. Los valores aceptados para este atributo son: scriptstylefontimage, and others.