Hi Rodrigo, du bist unser Mann wenn es um Web-Performance geht. Kannst du zuerst kurz erklären, was man unter Performance-Optimierung versteht?
Web-Performance beschreibt, wie schnell eine Webseite vom Browser geladen wird. Die Ladezeit ist vor allem wichtig aus Gründen der Conversion und Absprungrate und zurzeit brandaktuell. Webseiten, die stark von SEO anhängig, sind profitieren am meisten von schnellen Ladezeiten.
Unter Performance-Optimierung versteht man in diesem Zusammenhang die Anpassung einer bestehenden Webseite, damit sie möglichst schnell lädt. Eine Webseite besteht aus vielen Daten. Einige sind kritisch für die initiale Darstellung, andere können noch ein wenig warten, und dann gibt es auch noch solche, die auf der geladenen Seite gar nicht verwendet werden. Es ist erstaunlich, was man alles erreichen kann, wenn man dem Browser nur die richtigen Signale gibt. Das ist oftmals möglich, ohne dass die Webseite im Aussehen verändert wird.
Kannst du ausführen, was du damit meinst, wenn du sagst dass Ladezeiten “zurzeit” besonders aktuell sind in Bezug Conversion und Absprungrate?
Die Ladezeit einer Seite war schon immer wichtig. Es gibt seit Jahren Statistiken, die deutlich zeigen, dass die Conversion oder Absprungrate signifikant von der Ladezeit einer Seite beeinflusst werden. Es gibt aber einen einfachen Grund, weshalb das Thema im vergangenen Jahr so viel Beachtung bekommen hat: Google.
Google hat angefangen, die mobilen Versionen der Seiten für das Ranking der Suchresultate zu priorisieren. Ist eine mobile Seite langsamer als die der Konkurrenz, dann könnte sie schon bald tiefer gelistet sein als bisher. Bei mobilen Endgeräten zeigt sich der Unterschied zwischen optimierten und nicht optimierten Seiten sehr deutlich. Grosse Datenmenge und Komplexität in Form von JavaScript gepaart mit instabiler Verbindung und der schwächeren Leistung vom Handy können zu enormen Ladezeiten führen. Wenn man bedenkt, dass mittlerweile über die Hälfte aller Seitenbesuche von einem Smartphone kommen, ist verständlich, wieso die Performance so an Wichtigkeit gewonnen hat.
Wie stellen wir fest, dass eine Seite langsam lädt? Mit welchen Tools arbeiten wir?
Ich empfehle jedem, seine Lieblingsseite auf https://web.dev/measure/ testen zu lassen. Nach einigen Sekunden sieht man auch schon das Ergebnis in Form einer Punktzahl. Bei einer roten Performancezahl geht man ein grosses Risiko ein, Benutzer aufgrund der Ladezeit zu verlieren. Orange lässt sich noch optimieren und bei grün muss man sich keine Sorgen machen.
Dieser Test beruht auf Lighthouse. Lighthouse ist ein von Google entwickeltes Tool, das unter anderem die Ladezeiten einer Seite analysiert und zahlreiche Verbesserungsvorschläge macht, um diese zu verbessern. Diesen Test können die Entwickler während des Programmierens machen um direkt zu sehen, inwiefern Änderungen die Performance beeinflussen.
Wir arbeiten primär mit Lighthouse. Googles Lighthouse-Test misst unter anderem die Performance einer Webseite. Es simuliert einen Benutzer, der die Seite auf seinem Smartphone lädt. Der Test misst dann die Ladezeit der Seite und gibt am Ende nützliche Tipps, um die Performance zu verbessern. Dadurch, dass es nur eine Simulation ist, kann man schnell Anpassungen an der Seite vornehmen und gleich die Auswirkungen prüfen. Die tatsächliche Performance misst man dann im laufenden Betrieb mit richtigen Nutzern. Nützliche Informationen dazu bietet der Core Web Vitals Report in der Google Search Console.
Wie kann die Performance grundsätzlich verbessert werden?
Es gibt leider keine einfache Anleitung, die immer zum Erfolg führt. Es sind eine Vielzahl von Best Practices die dafür sorgen, dass Performance nicht zu einem Problem wird. Man muss immer unterscheiden zwischen Performance-Optimierungen in einem existierenden Projekt und in einem neuen Projekt. Es verhält sich ähnlich wie mit der Security: die Performance in einem weit vorangeschrittenen Projekt zu optimieren, ist kostspielig. Deshalb ist es am besten, wenn von Anfang an, bei den Designs und bei jedem neuen Feature der Impact auf die Performance abgewogen wird.
Allen, die fürs Web entwickeln und ein Projekt mit dem Fokus auf Performance starten, kann ich folgende Punkte ans Herz legen:
- Lerne mehr über Performance. Ein guter Start ist die Seite https://web.dev/learn/. Sie vereint zahlreiche Artikel und Videos zum Thema Performance und mehr.
- Wenn möglich, verwende ein Framework, das viele der Best Practices bereits umsetzt.
- Teste deine eigene Seite mit Lighthouse. Bei Problemen sagt dir Lighthouse genau, wo du die nötigen Infos bekommst, um das Problem beheben zu können.
- Reduziere JavaScript auf ein Minimum. Das beginnt schon bei der Wahl des Frameworks und ist vor allem später beim Hinzufügen von Libraries sehr wichtig. Bundlephobia.com ist eine Seite, die genau zeigt, wie gross eine Library ist.
- Falls es nicht anders geht und eine grosse Library verwendet werden muss, dann achte darauf, dass sie nur dann geladen wird, wenn sie verwendet wird. Diese Funktionalität verbirgt sich in der Regel hinter den Begriffen “dynamic import” oder “code splitting”.
Mal ganz anders gefragt, wie würdest du vorgehen, wenn deine Aufgabe wäre, die langsamste Seite der Welt zu erstellen? 😉
Da fällt mir so einiges dazu ein. Hier meine persönlichen Hitlist für schlechte Performance.
- Der gesamte Seiteninhalt wird von JavaScript generiert. Statisches HTML ist überbewertet.
- Ich liebe Third-Party-Scripts. Ein Script für A/B-Testing, ein anderes, das die Mausbewegung der User trackt, ein spezielles Tracking Script einer anderen Firma und natürlich Werbung. Am besten wird das alles noch vor allem anderen geladen. Schliesslich sind diese Scripts wichtiger als der eigentliche Inhalt der Seite.
- Ich habe sowieso schon wenig Zeit, deshalb hole ich meine Funktionalität wenn möglich von Libraries. Die Grösse und darunter liegende Technologie ist mir egal. Hauptsache es funktioniert. Da die Internetgeschwindigkeit stetig steigt, ist es auch kein Problem, wenn der User ein gutes dutzend MB an Daten laden muss, um die Seite darzustellen.
- Bilder sind wichtig. Meine Bilder sind so gut, dass ich sie in der grösstmöglichen Auflösung anbiete. So sieht das Bild egal auf welchem Bildschirm gestochen scharf aus, auch für die nächsten 10 Jahren!
