Erkenntnisse aus einer WebPagetest-Sitzung auf CSS-Tricks

Ich habe mich neulich mit Tim Kadlec von Over bei WebPagetest zusammengetan, um durch ein wenig Leistungstest auf CSS-Tricks zu verwenden. Verwenden Sie im Wesentlichen das Werkzeug, stöbern Sie herum und identifizieren Sie Leistungsschmerzpunkte, um daran zu arbeiten. Sie können das Video hier auf der Website oder auf ihrem Twitch -Kanal ansehen, was einen Abonnement für weitere Leistungsuntersuchungen wie diese wert ist.

Web -Performance -Arbeiten sind zweifach:

Schritt 1) ​​Messen Sie Dinge und erkunden Sie Probleme
Schritt 2) beheben

Tim und ich haben durch das erstaunliche Tool, das WebPagetest ist, viel Schritt gemacht. Ich habe mir Notizen gemacht, als wir herumstochten. Wir haben eine Reihe von Problembereichen gefunden, einige ziemlich groß! Natürlich konnte ich sie nach all dem nicht aus meinem Kopf bekommen, also musste ich so schnell wie möglich in die Tat umgehen und die Sachen Schritt 2 machen, und ich freue mich zu berichten, dass ich das meiste gemacht und Verbesserungen gesehen habe. Lass uns eingraben!

Identifiziertes Problem Nr. 1) schlechtes LCP

Die größte inhaltliche Farbe (LCP) ist eine der Kern -Web -Vitals (CWV), die jeder sorgfältig beobachtet. Google sagt uns, dass es ein SEO -Faktor ist. Meine LCP tat bei 3,993s ein, was nicht großartig ist.

Ich habe von Tim gelernt, dass es ideal ist, wenn die erste inhaltliche Farbe (FCP) die LCP enthält . Wir konnten sehen, dass das nicht über WebPagetest geschah.

Dinge zu reparieren:

• Stellen Sie sicher, dass der LCP -Bereich, der letztendlich ein großes Bild war, ordnungsgemäß optimiert ist, über ein reaktionsschnelles SRCSet verfügt und CDN gehostet wird. All diese Dinge scheiterten an diesem besonderen Bild, der anderswo arbeitete.
• Das LCP -Bild hatte geladen = "faul", von dem wir gerade gelernt haben, dass es dafür kein guter Ort ist.

Fixierungstechnik und Erkenntnisse:

• All das richtige Bildhandling war vorhanden, aber aus irgendeinem Grund funktioniert nichts davon für .gif -Dateien, was dieses Bild war, war der Tag der Tests. Wir sollten wahrscheinlich keine .gif -Dateien für diesen Bereich sowieso verwenden.
• Schalten Sie das faule Laden des LCP -Bildes aus. Dies ist ein WordPress -Bild, daher musste ich im Wesentlichen Php the_post_thumbnail ('', Array ('Loading' => 'Eager') machen; ?>. Wenn es ein Inline-Bild wäre, würde ich tun, was WordPress sagt, was es wissen muss.

Identifiziertes Problem Nr. 2) Erstes Byte, um die Render Lücke zu beginnen

Tim sah dies sofort als ein ziemlich offensichtliches Problem.

Im obigen Wasserfall (hier ist ein super detaillierter Artikel über Lesewasserfälle von Matt Hobbs) können Sie sehen, dass die HTML in etwa 0,5 Sekunden ankommt, aber der Beginn des Renders (was die Leute sehen, Big Green Line), beginnt erst etwa 2,9 Sekunden. Das ist zu lang.

Das Diagramm identifiziert auch das Problem in einer gelben Linie. Ich habe mich mit einer CSS-Datei von Drittanbietern verlinkt, die dann in meine eigenen CSS-Dateien, die benutzerdefinierte Schriftarten enthalten, weiterleitet . Diese Umleitung kostet Zeit, und als wir uns nicht nur in die Zeit der ersten Seite ausgegraben haben, sondern auch die Last auf der einzelnen Seite, sogar zwischengespeicherte Seite.

Dinge zu reparieren:

• Beseitigen Sie die Umleitung von CSS -Datei.
• SelbstHost-Schriftarten.

Fixierungstechnik und Erkenntnisse:

