CSS asyncron laden

    Irgendwie befriedigen mich die 94 Punkte bei PageSpeed nicht wirklich.
    google sagt mir, das ich eine CSS-Datei asyncron oder inline laden soll, weil der "Above the fold" zu langsam gerendert wird.

    Wenn ich die css asyncron lade, baut sich zwar die Seite ruckzuck auf - aber dann lädt die CSS nur teilweise.
    Mache ich es so, das ich ein JS einbaue, das die CSS per "defer" nachlädt, passiert dasselbe und die Ladezeit erhöht sich von 1.8s auf über 3s.

    Hat jemand ne Lösung parat, wie man eine CSS - die einzige der Seite - so laden kann, das google zufrieden ist?

    btw: Die CSS habe ich schon auf eine Subdomain gepackt.
    Aso: Link --> *** Link veraltet ***

    Also asynchron kannste echt knicken, da kommt das CSS zu spät.

    Allerdings schaut das bei Dir doch so gut aus. Mein Pagspeed meldet mir auch keine Fehler bezüglich css. Und es sind 97 von 100 Punkten.

    Abzüge haben bei mir nur diese Punkte hier:
    1. [Score: 91/100] JavaScript später parsen
    2. [Score: 95/100] HTML reduzieren
    3. [Score: 39/100] Bildabmessungen festlegen
    4. [Score: 95/100] Zeichensatz angeben

    2. Kannste da auch knicken. 1 ist nicht wirklich tragisch, kann aber wohl optimiert werden. 4 ist nur minimal. Einziger echter Optimierungspunkt ist 3.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    Hast Du das in Chrome oder FF eingebaute PageSpeed genommen oder das hier *** Link veraltet *** ?
    Weil bei mir sehe ich nur das da: *** Link veraltet ***


    Weil bei 1: Das ist ganz am Seitenende. Wenn ich das noch später parse, bin ich auf der nächsten Seite :D
    Und 2: Da zeigt mir mein Pagespeed in FF gar nix an.
    Die Bilder bei 3: Das ist einer der Knackpunkte im Shop selbst. Das ist nunmal ein vorsintflutliches System und daran kann ich leider nix ändern.
    Und 4: Zeichensatz? Der im header oder in HTML selbst? Ich seh da auch nix.

    Kann es sein, das Du auf *** Link veraltet *** geguckt hast?

    Wer zuerst "Datenschutz" sagt, hat verloren.

    Pagespeed vom FF und danach noch ySlow

    Bezüglich 1:
    Hier kannst Du erst mal sortieren. Also erst die inline, dann die extern. Aktuell ist es gemischt. Dann auch möglich, echtes Asynchron-Laden und nicht per defer oder async. Aber 91 von 100 ist nicht soooo schlecht.

    Bezüglich 2:
    Kannste auch knicken. Google geht hier einen Weg der Optimierung, den ich persönlich nicht wirklich mag. Ist nicht üblich und bringt nicht viel. Spart vielleicht 100 Zeichen auf der Seite, mehr aber auch nicht.

    Bezüglich 3:
    Da steckt aber das meiste Potential :)

    Bezüglich 4:
    Zeichensatz im HTTP-Header, also direkt vom Apache. Da weiß der Browser also schon was kommt, bevor es da ist ;)

    Ok, das online-Tool zeigt andere Sachen an. Das mit dem CSS-Asynchron ist mir auch neu. Was ich mir vorstellen könnte - aber nur könnte, muss nicht zutreffen - dass das an der eingebetteten Schrift liegen könnte. Die muss ja erst geladen werden, denn sie wird ja vor der Anzeige benötigt. Wenn es die nicht ist, dass übersehe das einfach. Das CSS als solches ist so genau an der richtigen Stelle.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    Ok, ich glaube ich habe es gerafft, was Google da anmeckert - ist bei meiner Seite auch.

    Google möchte das CSS inline haben, aber nur, wenn es ein sehr kleines CSS ist. Große CSS sollen extern sein, aber nicht komplett. Wichtige Elemente für das Layout sollen inline stehen und der Rest im externen File.

    So in etwa möchte Google das haben. Ist aber viel zu aufwendig und letztendlich egal, da das CSS im Browsercache liegt und nur einmal geladen werden muss.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    So, was mir noch auffällt. Die beiden Files für die eigene Schrift werden nicht gecached. Somit muss der Browser immer warten mit der Textdarstellung, bis die geladen wurden.

    könnte auch damit zusammenhängen

    Auch gibt es keine CSS-Regel die "prüft", ob die Font möglicherweise lokal schon auf dem System ist... src: local(). Wenn die allerdings extrem exotisch ist, dann ist das eher überflüssig.
    *** Link veraltet ***

    oder auch unten bei den Beispielen:
    *** Link veraltet ***

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(