Platzierung von <link>-Tags im <head>
Das Platzieren von <link>-Tags im <head> ist Teil der korrekten Spezifikation für den Aufbau einer optimierten Website. Beim ersten Laden einer Seite werden HTML und CSS gleichzeitig geparst; HTML erstellt das DOM (Document Object Model) und CSS das CSSOM (CSS Object Model). Beides wird benötigt, um die visuellen Elemente einer Website zu erstellen, was eine schnelle "erste aussagekräftige Darstellung" ermöglicht. Dieses progressive Rendering ist eine Kategorie, in der die Leistung von Optimierungs-Websites gemessen wird. Das Platzieren von Stylesheets am unteren Ende des Dokuments verhindert das progressive Rendering in vielen Browsern. Einige Browser blockieren das Rendering, um ein erneutes Malen von Seitenelementen zu vermeiden, wenn sich deren Stile ändern. Der Benutzer sieht dann eine leere weiße Seite. In anderen Fällen kann es zu einem "Flickern von ungestyltem Inhalt" (FOUC) kommen, bei dem eine Webseite ohne angewendetes Styling angezeigt wird.
Platzierung von <script>-Tags direkt vor </body>
<script>-Tags blockieren das HTML-Parsing, während sie heruntergeladen und ausgeführt werden, was Ihre Seite verlangsamen kann. Das Platzieren der Skripte am Ende ermöglicht es, dass das HTML zuerst geparst und dem Benutzer angezeigt wird.
Eine Ausnahme für die Positionierung von <script>-Tags am Ende ist, wenn Ihr Skript document.write() enthält, aber heutzutage ist es keine gute Praxis, document.write() zu verwenden. Außerdem bedeutet das Platzieren von <script>-Tags am Ende, dass der Browser die Skripte erst herunterladen kann, wenn das gesamte Dokument geparst ist. Dies stellt sicher, dass Ihr Code, der DOM-Elemente manipulieren muss, keinen Fehler auslöst und das gesamte Skript anhält. Wenn Sie <script>-Tags im <head> platzieren müssen, verwenden Sie das defer-Attribut, das den gleichen Effekt erzielt, dass das Skript erst nach dem Parsen des HTML ausgeführt wird, der Browser das Skript aber früher herunterladen kann.
Beachten Sie, dass das Platzieren von Skripten direkt vor dem schließenden </body>-Tag die Illusion erzeugt, dass die Seite bei einem leeren Cache schneller lädt (da die Skripte das Herunterladen des restlichen Dokuments nicht blockieren). Wenn Sie jedoch Code haben, den Sie während des Seitenladevorgangs ausführen möchten, wird dieser erst nach dem Laden der gesamten Seite ausgeführt. Wenn Sie diese Skripte im <head>-Tag platzieren, würden sie früher ausgeführt – bei einem vorab gefüllten Cache würde die Seite also tatsächlich schneller zu laden scheinen.
<head>- und <body>-Tags sind jetzt optional
Gemäß der HTML5-Spezifikation sind bestimmte HTML-Tags wie <head> und <body> optional. Googles Styleguide empfiehlt sogar, sie zu entfernen, um Bytes zu sparen. Diese Praxis ist jedoch noch nicht weit verbreitet, und der Leistungsgewinn ist wahrscheinlich minimal, und für die meisten Websites wird es wahrscheinlich keine Rolle spielen.