Machen Sie die beiden Änderungen, die 380m Blocking Zeit kosten, und beruhigen Sie das Telefon

Performancekamo-marketing
Verschifft
19. August 2026 um 19:17 UTC
Autor
Kamo
Ausschuss
2d7c0c0

Die letzten beiden Runden brachten die Punktzahl von 87 auf 67. Total Blocking Time ging von 80 ms bis 460 ms und LCP von 3,9 s bis 4,4 s. Zwei meiner eigenen Änderungen haben das getan, und Beide wurden aus dem gleichen schlechten Grund gemacht. Der Grund ist es wert, zuerst anzugeben, denn es ist die eigentliche Lektion: die Elemente unter "Einsichten" in diesem Bericht sind mittwort **Unscored**. Sie füttern nicht die Leistungspunkt. FCP, LCP, TBT, CLS und Speed Index schon. Ich habe zwei Runden verbracht Optimierung von unkormiierten Einsichten und bezahlte sie in den erzielten Metriken. "experimental.inlineCss" kehrte um. Es macht, was es verspricht: das Stylesheet hört auf, eine Render-Blocking-Anfrage zu sein. Aber 93 KB CSS muss dann ankommen und geparst werden *inside* das Dokument parse anstatt parallel daneben, und die Dokument ging von 36 KB gzip auf 74,7 KB. Leuchtturm hat das Dokument allein gemessen bei 750 ms CPU, und Style & Layout stieg von 573 ms auf 826 ms. Eine unveränderliche, cacheable, parallele Anfrage ist besser als das, und "Render-Blocking-Anfragen" wurde nie gewertet. Die Schlagzeile compositable Sweep - umgekehrt. Dieser ist peinlicher, weil es zu seinen eigenen Bedingungen gescheitert: die nicht-veredelte Elementzahl ging UP, von 34 bis 41. Zwei textbeurteilte maskierte Schichten können auch nicht zusammengesetzt werden, also der Ersatz war zwei Lack-animierte Elemente, wo es eine gewesen war, plus eine Dauer laufendes Doppelraster des h1. Die Original-Einteil-Version ist zurück. Was beide ersetzt, ist die Veränderung, die zuerst hätte vorgenommen werden sollen. Fünfundzwanzig Regeln auf dieser Seite deklarieren eine unendliche Animation - Sechseck Felder driften, pulsierend, Gefälle gleiten, Partikel schweben, Banner schimmern. Auf einem Desktop niemand bemerkt. Auf dem Low-Power-Telefon ein Lauf emuliert, sie sind ein permanente Steuer: die meisten von Style & Layout, die meisten von Rendering, und jeder von ihnen gezählt im Rahmen des nicht konditorischen Animationsaudits. Nichts davon ist inhaltlich; die Seite liest identisch mit allem noch. Sie halten jetzt unter 768 px an gleichen Breakpoint Hero verwendet bereits, um zu entscheiden, "desktopMotion", so das Teilchen Feld, die Hintergrunddrehung und dieser Schalter zusammen statt bei drei verschiedene Breiten - und unter "beliebt-reduziert-mosphäre". Alle 25 sind abgedeckt. Jedes ist auf den Wert seiner Keyframe ruht an, anstatt nur Ausgeschaltet: ein Element, dessen 0%/100% Rahmen setzt "opacity: 0.05" hat keine Deckkraft seiner eigenen zurückfallen, und stoppen es unpinned würde entweder verdunkeln eine Textur oder lassen Sie eine Full-Opacity-Überlagerung über den Inhalt unter ihm. Die Themenseite Hintergründe fordern nun Halb-View-Port-Breite auf Handys. Bei Qualität 60 sie halbieren sich in der Größe, aber 4.08% ihrer Pixel verschieben sich merklich einmal Verbunden, und Banding über einen glatten Himmel ist, was eine vollbleige Hintergrund zeigt schlimmsten - der gleiche Einwand, der Qualität 50 mit 6,60% abgelehnt. Dropping Gefragte Breite statt nimmt eine von 193 KB bis 77 KB ohne Kompression Artefakte überhaupt, auf einem Bild bereits verdunkelt bis 60% unter einem radialen Schwarz Overlay, hinter undurchsichtigem Inhalt. Die Qualität bleibt bei 75. Auch fixiert, und getrennt von dieser Verpflichtung: die HLS-Playlists waren noch Beantwortung von "max-age=300", weil der encode-Job sie nur auf einem umschreibt re-encode. Ihre Metadaten sind jetzt direkt gesetzt, also der 1 KiB-Cache-Lifetime-Artikel ist geschlossen, ohne auf einen zu warten. Ein echter Fehler auf dem Weg gefangen: die CSS-Chirurgie oben links eine verirrte Schließspange bei der Linie 1480. Turbopack hatte im Clintchen CSS serviert, so dass drei Builds bestanden haben bevor ein Sauberer daran scheiterte. Es wäre CI gescheitert.

Alle Änderungen

Wie, was Sie sehen Versand?

Jedes dieser Updates landet automatisch in Ihrem Arbeitsbereich. Starten Sie frei und beobachten Sie es Woche für Woche wachsen.

Free Forever startenPreisgestaltung anzeigen