- Verschifft
- 19. August 2026 um 17:29 UTC
- Autor
- Kamo
- Ausschuss
- 917ad87
Die Homepage hat ihre ganze Falte unsichtbar ausgeliefert. Framer Motion serialisiert ein "Initive" Requisite in die vorgeschneiderte HTML als Inline-Stil, so dass die Markup kam mit der <h1", der Copy-Spalte, der Rollenöffnung und der Vollblutung Hintergrund alles bei "opacity: 0" und blieb so, bis React hatte heruntergeladen, gesprenkt und hydratisiert und führen ihre erste Animations-Rahmen. Erstens und Größte Contentful Paint wurden daher ein Viertel-Megabyte-JathaScript gemessen Bundle statt der Seite: der Server hatte bereits die Überschrift gemacht, und ein Drehbuch hielt es zurück. Nichts sieht das - nicht der Build, der Typ überprüfen, die Fass-Laufe oder der Navigationswache - und auf einem Desktop-Link ist es unsichtbar. "Curl" die Seite und zählen "opacity:0": 102 von ihnen, jedes Element oberhalb der Falte unter ihnen. Die gleichen Eingänge, in den gleichen Dauern und Lockerung, sind jetzt CSS-Keyframes. Das Stylesheet wird geparst, bevor ein einzelnes Skript geholt wurde. Die LCP Hintergrund verwendet eher einen Übergang als einen Keyframe, weil ein Übergang tut nicht auf dem ersten Render laufen - so ist der Rahmen, der bei der Ankunft ist einfach auf, mit nichts für LCP zu warten. Der Rest des Lastfensters, in absteigender Reihenfolge dessen, was es gekostet hat: · Die Rolle begann vom ersten edigen .-Vorlast="Metadaten", a Plakat auf dem Element, und eine adaptive Leiteröffnung auf der 540p-Sprung an 1,17 MBit/s für eine Blende, die auf einem schmalen Aussichtspunkt unter der Falte sitzt, unter der Kopie Spalte. Es wartet jetzt auf das Lastenereignis, dann auf das Hauptereignis Thread zu gehen Leerlauf, dann für die Blende innerhalb eines Blickport kommen. Ebene ist auf die Größe des Spielers gedeckelt und startet auf der unteren Sprosse auf einem Telefon. Speichern-Daten und 2G/3G-Leser behalten den Posterrahmen und den Neustart-Button. · Das Poster selbst war eine 93 KB JPEG auf einem eintägigen Cache-Header. Durch die Bild-Optimierer ist es ein 26 KB AVIF auf einer unveränderlichen URL, und es ist nicht geholt, bis die Rolle gewollt ist. · Das Markenlogo ist 132 KB der Acht-Zibogen-Talrace-Ausgang, vorinstalliert als ein Bild, um eine Marke 140 px breit zu zeichnen. Gerundet zu einer Dezimalstelle einer 3503-Einheit Raum mit der wiederholten Füllung gehisst, ist es 59 KB geometrisch identisch zu 0,0023 CSS px in der größten Größe, bei der es jemals dargestellt wird. scripts/ optimieren-logo-svg.mjs ist idempotent, für das nächste Mal wird das Logo exportiert. · GSAP war auf der eifrigen Skriptliste jeder Seite in der Website, vier Mal over: ein Tween auf dem Fortschrittsbarg glow, "gsap.set()" schreiben zwei statische Stil-Eigenschaften, ein "fromTo" Duplizieren eine Welle der Stylesheet war bereits animierend, und ein Global-Timeline-Ruf, der nur für Leser feuert die um reduzierte Bewegung gebeten haben. Alle vier sind von der kritischen verschwunden Pfad; die letzte Lasten der Bibliothek in der Zweigstelle. · TouchOptimized vermessen jede Taste, Link und Eingabe auf der Seite während Hydratation, die jede Lesung mit den Schriften des vorherigen Elements verschränkt - a Zwangssynchron-Layout-Schleife mehrere hundert Elemente lang, Landung in Total Blocking Time auf dem Handy ist es existiert, um zu helfen. Es jetzt Chargen die liest und wartet auf Leerlauf. · · "<Script strategy="afterInteractive" . emittiert eine "<link rel="preload" as="script", der den Browser gebeten, den Analytics-Tracker zu holen bei hohe Priorität neben dem Heldenhintergrund. "lazyOnload" zeichnet immer noch die besuchen, einen Moment später und abseits des kritischen Weges. · Der Held montierte drei Full-Viewport-Hintergrundlagen. Die Rotation ist Desktop-only, so auf einem Telefon zwei von ihnen waren dauerhaft "opacity: 0". · "clearCookieConsent" - zwei Linien von localStorage - wurde aus dem Export exportiert Zustimmung Banner, so dass die Fußstütze "Verwertung Cookies" Kontrolle zog 250 Linien von Framer Motion in einen Brocken, der im ersten HTML wiedergegeben wird. Es bewegt sich auf app/lib/cookie-consent.ts, und das Banner und der Toast-Stack jetzt montieren auf Leerlauf: keiner malt bei der Ankunft etwas. · "experimental.optimizeCss" gedruckt ""Optimierung Css" in jedem Build und tat nichts. Es inlines kritische CSS durch Nachbearbeitung fertiges HTML, die der App Router gibt es nie. Verifiziert gegen die gebaute Ausgabe mit der "beasties" Backend tatsächlich installiert: Null <style"-Blöcke in <head", stylesheet immer noch eine einfache Blockierung <link". Entfernt - eine Flagge, die berichtet Erfolg, während inert liest sich wie eine bereits getroffene Optimierung. · 36 Klasse Selektoren und 24 Keyframes in globals.css ohne Referenz überall im Repository, Hersteller und Docs enthalten. Critical-Pfad Bytes, gzip, gegen einen sauberen Build eingesetzt: html 38,101 - 36,277 js 281.700 - 245.707 css 18.629 € 17.398 Logo 57,390 - 22.902 insgesamt 395,820 - 322.284 (-19%) eifrige Skripte 15 - 13 Aus dem Ladefenster ganz oben: das 93 KB Plakat, das HLS manifest und seine 1,17 Mbps Segmente, zwei Hintergrundbilder und der Tracker. Nicht angesprochen hier: "" Antworten 307 auf "/de", also die URL, eine Seite-Speed-Run Tests und welche Lighthouse als Umleitung zählt. Die einzige wirkliche Lösung ist "localePrefix: 'as-eded', und das schreibt canonicals, hreflang, Sitemaps und jede interne href über 250 Routen in 22 Orten, während 301-ing jeder in indexiert /en/* URL. Das ist eine SEO-Entscheidung und keine Performance-Entscheidung, und Der Hop kostet auf einer bereits geöffneten Verbindung 60 ms.