1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Performance

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von Christian Jäger, 9. Februar 2024.

  1. Christian Jäger

    Registriert seit:
    14. Dezember 2023
    Beiträge:
    21
    Zustimmungen:
    0
    Hallo

    Ich bin kein Webprofi, aber als Obmann eines gemeinnützigen Vereines in der Verlegenheit...
    Hab unsere Seite mit Elementor gebaut, mich vorab etwas damit beschäftigt und hänge an einer Spezialfrage:

    Die hellblau hinterlegt Sektion unserer Homepage https://vereinbewegt.tirol/ habe ich mit nur 1 Flexbox Container und Image-Box-Widgets realisiert, um den Code schlank zu halten. Leider kann ich den Abstand zwischen Bild und Überschrift nicht responsiv bearbeiten. Hab daher den ganzen Bereich für die mobile Darstellung ausgeblendet und neu erstellt, was zur Folge hat, dass die 3 verwendeten Bilder doppelt geladen werden müssen.

    Die Bilder sind als .webp 150 - 200 k klein. Dennoch frage ich mich, ob es nicht besser wäre, mit child-containern und separaten Widgets für Heading, Text und Bild zu arbeiten und dafür nicht alles doppelt anzulegen.


    Und vielleicht darf ich noch eine Frage dran hängen:

    Laut pagespeed insights ist die Seite am Computer mit 93 recht flott. Mobil erreiche ich nur 66. Wie kann der Unterschied zustande kommen bei gleichen Inhalten?


    Hoffe das war verständlich formuliert und schonmal herzlichen Dank für eure Infos!
     
  2. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    12.290
    Zustimmungen:
    1.907
    Der Abstand zwischen Bild und Überschrift ist derzeit margin-right: 5vw; und damit repsonsive in Bezug auf die Breite. Beschreibe das eigentliche Problem mal genauer. Was ist nicht bearbeitbar?
     
  3. Christian Jäger

    Registriert seit:
    14. Dezember 2023
    Beiträge:
    21
    Zustimmungen:
    0
    Danke für die schnelle Rückmeldung.

    Im Image-Box-Widget hab ich unter "Style" → "Image Position" für die Desktop-Version Links gewählt.
    Dadurch lässt sich unter "Style" → "Image" → "Spacing" der Abstand zwischen Bild und Überschrift nicht beeinflussen. Vielleicht liegt da auch irgendwo ein Problem? Der Regler ist bei mir (im mobilen breakpoint) eigentlich funktionslos.

    Hab also das gleiche für Mobil separat angelegt, Image Position auf oben gestellt und kann das nun einstellen. Allerdings funktioniert das für das Desktop-Layout nicht mehr
     
  4. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    12.290
    Zustimmungen:
    1.907
    Du könntest der Image Box eine eigene CSS-Klasse geben, z.B. myimgbox und dann z.B. in Design > Customizer > Zusätzliches CSS für den mobilen Breakpoint den vertikalen Abstand selbst ergänzen:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Dann dürfte eine einzige Image Box ohne extra Einstellungen für die Breakpoints ausreichen.
     
  5. Christian Jäger

    Registriert seit:
    14. Dezember 2023
    Beiträge:
    21
    Zustimmungen:
    0
    Danke für den Lösungsansatz. Anstelle der "5vw" kann ich dann wohl den Wert meiner Wahl eingeben.
    Kann ich den Code ausschließlich auf den Mobilen Breakpoint setzen?
     
  6. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.176
    Zustimmungen:
    601
    Genau so wie @b3317133 vorgeschlagen hat ;)
     
  7. Christian Jäger

    Registriert seit:
    14. Dezember 2023
    Beiträge:
    21
    Zustimmungen:
    0
    Tut mir leid. "Design" → "Customizer" find ich nicht.
    Ich kann im Editor Fenster und "advanced" → "custom css" Code eingeben, aber nicht auf mobile beschränken?!
    In den "Site Settings" find ich noch "Design System", aber das wird wohl auch nicht gemeint sein?
     
  8. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    12.290
    Zustimmungen:
    1.907
    Der o.g. Code Block beschränkt sich bereits selbst auf den mobilen Breakpoint, das ist der Teil mit media.

    Das Menü Design findest Du ausserhalb von Elementor in WordPress.
     
  9. Christian Jäger

    Registriert seit:
    14. Dezember 2023
    Beiträge:
    21
    Zustimmungen:
    0
    Das ist ja so cool - DANKE! :cool:
    Hat perfekt geklappt

    Speed-Test ist mobil schneller, für die Desktop-Version allerdings langsamer geworden?? Nehme mal an, die Ergebnisse von PageSpeed Insights schwanken etwas.

    Problem jedenfalls gelöst.

    Darf ich für's Verständnis doch nochmal auf meine Eingangsfragen zurück kommen?

    • Ist schlanker Code durch u.A. Reduktion von Containern und Widgets im Vergleich zu Reduktion von (eh schon komprimierten) Bildern relevant für die Performance?
    • Hab auch 2-3 Überschriften mit Eintritts-Animationen die ich noch sparen könnte
    • Woher die Diskrepanz zwischen Mobil und Desktop?
     
  10. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    12.290
    Zustimmungen:
    1.907
    PageSpeed Insights ist kein Speedtest sondern berechnet die dort angegebenen Zahlen jeweils aus einer Vielzahl von Faktoren, manches ist aus Sicht der Entwickler bei Mobil wichtiger als bei Desktop und umgekehrt, daher die Diskrepanz.

    Die derzeit externen Google Webfonts könnte man noch lokal hosten, dann wäre das Laden nicht von externen Servern abhängig.

    Syntaktische Fehler im Telefonlink könnte man auch noch beheben, auch das beeinflusst die Zahlen.
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    Christian Jäger und arnego2 gefällt das.
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden