ADMIN

2021

09

2021-09-01T12:00:00

Clientmanagement und Support

PRAXIS

050

Internet

Netzwerkmanagement

Webprojekte performant umsetzen

Auf die Tube drücken

von Kay Seegers

Veröffentlicht in Ausgabe 09/2021 - PRAXIS

Steht ein neues Webprojekt an, sind Planung und Koordination der Schlüssel zum Erfolg. Um ruckeligen, langsamen und schwerfälligen Webseiten den Kampf anzusagen, braucht es gar nicht so viel. Der Artikel führt auf, welche Entscheidungen besonders wichtig sind und wie Sie mit einer realistischen Projektplanung, dem passenden Content-Management-System sowie der geeigneten Hosting-Technik eine optimale Webperformance wahrmachen.

Die Entwicklung eines neuen Webprojekts sollte idealerweise in Verbindung mit der Ausarbeitung eines Pflichtenhefts stehen. Grundsätzlich ist ein solches Dokument besonders bei einer Auftragsarbeit empfehlenswert. Denn gerade bei komplexen Vorhaben kann der gewünschte Umfang während der Entwicklung schnell die ursprünglichen Vereinbarungen übersteigen. Die Grenzen zwischen dem, was besprochen war, und dem, was am Ende gefordert wird, verschwimmen oft. Doch auch bei unternehmensinternen Arbeiten hilft ein Pflichtenheft, um das Projekt bereits von Anfang an auf ein solides Fundament zu stellen.
In diesem Zusammenhang sollten Sie bereits vor Projektbeginn klar definieren, wer die Zielgruppe ist, mit welchen Besucherzahlen zu rechnen ist und welchen Umfang das Projekt haben soll. Bei diesen Überlegungen ist es sehr hilfreich, perspektivisch zu denken. Planen Sie auch für ein Webprojekt – ähnlich wie bei einem Businessplan – einen progressiven Verlauf ein, da ein Wachstum in vielen Fällen nicht unwahrscheinlich ist. Zudem sollten Sie beim Umfang kreativ sein und stets sinnvolle und für die Zukunft mögliche Zusatzfunktionen benennen und einplanen. Diese sollten nach Möglichkeit alles umfassen, was im weitesten Sinne für den weiteren Ausbau des Webprojekts von Bedeutung sein könnte.
Wahl des geeigneten CMS
Sobald Sie das Projekt skizziert haben, können Sie mit der Planung der Anwendung beginnen. Ist das Anforderungsprofil definiert, steht die Entscheidung für ein passgenaues Content-Management-System (CMS) an. Grundsätzlich wäre eine komplette Neuentwicklung ebenfalls denkbar – dies lohnt sich aber in den meisten Fällen nicht. Der Grund hierfür ist, dass bereits die Basisfunktionalität eines CMS als Neuentwicklung sehr komplex und zeitlich zu aufwändig wäre. Es gäbe einfach zu viele Funktionen, die Sie eigens entwickeln müssten, die aber bei jedem Standard-CMS zu den Bordmitteln gehören. Das heißt: Selbst wenn das gesamte Webprojekt sehr individuell ist und spezielle Anforderungen stellt, lässt es sich in der Regel trotzdem mit einem Standard-CMS abbilden.
Die Entwicklung eines neuen Webprojekts sollte idealerweise in Verbindung mit der Ausarbeitung eines Pflichtenhefts stehen. Grundsätzlich ist ein solches Dokument besonders bei einer Auftragsarbeit empfehlenswert. Denn gerade bei komplexen Vorhaben kann der gewünschte Umfang während der Entwicklung schnell die ursprünglichen Vereinbarungen übersteigen. Die Grenzen zwischen dem, was besprochen war, und dem, was am Ende gefordert wird, verschwimmen oft. Doch auch bei unternehmensinternen Arbeiten hilft ein Pflichtenheft, um das Projekt bereits von Anfang an auf ein solides Fundament zu stellen.
In diesem Zusammenhang sollten Sie bereits vor Projektbeginn klar definieren, wer die Zielgruppe ist, mit welchen Besucherzahlen zu rechnen ist und welchen Umfang das Projekt haben soll. Bei diesen Überlegungen ist es sehr hilfreich, perspektivisch zu denken. Planen Sie auch für ein Webprojekt – ähnlich wie bei einem Businessplan – einen progressiven Verlauf ein, da ein Wachstum in vielen Fällen nicht unwahrscheinlich ist. Zudem sollten Sie beim Umfang kreativ sein und stets sinnvolle und für die Zukunft mögliche Zusatzfunktionen benennen und einplanen. Diese sollten nach Möglichkeit alles umfassen, was im weitesten Sinne für den weiteren Ausbau des Webprojekts von Bedeutung sein könnte.
Wahl des geeigneten CMS
Sobald Sie das Projekt skizziert haben, können Sie mit der Planung der Anwendung beginnen. Ist das Anforderungsprofil definiert, steht die Entscheidung für ein passgenaues Content-Management-System (CMS) an. Grundsätzlich wäre eine komplette Neuentwicklung ebenfalls denkbar – dies lohnt sich aber in den meisten Fällen nicht. Der Grund hierfür ist, dass bereits die Basisfunktionalität eines CMS als Neuentwicklung sehr komplex und zeitlich zu aufwändig wäre. Es gäbe einfach zu viele Funktionen, die Sie eigens entwickeln müssten, die aber bei jedem Standard-CMS zu den Bordmitteln gehören. Das heißt: Selbst wenn das gesamte Webprojekt sehr individuell ist und spezielle Anforderungen stellt, lässt es sich in der Regel trotzdem mit einem Standard-CMS abbilden.
Wie gut verschiedene CMS wie WordPress, Drupal, Joomla! oder TYPO3 zu dem geplanten Projekt passen, ist von zahlreichen Faktoren abhängig. Zunächst einmal lässt sich die Grundfunktionalität der jeweiligen Systeme einander gegenüberstellen. Ähnlich wie bei der Performance gilt jedoch, dass sich alle populären Systeme im Laufe der Zeit stark angeglichen haben. Eine viel entscheidendere Rolle spielt dagegen die Administration und Bedienbarkeit der unterschiedlichen Produkte. So ist beispielsweise TYPO3 mit seiner eigenen Skriptsprache (TypoScript) dafür bekannt, selbst erfahrene Entwickler mitunter an ihre Grenzen zu bringen. Was hier oft umständlich zu scripten ist, lässt sich in anderen Systemen bequem über grafische Oberflächen konfigurieren. Welche GUI die Beste ist, stellt meist eine subjektive Entscheidung dar. Genau aus diesem Grund ist es hilfreich, bei größeren Projekten Testinstallationen einzurichten, die die Mitarbeiter testen und bewerten.
Erweiterte Funktionen durch Plug-ins
Einer der wichtigsten Faktoren bei der Wahl des geeigneten CMS ist das Angebot an Erweiterungen. Für jedes CMS gibt es einen Pool an Plug-ins, die Entwickler auf der ganzen Welt bereitstellen. Die Liste der im Pflichtenheft zusammengetragenen Funktionen lässt sich dabei mit den zur Verfügung stehenden Erweiterungen (und den aufgerufenen Preisen) abgleichen. Auf diese Weise wird schnell deutlich, mit welchem CMS das gesamte Anforderungsprofil am besten zu bewältigen ist. Reicht die gebotene Funktionalität nicht aus, können Sie individuelle Plug-ins in Auftrag geben. Eine solche Entwicklung ist für alle gängigen CMS gut dokumentiert.
Mit passgenauen Plug-ins zu arbeiten, ist der effektivste Weg für erfolgreiche Projekte – besonders wenn die Anforderungen sehr speziell sind. Sie vertrauen somit der Basisfunktionalität eines vorhandenen CMS und konzentrieren die eigentlichen Entwicklungsressourcen auf das, was wirklich individuell ist.
Je nach CMS stehen jedoch für verschiedene Zusatzfunktionen häufig sehr viele Plug-ins zur Wahl. Dabei ist jedoch zu beachten, dass die Performance der Website nicht unter den installierten Erweiterungen leidet. Plug-ins werden oft mit viel Druck vermarktet und müssen sich häufig gegen die Entwicklungen von Mitbewerbern durchsetzen. Dabei zählen dann allerdings meist vor allem Features, die auf Screenshots besonders eindrucksvoll wirken. Die Auswirkungen auf die Geschwindigkeit des Seitenaufbaus stehen dagegen oft nicht im Fokus.
Unser Tipp: Kaufen Sie lieber kein Plug-in, das Sie zuvor nicht ausgiebig testen konnten – etwa im Rahmen einer Geschwindigkeitsmessung. Gerade bei sogenannten "Page Buildern", mit denen sich Seiten layouten und befüllen lassen, sind die Performance-Unterschiede oft erheblich. Ohne eine Geld-zurück-Option oder eine (kostenlose) Testphase sollten Sie komplexe Plug-ins wie diese daher besser nicht erwerben.
Oberste Priorität: Schneller Seitenaufbau
Die Zeit, die eine Website benötigt, um zu laden und sich aufzubauen, ist inzwischen nicht nur ein Qualitätsmerkmal, sondern aus weitaus mehr Gründen essenziell. Es ist kein Geheimnis, dass wir in einer schnelllebigen Zeit leben. Auch viele Webseitenbesucher bringen wenig Geduld mit. Wer eine Webpage über eine Suchmaschine aufruft und sich daraufhin sekundenlang mit einem Ladebalken und einer weißen Seite konfrontiert sieht, springt schneller zurück zu den Suchergebnissen, als dem Betreiber lieb ist. Der Anwender ist also schon weg, bevor er überhaupt einen Eindruck des Online-Angebots gewinnen konnte. Das ist doppelt ärgerlich, falls der Besucher über Werbekampagnen zur Webseite geleitet wurde. In diesem Fall verschenken Sie nicht nur Potenzial, sondern reales Geld.
Die Auswirkungen eines schlechten Pagespeeds reichen noch weiter. Unternehmen wie Google haben erkannt, dass Suchmaschinennutzer nur dann zufrieden sind, wenn die gelisteten Seiten schnell und sauber laden. Daher indiziert Google Webseiten nicht nur, sondern unterzieht sie zudem einem eigenen Geschwindigkeitstest. Ist das Ergebnis zu schlecht, führt das unmittelbar zu einem schlechteren Ranking. Verbunden mit der erwähnten hohen Absprungrate leidet das Webprojekt dann also doppelt.
Das von Google bereitgestellte Onlinetool "PageSpeed Insights" [1] zur Ermittlung der Seiten(aufbau)geschwindigkeit hilft dabei, eine Webseite so zu optimieren, dass dieses Szenario nicht (mehr) eintritt. Nutzen Sie dieses Tool auch bei der Installation von CMS-Plug-ins, um die exakten Auswirkungen auf die Gesamtperformance unmittelbar abschätzen zu können. Doch Vorsicht: Lassen Sie sich nicht vom magischen Maximalwert 100 blenden! Oft sind schon Performancewerte über 50 oder 60 Punkte ausreichend, um genug Pagespeed für Suchmaschine und User auf die virtuelle Straße zu bringen.
Komprimierung, Bildgrößen und Lazy Loading
Neben der Wahl gut optimierter Plug-ins lassen sich noch viele weitere Maßnahmen für eine gute Performance treffen. Grundsätzlich sollten beispielsweise alle verwendeten und eingebundenen Files so klein wie möglich sein. Es empfiehlt sich, minimierte (minimized) JavaScript- und CSS-Dateien zu verwenden. Dabei sollten allerdings nur die Dateien geschrumpft sein, die keiner fortlaufenden Entwicklung unterzogen sind. Der Grund: Minimierte Dateien sind in einem Editor kaum noch lesbar und der Performancegewinn relativiert sich durch eine schlechte Pflegbarkeit.
Komplexer gestaltet sich das Ganze bei Bilddateien. Hier sind sowohl die Wahl des richtigen Dateiformats (beispielsweise JPG oder PNG) als auch eine sinnvolle Auflösung und Komprimierung entscheidend. Grundsätzlich müssen Sie in jedem Fall die optimale Balance aus Dateigröße und Darstellungsqualität finden. Spezielle Grafiken, die nur bei mobiler Darstellung zum Einsatz kommen, können die Optimierungen abrunden und die Bandbreite schonen.
Gerade bei Webpräsenzen mit vielen Fotos und Grafiken können sogenannte Tools zum "Lazy Loading" die Seitengeschwindigkeit optimieren und den Datentransfer entlasten. Normalerweise ist es nämlich so, dass ein Webbrowser jede im Quellcode eingebettete Bilddatei im Zuge des Seitenaufbaus lädt. Dabei unterscheidet er nicht, ob das Bild für den Besucher bereits gleich zu Anfang sichtbar ist oder eben noch nicht. Selbst Bilder, die erst durch langwieriges Scrollen in den sichtbaren Bereich rutschen, werden so direkt zu Beginn geladen.
Das ist vor allem deshalb nicht sinnvoll, da gar nicht klar ist, ob der Anwender diese Bilddateien überhaupt benötigt. Die Lazy-Loading-Technik beseitigt diesen Umstand und lädt Bilder erst dann, wenn sie in die Nähe des Sichtbereichs (Viewpoint) rutschen. Vor allem für Smartphones, bei denen aufgrund der niedrigen Bildschirmbreite die vertikale Anordnung Standard und die Bandbreite begrenzt ist, zeigt sich Lazy Loading als äußerst sinnvoll.
Die technische Realisierung eines "Business Hosting" gelingt meist über Virtual Private Server und verbindet somit das Beste aus beiden Serverwelten.
Ressourcen richtig implementieren
Weiterhin ist es sinnvoll, benötigte Java­Script-Dateien im Footer der Website zu platzieren. Alles, was Sie vor dem Body-Bereich des Quellcodes einbinden, bremst den visuellen Seitenaufbau aus. In den meisten Fällen sind JavaScript-Inhalte nicht für das erste Erscheinungsbild einer Webseite, sondern eher für Interaktionen relevant. Im Gegenteil sorgen spezielle Funktionen sogar häufig dafür, dass der Code ohnehin erst interpretiert wird, wenn das Document Object Model (DOM) vollständig initialisiert wurde.
Würden Sie den Code also bereits im Header laden, bedeutet das, dass Sie damit den Seitenaufbau ausbremsen, der Code aber trotzdem erst Verwendung findet, wenn die Seite vollständig aufgebaut ist. Anders stellt sich die Sache bei CSS-Files dar: Da sie das "Aussehen" sämtlicher HTML-Elemente definieren, sollten diese Definitionen bestenfalls schon geladen sein, bevor der Seitenaufbau stattfindet. Andernfalls kann es passieren, dass die Seite zunächst für einen kurzen Moment unformatiert und erst mit Verzögerung korrekt erscheint.
Mit all diesen Maßnahmen lässt sich das technische Grundgerüst der Webapplikation bereits sinnvoll optimieren. Unterstützend dazu sollten Sie serverseitig – oder mit Hilfe eines CMS-Plug-ins – einige sinnvolle Caching-Mechanismen einrichten. Das sorgt beispielsweise dafür, dass der HTML-Code bei identischen Seitenaufrufen vorgehalten und einfach ausgespielt wird, anstatt alles neu zu assemblieren. Komprimierungstools oder entsprechende Konfigurationen, beispielsweise in der serverseitigen htaccess-Datei, verringern zudem die Datenströme zum Client.
Die Performance der Gesamtapplikation ist aber wohl der wichtigste Aspekt. Jeder Seitenaufruf verlangt nämlich vom Server, die komplette Applikation zu durchlaufen und somit die gewünschte Unterseite zu erzeugen. Auf einer schlechten softwaretechnischen Basis gerät die Applikation schnell zum Hindernisparcours, den der Server tausendfach absolvieren muss.
Server als Motor des Webprojekts
Somit kommen wir am Ende zur Wahl eines geeigneten Servers. Eine gut optimierte Applikation wirkt sich nämlich auch hier kostensparend aus. Ist das Webprojekt schlank konzipiert und technisch sauber realisiert, sind die Ansprüche an die Leistungsfähigkeit des Servers entsprechend niedrig. Dennoch fällt es oft schwer, die benötigte Leistung vorab abzuschätzen. Selbst dann, wenn Sie die Besucherzahlen treffend einschätzen können. So sind es meistens empirische Werte, die Aufschluss darüber geben, ob die Hardware unter- oder überdimensioniert ist. Aus diesem Grund (und wegen möglichst progressiv steigender Zugriffszahlen) ist eine skalierbare Serverarchitektur besonders empfehlenswert. Eine gute Wahl stellt daher in vielen Fällen ein virtueller Server (VPS) dar, realisiert als sogenanntes "Business Hosting".
Im Gegensatz zum klassischen Webhosting bieten Cloud- oder virtuelle Server viel Flexibilität. Die Ressourcen des per Software emulierten Servers werden dabei über verschiedene Parameter zur Verfügung gestellt. Administrativ ist diese Lösung vergleichbar mit klassischen dedizierten (physischen) Servern. Der große Vorteil: Wollen Sie später up- oder downgraden, ist ein aufwendiger Serverumzug überflüssig, da sämtliche Leistungsdaten wie CPU, RAM oder Festplattenplatz parametrisiert sind und sich vom Anbieter schnell und einfach anpassen lassen.
Ein VPS kann im Grunde all das, was ein (klassischer) Dedicated Server leistet – allerdings so flexibel wie in einem Webhosting. Jedoch müssen Sie die IP-Adresse hier nicht mit fremden Nutzern teilen und die gesamte Serverkapazität steht Ihnen exklusiv zur Verfügung. Bei der Wahl des entsprechenden Providers sollten Sie Wert auf eine professionelle Infrastruktur mit entsprechend guter Anbindung des Rechenzentrums legen.
Fazit
Mit der richtigen Vorbereitung haben Sie beim Auflegen eines neuen Webprojekts schon viel erreicht. Gerade dann, wenn Sie das CMS mitsamt seiner Plug-ins zielgenau und passend zu den eigenen Bedürfnissen auswählen. Stimmt auch noch die Hardware und entspricht die Infrastruktur den projektspezifischen Anforderungen, sollte einer leistungsstarken Webpräsenz nichts im Weg stehen.
(ln)
Kay Seegers ist 4th Level Care Support Guide bei DomainFactory.
Link-Codes