Viele Optimierungen sind heutzutage absolute Must-Have‘s und bedürfen (eigentlich) gar keiner Diskussion. Spielt Ladegeschwindigkeit eine Rolle (und das sollte nunmehr für jede Webseite der Fall sein), habe ich beispielsweise gar keine andere Wahl, als mich damit auseinanderzusetzen, wie viel JavaScript ich wo und wann lade. Genauso kümmere ich mich um effizientes Caching sowie durchoptimierte Bilder.
Die gesonderte Optimierung des Critical Path Renderings ist ein komplexes, aufwendiges Thema, dem (leider) häufig noch zu wenig Aufmerksamkeit geschenkt wird. Gemeint ist hier der direkt sichtbare Bereich (ohne zu scrollen) – abhängig von der jeweiligen Auflösung des Endgerätes, mit dem auf die Seite zugegriffen wird.
Google selbst empfiehlt dabei, das Mark-Up so zu strukturieren, dass direkt sichtbare Elemente, wie das Logo, sofort geladen werden und alles andere bei entsprechender (Scroll-) Interaktion nachgeladen wird. Das klingt erst einmal relativ einfach, die Praxis schaut aber in der Regel anders aus. Das größte Augenmerk sollte hier bei der Verwendung des CSS liegen, denn selbiges ist maßgeblich für die Darstellung verantwortlich. Einen hervorragenden Einstieg gibt es hier – dort wird detailliert beschrieben, wie mit vergleichsweise überschaubarem Aufwand herauszufinden ist, für welche Auflösung welche CSS-Anweisungen notwendig sind.
Damit bewaffnet teilt man das CSS in zwei Blöcke: Alle relevanten Notationen für den Critical Path werden zukünftig als Inline-CSS direkt in die Seite eingebunden (damit wird der zusätzliche HTTP-Request vollständig eingespart) und alle CSS-Notationen für den nicht sichtbaren Bereich werden asynchron nachgeladen. Selbstredend geht auch hier noch deutlich mehr – so wäre es im Sinne einer wirklich guten, komplett responsiven Seite auch wichtig, Bilder in verschiedenen Größen auszuliefern oder gar das DOM (Document Object Model) entsprechend aufzuräumen.
In diesem Sinne: Happy Optimizing!