kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Das Performance Budget als Hilfsmittel für schnellere Websites

Die Performance einer Website ist ein wichtiger Qualitätsfaktor. Es existieren zahlreiche Tipps und Tools um kürzere Ladezeiten zu erreichen, doch auch ein anderer konzeptioneller Ansatz kann ein mächtiges Werkzeug sein. Das sog. Performance Budget ist ein solcher Ansatz. Mit seiner Hilfe wird die Website schlank gehalten, was die Geschwindigkeit verbessert und somit die Qualität des Projekts steigert.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Performance als Design-Komponente

In den letzten Jahren hat die Performance einer Website immer mehr an Bedeutung gewonnen. Man weiß heute, dass gutes Webdesign nicht nur hübsch aussieht und gut funktioniert. Kurze Ladezeiten tragen maßgeblich zu einem hochwertigen Endergebnis bei, denn wenn eine Website schnell und gut funktioniert, dann wirkt sie professionell. Und das wiederum hat Auswirkung auf den Erfolg der Website. Aus diesem Grund ist Performance-Optimierung längst fester Bestandteil eines professionellen Webdesign-Prozesses geworden. Und auch für Google ist sie mittlerweile ein entscheidender Qualitätsfaktor, der zur Berechnung des Suchmaschinen-Rankings herangezogen wird.

Mit Hilfe eines Developer Tools lassen sich aktuelle Angaben zum Projekt ermitteln - Google Chrome Developer Tool
Mit Hilfe eines Developer Tools lassen sich aktuelle Angaben zum Projekt ermitteln - Google Chrome Developer Tool

 

Um die Geschwindigkeit verbessern zu können, muss natürlich bekannt sein wovon sie abhängt. Die Ladezeit einer Website wird von zahlreichen Faktoren beeinflusst. Sie ist u.a. abhängig von der Internetverbindung (Stichwort Bandbreite und Latenz), von der Leistung des Servers und von Layout und Programmierung.

Je mehr Kilobyte geladen werden müssen und je mehr Serveranfragen abgearbeitet werden müssen, desto langsamer lädt die Website. Einen besonders hohen Anteil an der Gesamtgröße einer Website haben dabei Videos, Grafiken, Schriften und Frameworks. Und genau hier setzt das Performance Budget an. Es hilft dabei die Programmierung und das Layout schlank zu halten.

Was ist ein Performance Budget?

Mit Hilfe eines sog. Performance Budgets wird die maximal zulässige Kilobyte-Größe einer Website festgelegt. Das hilft dabei die Geschwindigkeit zu verbessern.

Wenn mit einem Performance Budget gearbeitet wird, legt man zum Projektbeginn fest, welche Ressourcen für das geplante Web-Projekt zur Verfügung stehen. I.d.R. werden die zulässigen Ressourcen in Kilobyte angegeben und ergeben sich aus dem gewünschten Performance-Ziel.

Das Performance Budget ist also die Festlegung der maximal zulässigen Ressourcen eines Projekts. Nach diesen Maximalwerten hat sich das Projekt-Team bei der Konzeption und bei der Umsetzung zu richten, um die gewünschte Performance zu erreichen.

Bestimmung des Performance Budgets

Bei der Bestimmung des Performance Budgets spielen je nach Projekt verschiedene zeitliche Komponenten eine Rolle. Üblicherweise sind das folgende:

  • Zeit bis zum Start des Renderings
  • Zeit die benötigt wird, bis die Inhalte »above the fold« angezeigt werden
  • Zeit bis alle Inhalte der Seite geladen sind.

Um konkrete Kenngrößen für die gewünschte Performance zu erhalten, gibt es ebenfalls unterschiedliche Herangehensweisen. Es kann auf folgende Arten vorgegangen werden:

  • Verschiedene Konkurrenz-Websites werden analysiert (empfohlen)
  • Es gibt bereits eine konkrete Vorgabe des Kunden
  • Es werden Zahlen aufgrund von Erfahrungswerten verwendet

Wenn die Kenngrößen bekannt sind, muss daraus das Performance-Budget abgeleitet werden. Dabei geht man i.d.R. auf eine der folgenden Arten vor:

  • Das Budget wird auf Basis von Erfahrungswerten festgelegt
  • Es wird ein Tool zur Berechnung genutzt
