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.

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:

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

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:

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

 

 

Geschrieben von kulturbanause Team

Benutzerbild

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – 7 Kommentare

  1. Max
    schrieb am 25.10.2020 um 10:17 Uhr:

    Meiner Meinung nach sollte das budget bei 1mb oder 1 Sekunde sein, welches zuerst zutrifft.

    Mobile unter 2g( ja das existiert noch) lädt maximal 1 Sekunde.

    Desktop mit glasfaseranbindung lädt maximal 1 MB.

    Wen so was bei allen Websites vorgenommen wird, sind die Artikel von Page bloat Schnee von gestern.

    Antworten
  2. Tilo Wormek
    schrieb am 09.12.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.

    Antworten
  3. Webdesign Rivolta
    schrieb am 04.11.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.

    Antworten
    • Jonas Hellwig
      schrieb am 04.11.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.

      Antworten
  4. David Hellmann
    schrieb am 27.10.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! :)

    Antworten
    • sascha fuchs
      schrieb am 28.10.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.

      Antworten
      • David Hellmann
        schrieb am 29.10.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

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Anspruchsvolle Projekte mit kulturbanause

Wir lieben es gewachsene Strukturen aufzuräumen und perfekt im Content Management abzubilden. Strukturell komplexe Projekte realisieren wir regelmäßig und sehr gerne.

Konzeptionelles Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →