Große Performance / Ladezeiten Probleme bei Fotografie Website

[M4ttX]

Wie genau meinst du das mit dem Bilder Größen? Bin leider im Webdesign (wenn man das so nennen kann) noch relativ am Anfang mit den ganzen Mechaniken und was mit was zusammenhängen kann.

WordPress verkleinert automatisch jedes hochgeladene Bild und speichert es auch in kleineren Varianten. Die Fotobox soll so ein Thumbnail/Medium Image anzeigen und maximal auf das Original verlinken. Da du anscheinend nicht willst, dass das Original heruntergeladen wird, solltest generell das Original von WordPress verwenden lassen und z.B. maximal 1920px am Server speichern. Die Galerie kann dann beim Vergrößern dieses größere Bild nutzen.

Weiters

• Die Rechtsklicksperre kannst dir dann auch gleich sparen. Die bringt auch nur was gegen den größten DAU. Eine Tastenkombi und deine aktuelle Seite liefert das riesengroße Original am Silbertablett.
• Die 3D-Effekte beim Hovern mal deaktivieren, könnte bei den gefühlt Tausenden Bildern auch am Smartphone die Performance wesentlich erhöhen.
• Google Fonts, Fontawesome selbst am Server hosten und nicht einbinden (mag auch die DSGVO und die Ladezeit)
• 1 Hintergrundbild nicht Hotlinken von einer anderen Seite
  https://imaginem.cloud/blacksilver-classic/wp-content/uploads/sites/9/2018/07/portfolio-grid-11.jpg
• Nichtladende Bilder fixen
  https://photography.haggebuddi.com/wp-content/uploads/2018/08/230624-DJI.01-wS-wS-4-1400x1120.jpg
• Die Menü Einträge sollten zentriert sein, hier wird wohl die Logohöhe das Ganze in die Höhe ziehen und das Theme bricht zusammen.

 

[BuddiHagge]

WordPress verkleinert automatisch jedes hochgeladene Bild und speichert es auch in kleineren Varianten. Die Fotobox soll so ein Thumbnail/Medium Image anzeigen und maximal auf das Original verlinken. Da du anscheinend nicht willst, dass das Original heruntergeladen wird, solltest generell das Original von WordPress verwenden lassen und z.B. maximal 1920px am Server speichern. Die Galerie kann dann beim Vergrößern dieses größere Bild nutzen.

Die Rechtsklicksperre kannst dir dann auch gleich sparen. Die bringt auch nur was gegen den größten DAU. Eine Tastenkombi und deine aktuelle Seite liefert das riesengroße Original am Silbertablett.

Danke für die Ausführliche Erklärung, das mit dem Rechtsklick dachte ich mir eh schon, F12 und man hat die Bilder. Denke mal die Meisten wissen es nicht, aber werd's deaktivieren.

 

[M4ttX]

Ja, spart Ladezeit, nervt Nutzer nicht unnötig und mit verkleinerten Bildern am Server sind die Originale auch wirklich geschützt.

 

[0x8100]

der erste request dauert schon "ewig":

5s bis der webserver anfängt, das html auszuliefern? da stimmt schon serverseitig was nicht. das erste bild und der font brauchen auch jeweils 3s bis der webserver anfängt, die auszuliefern. die datenübtertragung ist fix, aber der server reagiert lahm.

generell finde ich 7MB für die landing-page ziemlich viel, aber das ist wohl dem design geschuldet.

 

[M4ttX]

Der Webserver antwortet am Chrome ziemlich flott in weniger als 0,5s. Das ist normal. Die Seite hat eher über 30 MB, wenn alles geladen ist

 

[BuddiHagge]

der erste request dauert schon "ewig":

Anhang anzeigen 1387070

5s bis der webserver anfängt, das html auszuliefern? da stimmt schon serverseitig was nicht. das erste bild und der font brauchen auch jeweils 3s bis der webserver anfängt, die auszuliefern. die datenübtertragung ist fix, aber der server reagiert lahm.

generell finde ich 7MB für die landing-page ziemlich viel, aber das ist wohl dem design geschuldet.

Hmmmm. Das wird dann denke ich am Webhoster liegen? Eigentlich das stärkste Paket dort, mit 8GB RAM .
Ja, das Design ist schon ziemlich viel, muss ich mir überlegen ob ich das so belassen kann.

 

[0x8100]

die antwortzeiten scheinend stark schwankend zu sein. beim erneuten versuch gings fixer:

 

[M4ttX]

