• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Responsive Webdesign - Inhalte laden unterbinden - display:none

meisterleise

Mitglied
Hallo Kollegen,
bisher befand ich mich in dem Irrglauben, dass Objekte, die für die responsive Version "mobile" auf display:none gestellt sind beim Laden der Seite auf dem Smartphone auch nicht geladen würden. Bei der Arbeit mit Lighthouse/Google Pagespeed Insight zur Performanceoptimierung musste ich nun feststellen, dass dem nicht so ist und wenn man das erstmal festgestellt hat, leuchtet es im Nachhinein auch ein.

Die Frage ist nun aber: Wie geht man um mit dem Problem?

Ich habe heute Stunden damit verbracht, im Web nach Lösungen zu suchen, bisher aber nicht wirklich etwas gefunden. Muss man nun damit leben, dass in responsiven Darstellungen zwar nicht alles zu sehen ist, aber dennoch alles geladen wird?

Hat sich von euch jemand schon einmal damit beschäftigt?
Oder hat gar jemand eine Lösung parat?

Dankbar für erhellende Antworten oder anregende Diskussionen
meisterleise
 
Werbung:
Hallo Kollegen,
bisher befand ich mich in dem Irrglauben, dass Objekte, die für die responsive Version "mobile" auf display:none gestellt sind beim Laden der Seite auf dem Smartphone auch nicht geladen würden. Bei der Arbeit mit Lighthouse/Google Pagespeed Insight zur Performanceoptimierung musste ich nun feststellen, dass dem nicht so ist und wenn man das erstmal festgestellt hat, leuchtet es im Nachhinein auch ein.

Die Frage ist nun aber: Wie geht man um mit dem Problem?

Ich habe heute Stunden damit verbracht, im Web nach Lösungen zu suchen, bisher aber nicht wirklich etwas gefunden. Muss man nun damit leben, dass in responsiven Darstellungen zwar nicht alles zu sehen ist, aber dennoch alles geladen wird?

Hat sich von euch jemand schon einmal damit beschäftigt?
Oder hat gar jemand eine Lösung parat?

Dankbar für erhellende Antworten oder anregende Diskussionen
meisterleise

Fängt ja eigentlich bereits damit an, dass es nicht das Ziel ist, dem Mobilnutzer den halben Inhalt vorzuenthalten.
Genau dafür gibt es Responsive Design ja, um diese Unart zu beseitigen und alle Ausgabegeräte gleichzustellen.

Um andere Inhalte auf dem Mobilgerät zu laden, gibt es https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Alles andere (alles außer Bilder) ist wie geschrieben konzeptionell falsch und sollte an der Wurzel behoben werden, in dem die betreffenden Elemente fit für Mobilgeräte gemacht werden.

Nichtsdestotrotz kannst du natürlich auch mit JS Elemente abhängig von Viewportgröße aus dem DOM entfernen. Bzw. im Falle dass es gar nicht erst geladen werden soll, eben erst ab einer bestimmte Größe hinzufügen.
 
"Fängt ja eigentlich bereits damit an… Unart … konzeptionell falsch"
Wow, was für ein destruktiver Start ins neue Jahr. Schade.

Stimme dir in weiten Teilen nicht zu. Es geht nicht darum, dem Mobilnutzer Inhalt vorzuenthalten, es geht darum, ihm Ladezeit für Elemente zu ersparen, die auf großen Monitoren Gestaltung, Design, Beiwerk sind auf dem Smartphone mangels Platz aber keinen Sinn machen. Diese Inhalte sollten dann auch nicht durch andere/kleinere ausgetauscht werden, sie sollten einfach gar nicht erst geladen werden.
 
Werbung:
"Fängt ja eigentlich bereits damit an… Unart … konzeptionell falsch"
Wow, was für ein destruktiver Start ins neue Jahr. Schade.

Stimme dir in weiten Teilen nicht zu. Es geht nicht darum, dem Mobilnutzer Inhalt vorzuenthalten, es geht darum, ihm Ladezeit für Elemente zu ersparen, die auf großen Monitoren Gestaltung, Design, Beiwerk sind auf dem Smartphone mangels Platz aber keinen Sinn machen. Diese Inhalte sollten dann auch nicht durch andere/kleinere ausgetauscht werden, sie sollten einfach gar nicht erst geladen werden.

Ist mir ja eigentlich egal ob du mir zustimmst oder nicht.
Ein Arzt fragt auch nicht den Patienten, weshalb er die Symptome hat.

Jedenfalls lassen sich CSS properties mit media-queries überschreiben / display:none ausblenden. Diese werden dann auch nicht geladen.
Alles was zu Beginn als img, iframe oÄ eingebunden ist, und nicht fürs Mobilgerät vorgesehen ist (ACHTUNG KRITIK!) ist konzeptionell ganz einfach falsch! Es ist halt einfach nicht möglich Microoptimierungen vorzunehmen wenn das Fundament nicht passt...
 
Hört sich prinzipiell gut an. Hast du zufällig sogar noch einen Link dazu, wie so etwas umgesetzt wird?

Code:
div {
  background: url(https://placehold.it/300x300);
}

@media screen and (*mobile*) {
  div {
    display:none;
  }
}

Dies sollte das Hintergrundbild nicht laden, habe ich aber nicht überall getestet.
Wenn doch, wären wir wieder beim Fundament, also das ganze umdrehen:
Ein mobile-first Ansatz bei dem praktisch alle "Desktop-Extras" erst per media-queries ergänzt werden:

Code:
div {
  display:none;
}

@media screen and (*desktop*) {
  div {
    display:block;
    background: url(https://placehold.it/300x300);
  }
}
 
Zuletzt bearbeitet:
Werbung:
Das stimmt, aber das funktioniert meines Wissens nach ausschließlich mit background img, nicht mit anderen Objekten.

Ja und das ist wieder der Punkt:
Etwas, das nicht für alle Geräte vorgesehen ist, sollte sich gar nicht erst im HTML-Code (== Inhalt) befinden, da das sofort geladen wird.

Wie bereits in #2 verlinkt, gibt es für Bilder wahrscheinlich trotzdem eine Lösung, entweder per srcset oder picture tag.
 
Zurück
Oben