Im Rahmen dieser Arbeit wurden zwei statische Frontend-Templates für ein Theme erstellt und entsprechend der in Kapitel 3 vorgestellten Ansatzpunkte und Maßnahmen zur Performanceoptimierung überarbeitet. Als Entwicklungs- und Testumgebung für das Theme diente ein Webserver der Firma Mittwald. Die Umsetzung der Templates orientierte sich an dem Aufbau von aktuellen Unternehmens-Websites und wurde als Responsive Webdesign umgesetzt.
Das Template der Startseite enthält in der Ansicht für Desktop-Rechner einen Content-Slider und ein dreispaltiges Layout (siehe Abbildung 4.1). Die Layouts für Unterseiten, Newsartikel-Übersicht und Newsartikel-Detailansicht weisen einen einspaltigen Inhaltsbereich mit einer Seitenspalte für ergänzende Informationen auf, wie die nachfolgende Abbildung 4.2 zeigt.
In der Ansicht für Smartphone-Displays wird das Navigations-Menü zusammengefasst, der Content-Slider, ebenso wie die Seitenspalte der Unterseiten, ausgeblendet und die drei Textblöcke der Startseite werden untereinander angeordnet (siehe Abbildung 4.3).
Dieses Theme wird in den nachfolgenden Kapiteln in vier Schritten unter den Aspekten der Performanceoptimierung überarbeitet. Für jede Ausbaustufe der Optimierung wird das Theme dupliziert und unter einer Subdomain weiterentwickelt, um Verbesserungen der einzelnen Schritte vergleichen zu können. Der Schwerpunkt bei den Optimierungen liegt auf einer Reduzierung der Anfragen an den Webserver und einer Verringerung des zu übertragenden Datenvolumens. Die einzelnen Templates werden mittels der regelbasierten Kriterien von YSLOW und PageSpeed Insights sowie anhand der Dateigrößen, die auf dem Webserver durch das FTP-Programm Coda 2 ermittelt werden, bewertet.
Das fertiggestellte statische Theme bildet die Basis für eine spätere Optimierung der Content-Management-Systeme und ermöglicht einen Vergleich der Auswirkung dieser Systeme auf die Ladezeit unter gleichen Voraussetzungen. In dem weiteren Verlauf erfolgt eine Anpassung der Templates an die jeweiligen Anforderungen der Content-Management-Systeme.
