Wie Sie lange Ladezeit auf ihrer Avada-Website vermeiden.

Avada ist ein weit verbreitetes kommerzielles Mehrzweck-Theme für WordPress, das von ThemeFusion entwickelt wurde. Sie können diese großen Themes mit all ihren Optionen mögen oder nicht und oft enthalten diese Lösungen Dinge, die Sie einfach nicht benötigen. Tatsache ist aber, dass diese Themes für viele Menschen sehr bequem und einfach zu bedienen sind und hinzu kommt, dass diese im Vergleich zu anderen kleinen Themes auch noch regelmäßig gepflegt werden. Aus genau diesem Grund nutzen auch einige meiner Kunden Avada. Soweit war auch alles ok, bis ich ein kleines Problem entdeckte. Der PageSpeed-Score war sehr niedrig und das Laden der Seite sehr langsam. Natürlich wurden alle Seiten im Vorfeld schon optimiert. Also, was ist passiert?

Das Problem.

Google PageSpeed und GTmetrix zeigten schnell das Problem: Viele große Bilder, die verkleinert wurden. Das ist eigentlich merkwürdig, weil WordPress sich normalerweise um die Bilder kümmert, indem es verschiedene Größen des gleichen Bildes erstellt und nur die passende Größe liefert, solange das Theme vom WordPress Codex gespielt wird. Jetzt geht Avada mit einigen Dingen etwas anders um. Wenn Sie die Grid-Ansicht verwenden, um ihre Blog-Einträge auf ihrer Startseite oder z.B. ein aktuelles Post-Element anzuzeigen, spuckt Avada das angezeigte Bild aller Blog-Einträge in voller Größe aus und verkleinert es anschließend. Das bedeutet, dass ihr Besucher leicht mehr als 5 MB Bilder herunterladen kann, nur um eine kleine Version auf der Übersicht zu sehen.

Natürlich wollen Sie das schöne, große Bild in voller Größe auf dem einzelnen Blog-Beitrag selbst, aber für die Übersicht reicht eine kleine Version aus. Was sagt der Avada-Support dazu?

„Damals bestand die einzige Lösung darin, ihre Bildoptimierung zu verbessern, um die Größe der Seite zu reduzieren. Eine weitere Möglichkeit, dies zu optimieren, besteht darin, ein kleineres erstes Bild als Featurebild des Beitrags hinzuzufügen. Dieses wird als Rasterbild verwendet. Fügen Sie dann das Bild als Featurebild in voller Größe als zweites Bild hinzu. Sie können die Anzeige des ersten Bildes in den Beitragsoptionen unter dem Inhaltseditor deaktivieren. Wenn Sie keine Slider für das Rasterlayout dieser Bilder wünschen, gehen Sie zu Theme Options > Diashows und deaktivieren Sie die automatische Wiedergabe.“

Beachten Sie, dass Bildoptimierung nicht wirklich eine Lösung ist, weil Sie nicht wollen, dass ihr schönes großes Bild auf der Blog-Post-Seite verkleinert wird. Die Bilder sind eigentlich schon optimiert – nur für die Einzelpostansicht und nicht für die Rasteransicht. Der zweite Weg würde im Allgemeinen funktionieren, aber alle ihre Blog-Beiträge zu bearbeiten und immer zwei Versionen des Bildes zu erstellen ist einfach sehr viel Arbeit für etwas, das anders gelöst werden sollte. Ich möchte nur, dass Avada eine kleinere Bildversion für die Grid-Ansicht und das aktuelle Post-Element verwendet. Das sollte nicht so schwer sein und ist es auch nicht.

Die Lösung für die Rasteransicht.

Zuerst sollten Sie immer mit einem Child Theme arbeiten. Andernfalls gehen alle Änderungen, die Sie als nächstes vornehmen, bei einem zukünftigen Update des Avada-Themes verloren. Wenn Sie also nicht bereits ein untergeordnetes Theme verwenden, sollten Sie dies zuerst beheben. Sie können alles über die Verwendung von Child Themes auf wordpress.org lesen. Natürlich können Sie die folgenden Änderungen noch direkt im Avada-Themeverzeichnis vornehmen, ich empfehle es nur nicht. Ich nehme auch an, dass Sie wissen, wie man mit einem FTP-Programm auf die Dateien auf dem Server zugreift und wie man einfach eine .php-Datei mit einem Texteditor bearbeitet. Wenn Sie sich nicht sicher sind, wie Sie das machen sollen, sollten Sie einen Freund fragen, der das für Sie tut.

