Hans, Stefan und Schepp nahmen mal wieder einen Artikel als Anlass über ein umfassenderes Thema zu reden, was diesmal Google Lighthouse war.
Schaunotizen
- [00:00:14] Google Lighthouse
- Ein Artikel von Umar Hansa über Chromes Paint Timing API bringt uns auf die Idee, ein wenig über Googles Lighthouse zu plaudern. Lighthouse ist sowas wie das ultimative Website-Auditing-Tool, das Kriterien aus dem Bereich Progressive Web Apps, Performance, Barrierefreiheit und allgemein best-Practices unterstützt. Zudem werden Webseiten seit kurzem auch auf Sicherheitslücken in verwendeten JavaScript-Bibliotheken getestet. Damit löst es auch auch ein Stück weit die alten Google Pagespeed Insights ab. Als Hintergrund zu den sogenannten „passiven Eventlistenern“ verweist Schepp auf ein sehr interessantes Blogpost dazu im Edge Blog. Und warum externe Links besser als Attribut
[rel="noopener"]verpasst bekommen sollten, das hat vor einiger Zeit Jake Archibald verbloggt.
[00:45:56] Keine Schaunotizen
- PWA Checklist
- Eine Checkliste von Dingen, die beim Bauen von Progressive Web Apps zu beachten sind.
- wretch
- Syntaktischer Zucker für die Fetch API.
Kommentare
Ein Hörer #
Geschrieben am 15.12.2017 um 08:46
Haltet ihr „above the fold“ überhaupt für sinnvoll? Ich nicht. Meiner Meinung nach hat die Methodik jede Menge Nachteile nur um einen winzigen Vorteil zu erreichen. Der einzige Vorteil ist die schnellere Darstellung beim ersten Zugriff.
Im Netz gibt es keinen „Fold“, damit ist die gewählte Höhe rein willkürlich bzw. nur auf einen Teil der Zielgruppe bezogen. Da sich die Geräte (insbesondere die mobilen) schnell weiterentwickeln, müsste man die Höhe ständig anpassen.
Der eingebettete Code kann nur zusammen mit dem HTML gecached und muss in der Regel mehrfach vorgehalten werden. Also entweder wird er auf jeder Seite eingebettet oder zusätzlich in eine CSS-Datei gepackt. HTML hat in der Regel die kürzeste Cache-Zeit, CSS die längste, daher wird der above-the-fold-CSS-Teil unnötig oft übertragen.
Der eingesparte Request ist bei HTTP 2 praktisch irrelevant.
Das Hauptargument für „above the fold“ ist nach meinem Verständnis schnelleres Laden bei einer langsamen Verbindung, insbesondere bei mobilen Geräten. In der Praxis haben mobile Geräte heute meist eine schnellere Verbindung als Festnetzanschlüsse. Sobald LTE flächendeckend verfügbar ist, fällt das Argument komplett weg.
Wenn ich mir das so ansehe, dann bin ich nicht überzeugt. Gäbe es keine Nachteile, dann wäre ich noch bereit den Mehraufwand zu betreiben, aber so? Macht ihr das? Wenn ja, warum? Seid ihr überzeugt?
Stefan #
Geschrieben am 15.12.2017 um 09:09
Kurze Antwort: Nein, Above the fold finde ich nicht sinnvoll. Critical Styles? Ja, finde ich sinnvoll. Denke dabei an das App-Shell Modell, dass Google so propagiert. Du siehst schonmal was, als Teaser für das Kommende. Inkrementelles Laden um Fortschritt zu zeigen, anstatt Sekunden auf eine Seite zu warten. Klingt gut in meinen Ohren. Ich gebe dazu immer die Stile an die grob Layout vorgeben und setze alles andere auf
opacity: 0. Wenn dann das asynchron geladene CSS da ist, schieb ich den Rest nach. Funktioniert echt prima.HTTP2 ist leider nicht so das Wundermittel, wie es gerne dargestellt wird. Der Request ist zwar viel schneller als mit H1, aber er muss auch erstmal erzeugt werden. Da hast du schon einen Round-Trip mehr gemacht. H2 Push ist nach ersten Tests leider auch kein Ersatz für inline styles und performt teilweise sogar schlechter als gewöhnliche Requests.
Und das Argument mit der Bandbreite gilt in der westlichen Welt vielleicht. Aber selbst ich muss im Stromsparmodus mich mit Edge-Verhältnissen bei meinem LTE Provider zufrieden geben, und da bringt dann nichtmal die beste H2 Verbindung was gegen die Latenzen.
RSS-Feed zu diesem Beitrag
Kommentare sind für diesen Beitrag geschlossen.