Support » Plugins » Autoptimize criticalcss.com power-up hat mobile Version zerstört

  • Hallöchen in die Runde. Ich bin ganz frisch hier im Forum angemeldet, da ich bis dato, alles ganz gut soweit final fertig hatte. Meine Seite stand bzw. steht eigentlich in den Startlöchern, es gab nur Kleinigkeiten, die ich verbessern wollte, insbesondere die Ladezeiten. Hierbei habe ich mich viel belesen auf Kinsta und anderen Hilfeseiten bzgl. des Themas „above the fold“ – criticals css. Gar nicht so einfach zu verstehen, wenn man kein Experte ist, aber ich hab dann gedacht alles klar, ich erstelle erstmal ein Critical css auf dieser Seite https://jonassebastianohlsson.com/criticalpathcssgenerator/. Naja ich habe nicht viel weiter gelesen, im Sinne von, dass danach noch was minimiert werden muss, sondern habe den langen Code einfach direkt bei Autoptimize eingefügt. Am Ende hat sich nichts verändert, sodass ich den Code wieder entfernt habe und den Haken bei „above the fold“ entfernt habe. Alles wieder auf Normalzustand und alles gut soweit. Ich wollte dann trotzdem versuchen eine Lösung zu finden und las noch von dem Plugin „Autoptimize criticalcss.com power-up“. Also nahm ich an, alles klar, hol dir das Plugin und es wird alles besser. Falsch gedacht. Plugin drauf, und da stand dann schon beim Above the fold-Feld, wenn man dieses Plugin hat, brauch man nichts einfügen, denn das macht das Plugin von Autoptimize selbst. Alles klar. Dementsprechend habe ich die Seite in verschiedenen Browsern neu geladen, um zu schauen, wie es wirkt, ob die Ladezeiten schneller sind etc. Gegenteil ist der Fall. Die Ladezeiten sind sogar eher länger geworden und der Cache bei Autoptimize war ziemlich hoch. Dann das Schlimmste: Ich habe die Seite auf meinem Handy anschauen wollen, was vorher super funktioniert hat und tja, auf einmal Hintergrund weg, Aufblitzende Schriften , ja reinstes Chaos. Zum Schluss hab ich versucht alles rückgängig zu machen, insoweit es geht, also Plugin deaktiviert und entfernt und den Haken bei above the fold entfernt, gespeichert, Cache gelöscht, Ergebnis = Problem besteht noch immer. Ich bin ziemlich verzweifelt, ich wollte nur paar Kleinigkeiten verbessern. Und jetzt sowas. Ich bin kein CSS-Profi, aber ich brauche hierbei dringend Hilfe. Danke aufjedenfall vorab schon mal. Grüße ♪

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 19)
  • Idealerweise ein Backup einspielen.

    Thread-Ersteller swinit

    (@swinit)

    Habe ich auch schon überlegt, die Backups sind leider zu alt, da ich soviel noch dran rumgeschraubt habe die letzten Wochen. Ich hoffe, das Problem kann man so irgendwie fixen mit Hilfe, ohne dass ich soviel wieder neu machen muss am Ende mit einem relativ altem Backup. 🙁

    Da Webseiten immer umfangreicher werden, versuchen Entwickler mit allerlei Tricks, die Performance zu optimieren. Dazu gehört die Überlegung zumindest alles, was beim Laden einer Webseite nicht direkt ins Auge springt, erst zu einem späteren Zeitpunkt zu laden, was wir auch vom so genannten „Lazy Loading“ von Bildern kennen, die erst geladen werden, wenn wir beim Scrollen in die Nähe des Abschnitts kommen, in dem die Bilder jeweils angezeigt werden sollen.

    Der Begriff „Above the Fold“ wurde von der Idee abgeleitet, dass wir bei einer Zeitung schon im Kiosk-Ständer die Schlagzeilen und Aufmacher „oberhalb der Zeitungsfalte“ sehen, sie aber erst aufschlagen müssen, um den Inhalt der Beiträge zu lesen.

    Insbesondere bei Multipurpose-Themes, die nicht selten Stylesheets mit mehreren tausend (!) Zeilen Code enthalten, ist der Wunsch groß, das Stylesheet erst nachträglich zu laden. Wird dabei aber die Abfolge der Style-Regeln geändert, stimmt die Cascade der Cascading Style Sheets (also das Überschreiben von CSS-Regeln durch später verwendete Regeln) nicht mehr. Für technisch weniger versierte AnwenderInnen ist es daher fast unmöglich, die Stylesheets eines verwendeten Themes nachträglich in den Footer zu verbannen.

    Webseiten setzen sich meistens aus einer Vielzahl an CSS-, Javascript-Dateien zusammen und unter dem Protokoll HTTP/1 war es so, dass der Browser für jede eingebundene Datei eine erneute Anfrage an den Webserver stellen, auf die Datei warten und sie dann rendern musste, was bei vielen Abrufen Zeit und Performance gekostet hat. Das Plugin Autoptimize sammelt die Dateien und hängt sie in der richtigen Reihenfolge zu einzelnen Dateien zusammen, was die Anzahl der Abfragen auf eine einzelne CSS- bzw. JavaScript-Datei verringert und die Performance entsprechend verbessert. Allerdings vertragen nicht alle JavaScript-Dateien diese Zusammenfassung und unter Umständen müssen bestimmte JavaScript-Dateien von der Optimierung ausgenommen werden. Das Plugin bietet also einerseits eine tolle Möglichkeit, die Performance zu optimieren, erfordert aber andererseits eine sehr genaue Prüfung, ob nach einer Optimierung alles läuft wie bisher – in deinem Fall passt das mit den Einstellungen offenbar noch nicht.

    Inzwischen nutzen die Webserver in Verbindung mit PHP7 das neuere Protokoll HTTP/2, bei dem vereinfacht gesagt CSS- und JavaScript-Dateien asynchron ausgeliefert werden. Das bedeutet, dass der Browser nicht jedesmal wartet, bis eine angeforderte CSS- oder JavaScript-Datei übertragen wurde, sondern parallel schon andere eingebundene Dateien abrufen kann, was die Performance deutlich verbessert. Dadurch hat das Plugin Autoptimize auch ein wenig an Bedeutung verloren (auch wenn es trotzdem noch einige pfiffige Ideen umsetzt, um die Performance zu verbessern und deshalb durchaus sinnvoll ist). Ich würde das Plugin weiter nutzen, aber die Einstellungen nochmal einzeln durchgehen und alles, was problematisch sein könnte (insbesondere Minimierung, Zusammenfügen, Verschieben von CSS und JavaScript) erst einmal deaktvieren, dann einzeln wieder aktivieren und jedesmal intensiv testen, ob die Website weiterhin funktioniert. (Technisch weniger versierten Einsteigern würde ich eher davon abraten, das Plugin zu nutzen, weil die korrekte Einstellung ein frustrierender Prozess sein kann.)

    Das Plugin Autopimize verfügt über einen eigenen Zwischenspeicher (Cache), der auf deiner Website wohl weiterhin aktiv ist. Den Cache kannst du bei Nutzung des Plugins löschen. Unter Umständen macht es Sinn, das Plugin nochmal neu zu installieren, aktivieren und dann den Cache zu löschen.

    Wenn ein persönlicher Eindruck erlaubt ist:
    Deine Website finde ich ansprechend und stimmig. Sie lädt zügig, auch wenn sie nicht ganz den angestrebten Wert von unter 3 Sekunden Ladezeit einhält. Hier und da würde ich auf Animationen verzichten (z.B. auf der Startseite der eingeblendete Absatz „Wir leben in einer Welt, in der …“), aber sonst gefällt mir das gut – und das ist im Zweifelsfall wichtiger, als die letzte Millisekunde Performance.

    Thread-Ersteller swinit

    (@swinit)

    Also erstmal vielen Dank für die ausführliche und sehr gut erklärte Antwort 🙂 Vorallem der persönliche Eindruck freut mich sehr zu hören! Ich habe das Plugin jetzt mal deinstalliert, neu installiert und Änderungen gespeichert + Cache gelöscht. Aufm Desktop funktioniert die Seite ja wirklich wunderbar. Aber die mobile Version ist immernoch naja zerstört. Der Hintergrund fehlt usw….Ich weiss absolut nicht warum dass so ist. Und wie ich das Problem beheben kann. Achja mir fiel noch auf, als ich eben gerade das Plugin entfernt habe und mal den Seo-Test bzgl der Geschwindigkeit laufen lies, war die Seite sogar schneller, als jetzt mit Plugin von Autoptimize. Eigenartig. Aber das Problem mit der mobile Version besteht leider weiterhin. 🙁

    Cache gelöscht?

    Screenshot Einstellungen
    (zum Vergrößern anklicken)

    Das Problem liegt aber woanders: deine Website ist jetzt auf https umgestellt, der Hintergrund wird aber mit http (nicht) geladen, weil durch gemischte Inhalte die Webseite unsicher wird.

    Geh mal ins Menü Elementor > Werkzeuge und ersetze deine URL mit http mit der URL mit https. Geh dann auf CSS neu generieren. Dann müsste es klappen.

    Bei der Tablett-Größe stimmt auch mit dem Hintergrund was nicht. Da ist als Hintergrundgröße „cover“ eingestellt, ohne die Einstellung sieht es besser aus. Musst du wohl im Elementor-Widget ändern? (Ich arbeite aus Gründen nicht mit Elementor.)

    Thread-Ersteller swinit

    (@swinit)

    Also Cache gelöscht ja 🙂

    Ok ich versuche die 2 Sachen mal irgendwie 😀

    Thread-Ersteller swinit

    (@swinit)

    Also das https habe ich umgestellt. Auch die Einstellung im Widget beim Hintergrund habe ich nun auf Individuell. Die mobile Version macht trotzdem keinen Hintergrund mehr 🙁

    Jetzt wird gemeckert, dass die Datei wp-content/uploads/2020/04/Bodensee-29-von-55.jpg nicht vorhanden ist. Schau dir nochmal die Hintergrundeinstellungen für Mobil an – Tablett passt jetzt.

    Thread-Ersteller swinit

    (@swinit)

    OK Hintergrundproblem gelöst 😀 !!!
    Trotzdem eigenartig dass mit dem Plugin Autoptimize die Ladezeit doch so hoch ist :/

    Das hängt von den Einstellungen ab.
    Was ist denn sonst mit einem Cache-Plugin?

    Probier mal Comet Cache aus – das lässt sich einfach einstellen und ist recht effektiv, arbeitet auch mit Autoptimize zusammen.

    Beim Hintergrundbild in Mobil ist die Größe wieder auf cover gesetzt, das solltest du noch ändern.

    Thread-Ersteller swinit

    (@swinit)

    Ich will absolut nicht nerven oder so, aber ich möchte ungern ein neues Thema aufmachen, vielleicht kann mir noch jemand erklären, wie es so extrem sein kann, dass in jedem Browser die Seite anders aussieht. Bei mir aufm Laptop in Firefox sieht die Seite so perfekt aus, von der Darstellungsgröße her, wie ich es mir wünsche. Ich weiss von Desktop zu Desktop klar gibt es Unterschiede, aber warum zudem dann noch die Unterschiede in Browsern?

    Zudem im Internetexplorer wird meine Seite als nicht sicher eingestuft.

    Thread-Ersteller swinit

    (@swinit)

    Das Problem ist wenn ich nicht auf Cover stelle, sondern die anderen Punkte, dann ist das Bild sehr klein dargestellt , also der Hintergrund wird nicht ausgefüllt. Bei der mobilen Version klappt es jetzt zwar mit der Einstellung nach Vorgabe, aber bei der Tabletversion muss ich Cover nehmen, da dieses das einzige ist, was den Hintergrund komplett ausfüllt. Warum dass so ist, versteh ich allerdings auch nicht.

    Die Webseiten sollten weitgehend gleich aussehen – pixelperfekt gleiche Darstellung ist nur mit extrem viel Aufwand zu erreichen, weil jeder Browser etwas anders rendert (vor allem bei Schriftarten). Es ist aber wahrscheinlicher, dass dir der Browser-Cache einen falschen Eindruck vermittelt.

    Eine Webseite wird als „unsicher“ angezeigt, wenn etwas mit dem Zertifikat nicht stimmt oder gemischte Inhalte ausgeliefert werden. Das war vorhin bei deiner Website noch der Fall. Vielleicht greift der Internetexplorer noch auf diese Variante im Browser-Cache zu?

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 19)
  • Das Thema „Autoptimize criticalcss.com power-up hat mobile Version zerstört“ ist für neue Antworten geschlossen.