Arrêter de rendre huit sections hors écran avant que le héros puisse peindre

Performancekamo-marketing
Expédié
19 août 2026 à 19:59 UTC
Auteur
Kamo
Commite
525e81c

Le LCP était de 4,4 s, et sa panne disait où: 120 ms à la première octet, 290 ms de retard de charge, 390 ms téléchargeant effectivement l'image - puis 1 810 ms de "l'élément retard". L'image avait fini d'arriver et ne pouvait tout simplement pas être peints. La page d'accueil est équipée de 1 482 éléments DOM, au-dessus du seuil. échos à "imtimifier la taille du DOM" à, et chacun d'entre eux était en train d'être présenté et peints lors du rendu initial, tandis que l'élément LCP attendait son retour Huit sections à laquelle personne n'avait défilé. «visibilité de la teneur: auto» sur chaque section, à l'exception de la maison, laisse le navigateur sauter aménagement et peinture pour ces sous-arbres jusqu'à ce qu'ils s'approchent de la fenêtre. Le des éléments existent toujours - dans le HTML, pour rechercher des ancres, pour afficher des ancres de page, pour find-in-page, et à l'intersectionObserver JumpToBar runs - ils ne le sont tout simplement pas rasé avant que quiconque puisse les voir. Deux choses le rendent sûr ici plutôt que d'une manière générale: chaque section est déjà «position: relative» et «débit: cachée», donc l'endiguement implicite ne change rien sur la façon dont ils sont absolument positionnés les arrière-plans résolvent, et "contain-intrinsic-size-size-conten-intrinsic-size-conten-intrinsic-size-conten-intrinsic-size-conten-intrins la hauteur de l'espace réservé ne s'applique qu'avant le premier rendu d'une section et le navigateur Se souvenu du vrai après. La reflux forcée du rapport attribué à un fichier spécifique était PreviewBanner. Il lire "offsetHeight" juste après l'hydratation et a écrit le document.body.style .paddingTop, qui invalide la mise en page pour l'ensemble du document. L'écriture était également redondante - corps - paillad-top: var(--banner-h) - réserve déjà l'espace de la première peinture. A ResizeObserver rapporte la hauteur de la "borderBoxSize", que le navigateur a déjà calculé lorsque le rappel s'exécute, donc rien n'est forcé. frontièreBoxTaille plutôt que contenuRect on in exaltage: la bannière porte «padding: 6px 16px» sur de petits écrans, et réservation de la hauteur du contenu seul laisserait la copie assise 12px sous la bannière. theme.kamocrm.com obtient son préconnection, que le rapport demande par nom à l'adresse suivante: 300 ms de LCP. Le rétrograder à dns-prefetch était une erreur : les images passent à travers L'optimiseur de cette origine maintenant, mais DynamicMetaLoader agit toujours le thème de l'organisation feuille de style de cet hôte au moment de l'exécution, et c'est une demande de rendu-affecting sur le chemin critique. Analytics reste un dns-prefetch - le tracker est lazyOnload, donc Rien avant que l'événement de chargement ne le touche. Le fond du héros tombe à la qualité 40: 21,9 KB à 12,8 KB, ce qui est le L'audit d'images était demandé. Mesuré à travers la luminosité (0.21) il est Compoté à une température comprise entre 50 et 40,0 %, soit 1,99 % des pixels de plus de 8/255, et les cales 40,7 dB. La qualité 30 a été jugée et rejetée à 3,20 %. Les arrière-plans de la section restent à 75, et c'est la deuxième mesure de temps a le dit. À la largeur réduite qu'ils demandent maintenant, tomber à 50 est « pire » que il était à pleine largeur et 11,30 % de changement de pixels contre 6,60 % parce qu'à moins résolution chaque bloc de compression couvre plus de ce que vous voyez. Résolution et les réductions de qualité ne s'empilent pas sur une photographie; l'une ou l'autre. Les playlists HLS sont immuables pendant un an maintenant, en direct et dans le manifeste de l'emploi, qui ferme le dernier élément de vie-ciel. Cela déplace un coût plutôt que enlevant, de sorte que le signe « HERO-HLS-SRC » porte un «?v» qui doit être coulé sur un re-encoder; les deux fichiers le disent, parce que sinon un re-encodage ressemblera à la Le travail n'a rien fait en silence.

Tous les changements

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