Performance

    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!

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Wenn du Fragen hast, kannst du dich gerne jederzeit an @Maximilian Rupp wenden

    Hinweis: folgt noch

    Quote from Christian Jäger

    Die hellblau hinterlegt Sektion ... 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.


    Der Abstand zwischen Bild und Überschrift ist derzeit [FONT=Courier New]margin-right: 5vw;[/FONT] und damit repsonsive in Bezug auf die Breite. Beschreibe das eigentliche Problem mal genauer. Was ist nicht bearbeitbar?

    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

    Du könntest der Image Box eine eigene CSS-Klasse geben, z.B. [FONT=Courier New]myimgbox[/FONT] und dann z.B. in Design > Customizer > Zusätzliches CSS für den mobilen Breakpoint den vertikalen Abstand selbst ergänzen:

    CSS
    @media (max-width: 767px) {
    .myimgbox figure {
        margin-bottom: 5vw !important;
    }
}


    Dann dürfte eine einzige Image Box ohne extra Einstellungen für die Breakpoints ausreichen.

    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?

    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?

    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
    falsch: http://tel.00436504406895
richtig: tel:+436504406895

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login