Framehole: PageSpeed ​​6.0 Loophole für einfache perfekte Punktzahl

Jeder gute Webentwickler weiß, dass PageSpeed ​​Insights von Google und das hinter den Kulissen verwendete Open-Source-Lighthouse die modernsten Tools sind, um die relative Leistung einer Website zu ermitteln. Sie bieten auch wichtige Erkenntnisse darüber, welche Änderungen Sie vornehmen können, um diese wahrgenommene Geschwindigkeit zu verbessern. PageSpeed ​​ist zum Goldstandard für schnell und langsam im Web geworden.

Es schadet nicht, dass Google selbst jetzt diesen PageSpeed-Score jeder Website verfolgt und ihn als eine der vielen Eingaben verwendet, um zu bestimmen, wer an die Spitze der Suchergebnisse kommt und wer ins Fegefeuer von Seite 10 verbannt wird.

Es gibt eine ganze Branche und viele Millionen Dollar, die den Besitzer wechseln, nur um diese Punktzahl zu optimieren und zu verbessern, in der Hoffnung, der unerreichbaren perfekten Punktzahl von 100 näher zu kommen. Die neueste Version von PageSpeed/Lighthouse 6.0 enthält einen neuen Satz bevorzugter Metriken für Entwickler auf der ganzen Welt zu optimieren. Diese neuen Metriken sind: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) und Total Blocking Time (TBT). Google hat einen ganzen Artikel, in dem diese neuen „Web Vitals“ erklärt werden, der hervorragende Arbeit leistet und detailliert beschreibt, wie sie gemessen werden.

Mit dieser neuen Version ist es eine brandneue Gelegenheit für die Web-Performance-Branche, mehr Dienste zu verkaufen, da Websites jetzt neue und andere Änderungen benötigen, um diese Höchstpunktzahl zu erreichen. Nun, Sie müssen keinen Cent ausgeben, ich zeige Ihnen eine einfache Änderung, die Sie sofort sogar aus den Tiefen der 60-Punkte-Hölle bis hinauf in den 100-Punkte-Himmel führt.

TLDR: PageSpeed ​​berücksichtigt nicht mehr die Geschwindigkeitsauswirkungen von Einbettungen von Drittanbietern wie YouTube und Anzeigen

Wenn Sie nur das Fleisch davon wollen, lautet die Antwort, dass die neuesten Änderungen von Google Largest Contentful Paint stark gewichten. Dies ist das Maß dafür, wie lange es dauert, bis das größte Element auf dem Bildschirm erscheint, wenn eine Website geladen wird. Es ist ein guter Proxy für die Wahrnehmung der Ladegeschwindigkeit durch einen Benutzer. Das Problem ist, dass Largest Contentful Paint keine eingebetteten Inhalte berücksichtigt, selbst wenn diese Inhalte technisch gesehen als das größte Element "above the fold" gelten.

Ohne über Beweggründe zu spekulieren, warum die Auswirkungen von eingebetteten Inhalten von Drittanbietern wie YouTube-Videos und große eingebettete Werbung nicht an die Oberfläche kommen, würde ich einfach sagen, dass dies die Leute dazu anregen wird, die falschen Änderungen vorzunehmen, um die Geschwindigkeit zu verbessern, und das Web rückwärts bewegen wird.

Als Beispiel erscheint das absurd, obwohl es nicht unwahrscheinlich ist, wenn man bedenkt, wie wichtig der PageSpeed-Score geworden ist. Wir verbessern den PageSpeed-Score einer Website von 60 auf 100, indem wir einfach die ursprüngliche langsame Version der Website mit einem Iframe versehen. Die Schnellbefehle zur Bestätigung der Ergebnisse sind hier, aber lesen Sie weiter unten, um zu sehen, wie ein Benutzer, der seine Punktzahl optimiert, zu unserer ultimativen Framehole-Lösung voranschreitet.

 # Verify you have the new Lighthouse 6.0 installed npm install -g lighthouse # This one should have a score somewhere around 60 :( lighthouse https://webvitalsfail.b-cdn.net/ --view # Instantly to 100 lighthouse https://webvitalsfail.b-cdn.net/anything-100.html --view

Katzentanz v1 - Link

