Deja de enviar 1.8 MB de fondos sin restricciones tras hidratación

Performancekamo-marketing
Se descapó
19 de agosto de 2026 a las 17:50 UTC
Autor
Kamo
Compromit
849051c

TemedBackground fue lo más caro que quedó en la página de inicio, y nada de Parecía un insecto. Se hizo un rubro crudo en el cubo temático, así que el navegador recibió el archivo de origen virgen de 606, 646 y 585 KB, WebP, en Resolución completa, por teléfono. Nada los redimensionó y nada sirvió a AVIF, porque la petición nunca se acercó al optimizador de la imagen. Nada cargado perezoso ellos, y las tres instancias (Caracteres, Precios, Señalización) montan en hidratación, así que aproximadamente 1.8 MB comenzó a descargarse en el momento en que la página estaba probando para ser interactivo, para tres secciones a las que nadie se había desplazado. Y cada marco fue buscado dos veces: una sonda de disponibilidad construyó una nueva imagen, esperó a que lo hiciera carga en su totalidad, y sólo entonces establecer el estado que hizo el elemento real. La herramienta adecuada para eso es la herramienta adecuada y no cuesta nada. A través de "próxima/imagen" cada uno es un AVIF perezosamente de tamaño correcto en un URL inmutable, y el asentamiento es una transición CSS en lugar de una Moción Framer En el "img". Las imágenes.calecidades se configuran, que es un requisito previo en lugar de una sintonía knob: Siguiente 16 respuestas 400 para cualquier calidad que no esté en esa lista, y la lista por defecto a [75] por sí sola, por lo que la calidad=50o no estaba siendo ignorada, habría costado la imagen de plano. La calidad se establece ahora de cómo cada superficie está realmente compuesta, medida más bien de lo que lo adivinó. Decodificación de codificaciones y comparándolas *después* de la propia página filtros: Herodo brillo de fondo(.21) 41,1 dB PSNR 0,57% de los píxeles difieren en 48/255 - calidad 50 brillo de fondo temado (.6), escala de grises 20%, PSNR radial desbordado 36.9 dB PSNR 6.60% de los píxeles difieren en 8255 . izquierda a 75 El héroe es el elemento LCP y se compone en una quinta parte de su luminancia, así que la mitad de los bits compran detalles que nada puede resolver a través de tanto negro: 77.7 KB al por defecto, 22.0 KB a 50, para una diferencia 0.57% de píxeles puede expresar. Los marcos temáticos se encuentran bajo una capa mucho más ligera, donde el mismo paso llega 6,6% - lo suficientemente suficiente para abanicar una zona lisa de cielo a través de una superficie completamente herida. Su El ahorro nunca fue el entorno de calidad de todos modos; era el redimensionamiento y la pereza. El marco del cartel se mide en lugar de asumir. Un w fijo de 828 fue tres veces los píxeles que la abertura muestra en un teléfono, donde está alrededor de 370 CSS px; es ahora derivado del ancho del elemento y la relación píxel del dispositivo, frente a la Dispositivo configuradoSizes. 26.5 KB - 7.6 KB en un teléfono. Las dos preconexiones son dns-prefetch ahora. Una preconexión abre un enchufe inmediatamente y lo sostiene, que gana sólo por un origen necesario durante el la primera pintura. Con la fotografía temática pasando por el optimizador de este origen, la primera petición del navegador a theme.kamocrm.com es el widget de chat o el carrete de héroe, ambos deliberadamente después del evento de carga, y el origen de la analítica es la misma historia desde que el rastreador se mudaó a la perezosaOnload. Faro reportó el tema preconectada como no utilizada y que era: un enchufe abierto durante el camino crítico, competir con él, ocioso hasta mucho después de que cerrara. Dos cosas medidas y deliberadamente NO cambian, por lo que no se vuelven a litigar: Un explorador dirigido a los navegadores modernos no elimina el 13,5 KB de polillenles banderas del faro ******************* Object.fromEntries/hasOwn, ************* Ellos son El propio "polifill-módulo" de Next, incluido incondicionalmente; con la lista de navegadores conjunto, el trozo que contiene byte-idéntico, mismo hachís. Añadir config que demosstruye nada es lo que era "optimizeCss". - Borrar los 90 de 149 componentes que se referencian en ninguna parte mueve la Hoja de estilo de bloqueo de renderizado por 678 bytes gzip (17.398 - 16,720). Tamilwind escanear archivos muertos no es lo que hace que ese archivo 17 KB, por lo que una eliminación de 90 archivos no puede justificarse como una solución de rendimiento. Todavía abierto, y no fijado de este repositorio: kamo-chat.js se sirve desde el cubo temático sin cabecera Cache-Control en absoluto, 143 KB. Las listas de reproducción de HLS' 300s TTL es deliberado. Héroe-hls-encode-job.yaml los reescribe en re-encode. y vale 1 KiB, así que se queda.

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