Suche Lösung: Sichtbare Inhalte priorisieren

Hallo zusammen,

ich beschäftige mich seit Tagen mit dem Thema Google Speedranking. Viele der von Google bemängelten Probleme sind ausgemerzt. Unter anderem wollte Google das CSS und JS asynchron geladen wird. Dieses wurde mittels einer php Datei die css und js asynchron einläd realisiert.

Dadurch ist nun folgender Fehler / Bemängelung aufgetreten.

Dazu Suche ich die Lösung:

Übersicht über die Vorschläge
Consider Fixing:
Sichtbare Inhalte priorisieren
Für Ihre Seite sind zusätzliche Netzwerk-Roundtrips erforderlich, um die ohne Scrollen sichtbaren Inhalte ("above the fold"-Inhalte) darstellen zu können. Reduzieren Sie die zur Darstellung von "above the fold"-Inhalten erforderliche HTML-Menge, um eine optimale Leistung zu erzielen.
72,6 KB der Antwort war erforderlich, um Inhalte "above the fold" (ohne Scrollen sichtbar) zu rendern. Priorisieren Sie sichtbare Inhalte, die für das Rendering "above the fold" erforderlich sind.

Details ausblenden

GGL:

1x 1GB vserver 1 Monat gratis
o.
1x PP Zahlung 5 Euro
o.
1x 1000 SB Punkte

könnt euch dann was aussuchen. Aber bitte nur antworten wenn ihr wisst was zutun ist.

Besten Gruß

Bin zufällig durch Google auf das Thema gestoßen, vielleicht kann ich dir da ein bisschen Helfen

PHP ist (noch) nicht Asynchron. Du muss es entweder mit html5 (async & defer) machen oder mit javascript nachtladen. Andere Möglichkeiten kenn ich bis heute noch nicht

Zu dein Problem:

Wenn du eine Seite lädst, lädst du die Seite komplett.. Von Oben nach unten und zuerst hal die index.html
Im Head Bereich wird ja bekanntlich CSS & JS eingebunden, da stoppt der HTML Parser und öffnet die Datei und parst die Zuerst durch. Da gehtschonmal Zeit verloren .

Jetzt zur Theorie:

Man könnte doch die CSS & JS Dateien so aufspalten, das nur die CSS & JS Befehle gebraucht werden um den "Ersten" Blick aufzubauen. Den Rest kann man in einer anderen Datei einbinden und dann ganz am schluss z.B. laden. So kommt es zum Anschein, dass die Seite schneller geladen ist.

Nun ist es auch ziemlich schwer sowas auseinander zu halten. Was "above the fold" ist und was nicht. ("Above the Fold" bedeutet soviel, wie über den Scrollbereich, "Under the Fold" würde der Bereich sein, was du nur mit Scrollen sehen kannst)

Leider gibts da immer! einen kleinen Nachteil:
Den Script für den above the fold muss getrennt werden. Dazu gibt es 2 Möglichkeiten:
Extern Einbinden - Braucht leider ein HTTP Request Mehr :/
HTML Inline-Code - Schnell unübersichtlich & unsauber.

Hier ist noch ein kleines Beispiel: [Link: Registrierung erforderlich]

Man sieht, dass .blue direkt inline eingefügt wird, weil der Bereich "Above the fold" ist

Hoffe, dass ich dir etwas helfen konnte und das es auch passt was ich schreib

Gruß Sysix