CSS optimieren bzw. nicht verwendeten Code finden

    Google schlägt die Optimierung der, in meinem Fall großen CSS-Datei, die mit dem template installiert wurde, vor.
    Da die Ladezeiten auf https://corrado.xyz wirklich zu groß sind, sollte ich auch optimieren.

    Zitat

    Nicht verwendete CSS entfernen: Gewinn der Ladezeiten: 2,7 s

    Ich weiß, dass von dem ca. 280 kB großen CSS-Code einige Teile nicht verwendet werden - nur wie finde ich die?


    Gibt es ein Tool, welches den nicht vewendeten Code anzeigt?

    280kb sind nichts - auch nicht spürbar bei Ladezeiten

    Deine Hintergrundgrafik ist schon 500kb groß


    Du solltest Schwarzstein fragen

    Hallo Corrado,


    Ich habe mir soeben purifycss.online angesehen, unsere Vereinsseite hätte demnach 66,98 Prozent ungenutzten Code - was aber nicht stimmt, er kommt eben auf anderen Seiten zum Einsatz.


    Daher bestimmt der (auch aus meiner Sicht) richtige Tipp, das mit Vorsicht auszuprobieren. Mit den Web-Entwicklertools von Firefox, z. B., kannst Du das für jede Seite recht gut simulieren, indem Du für die geladene Seite einfach die CSS-Regeln austauschst.


    Liebe Grüße, Gerry77


    PS: Ups, CurlY BracketS war schneller. ;)

    PageSpeed sagt ja:

    Zitat

    Sie können ungültige Regeln aus Stylesheets entfernen und das Laden von CSS aufschieben, die nicht für ohne Scrollen sichtbare Inhalte verwendet werden, um unnötigen Datenverbrauch durch Netzwerkaktivität zu vermeiden.

    Das bedeutet, Google bezieht sich auf den Anfangsbereich, den ein Benutzer ohne Scrollen sieht (= wenn die Seite aufgeht). Google möchte also von dir, dass du das CSS ausfsplittest (vielleicht später dann noch reduzierst) so, dass anfänglich nur das CSS gezogen wird, das für den oberen, sofort sichtbaren Bereich relevant ist.


    Das ist ein nahezu vergebliches Unterfangen. Eine Möglichkeit wäre VIELLEICHT, das CSS am Ende der Seite zu laden. Das beherrscht Joomla 3 aber nicht.


    2.7 Sekudnen bei 280 kB ist generell ein anderes Problem, wenn das so lange dauert

    Zitat von Corrado

    Naja, Tatsache ist, dass es viel ungenutzten Code gibt und den will ich finden.

    Das ist mit oben Gesagtem vermutlich nur eine Vermutung.

    Zitat von Corrado

    Welche Bedenken hast Du?

    Beispiel von meiner Seite.

    Nur Startseite: "63% unnötig"

    Startseite + weitere URL, wo Beitrag: "32% unnötig".


    Jeweils Diff-Button und inspiziert.


    Jetzt kannst natürlich unter "Add more URLs" alle URLs eingeben, falls das Tool das unterstützt. Bei mir würden damit 25% aller wichtigen Basisklassen verschwinden, die bspw. Bootstrap mitbringt. Aber auch welche, die ich mit Sicherheit noch verwenden will.


    Wenn deine Seite fix und fertig ist und HTML niemals mehr geändert wird ist das Tool, ohne tiefere Kenntnisse bzgl. des eigenen CSS (warum, wozu?) VIELLEICHT eine Option.

    Corrado, wenn Du Dir die Ergebnisse von Google PageSpeed nochmal genau ansiehst, wirst Du feststellen, dass der angegebene Zeitgewinn für das Entfernen "unnötigen" CSS-Codes sich auf die Mobilversion bezieht. Das bedeutet, für mobile Endgeräte mit geringeren Bildschirmauflösungen wird ein Großteil Deiner CSS-Regeln gar nicht genutzt.


    Liebe Grüße, Gerry77

    Super, viel gelernt hier.


    Zitat

    Re:Later

    Jetzt kannst natürlich unter "Add more URLs" alle URLs eingeben, falls das Tool das unterstützt. Bei mir würden damit 25% aller wichtigen Basisklassen verschwinden, die bspw. Bootstrap mitbringt. Aber auch welche, die ich mit Sicherheit noch verwenden will

    Die corrado.xyz besteht aus über 100 Seiten, ich denke das wird etwas unübersichtlich.
    Ja, an das CSS optimieren muss ich mit Bedacht dran gehen.
    Vielleicht sollte ich doch erst die anderen "Baustellen" abarbeiten .