Quiero mejorar las métricas de Web Vitals de mi sitio, específicamente LCP. He tenido problemas donde el tiempo es de ~2.7s (debería ser inferior a 2.5s). De https://web.dev/optimize-lcp:
Específicamente, LCP mide el tiempo desde que el usuario inicia la carga de la página hasta que la imagen o el bloque de texto más grande se renderiza dentro de la ventana gráfica.
He aislado el problema a un componente de tema de banner que escribí. Una imagen de banner que monto como un widget “above-main-container” es el objeto más grande pintado en la pantalla para básicamente todas las páginas.
Esto es lo que creo que está sucediendo. El div que contiene la imagen se monta usando JS, por lo que una serie de cosas prerrequisito deben suceder cuando se actualiza una página de Discourse antes de que este código JS termine de ejecutarse. Esto hace que el banner se obtenga después de 2.5s, lo que perjudica la métrica LCP.
He intentado priorizar la imagen del banner usando fetchpriority="high", como se ve en el código. Pero creo que no aborda el problema de tiempo raíz aquí.
¿Alguna sugerencia sobre cómo priorizar la renderización de este componente de tema en particular? ¿Sería mejor convertirlo en un plugin? ¿Hay alguna otra forma en que pueda inyectar el banner lo antes posible? ¡Gracias!
He cambiado a usar una CDN, lo cual no ha ayudado. Como mencioné, creo que la llamada para obtener el banner es lo que sucede demasiado tarde, no el tiempo de obtención. ¡Intentaré la pre-obtención para ver si marca la diferencia!
Lo que hice mientras tanto hasta que llego a una solución es no mostrar el banner a menos que hayas iniciado sesión. Parece que Google calcula el LCP principalmente a partir del tráfico de búsqueda, que en mi caso suelen ser usuarios que no han iniciado sesión.
Primero, acabo de comprobar y la pantalla de presentación ya utiliza toda la pantalla (100vh y 100% de ancho).
Sin embargo, algunos usuarios no verán la pantalla de presentación si su Discourse arranca lo suficientemente rápido. Para ellos, el LCP lo establecerá el elemento que sea lo suficientemente grande. En tu caso, el banner, por lo que estás limitado por él.
Intentaría la etiqueta meta prefetch y me aseguraría de que sea un recurso muy bien optimizado y de que todos tus recursos se entreguen a través de CDN con PoPs cercanos a donde se encuentran tus usuarios.
Acabo de probar esta posible solución y, lamentablemente, no pareció marcar la diferencia. También reemplacé la imagen del banner por una imagen trivialmente pequeña como verificación de cordura y tampoco marcó la diferencia en LCP. Gracias por la sugerencia de todos modos.
No conozco el funcionamiento interno de cómo se inyectan los componentes temáticos en la página, pero mi impresión es que para cuando se inyecta el componente del banner, ya es demasiado tarde. Mi próximo intento será probarlo como un plugin.
jajaja