1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

"above the fold" Optimierung für ALLE (Unter-)Seiten gleichzeitig möglich?

Dieses Thema im Forum "Design" wurde erstellt von Quality19xx, 24. März 2017.

  1. Quality19xx

    Quality19xx Well-Known Member

    Registriert seit:
    20. August 2015
    Beiträge:
    105
    Zustimmungen:
    0
    Hallo Zusammen,

    für meine Webseite www.quality-lifestyle.de nutze ich das Plugin Autoptimize, um css und Java zusammenzuführen und gleichzeitig all mein benötigtes css in den <Head>-Bereich der Seite zu laden.

    Das ist natürlich supoptimal, da nicht jede Seite den gesamten CSS Code braucht.

    Mit dem Firefox Plugin "Dust-me" ist es mir bereits gelungen, nicht benötigte css-Selektoren aus den css-Dateien zu löschen. Dieses Plugin lädt die komplette Sitemap der Seite und testet dann für ALLE Seiten, welches css gebraucht wird und welches nicht. Damit hab ich die css-Dateien schon mal generell schlanker gemacht.

    Mit dem "Critical Path Generator" (https://jonassebastianohlsson.com/criticalpathcssgenerator/) ist es mir ebenfalls möglich, das gesamte css aus meinem <Head>-Bereich einzulesen und dann für eine URL zu testen, welcher davon "above the fold" gebraucht wird.

    Wenn ich nun dieses reduzierte css bei Autoptimize in das vorgesehene Feld
    [TABLE="class: form-table, width: 1131"]
    [TR="class: css_sub ao_adv"]
    [TH="align: left"]Inline und Defer CSS?[/TH]
    [TD] Füge den „above the fold“ CSS-Code als Inline CSS in den HEAD-Bereich des HTML-Dokuments ein und lade das restliche CSS erst am Ende, nachdem die Seite schon geladen ist.[/TD]
    [/TR]
    [/TABLE]

    einfüge, so habe ich fast das erreich, was ich möchte. Diese eine Seite lädt schnell, da nun der benötigte Code zum sichtbaren Seitenbereich vorab geladen wird. Jedoch nur für genau diese Seite. Die anderen Seiten flackern beim Aufruf erst einmal etwas komisch, weil für diese natürlich nicht der gesamte, benötigte css in der Autoptimize Option steht.

    Meine (Unter-)Seiten sind alle sehr unterschiedlich, und jede Seite nun manuell mit dem "Critical Path Generator" zu analysieren und dann per Hand die verschiedenen Ausgaben zu vergleichen und zusammenzuführen, inkl. der Entfernung von Duplikaten, ist unverhältnismäßig groß.

    Was ich benötige ist eine Kombination aus dem ersten und dem zweiten Tool: Ein Tool, welches die Sitemap einliest und dann für alle Seiten den css-Code ausgibt, der above the fold nötig ist, und das ganze redundanzfrei in eine Datei schreibt.

    Gibt es so etwas?

    Oder Alternativen, die mich an mein Ziel führen, das "above the fold" benötigte css für alle meine (Unter-)Seiten zu identifizieren?

    Viele Grüße,
    Gregor
     
    #1 Quality19xx, 24. März 2017
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden