Mejorar el rendimiento del sitio web página por página

Elija viajes a medida

Seleccione una página de inicio, una página de servicio, una lista de imágenes pesadas, un artículo y el formulario de contacto. Pruebe al menos un ancho móvil y un escritorio con dispositivos y conexiones representativos. Registre la fecha, los cambios recientes y los elementos visibles en la primera ventana gráfica.

Las mediciones de laboratorio separadas, que ayudan a reproducir un problema, a partir de los datos de campo disponibles, que describen la experiencia real del visitante. Si el tráfico es demasiado bajo para una medida estable, no presente una puntuación como tendencia. Web.dev explica las herramientas de medición y sus usos.

• páginas y dispositivos seleccionados.
• línea de base reproducible.
• tarea que el visitante necesita completar.

Encuentre el motivo de la carga lenta

Identifique el elemento principal visible durante la carga y el recurso que lo suministra. Una fotografía de héroe sobredimensionado, solicitud tardía o dependencia de scripts puede retrasar el LCP. Utilice una imagen adecuada a su tamaño mostrado, con dimensiones HTML, variantes receptivas y prioridad sensata; No difieras la imagen principal sin razón.

Luego examine las fuentes, CSS, JavaScript y las respuestas del servidor. Elimine los recursos genuinamente no utilizados y evite descargar todas las tarjetas fuera de pantalla de inmediato. Los guía de imágenes Cubre la preparación visual y las alternativas.

Prevenir cambios y mantener las interacciones receptivas

Reserve espacio para imágenes, incrustaciones y mensajes que aparecen después de la carga. Compruebe CLS a lo largo de la lectura, no solo en la primera captura de pantalla. Las fuentes tardías y los banners pueden mover un botón justo cuando un visitante intenta usarlo.

Para INP, intente acciones importantes: Abra un menú, filtre una lista, elija una opción y corrija un formulario. Si la respuesta es lenta, inspeccione las tareas largas de JavaScript y la representación activada por cada acción. Una interfaz más simple puede ayudar más que otra biblioteca.

Establezca un presupuesto y verifique después del lanzamiento

Establezca límites proporcionados para las imágenes principales, las tarjetas y los nuevos scripts. Compare bytes realmente descargados en dispositivos móviles en lugar del tamaño total de la biblioteca de imágenes. Registre lo que fue eliminado, comprimido o diferido y confirme que la calidad visual y la accesibilidad siguen siendo sólidas.

Repita los viajes después de cada cambio y después del despliegue. Siga LCP, INP y CLS cuando haya datos de usuarios reales disponibles, sin prometer que un puntaje garantice la clasificación de búsqueda. Experiencia de orientación en la página de Google Pone estas métricas dentro de la utilidad más amplia del sitio.

• bytes y retrasos antes y después.
• Sin regresión visual o funcional.
• Comprueba en las páginas y dispositivos de prioridad.