Screenshot eines Online-Tools zur Bestimmung eines Performance Budgets - www.performancebudget.io
Screenshot eines Online-Tools zur Bestimmung eines Performance Budgets - www.performancebudget.io

Praxisbeispiel

In der Praxis könnte der Ablauf zur Ermittlung des Budgets folgendermaßen aussehen: Zum Projekt-Beginn werden Konkurrenz-Websites analysiert. Dabei ergibt sich, dass die Durchschnittsladezeit der Inhalte »above the fold« bei 2 Sekunden liegt und das im Schnitt 800 KB geladen werden. Das eigene Projekt sollte nun schneller bzw. mindestens genau so schnell geladen werden. Das Performance Budget für ein Ziel von maximal 2 Sekunden Ladezeit wird daher mit maximal 800 KB Datenvolumen festgelegt.

Für die technische Umsetzung und für die Gestaltung hat das folgende Auswirkung: Wir gehen davon aus, das unser Projekt 100 KB JavaScript, 60 KB HTML und 80 KB CSS lädt. Somit bleiben 660 KB für Grafiken, Videos, Webfonts etc. Der Designer muss also ein Layout entwickeln, dass mit dem verbleibenden Budget auskommt.

Falls das verbliebene Budget für das Layout nicht ausreicht, da beispielsweise ein großes Foto auf der Startseite geladen werden soll, müssen an anderer Stelle Einsparungen gemacht werden. Das könnte z. B. der Verzicht auf ein JavaScript Framework sein.

Eine Überschreitung des Budgets ist keine Option, denn dann wird das Performance-Ziel verpasst.

Quellen / Links

 

 

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

