Detenga el pliegue esperando en la hidratación y despeje la ventana de carga

Performancekamo-marketing
Se descapó
19 de agosto de 2026 a las 17:29 UTC
Autor
Kamo
Compromit
917ad87

La página de inicio envió todo su pliegue invisible. Framer Motion serializa un Emite inicial en el HTML prerenderizado como un estilo en línea, por lo que el marcador llegó con el .h1, la columna de copia, la abertura del carrete y el sangrado completo fondo todo en la opacidad: 0o y se mantuvo así hasta que React tuvo descargadas, analizadas e hidratadas y ejecutan su primer marco de animación. Primero y La pintura más grande con contenido se midieron por lo tanto un JavaScript de cuarto de megagatete paquete en lugar de la página: el servidor ya había entregado el titular, y un guión lo estaba reteniendo. Nada ve esto, no la construcción, el tipo comprobar, la corrida de pecas o el guardia de navegación y en un enlace de escritorio es invisible. La página y cuenta laopacidad:0: 102 de ellos, cada elemento por encima del redlamiento entre ellos. Las mismas entradas, con las mismas duracións y flexibilización, son ahora marcos clave CSS. La hoja de estilos se analiza antes de que se haya cogido un solo guión. La LCP el fondo utiliza una transición en lugar de un marco clave, porque una transición sí no correr en la representación inicial - por lo que el marco que está arriba a la llegada es simplemente arriba, sin nada para que LCP espere. El resto de la ventana de carga, en orden descendente de lo que costó: El carrete comenzó a pagar desde el primer byte. Preload="metadata", a poster en el elemento, y una apertura de escalera adaptativa en el peldaño 540p en 1.17 Mbps para una abertura que en un deporte de visión estrecho se encuentra debajo del redil, bajo la columna de copia. Ahora espera el evento de carga, luego para el principal hilo para ir ocioso, luego para que la apertura entre en un puerto de visión. Nivel se limita al tamaño del jugador y comienza en el peldaño inferior en un teléfono. Los lectores de Save-Data y 2G/3G mantienen el marco del póster y el botón de reinicio. El propio póster era un JPEG de 93 KB en un cabezazo de caché de un día. A través de la optimización de imagen es un 26 KB AVIF en una URL inmutable, y no lo es hasta que el carrete sea buscado. El logotipo de la marca es 132 KB de salida de ocho-lápiz de ocho decimosmales, precargado como un imagen, para dibujar una marca de 140 px de ancho. Redondeado a un decimal de una 3503 unidades espacio con el relleno repetido izado, es 59 KB y geométricamente idéntico a 0.0023 CSS px al tamaño más grande que se representa en. scripts/ optimiza-logo-svg.mjs es idempotente, para la próxima vez que se exporta el logotipo. GSAP estaba en la lista de scripts ansiosos de cada página del sitio, cuatro veces sobre: un t entre en el brillo de la barra de progreso, .gsap.set() "Escribiendo dos estáticos propiedades de estilo, una "deTo" duplicando una onda la hoja de estilos era ya animando, y una llamada global en línea que sólo dispara para los lectores que han pedido movimiento reducido. Los cuatro se han ido de lo crítico Ruta; el último carga la biblioteca dentro de su rama. TouchOptimized midió cada botón, enlace y entrada en la página durante hidratación, entrelazar cada lectura con los escritos del elemento anterior lanzas de colocación forzada de sincronía varios cientos de elementos de largo, aterrizando en Tiempo de bloqueo total en el teléfono existe para ayudar. Ahora hace lotes. Lee y espera a ocioso. Estrategia de escritura="afterInteractive" emite un enlace rel="precarga" como="script" , que le pidió al navegador que buscara el rastreador de análisis en alta prioridad junto a los antecedentes del héroe. Todavía registra el visita, un momento después y fuera del camino crítico. El héroe montó tres capas de fondo de vista completa. La rotación es Sólo sobre escritorio, así que en un teléfono dos de ellos eran permanentemente deopacidad: 0o. Se exportó de la bandera de consentimiento, por lo que el control de "monedas de la mansión" control arrastró 250 líneas de Framer Motion en un trozo que renderiza en el HTML inicial. Se mueve a app/lib/cookie-consent.ts, y el banner y la pila de tostadas ahora se montan en Ocioso: ni pinta nada a su llegada. Experimental.optimizeCss impreso "OtimopabilidadCs" en cada construcción y lo hizo Nada. Inline CSS crítico por HTML de procesamiento post-procesado, que el router de la aplicación nunca lo entrega. Verificado contra la salida construida con el Retroceso de "beasties" realmente instalado: cero bloques de estilo en la cabeza, el hoja de estilo todavía un bloqueo simple. Se quitaron una bandera que informa El éxito mientras que Iner se lee como una optimización ya tocada. 36 selectores de clase y 24 fotogramas clave en globals.css sin referencia en cualquier lugar del repositorio, proveedor y documentos incluidos. bytes de ciclo crítico, gzip, desplegado contra una construcción limpia: html 38,101 - 36,277 js 281,700 - 245.707 css 18.629 x 17.398 logo 57,390 - 22,902 Total 395.822 - 322.284 (-19%) scripts ansiosos 15 x 13 De la ventana de carga completamente encima de eso: el cartel de 93 KB, el HLS manifiestan y sus segmentos de 1,17 Mbps, dos imágenes de fondo y el rastreador. No se aborda aquí: Respuestas 307 a la dirección de la página, que es la URL a la velocidad de página pruebas y qué Faro cuenta como una redirección. La única solución real es LocalePrefix: 'según sea necesario', y eso reescribe canónicos, hreflang, sitemaps y cada href interno a través de rutas de 250 libras en 22 locales, mientras que 301-ing cada indexado /en/* URL. Esa es una decisión de SEO en lugar de una actuación, y el lúboro cuesta 60 ms en una conexión ya abierta.

Todos los cambios

Como lo que ves enviaste?

Cada una de estas actualizaciones aterriza en su espacio de trabajo automáticamente. Empieza gratis y verlo crecer semana tras semana.

Arranzar gratis para siempreVer Precios