Der Aufbau eines HTML-Dokumentes erfordert eine semantische Strukturierung der Elemente. Eine Verschachtelung von <div>-Elementen zur Gestaltung gilt es zu vermeiden. Diese lassen sich durch HTML5-Elemente mit semantischer Bedeutung ersetzen [Hog15]. Nicht verwendete Elemente, Kommentare oder Inlinestyles bieten dem Browser bei der Interpretation des Dokumentes keinen Vorteil und erhöhen die Dateigröße. Die Basis für gute Stylesheets ist eine durchdachte Struktur mit einer Vergabe von sinnvollen und kurzen Bezeichnungen für Klassen und IDs [Hog15].
Syntaktische und strukturelle Fehler, die sich negativ auf die Ladezeit auswirken, lassen sich durch eine Validierung des HTML und CSS-Quellcodes verhindern. Dazu kann die Einhaltung der W3C Web-Standards durch die Web-Dienste W3C Markup Validation Service und W3C CSS Validation Service überprüft werden [Ber15].Die Verwendung von <iframe>-Elementen führt zu einer Blockierung des Renderings im Browser und erhöht dadurch die Ladezeit der gesamten Webseite. Das Smashing Magazine hat dies in einem Versuch nachgewiesen und konnte eine Verlängerung der Ladezeit um 0,20 Sekunden feststellen [Joh14]. Um dies zu verhindern empfiehlt Steve Souders, die Inhalte eines <iframe>-Elementes per JavaScript einzubinden und dieses asynchron, wie in Kapitel 3.6.3 beschrieben, nachzuladen [Sou09].
Einbindung externer Ressourcen
Die Einbindung externer Ressourcen im Quellcode des HTML-Dokuments hat Einfluss auf die Dauer der Darstellung einer Webseite im Browser. Nach dem Herunterladen des HTML-Dokumentes werden die Ressourcen anhand ihrer Positionierung im Quellcode angefordert. Sowohl Stylesheets als auch JavaScripts blockieren das Rendering einer Webseite im Browser. Der Browser wartet mit der Darstellung bis das Stylesheet vollständig geladen wurde und zeigt bis dahin eine leere Webseite an [WH15]. Aus diesem Grund wird empfohlen CSS-Dateien als Erstes in dem <head>-Element des Quellcodes einer Webseite anzugeben [Sou07]. Das Stylesheet wird vom Browser direkt nach dem Herunterladen des HTML-Dokumentes angefordert und es findet ein progressiver Aufbau der Webseite statt. Durch die schnellere Darstellung der Webseite wird bei dem Nutzer der Eindruck erweckt, dass die Webseite bereits fertig geladen wurde. Es lässt sich somit die wahrgenommene Performance der Webseite verbessern, auch wenn zu diesem Zeitpunkt nicht alle Ressourcen vollständig geladen wurden [Sou07].
Wird hingegen ein JavaScript am Anfang des HTML-Dokumentes eingebunden, führt dies zu einer Verschlechterung der vom Nutzer wahrgenommenen Performance, wie die Abbildung 3.5 zeigt. Der Browser unterbricht das Rendering der Webseite, bis die Datei vollständig übertragen wurde [WH15]. Dieses Verhalten kann durch die Einbindung der JavaScript-Datei am Ende des HTML-Dokumentes, vor dem abschließenden <body>-Element, umgangen werden, sofern dies keine Beeinträchtigung der Funktionalität des Skriptes darstellt [Sou07]. Dadurch lässt sich, neben einem progressiven Rendering und parallelen Downloads, ein schnelleres Laden relevanter Ressourcen für die Darstellung der Webseite erreichen [Sou07].Die Einbindung von Social Media Buttons über vorgefertigte Skripte externer Anbieter stellt die Performanceoptimierung vor eine Herausforderung. Nur selten können diese am Ende des HTML-Dokumentes integriert und asynchron geladen werden. Daher ist zu überprüfen, ob sich die Integration durch eine Verlinkung realisieren lässt, um die Anzahl von HTTP-Anfragen zu reduzieren und die Ladezeit, durch die Vermeidung zusätzlicher DNS-Lookups, zu verringern [CIW15].
Verteilung statischer Ressourcen auf mehrere Domains
Die Begrenzung der maximalen Anzahl paralleler Verbindungen seitens des Browsers gilt pro Domain. Durch die Verwendung separater Domains zur Auslieferung statischer Ressourcen lässt sich diese Anzahl erhöhen und die Ladezeit der Webseite reduzieren [WH15]. Gleichzeitig ist es möglich auf das Setzen von nicht erforderlichen Cookies für Bilder, Stylesheets und JavaScripts zu verzichten [KR13]. Es ist unerheblich, ob die Ressourcen der Domains über den gleichen Webserver oder über ein CDN ausgeliefert werden [Sou09]. Christian Wenz empfiehlt die Nutzung von zwei bis maximal vier verschiedenen Domains, aufgrund der erforderlichen Zeit für die Durchführung von zusätzlichen DNS-Lookups [WH15]. Steve Souders gibt zu bedenken, dass eine zu hohe Anzahl paralleler Verbindungen, durch die Verwendung mehrerer Domains und moderner Browser, eine Überlastung des Webservers begünstigen kann [Sou09].
Bei dem Laden von Ressourcen einer externen Domain lässt sich eine Verbesserung der Zeit für den DNS-Lookup mit der Angabe dns-prefetch in dem HTML-Attribut rel erzielen. Mit dieser Angabe wird der Browser aufgefordert den angegebenen Domainnamen zur IP-Adresse aufzulösen anstatt zu warten, bis in dem HTML-Quellcode eine Ressource über die Domain angefordert wird [CIW15]. Die Angabe wird ausschließlich von modernen Browsern unterstützt und erfolgt innerhalb des <head>-Elements der HTML-Datei, wie anhand des folgenden Quellcodes gezeigt wird.
<link href=“//ajax.googleapis.com“ rel=“dns-prefetch“ />
Diese Vorgehensweise ist bei der Verwendung externer Links, mehrerer Domains oder eines Content Delivery Network sinnvoll und kann die Ladezeit der gesamten Webseite beschleunigen [CIW15]. Darüber hinaus lassen sich durch dns-prefetch Ressourcen für eine Webseite vorladen, die mit hoher Wahrscheinlichkeit im Anschluss durch den Nutzer aufgerufen wird, beispielsweise bei mehrteiligen Artikeln eines Blogs [Skv14].
