Stoppen Sie den Versand 1.8 MB von unresized Hintergründe nach Hydratation

Performancekamo-marketing
Verschifft
19. August 2026 um 17:50 UTC
Autor
Kamo
Ausschuss
849051c

ThemedBackground war das Teuerste auf der Homepage, und keiner von es sah aus wie ein Käfer. Es machte ein rohes <img&gt; gerade an der Theme-Eimer, so der Browser erhielt die unberührte Quelldatei 606, 646 und 585 KB, WebP, bei volle Auflösung, auf einem Telefon. Nichts verkleinert sie und nichts serviert AVIF, weil die Anfrage nie in der Nähe des Bildoptimierers ging. Nichts Faul-geladen Sie auch nicht, und alle drei Instanzen (Features, Pricing, SignupSection) montieren sich Hydratation, so etwa 1,8 MB begann Download in dem Moment der Seite versucht um interaktiv zu werden, für drei Abschnitte, zu denen niemand gescrollt hatte. Und jeder Rahmen wurde zweimal geholt: eine Verfügbarkeitssonde baute ein "neues Bild() ", wartete darauf, laden Sie in voller Höhe, und nur dann den Zustand, der das reale Element gerendert. "oneror" ist das richtige Werkzeug dafür und kostet nichts. Durch "next/image" ist jeder ein faul-gefettetes, korrekt-großes AVIF auf einem unveränderliche URL, und die Abgleich ist ein CSS-Übergang statt einer Framer Motion "Tanimate" auf dem <img&gt;. "images.qualities" ist konfiguriert, was eher eine Voraussetzung als eine Abstimmung ist Knopf: Nächste 16 Antworten 400 für jede Qualität nicht in dieser Liste, und die Liste defaults zu [75] allein - so dass "Qualität={50" nicht ignoriert wurde, es hätte die Bild direkt. Die Qualität wird nun davon abgestellt, wie jede Oberfläche tatsächlich zusammengesetzt ist, gemessen eher als erraten. Beide Kodierungen zu entschlüsseln und zu vergleichen *nach* der eigenen Seite Filter: Held Hintergrundhelligkeit(.21) 41,1 dB PSNR 0,57% der Pixel unterscheiden sich nach €8/255 . Qualität 50 thematische Hintergrundhelligkeit(.6), Graustufen 20%, radialschwarze Überlagerung 36,9 dB PSNR 6,60% der Pixel unterscheiden sich um 8/255 - links bei 75 Der Held ist das LCP-Element und ist bei einem Fünftel seiner Leuchtdichte zusammengesetzt, so die Hälfte der Bits kaufen Detail, dass nichts durch so viel schwarz zu lösen: 77,7 KB auf der Voreinstellung, 22.0 KB bei 50, für eine Differenz 0,57% der Pixel ausdrücken können. Die themenförmigen Rahmen sitzen unter einer viel leichteren Überlagerung, wo derselbe Schritt reicht 6,6% - genug, um einen glatten Bereich des Himmels über eine vollbleige Oberfläche zu spannen. Ihre Sparen war ohnehin nie die Qualitätseinstellung; es war die Größe und die Faulheit. Der Plakatrahmen wird eher gemessen als angenommen. Ein fixes w=828 war dreimal die Pixel, die die Blende auf einem Telefon anzeigt, wo es um 370 CSS px ist; es ist abgeleitet von der Breite des Elements und dem Gerätepixelverhältnis, gegen die konfigurierte GeräteGrößen. 26.5 KB 7,6 KB auf einem Telefon. Die beiden Preconnects sind jetzt dns-prefetch. Eine Preconnect öffnet eine Steckdose sofort und hält es, die es verdient nur für eine Herkunft während der erste Farbe. Mit der thematischen Fotografie gehen durch diese Herkunft Optimierer, die eigene erste Anfrage des Browsers an theme.kamocrm.com ist das Chat-Widget oder die Held Rolle, sowohl absichtlich nach dem Last-Event, und die Analytik Herkunft ist die gleiche Geschichte, da der Tracker zu fazyOnload umgezogen ist. Leuchtturm berichtete über die Thema preconnect als unbenutzt und es war: eine Steckdose während der kritischen Pfad geöffnet, mit ihm konkurrieren, im Leerlauf bis lange nach dem Schließen. Zwei Dinge gemessen und absichtlich NICHT geändert, so dass sie nicht neu verprozessiert werden: · Eine Browser-Liste, die auf moderne Browser abzielt, entfernt nicht die 13.5 KB von polyfills Leuchtturmflaggen ************ Object.fromEntries/hasOwn, **************** Sie sind Next's eigene "Polyfill-Modul", bedingungslos enthalten; mit Browser-Liste gesetzt, der enthaltene Brocken gebaut byte-identical, gleichen Hash. Hinzufügen von Konfiguration dass nachweislich nichts tut, ist, was "OptimierungCss" war. · Löschen der 90 von 149 Komponenten, die verwiesen werden nirgendwo bewegt sich die Render-blockierende Stylesheet von 678 Bytes gzip (17,398 - 16.720). Rückenwind Scannen von toten Dateien ist nicht das, was macht diese Datei 17 KB, so eine 90-Datei Löschung kann nicht als Performance-Fix gerechtfertigt werden. Noch offen, und nicht fixierbar von diesem Repository: kamo-chat.js wird von die Themenschaufel ohne Cache-Control-Header, 143 KB. Die HLS-Playlisten' 300s TTL ist bewusst - hero-hls-encode-job.yaml schreibt sie auf Re-encode um und ist 1 KiB wert, so bleibt es.

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