Arrêter l'expédition 1,8 MB de fond non redimensionnés après hydratation

Performancekamo-marketing
Shipped
19 août 2026 à 17:50 UTC
Author
Kamo
Commit
849051c

ThemedBackground était la chose la plus chère laissée sur la page d'accueil, et aucun de Cela ressemblait à un insecte. Il a rendu un 'img' brut droit au seau à thème, donc le navigateur a reçu le fichier source non touché par les numéros 606, 646 et 585 KB, WebP, à l'adresse suivante: résolution complète, au téléphone. Rien ne les a redépurées et rien ne sert l'AVIF, parce que la requête ne s'est jamais rapprochée de l'optimiseur d'images. Rien de paresseux les trois cas (caractéristiques, tarification, section d'inscription) sont montés sur hydratation, donc environ 1,8 MB a commencé à télécharger au moment où la page essayait pour devenir interactif, car trois sections à laquelle personne n'a défilé. Et chaque cadre a été récupérée deux fois: une sonde de disponibilité a construit un "new Image()" -, a attendu qu'elle soit destinée à charger en totalité, et seulement ensuite fixer l'état qui a rendu l'élément réel. L'outil est le bon outil pour cela et ne coûte rien. Par l'intermédiaire de l'identifiant/image, chacun est un AVIF à faible hochet, de taille correcte, sur un URL immuable, et le règlement est une transition CSS plutôt qu'un mouvement de Framer «animate» sur le 'img'. "images.qualities" est configuré, ce qui est une condition préalable plutôt qu'un réglage knob: Next 16 répond 400 pour toute qualité n'est pas dans cette liste, et la liste par défaut n'était pas ignorée, cela aurait coûté le coût l'image. La qualité est maintenant fixée à partir de la façon dont chaque surface est effectivement composite, mesurée plutôt que deviné. Décoder les deux encodages et les comparer 'après' la page propre les filtres: luminosité du fond de héros(.21) 41,1 dB PSNR 0,57 % des pixels diffèrent de la qualité de 5 5 55 dollars. la luminosité du fond thématique (.6), l'échelle de gris 20 %, superposition noire radiale 36,9 dB PSNR 6,60% de pixels différaient de 8%255 'de gauche à 75 Le héros est l'élément LCP et est composite à un cinquième de sa luminance, de sorte que la moitié des bits achètent des détails que rien ne peut résoudre à travers autant de noir: 77.7 KB à la valeur par défaut, 22,0 KB à 50, pour une différence 0,57% des pixels peuvent s'exprimer. Les cadres thématiques sont situés sous une superposition beaucoup plus légère, où la même marche atteint 6,6 % - assez pour étaler une zone lisse du ciel sur une surface de pleine purge. Leurs l'épargne n'a jamais été le cadre de qualité de toute façon; c'était la redimensionnement et la paresse. Le cadre de l'affiche est mesuré plutôt que supposé. Un w-828 fixé a été trois fois les pixels que l'ouverture montre sur un téléphone, où elle est d'environ 370 CSS px; c'est maintenant dérivé de la largeur de l'élément et du rapport de pixel de dispositif, contre dispositif configuréSizes. 26,5 KB - 7,6 KB sur un téléphone. Les deux préconnectes sont maintenant dns-préfetch. Une préconnecte ouvre une douille immédiatement et le tient, qu'il gagne, qu'il n'est obtenu que pour une origine nécessaire pendant la première peinture. Avec l'optimiseur de cette origine, la photographie à thème passe par l'optimidant, la première demande du navigateur à theme.kamocrm.com est le widget de chat ou le bobine de héros, à la fois délibérément après l'événement de chargement, et l'origine analytique est la même histoire depuis que le traqueur s'est déplacé vers lazyOnload. Le phare a signalé la le thème préconnecté comme non utilisé et il a été: une douille ouverte pendant le chemin critique, rivalisant avec lui, ralenti jusqu'à long terme après sa fermeture. Deux choses mesurées et NE NE modifiées pas, de sorte qu'elles ne sont pas re-litigées: Une navigateursssic ciblant les navigateurs modernes ne supprime pas les 13,5 KB de pavillons de phares Object.fromEntries/haswn, et ils sont Le propre «module de remplissage» de Next, inclus inconditionnellement; avec browserslist set, le chunk contenant construit octet-identique, même hachage. Ajout de la configuration Ce qui ne fait manifestement rien n'est ce qu'était « timiserCss ». Suppression des 90 éléments sur 149 qui sont référencés nulle part, déplace le Feuille de style de blocage de rendu par 678 octets gzip (17,398 x 16,720). Tailwind la numérisation des fichiers morts n'est pas ce qui fait ce fichier 17 KB, donc une suppression de 90 fichiers ne peut être justifié en tant que correctif de performance. Toujours ouvert, et non fixable à partir de ce dépôt: kamo-chat.js est servi de le seau à thème sans tête de course Cache-Control du tout, 143 KB. Les playlists HLS 300 s TTL est délibéré - héros-hls-encode-job.yaml les réécrit sur le re-encodage et vaut 1 KiB, donc ça reste.

All changes

Comme ce que tu vois expédier ?

Chacune de ces mises à jour atterrit automatiquement dans votre espace de travail. Commencez gratuitement et regardez-le grandir semaine après semaine.

Commencez gratuitement pour toujoursPrix de visualisation