So viele Fotos gehören mit Pagination/Load more on scroll geladen, dann wirds schon brauchbar. Dann werden immer so 20 Bilder geladen und beim scrollen wird weitergeladen. Automatisch werden aber nicht mehr bei jedem Aufruf 100e Bilder geladen, egal ob interessant oder nicht.

Aber Elementor und ein x-beliebigies Plugin zaubert halt keine automatische brauchbare Seite. Ganz umsonst brauchts da nicht eine gewisse Erfahrung, um Bremsen, sowie UI und UX Pitfalls zu beheben vermeiden.

 

[BuddiHagge]

die antwortzeiten scheinend stark schwankend zu sein. beim erneuten versuch gings fixer:
Anhang anzeigen 1387073

Kann das mit dem Cache zusammenhängen, weil schonmal was geladen war?

 

[0x8100]

nein, cache hatte ich deaktiviert ("disable cache" im screenshot, rechts oben)

 

[M4ttX]

Kann das mit dem Cache zusammenhängen, weil schonmal was geladen war?

Ja, wenn du ihn gerade serverside gelöscht hast, kann die erste Antwort lange dauern. 5s deuten aber schon auf eine Menge Ineffizienz bei dem ganzen Setup hin.

 

[Faust2011]

Hast Du rein zufaellig die Hardwarebeschleunigung an? @Faust2011

Natürlich

Vielleicht probier ich die Seite jetzt mal mit dem Edge... und Chrome.

 

[zivilist]

Welche Software steht dahinter? Welcher Hosting(Tarif)? Würde auch sagen: selbst bei vollflächigen Bildern deutlich unter 1 MB pro Bild bleiben. Nicht den langsamsten Tarif also Hoster wählen. AVIF oder WebP wäre gut, kleine unter 1 MB pro Bild Jpeg geht aber auch.

 

[BuddiHagge]

So viele Fotos gehören mit Pagination/Load more on scroll geladen, dann wirds schon brauchbar. Dann werden immer so 20 Bilder geladen und beim scrollen wird weitergeladen. Automatisch werden aber nicht mehr bei jedem Aufruf 100e Bilder geladen, egal ob interessant oder nicht.

Aber Elementor und ein x-beliebigies Plugin zaubert halt keine automatische, brauchbare Seite. Ganz umsonst brauchts da nicht eine gewisse Erfahrung, um Bremsen, sowie UI und UX Pitfalls zu beheben.

Kleine Info von mir, da scheint aktuell "Thumbnails Grid" in Elementor verwendet zu werden.
Siehe:

 

[M4ttX]

Selbst Billigsthosting stemmt sowas, ich weiß nicht einmal was mein Tarif effektiv an RAM zur Verfügung stellt.

 

[BuddiHagge]

Welche Software steht dahinter? Welcher Hosting(Tarif)? Würde auch sagen: selbst bei vollflächigen Bildern deutlich unter 1 MB pro Bild bleiben. Nicht den langsamsten Tarif also Hoster wählen. AVIF oder WebP wäre gut, kleine unter 1 MB pro Bild Jpeg geht aber auch.

Wordpress mit einem Blacksilver Theme und Elementor. Hosting ist bei Netcup das Webhosting 8000, dachte echt das wäre gut dort. Bin vor kurzem umgestiegen, hätte also noch Zufriedenheitsgarantie. Preis Leistung sah ich als echt gut an. Bilder sind aktuell 300-500kb im web Format.

 

[Faust2011]

Würde übrigens auf der Startseite diesen Overlay-Sterneeffekt rausnehmen. Mit Mouseover-Effekt, dass da Linien zu den nächst naheliegenden Sternen gezogen werden, macht es irgendwie auch nicht gerade besser

Edit: Gerade gefunden: particles-js heißt das Teil. Ist ja ganz nett, aber passt das wirklich zu Deiner Seite?

 

[M4ttX]

Kleine Info von mir, da scheint aktuell "Thumbnails Grid" in Elementor verwendet zu werden.

Image size: default

 

[BuddiHagge]

Selbst Billigsthosting stemmt sowas, ich weiß nicht einmal was mein Tarif effektiv an RAM zur Verfügung stellt.

Also denkst du das Hosting ist einfach schlecht?
War eigentlich dabei alle meine Sites, etc. dort hin zu migrieren.

 

[M4ttX]

Würde übrigens auf der Startseite diesen Overlay-Sterneeffekt rausnehmen.

Lol, den hab ich nichtmal bemerkt.