Dies ist eine einfache Beispiel-Website, um eine typisch aussehende Werbeseite für unsere mobile App "Cat Dance" zu zeigen. Es enthält ein super cooles animiertes GIF, um die tanzenden Katzen zu demonstrieren, die Sie erhalten, wenn Sie unsere brandaktuelle App auf Ihrem Telefon installieren. Schauen wir uns nun den Lighthouse 6.0-Score für diese Website an:

Woah, eine Leistungspunktzahl von 60 ist für Überflieger wie uns schmerzhaft. Wie konnte diese einfache Seite laut Google so langsam sein? Konzentrieren wir uns auf „Largest Contentful Paint“, da dies eine der frischen neuen Metriken ist, die in dieser Version eingeführt werden.

Dies ist sehr hilfreich, da es die Verwendung eines Videos für animierte Inhalte empfiehlt und uns zeigt, dass das Largest Contentful Paint-Element das animierte GIF unserer tanzenden Katzen ist. Cool, machen wir weiter mit:

Katzentanz v2 - Link

In dieser Version ersetzen wir das animierte GIF durch ein mp4, das mit dem nativen HTML5-Videoelement wiedergegeben wird. Dies sollte viel besser sein, da mp4s buchstäblich für animierte Inhalte gemacht wurden und viel kleiner sein werden als vergleichbare animierte GIFs.

Nun, das geht auf jeden Fall in die richtige Richtung. Wir haben uns um 14 Punkte verbessert, nur indem wir für die Animation unserer fantastischen tanzenden Katzen zu einer mp4-Datei gewechselt sind. Der Wechsel von einem LCP von 104,9 s auf 9,9 s ist sicherlich eine erhebliche Verbesserung. Aber wir sind mit 74 nicht zufrieden. Das ist wie eine „C“-Note und wir sind eine Gruppe von A+-Leistungsträgern.

Sieht so aus, als ob unser LCP jetzt durch das Video generiert wird, was anstelle des vorherigen animierten GIFs sinnvoll ist. Aber vielleicht machen wir einen schlechten Job mit der Codierung, dem Posterbild oder so etwas, also spielen wir als nächstes damit.

Katzentanz v3 - Link

Für diese Version verwenden wir nur YouTube für das animierte Katzenvideo. Auf diese Weise wird dies helfen, wenn es sich um etwas handelt, das mit der Videokodierung zusammenhängt. Im Allgemeinen hält uns vielleicht unsere naive Videocodierung zurück, also mal sehen, welche Punktzahl wir auf diese Weise erhalten.

Warten Sie eine Sekunde, diese Typen sind Genies, sie bringen meinen PageSpeed-Score auf 99. Wir müssen unsere Videokodierung wirklich durcheinander gebracht haben, um den 76-Score zu verursachen, richtig?

Ist hier etwas falsch? In den vorherigen Versionen waren die tanzenden Katzen immer das größte Element auf dem Bildschirm. Und ein Blick auf die Screenshots aus diesem Test zeigt, dass das Video in dieser Version immer noch dieselbe Größe hat. Warum behauptet es also, dass der Text unseres <h1> das größte Element ist? Die Antwort finden Sie in der Google-Beschreibung der Largest Contentful Paint-Metrik. Diese Metrik umfasst das größte Element, einschließlich Video, Bilder, SVGs, ABER KEINE IFRAMES

Warte was? Das kann nicht stimmen. Wenn der Iframe das größte Element ist und langsam wie Melasse geladen wird, spielt es keine Rolle ... nicht gezählt! Iframes sind also wie magische schwarze Löcher, in die wir unsere langsamen oder großen Elemente einbetten können, ohne dass sie sich auf unsere Leistungsbewertung auswirken. Auf keinen Fall! Probieren wir das aus.

Katzentanz v4 - Link

Um unsere Theorie zu testen, gehen wir zurück zu unserer genauen Version 1-Site mit dem großen animierten GIF und allem. Wir werden nur eine einzige Änderung vornehmen. Lassen Sie uns das animierte GIF in einen Iframe laden und sehen, was mit unserem PageSpeed ​​Score passiert.