6 Kommentare

  1. David Hellmann

    Verfasst am 27. Oktober 2015 um 11:48 Uhr.

    Interessantes Thema aber wenn ich ehrlich bin aus Meiner Sicht einfach keins was man so hoch aufhängen sollte. Macht sicher für einige Seiten richtig viel Sinn, das steht außer Frage. Aber für einen Großteil der Seiten da draußen wohl auch wirklich „Übertreibung“ total uninteressant.

    Wie gesagt, jetzt nur meine ganze persönliche Meinung. Es sollte letztendlich halt alles irgendwie passen. Klar will keiner Websites anschauen wo man Minuten wartet bis was passiert. Aber gefühlt wird mir das Thema halt etwas überbewertet.

    Und das es ein Rankingfaktor bei Google ist stößt mir auch sehr negativ auf da es schon etwas elitär ist. Guten Inhalt kann jeder liefern bin ich der Meinung. Aber um ein Performance Budget umzusetzen ist halt schon Zeit und Geld erforderlich. Klar, für den Content auch… Aber wenn ich ein Blogger bin lande ich weiter unten mit dem guten Inhalt weil meine Seite vielleicht nicht die schnellste ist? Ganz so schlimm wird es sicher nicht sein aber es geht halt schon in die Richtung, dass hier finanzielle Kraft in den Vordergrund tritt und nicht mehr rein der Content.

    Und irgendwie klingt es für mich auch nach einem großen Kompromiss wenn man nach der Methode an ein Projekt angeht. Großes Bild oder Webfont? Webfont oder Slider? Wie gesagt, kann ich mich nicht so mit anfreunden :)

    Aber dennoch wie immer guter Artikel! :)

    • sascha fuchs

      Verfasst am 28. Oktober 2015 um 13:40 Uhr.

      Hätte Google Ladezeit nicht zum Rankingfaktor erklärt würden Designer heute auch noch Fullscreen PNG Freisteller in ihrer Seite haben wollen – weils Geil aussieht.

      Und es macht eben auch Sinn, Menschen sind eben ungeduldig. Das ein Großteil der Nutzer nach über 3 Sekunden Ladezeit die Seite schon verlässt ist bekannt, schon seit Urzeiten (als Seiten nur 50kb schlucken durften). Wir reden dabei auch nicht von Seiten wie Apple, wo der Nutzer auch schon mal länger warten würde, bestimmte Gegebenheiten ehr im Kauf nimmt weil er weis was ihn ungefähr erwartet. Die Rede ist von den vielen „kleineren“ Seiten die gegenseitig in direkter Konkurrenz stehen. Da ist eben entscheidend wer oben im Suchindex steht und wer ist schneller geladen und präsentiert das was der Nutzer sucht.

      Der Rechner soll dem Designer auch mal die Rahmenbedingung vorgeben. Designer wandern vom Print ins Onlinegeschäft, handeln aber immer noch so als würde es am Ende gedruckt werden. Hauptsache es sieht geil aus, was interessiert es ob das ganze ein halbes MB schwerer wird. Nur verteilen wir halt keine PDFs. Man ist gebunden an unterschiedliche Devices und Bandbreiten. Web ist schon immer ein Kompromiss – man sucht den bestmöglichen.

      Der Rechner ist nicht sklavisch anzusehen, er verschafft einem Designer aber schon mal vorab einen Überblick was herauskommt. Performance fängt eben schon beim Design an, macht man sich erst im Development darüber Gedanken, tja da kann es schon zu spät für sein.

      • David Hellmann

        Verfasst am 29. Oktober 2015 um 16:52 Uhr.

        Es gibt Projekte da ist Optik halt alles, dann soll es so sein.
        Ich geb dir schon recht das es immer Leute gibt die einfach drauf los bauen und alles haben wollen aber gar nicht wissen was das heißt. Aber das sind für mich dann keine guten „Online“—Designer denn das setzt für mich heute eben ein gewisses technisches Wissen / Verständnis voraus.

        Und wie gesagt kommt auch viel auf gefühlte vs. tatsächliche Ladezeit an.
        Das Thema sollte auf jeden Fall ein Thema sein wenn man etwas ins Netz stellt aber meiner Meinung nach sollte es nicht im Mittelpunkt stehen. Gibt sicher Fälle wo auch das Sinn macht… Aber meist dann doch nicht. Fängt ja schon an das wo es Sinn machen würde, also bei großen Seiten, meistens eh das zehnfache an Werbung etc. dazu kommt und das dann auch nicht viel bringt :D

  2. Webdesign Rivolta

    Verfasst am 4. November 2015 um 10:06 Uhr.

    Entweder habe ich diesen Artikel jetzt in der Früh zu schnell gelesen, oder dieser wesentlicher Punkt ist gar nicht enthalten. Es geht um die Grafiken. Bei meinen Kunden wähle ich immer zuerst ein Mal hochauflösende Grafiken, die mir von den Kunden geliefert werden, und bearbeite Sie entsprechend wenn nicht vorhanden im .jpg Format, weil dieses Format den Vorteil hat eine hohe Qualität des Bildes mit subjektiv geringer Dateigrösse zu gewährleisten.

    Dennoch bearbeite ich die Grafiken mit Photoscape, sodass die Bildqualität nicht 100% beträgt, aber vielleicht 20%. Dies merkt der Seitenbesucher gar nicht, den eine Verpixelung ist nicht zu sehen, gegebenfalls kann man mit dem Schärfen Filter arbeiten und schon ist das problem behoben.

    Das gleiche mit jQuery / JavaScript-Dateien…diese sollten in minimierter Form vorhanden sein also ein Quelltext ohne Lücken und Leerzeichen.

    • Jonas Hellwig

      Verfasst am 4. November 2015 um 10:25 Uhr.

      Hi, die von die angesprochenen Punkte betreffen alle das Thema Performance-Optimierung. Die Bildoptimierung ist zwar eine wichtige Stellschraube um innerhalb des Performance-Budgets zu bleiben, aber mit diesem Artikel möchten wir erklären was ein Performance-Budget ist, nicht wie man innerhalb des Budgets bleibt. Performance-Optimierung ist nochmal ein eigener, extrem umfangreicher Themenkomplex.

  3. Tilo Wormek

    Verfasst am 9. Dezember 2015 um 11:27 Uhr.

    Ein gelungener Artikel.
    Wem das zu haarspalterisch erscheint, hat meiner Ansicht nach zu kurz gedacht. Es geht hier nicht nur um ein paar Blogger, die ihre Seiten bauen wollen. Bedenkt man, dass mehr und mehr Anwendungen in der Cloud landen und die trotzdem noch bedienbar sein sollen, ist das sehr wichtig.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.