Ladebildschirm

[tschero]

Hallo Leute,

ich habe auf einer Website ein paar Seiten mit sehr viel Inhalt und dementsprechend viel Ladezeit.
Auf diesen Seiten würde ich gerne einen individuellen Ladebildschirm anzeigen (GIF, etc.).

Hat da jemand eine Idee?
Evtl. wäre das ja auch mal ein Feature Request für EX (CSS-Klasse in einer Seite vergeben -> Ladebildschirm taucht auf).

Gruß
tschero

[Tom]

Hi Tschero,

ich würde hier schauen, dass man die Ladezeit optimiert. Lazy Loading für Bilder aktivieren, Bilder bestmöglich komprimieren, responsive Bilder verwenden usw. Ich halte einen Ladebildschirm hinsichtlich der Absprungrate nicht für optimal. Es ist besser zu sehen dass die Seite sukzessive geladen wird. Bei einem Ladebildschirm würde erst die Seite gezeigt, wenn der gesamte Ladevorgang der Seite beendet ist.

Schöne Grüße
Tom

[Brubbel]

Vielleicht hilft Dir diese Erweiterung?
https://github.com/markocupic/preloader-overlay

[tschero]

Vielleicht hilft Dir diese Erweiterung?
https://github.com/markocupic/preloader-overlay

Besten Dank, das scheue ich mir gerne mal an.

[tschero]

Hi Tschero,

ich würde hier schauen, dass man die Ladezeit optimiert.

Schöne Grüße
Tom

Sehr gerne.

Hi Tschero,

Lazy Loading für Bilder aktivieren,

Schöne Grüße
Tom

Wie funktioniert das? Mit EX hat das aber nichts zu tun oder?

Hi Tschero,

Bilder bestmöglich komprimieren,

Schöne Grüße
Tom

Das ist geschehen.

Hi Tschero,

responsive Bilder verwenden

Schöne Grüße
Tom

Wie mache ich da am besten mit EX?

Alles Themen, in denen ich noch nicht so fit bin - leider.

VG
tschero

[Tom]

Lazy-Loading kann in den Contao Einstellungen > SEO Helfer - Einstellungen > "loading"-Attribut Einstellungen definiert werden. Hier am Besten auf "auto" stellen.

Responsive Images
Hier muss man unterteilen in Bilder die per IMG-Tag eingebunden werden und welche die als Hintergrund-CSS-Bilder rein kommen.

Für die folgenden Lösungen müssen die Bildgrößen für Desktop und Mobile in Contao definiert werden: Contao > Layout > Themes > Eclipse > Bildgrößen

IMG-Tag:
Das steht in Contao ab Version 4.9 zur Verfügung. Wird wie beschrieben in den Bildgrößen definiert. Alles andere macht Contao selber.

Hintergrund-CSS-Bilder:
Hier haben wir eine schöne Lösung in Eclipse die ebenfalls auf Contaos-Bildgrößeneinstellungen zurückgreift. Die selber definierte Bildgröße kann in den jeweiligen Inhaltselementen (Bsp. Hintergrundbild/Farbe) im Bildattribut gewählt werden.

Ich würde Bildgrößen für Hintergrundbilder Desktop (1920px) und Mobile (767px) definieren. Bilder im Inhaltsbereich für Desktop muss man sich individuell ansehen. Ich würde sagen für Mobile passt ansonsten in den meisten Fällen 767px.

[tschero]

Vielen Dank für die ausführliche Info,

Mal sehen was ich optimieren kann.

Gruß
tschero

[tschero]

Hi Tom,
ich habe mal etwas getestet.
Hier mal eine Zwischeninfo.

Lage:
Ich habe das Ladeproblem nur auf zwei Seiten in welchen ich sehr viele Nachrichten einbinde.
Auf der einen sind es ca. 70 und auf der Anderen sind es leider ca. 250.

Diese beiden Seiten laden ca. 30 - 40 Sekunden. Das ist zu lang. Der Rest der Website ist OK.

