Strategie zum laden von CSS/JS

[hotti]

above-the-fold scheint ein neuer SEO-Trick zu sein. Ich habe mal ein bischen recherchiert, bin jedoch aus den Suchergebnissen nicht schlau geworden. Könntest Du hier mal mit ein paar wenigen Worten erklären, was das ist?

Das meint alle Elemente, die ohne scrollen sichtbar sind. Für jede Bildschirmauflösung ist das natürlich anders. Aber scheinbar gibt es Gründe zwischen CSS und Javascript für den above-the-fold Bereich und den nicht-above-the-fold Bereich zu unterscheiden. Siehe dieser Artikel: http://www.blog-it-solutions.de/wordpress-performance-inline-external-javascript-css/

Interessanter Artikel. Soweit ich das verstehe, wird das Rendern der Inhalte durch das Laden von CSS-Ressoucen ausgebremst. Styles asynchron nachzuladen (ajax) wäre eine mögliche Lösung. Funktional habe ich das eben mal erfolgreich getestet, ob es wirklich was bringt, muss ich mir näher anschauen.

Done ;)

Unterscheide zwischen kritischem und unkritischem CSS. Above-the-fold ist das, was sofort nach dem Aufruf der Seite sichtbar ist (ohne dass gescrollt werden muss). Hierzu muss das kritische CSS geladen sein. Möglich sind serverseitige Maßnahmen zur Optimierung.

Below-the-fold ist das, was nach dem Scrollen sichtbar wird. Das damit verbundene unkritische CSS kann bspw. asynchron nachgeladen werden, Beispiel in der Callback-Funktion:

    if(eav.mesg.css){
        var style = document.createElement('style');
        style.innerHTML = eav.mesg.css;
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(style);
    }

Die eigentliche Strategie zur Optimierung besteht jedoch darin, die Styledefinitionen aufzuteilen (kritisch/unkritisch).

MfG