Die grundlegende Basis für eine performante Website stellen die Art des Hostings und die voraussichtliche Besucherzahl dar. Von einem Shared-Webhosting ist abzuraten, da die Nachteile im Hinblick auf die Performance, bedingt durch begrenzte Ausführungszeiten und eingeschränkte Konfigurationsmöglichkeiten, wenig Spielraum für serverseitige Optimierungen lassen. Performancevorteile werden bei Content-Management-Systemen durch die stetige Aktualisierung der Webserver-Komponenten, wie PHP und MySQL, erreicht. Bei der Konfiguration des Webservers ist zu beachten, dass Keep-Alive aktiviert wurde, um Wartezeiten während der Datenübertragung zu vermeiden. Darüber hinaus lässt sich das zu übertragende Datenvolumen textbasierter Dateien zwischen Webserver und Browser, durch eine Minifizierung und die anschließende Komprimierung mittels GZIP, deutlich reduzieren. Aufgrund des geringen Aufwandes zur Umsetzung und der Möglichkeiten einer Automatisierung ist es empfehlenswert, diese Optimierungen in Kombination vorzunehmen.
Das Zwischenspeichern von statischen Ressourcen in dem Browser des Client reduziert die Ladezeit bei einem erneuten Abruf der Website und lässt sich mittels Definitionen in einer HTACCESS-Datei, die auf dem Webserver hinterlegt wird, aktivieren. Dazu empfiehlt es sich, den Header Cache-Control in Verbindung mit dem Etag oder Last Modified zu verwenden, da dieser laut Google inzwischen von modernen Browsern unterstützt wird [Goof]. Auf ein serverseitiges Caching kann in den meisten Fällen, aufgrund des hohen Aufwandes und der zusätzlichen Kosten, verzichtet werden.
Abhängig von den geografischen Standorten der Zielgruppen einer Website, kann die Nutzung eines Content Delivery Network zu einer Verbesserung der Ladezeit bei der Auslieferung statischer Ressourcen führen. Jedoch kann ein CDN die Performance schlanker Websites durch zusätzliche DNS-Lookups nachteilig beeinflussen und die Ladezeit verlängern. Hier ist zu prüfen, auf welche Kontinente die Ressourcen primär ausgeliefert werden und ob ein CDN die Ladezeit messbar verbessern kann.
Inhalte und Templates einer Webseite haben den größten Einfluss auf die Ladezeit und bieten somit wesentliche Ansatzpunkte für eine Performanceoptimierung. Dabei gilt es die Anzahl der HTTP-Anfragen und das zu übertragende Datenvolumen zu reduzieren, um eine schnellstmögliche Übertragung der Ressourcen zu gewährleisten. Neben einer Optimierung und Minifizierung des Quellcodes der HTML-Dokumente, Stylesheets und JavaScript-Dateien, sollte zum Speichern von Bildern ein passendes Dateiformat sowie eine richtige Komprimierung angewendet werden. Diese Arbeitsschritte lassen sich, ebenso wie das Entfernen nicht erforderlicher Metadaten, in den Entwicklungsprozess vor dem Hochladen der Dateien auf den Webserver integrieren.
Ein möglichst einfacher Aufbau des Quellcodes der HTML-Dokumente und Stylesheets führt zu einer geringeren Dateigröße und verbessert die Wartbarkeit [Hog15]. Bei den HTML-Dokumenten ist zu beachten, dass direkt am Anfang in dem <head>-Element die CSS-Datei angegeben wird und JavaScript-Dateien erst am Ende des Dokumentes, vor dem schließenden </body>-Element. Sofern möglich, sind die JavaScript-Dateien mit den Attributen defer und async auszuzeichnen, um diese asynchron zu laden. Die Beachtung des kritischen Rendering Pfades bei der Einbindung externer Ressourcen reduziert Verzögerungen durch Wartezeiten während des Renderings in dem Browser. Daher sollten Inhalte, die im sichtbaren Bereich des Browsers dargestellt werden, ein Datenvolumen von maximal 14 Kilobyte aufweisen, damit diese innerhalb der ersten Round Trip Time von dem Webserver an das Endgerät des Nutzers übertragen werden.
Eine Verbesserung der Auslieferung von Bildern für spezifische Endgeräte wird mit dem neu eingeführten srcset-Attribut und dem <picture>-Element erreicht. Bisher war dies ein Problem beim Responsive Webdesign und die Auslieferung von Bildern in verschiedenen Auflösungen konnte nur über JavaScript-Funktionen gesteuert werden.
Frontend-Frameworks wie Bootstrap oder Foundation reduzieren den Arbeitsaufwand und die Entwicklungskosten durch die Abdeckung sämtlicher Standardanforderungen und Funktionalitäten. Dies ist zugleich deren großer Nachteil. Viele der bereitgestellten Funktionen im Quellcode bleiben ungenutzt und müssen dennoch bei jedem Abruf einer Webseite mitgeladen werden. Anhand der Versuchsergebnisse von Tom Barker ist im Hinblick auf die Ladezeit eine Nutzung von Frontend-Frameworks zu vermeiden. Selbst wenn diese modular aufgebaut sind und minifiziert wurden, ist der Anteil ungenutzten Quellcodes durch die Abhängigkeiten von externen Bibliotheken hoch [Bar14].
Die Verwendung von Responsive Webdesign und eine gute Performance schließen sich nicht kategorisch aus, sofern Responsive Webdesign nicht als reine Erweiterung einer Website, sondern als ganzheitlich zu betrachtende Lösung verstanden wird. Die beiden Ansätze Mobile First und Responsive Design with Server Side Components sorgen für eine Auslieferung optimierter Inhalte unter Berücksichtigung der Endgeräte. Bereits in der Planungsphase eines Responsive Webdesign sollte die Performanceoptimierung mit einbezogen werden, um Nachteile auf die Ladezeit, durch die Auslieferung unpassender oder nicht erforderlicher Ressourcen, zu vermeiden [Bar14].
