Boehrsi.de V7 - Korrekte Positionen für Skripte und CSS
Auch in der heutigen Zeit der Parallelität, ist es noch sehr wichtig an welchen Stellen man Code in seiner Homepage platziert. Dies gilt vor allem für externen Skripte und Style Dateien. Denn liegen Scripte an unpraktischen Stellen, kann es dazu kommen das sie den kompletten weiteren Ladevorgang der Seite blockieren und somit die eigentliche Darstellung merklich und unnötig verzögern. Es gibt verschiedene Vorschläge wie man am besten vorgehen kann und ich habe mich wie im unteren Teil der News beschrieben entschieden.
Im oberen Bereich (Header) binde ich meine CSS Styles ein, obwohl an einigen Stellen empfohlen wird auch CSS nach unten zu verlagern. Meine Tests haben aber gezeigt, dass das Potential für Fehler wesentlich geringer ist wenn ich die CSS Dateien im Header lasse und außerdem wird die Geschwindigkeit bei mir nicht messbar negativ beeinflusst. Anders sieht es bei Java Skript Dateien aus, denn dort binde ich alle relevanten Dateien im unteren Bereich der Seite ein (vor dem schließenden Body Tag). Dies verhindert das durch den Ladevorgang dieser Dateien dem Nutzer Content vorenthalten wird, denn dieser wird vor den JavaScript Dateien geladen. Auf der anderen Seite lädt aber alles schnell genug, um z.B. die JavaScript Navigation auf der mobilen Seite fehlerfrei zu laden. Dieses Vorgehen alleine ist für JavaScript aber nicht ausreichend, denn es gibt bestimmte Skripte die nicht verlagert werden können oder die einfach nur auf bestimmten Seiten benötigt werden. Für diese nutze ich dann neben der JavaScript Hauptdatei zwei PHP Dateien, die entsprechend der Abhängigkeiten weiteren JavaScript Code direkt vor oder nach dem Content einbetten. Ein Beispiel sind hier die Skripte zur Einbettung von YouTube, die ich mir selbst geschrieben habe, denn diese funktionieren nicht wenn sie nicht vor der eigentlichen Nutzung eingebunden werden. Außerdem sind diese Skripte nur in bestimmten Bereichen meiner Seite in Benutzung und müssen nicht überall eingebunden werden. Mit diesem Konzept kann ich Style und Skript Dateien laden, ohne Performance Probleme oder Fehler zu provozieren und binde Code nur da ein wo er nötig ist. Eine sehr umfangreiche Auflistung von guten Techniken zur Positionierung von Code und auch diversen weiteren Optimierungsmöglichkeiten findet ihr in den Related Links.