Lazyloading:
Ich habe Lazyloading auf "auto" umgestellt, sonst nichts weiter.
Hier erkenne ich keinen Effekt.

Bildgrößen:
Hier bin ich noch nicht ganz sicher.
Was ich festgestellt habe ist, dass man am Besten BEVOR man sämtliche Inhalte anlegt, diese Einstellungen macht. Ansonsten muss ja wieder jedes einzelne Inhaltselement wieder angefasst werden. Sehe ich das richtig?

Gibt´s hier evtl. noch weitere Info´s, Beispiele oder hat noch jemand Tipp´s wie man am Besten mit diesem Feature arbeitet?

Gruß
tschero

[tschero]

Besten Dank, das scheue ich mir gerne mal an.

Die Erweiterung funktioniert.
Leider passiert folgendes.
Bei Klick auf den entsprechenden Link zur Seite mit der langen Ladezeit, wird zuerst sehr lange geladen (der sich bewegende Punkt im Favicon) und dann, für ca. 1 Sekunde, das Overlay angezeigt.
Das Overlay müsste früher erscheinen. Also sofort, wenn man auf den Link geklickt hat.

Gruß
tschero

[tschero]

Hi Tschero,

ich würde hier schauen, dass man die Ladezeit optimiert...

Schöne Grüße
Tom

Hi Tom,

ich würde hier gerne noch mal beim Thema Ladezeit ansetzen.
Dazu habe ich mal eine meiner Seiten (Eclipse 9) und die Default Demo von PCT mit EX durch die PageSpeed Insights laufen lassen.
Wie könnte ich denn da noch verbessern. Viele Dinge scheinen direkt von Eclipse zu kommen.

Die von mir getestete Seite liegt bei NetCup Webhosting 8000.

Gruß
tschero

[Tim]

Die https://eclipse.premium-contao-themes.com/home-107.html ist kein repräsentatives Beispiel. Das ist unsere Beispielseite mit aktiven ThemeDesigner usw. usw. Dort wurde nichts an Optimierungen durchgeführt. Thomas hat irgendwo ein pagespeed Beispiel für EX

Ich habe das Ladeproblem nur auf zwei Seiten in welchen ich sehr viele Nachrichten einbinde.
Auf der einen sind es ca. 70 und auf der Anderen sind es leider ca. 250.

Paginationen einsetzen.

[tschero]

Paginationen einsetzen.

Die Nachrichten sind quasi Unterkunftsobjekte aus einer Seite, die ehemals den FeWo Manager verwendet hat. Der wird jedoch nicht mehr verwendet.
Wir wollen erst mal versuchen, ob es hier noch eine andere Lösung als die Pagination gibt, da wir hier auch den Portfoliofilter verwenden.

Mit der Pagination ist der Filter quasi nicht mehr so schön zu gebrauchen.

Als Beispiel:
Auf Seite 1 erhält man Ergebnisse wenn man nach "Deutschland" sucht. Auf Seite 2 nicht mehr, weil eben in diesen Nachrichten keine dabei ist. Auf Seite 3 jedoch findet man wieder welche.

Das verwirrt den Nutzer.

kein repräsentatives Beispiel

Was sagst du zu dieser Seite? Ist zwar noch E9 aber ohne irgendwelchen großen "SchickiMicki".

[Tim]

Für solche große Filter-Arbeiten gibt es Module wie CC oder man setzt auf Filterungen, die die News auf PHP Ebene / sql Ebene filtern. Die [news_categories] von codefrog zum Beispiel.

[Tim]

Was sagst du zu dieser Seite? Ist zwar noch E9 aber ohne irgendwelchen großen "SchickiMicki".

Ich mag die Seite, besonders die Über Uns- Seite, weil Du mich da anlachst.
Schöne Kooperation aus Designer und Programmierer.

[tschero]

Vielen Dank für die Blumen .
Wie ist Deine Meinung zu den PageSpeed Insight´s?