Détruir les deux changements qui coûtent 380 ms de temps de blocage, et tranquillement le téléphone

Performancekamo-marketing
Shipped
19 août 2026 à 19:17 UTC
Author
Kamo
Commit
2d7c0c0

Les deux derniers tours ont porté le score de 87 à 67. Temps total de blocage à partir de 80 ms à 460 ms et LCP de 3,9 s à 4,4 s. Deux de mes propres changements l'ont fait, et les deux ont été faits pour la même mauvaise raison. La raison vaut d'abord la raison, car c'est la leçon réelle: les éléments sous la rubrique "Insights" de ce rapport est notée «Unscored». Ils ne nourrissent pas le score de performance. C'est le cas du FCP, du LCP, du TBT, du CLS et de l'indice de vitesse. J'ai passé deux tours l'optimisation des informations non systématisées et les a payées dans les paramètres de notation. Retour à l'état d'avancement de l'appel d'offres. Il fait ce qu'il promet: la feuille de style cesse d'être une demande de blocage de rendu. Mais 93 Ko de CSS doivent alors arriver et être analysés à l'intérieur du document plutôt qu'en parallèle à côté, et Un document est passé de 36 KB à 74,7 KB. Le phare a mesuré le document seul à 750 ms de CPU, et Style and Layout est passé de 573 ms à 826 ms. Un immuable, Cachable, demande parallèle est meilleure que cela, et "demandes de refoulage de rebut" n'a jamais été cotée. L'analyse composite du titre - est revenue. Celui-ci est plus embarrassant, parce qu'il a échoué à ses propres termes: le nombre d'éléments non composites est allé jusqu'à, de 34 à 41. Deux couches masquées à clé de texte ne peuvent pas non plus être composées. le remplacement était de deux éléments animés de peinture où il y en avait un, plus un en cours d'exécution en permanence sur une double trame de l'h1. La version originale à un seul élément est de retour. Ce qui remplace les deux, c'est le changement qui aurait dû être fait en premier. Vingt-cinq les règles sur cette page déclarent une animation infinie - les champs hexagonaux dérivants, Manteaux pulsés, gradients coulissants, particules flottantes, bannières chatillantes. À une Un ordinateur de bureau ne remarque. Sur le téléphone de faible puissance, une course est imite, ils sont un taxe permanente: la plupart des styles et des présentations, la plupart des rendus, et chacun d'entre eux comptabilisées dans le cadre de l'audit d'animation non prévu. Rien de tout cela n'est contenu; La page se lit de manière identique avec tout cela. Ils s'arrêtent maintenant en dessous de 768 px Le même point d'arrêt Hero utilise déjà pour décider "desktopMotion", donc la particule champ, la rotation de fond et ce commutateur ensemble plutôt qu'à trois des largeurs différentes - et sous - Préférent-réduction-mouvement-. Les 25 sont tous couverts. Chacun est épinglé à la valeur que son image clé repose au lieu d'être uniquement éteint: un élément dont 0%/100% jeu de trame 'opacity: 0,05' n'a pas d'opacité de son propre à retomber, et l'arrêterait non épinglé serait obscurci un la texture ou laisser une superposition d'opacité totale à travers le contenu sous-jacent. Les toiles de fond de la section thématique demandent maintenant des largeurs de demi-vue sur les téléphones. À qualité 60, ils sont divisés par deux, mais 4,08% de leurs pixels se déplacent sensiblement une fois composite, et le cerclage à travers un ciel lisse est ce que montre une toile de fond de sauvetage complet pire - la même objection qui a rejeté la qualité 50 à 6,60 %. Abandonnement de la La largeur demandée prend plutôt une de 193 KB à 77 KB sans compression artefacts du tout, sur une image déjà obscurcie à 60% sous un noir radial superposer, derrière un contenu opaque. La qualité reste à 75 ans. Également corrigé, et séparément de cet engagement: les listes de lecture HLS étaient toujours en répondant à l'âge maximum 300 parce que l'encode job ne les réécrit qu'à un re-encoder. Leurs métadonnées sont définies directement maintenant, donc l'élément de vie en cache 1 KiB est fermé sans en attendre un. Un vrai bug attrapé en chemin: la chirurgie CSS au-dessus a laissé une orthèse de fermeture errante à la ligne 1480. Le turbopack avait servi CSS en cache, donc trois builds sont passés avant qu'un propre ne s'y soit fait défaut. Il aurait échoué à l'IC.

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