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

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.

Cache gelöscht?

(zum Vergrößern anklicken)

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.)

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?