Heilige Scheiße... kann das wirklich die Lösung sein? Wir nehmen einfach alle Probleme, die dazu führen, dass ein Website-Geschwindigkeitswert abnimmt, werfen sie in einen Iframe, dann BOOM, keine Probleme mehr. Ich meine, wir wissen, dass dies die Ladegeschwindigkeit nicht wirklich ändert, da es sich um dieselbe Datei mit derselben Größe handelt, die nur in einen Iframe geladen wird. Genau wie bei der Verwendung der YouTube-Einbettung hat sich die Geschwindigkeit nicht wirklich geändert. Iframes sind nur magische Portale, um den PageSpeed ​​Score zu schlagen, wie es scheint.

Aber all unsere langsamen Elemente in Iframes verschieben zu müssen, ist eine Art Schmerz im Hintern ...

Cat Dance v5 - Framehole-Link

Wir brauchen einen einfacheren Weg, um die Geschwindigkeit jeder Website sofort zu steigern. Elemente selektiv durch Iframe-Versionen ersetzen zu müssen, ist einfach super kompliziert und lohnt sich auf lange Sicht möglicherweise nicht. Wir wissen, wie man intelligenter statt härter arbeitet.

Was wäre, wenn wir die gesamte Website in einen Iframe einfügen würden? Auf diese Weise wäre unsere Lösung von der eigentlichen Codebasis der Website getrennt. Wir könnten so etwas sogar am Rand oder in NGINX tun und dies vollständig von der Auswirkung auf bestehenden Code trennen.

Unsere v5 ist nur die Seite von v1, die in einen leeren Wrapper eingebettet ist. Gleiches großes animiertes GIF, keine Optimierungen. Und wir sind jetzt von 60 auf 100 gekommen. Es ist der heilige Gral und es müssen keine Arbeiten an der eigentlichen Website durchgeführt werden.

Das ist dumm

Wenn Sie denken, dass dies das größte Schlangenöl ist, das Sie je gesehen haben, und kein Entwickler bei klarem Verstand sich um diese Änderung der Punktzahl kümmern würde, da sich die zugrunde liegende Geschwindigkeit kein bisschen geändert hat, dann denke ich, dass Sie an der Schlangenöl-Front richtig sind. aber so sehr falsch, ob es die Leute interessiert.

Denken Sie daran, dass PageSpeed ​​der Goldstandard für Webleistung ist. Google verwendet diese Punktzahl sogar, um ihren Algorithmus zu füttern. Wenn Sie noch nie von einem Kunden gehört haben, dass er sehen möchte, wie sich Ihr Produkt auf seinen PageSpeed-Score auswirkt, dann haben Sie nicht mit genügend Kunden gesprochen. Sie interessieren sich, weil Google sich darum kümmert , und die Punktzahl soll etwas bedeuten. Sehen Sie sich an, wie viele Worte ich brauchte, um das zu erklären, und stellen Sie sich vor, Sie sagen einem Kunden, dass er falsch liegt, weil Ihr Produkt die Website verlangsamt, im Vergleich zu dem vereinfachten, leicht verständlichen PageSpeed-Score, und verkünden, wie falsch Sie liegen.

Was auch immer der Grund dafür ist, am Ende des Tages ist es einfach falsch, Iframes aus den Berechnungen auszuschließen, wie lange es dauert, bis die wichtigsten Inhalte auf einer Website erscheinen!

Die Anzeigezeit des größten Elements als Indikator für die Geschwindigkeit auf einer Website zu verwenden, macht absolut Sinn. Es wirkt sich immer noch auf die Wahrnehmung der Geschwindigkeit aus, selbst wenn es in einem Iframe geladen wird. Und mit einer Bewertung fortzufahren, die eingebettete Inhalte ausschließt, schadet dem Ziel, das Web schneller zu machen. Eingebettete Inhalte erhalten keinen Freibrief, insbesondere wenn sie die Ursache für langsame Ladezeiten sind.

Wenn das Scoring mit diesen Web-Metriken einsetzt, dann haben wir es mit einem Web zu tun, das einen Anreiz hat, zu einer Patchwork-Site mit riesiger Werbung und Einbettungen von Drittanbietern zurückzukehren, wobei die Geschwindigkeitskosten dieser Elemente völlig außer Acht gelassen werden. Zweifeln Sie nicht daran, dass es Leute geben wird, die genau das in diesem Artikel erwähnte Iframing der gesamten Website implementieren, da das Management den höchstmöglichen PageSpeed-Score wollte.

Das Verhalten wird dadurch geprägt, wie wir Punkte sammeln