Sie müssen diese Datei bearbeiten: new-slideshow.php. Es kann in ihrem Avada-Themeverzeichnis gefunden werden, das irgendwo wie /wp-content/themes/Avada sein sollte. Wenn Sie ein untergeordnetes Theme verwenden, wie ich es empfehle, müssen Sie diese Datei nun in ihr untergeordnetes Themeverzeichnis kopieren, bevor Sie sie dort bearbeiten können. In dieser Datei müssen Sie nach den folgenden Codezeilen suchen.

In der Datei new-slideshow.php:

Wie wir sehen können, ist dies der Ort, an dem Avada aufgefordert wird, die Vollversion unseres Bildes für die Rasteransicht zu versenden. Also müssen wir nur das rot markierte Wort auf die gewünschte Größe ändern. Wir können grundsätzlich alle Größen verwenden, die von WordPress oder Avada zur Verfügung gestellt werden. Zum Beispiel könnten Sie es auf Blog-Medium umstellen, um die von Avada eingestellte Größe von 320px x 202px zu verwenden. Wenn Sie mehr Kontrolle haben möchten, können Sie es auch auf die Standardgröße WordPress Medium einstellen. Nun können Sie die Größe im WordPress Admin-Panel unter Einstellungen > Medien ändern. Natürlich müssen Sie WordPress alle Bildversionen neu erstellen lassen, wenn Sie die Größe ändern. Es gibt mehrere Plugins, die dies für Sie tun, zum Beispiel Simple Image Sizes. Ich kann ihnen nicht sagen, welche Version in jedem Fall am besten funktioniert. Sie müssen es nur mit Google PageSpeed und Gtmetrix testen. Ich empfehle, mit Blog-Medium zu beginnen und wenn es immer noch nicht optimal ist, eine eigene Größe zu verwenden.

Die Lösung für das Element Recent Posts.

Leider wird das aktuelle Post-Element durch das obligatorische Fusion-Builder-Plugin von Avada erzeugt. Das bedeutet, dass wir diese Änderung nach jedem Update des Plugins immer wieder vornehmen müssen. Sie müssen die Datei fusion-recent-posts.php bearbeiten, die sich im Plugin-Verzeichnis befindet: wp-content/plugins/fusion-builder/shortcodes
Suchen Sie in der fusion-recent-posts.php nach diesen Codezeilen:

Sie können wahrscheinlich schon erraten, was ich jetzt tun muss. Sie haben die gleiche Möglichkeit wie oben. Es kann auch sinnvoll sein, hier eine andere Größe zu verwenden, wenn die Bilder der letzten Beiträge kleiner oder größer als die Bilder der Rasteransicht sind. Testen Sie einfach noch einmal, was für Sie am besten funktioniert.

Die Lösung für die Portfolio-Rasteransicht.

Wenn Sie die Portfoliorasteransicht und nicht die „fixe“ Einstellung verwenden, haben Sie das gleiche Problem (Hinweis: „fix“ ist die momentane Voreinstellung. Dies ist also nur wichtig, wenn Sie die Einstellung „auto“ verwenden).

Daher müssen Sie diese Datei bearbeiten: fusion-portfolio.pho. Diese befindet sich im anderen obligatorischen Plugin-Ordner, dem „Fusion Core“: /wp-content/plugins/fusion-core/shortcodes.

Suchen Sie in fusion-portfolio.php nach diesen Codezeilen:

Dasselbe wie vorher: Wechseln Sie zu dem, was in ihrem Fall nützlich ist.

Schlußfolgerungen.

Natürlich wäre es schön, wenn die Avada-Entwickler dieses Problem in Zukunft benutzerfreundlicher lösen würden. Wenn nicht anders übrigbleibt, besteht noch die Option auf der Registerkarte Element-Einstellungen, um die Größe des Basisbildes manuell zu ändern (wählen Sie einfach eine aus den bereits erstellten aus, keine Notwendigkeit, neue Thumbnails zu erzeugen, schon eine große Verbesserung und da es sowieso so viele Optionen gibt, die keine große Sache sein sollten. Ich hoffe, dass ihnen dieser Workflow dabei helfen wird, ihren PageSpeed-Score auf ein normales Niveau zu bringen. In meinen Fällen ist die Seitengröße von über 5 MB auf weniger als 1 MB gestiegen und der PageSpeed-Score sprang von 36 auf 97. Die Zeit, die ihre Website benötigt, um zunächst zu laden, ist ein sehr wichtiger Faktor und Sie müssen auch heute noch langsame mobile Seiten in Kauf nehmen. Generell sollten Sie ihre Besucher nie länger als 2 Sekunden warten lassen. Sonst sind viele von ihnen schon zu einer anderen Seite gesprungen. Meine allgemeine regel ist also, wenn möglich unter 1 MB zu bleiben.