• Ich habe sowieso einige neue Schriftarten in die Höhe gezogen. Ich habe vor nicht allzu langer Zeit festgestellt, dass ich die Lizenzinnovation von Massenfahrer wirklich liebe (preisgünstig von den Mitarbeitern), aber ich liebe MD Primer gleichermaßen, also habe ich das gekauft. Für den Körpertyp blieb ich mit einer komfortablen Serife mit Blanco, die mit sehr schön optimierten Ribbi ^-1 -Versionen beleglich einherging. Wenn ich das nächste Mal schwöre, werde ich eine variable Schrift finden, aber hey, du musst dir manchmal deinem Herzen folgen. Ich habe diese gekauft und habe jetzt die Schriftfilms selbst veranstaltet.
• Verwenden Sie @font-face direkt in meinem eigenen CSS ohne Weiterleitungen. Auch mit Schriftart-Display: Swap;, aber muss ein bisschen mehr an dieser Ladetechnik arbeiten. Ich kann es kaum erwarten, dass Größe eingreift.

Nach dem erneuten Test mit der vorhandenen Änderung sehen Sie auf einer großen Artikelseite. Das Start-Render ist auf einer 4G-Verbindung eine volle 2 Sekunden schneller:

Identifiziertes Problem Nr. 3) CLS auf dem Gitterführer ist schlecht

Tim hatte einen ordentlichen Trick in der Hülle, um die kumulative Layout -Verschiebung (CLS) auf Seiten zu messen. Sie können WebPagetest anweisen, die Seite nach unten zu scrollen. Dies ist wichtig für so etwas wie CLS, da sich das Layout -Verschiebung aufgrund des Scrollens ereignen kann.

Siehe diesen Artikel über CLS und WebPagetest.

Der Trick besteht darin, eine erweiterte Einstellung zu verwenden, um während des Tests benutzerdefinierte JavaScript in die Seite zu injizieren:

Zu diesem Zeitpunkt haben wir nicht die Homepage getestet, sondern zielgerichtet eine sehr wichtige Seite: unsere vollständige Anleitung zum Netz. In diesem Sinne sehen Sie, dass der CWV in viel schlechterer Form ist:

Ich weiß nicht, was ich über die LCP genau nachdenken soll. Das wird durch das ausgelöst, was zufällig das größte Bild ziemlich weit unten auf der Seite ist.

Das CLS ist für mich mehr besorgniserregend, weil jedes Verschiebungslayout für Benutzer immer widerlich ist. Sehen Sie all diese gepunkteten orangefarbenen Linien? Das passiert Cls:

Dinge zu reparieren:

• CLS ist schlecht, weil faul geladene Bilder hereinkommen und das Layout verschieben.

Fixierungstechnik und Erkenntnisse:

• Ich weiß nicht! Alle diese Bilder sind inline Elemente. Ich erhalte, dass fauler Laden CLS verursachen kann , aber diese Bilder haben eine ordnungsgemäße Breite und Höhenattribute, die den genauen Platz behalten sollen, der für das Bild erforderlich ist (auch wenn es flüssig ist, dank des Seitenverhältnisses), noch bevor es geladen wird. Also ... was gibt? Liegt es daran, dass sie SVG sind?

Wenn jemand es weiß, können Sie mich gerne schlagen. So ist die Art der Leistungsarbeit, finde ich. Es ist eine Mischung aus einfachen Siegen aus albernen Fehlern, kleinen Schlachten, die Sie kämpfen und gewinnen können, größere Schlachten, die manchmal schwieriger zu gewinnen sind, und mysteriöse Unbekannte, dass es Zeit zum Heilen braucht. Glücklicherweise haben wir Tools wie WebPagetest, um uns die wirklichen Geschichten auf unserer Website zu erzählen und uns die Einblicke zu geben, die wir brauchen, um diese Leistungsschlachten zu führen.

1. Ribbi, ich habe gerade gelernt, bedeutet regelmäßig, kursiv, mutig und mutig. Die klassische Kombination, die die meiste Körperkopie im Web kopiert. ⮑

Das obige ist der detaillierte Inhalt vonErkenntnisse aus einer WebPagetest-Sitzung auf CSS-Tricks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!