Wie kann das Laden von Inhalten für Mobilgeräte auf einer reaktionsschnellen Design-Website beschleunigt werden?

Ich habe also eine reaktionsschnelle Design-Site. Studien besagen, dass wir für mobile Geräte etwas weniger Inhalte (Grafiken und dergleichen) anzeigen müssen und dass Websites für Handys schneller geladen werden müssen.

Wenn ich einige Seitenelemente in CSS so einstelle, dass sie angezeigt werden: Keine für Handys, werden diese Blöcke nicht angezeigt, aber das bedeutet nicht, dass das Herunterladen von Inhalten in diesen Blöcken keine Zeit in Anspruch nimmt. Also verstecken wir uns, dienen aber immer noch.

Wie kann ich auf einer reaktionsfähigen Website Seitenelementblöcke ausblenden und ihren Inhalt nicht an mobile Benutzer senden, um die Ladezeit der Seite zu verkürzen?

Wenn ein Inhaltsblock mit CSS ausgeblendet ist, muss der Browser weiterhin den HTML-Code in diesem Element herunterladen. Alle Browser außer Opera laden auch die Bilder herunter. (Da Opera auf Webkit umgestellt hat, werden wahrscheinlich jetzt versteckte Bilder heruntergeladen.)

Eine der besten Möglichkeiten, die Belastung in mobilen Browsern zu verringern, besteht darin, Hintergrundbilder in CSS (z. B. Sprites) zu verwenden, sofern dies möglich ist, und dann das Mobile-First-Responsive-Design zu verwenden. Dies bedeutet, dass das Standard-CSS für Mobiltelefone funktioniert und dann Medienabfragen verwendet werden, um auf größere Bildschirme abzuzielen, und nicht umgekehrt. Fügen Sie die kleineren Bilder in das Standard-CSS ein und wechseln Sie dann in den Medienabfragen mit großem Bildschirm zu den größeren.

Medienabfragen funktionieren in allen modernen Browsern, einschließlich IE9 +. IE8 und niedriger haben weltweit einen Anteil von weniger als 6%, daher ist es meiner Meinung nach kein großes Problem, diesen Benutzern die mobile Website zu zeigen.

Wenn die Unterstützung des alten IE in Ihrer Situation wichtig ist, können Sie Medienabfragen nur für die Bilder verwenden. Entwerfen Sie die Desktop-Site beispielsweise wie gewohnt, jedoch mit Bildern mit niedrigerer Auflösung, die auf Mobilgeräten schneller geladen werden. Verwenden Sie dann eine Medienabfrage für das reaktionsschnelle mobile Layout und eine andere Medienabfrage für größere Bildschirme, um die Bilder gegen eine bessere Version auszutauschen.

Die Optimierung für Mobilgeräte entspricht fast der für den Desktop, da Sie leicht darauf abzielen, so wenig wie möglich in der geringstmöglichen Größe bereitzustellen. Aufgrund von Handys mit niedrigerer Bildschirmauflösung sind keine Bilder mit Desktop-Auflösung erforderlich, und Sie können adaptive Bilder anzeigen. Dies bedeutet, dass je nach Gerät ein Bild mit unterschiedlicher Auflösung angezeigt wird. Dies kann mithilfe eines CDN erfolgen, der adaptive Bilder unterstützt , JS Adaptive Images oder eines Frameworks wie Zurb Foundation , das dies unterstützt.

Für alles andere empfehle ich Ihnen, Ideen zur Beschleunigung des Ladens von Seiten sowie viele andere Fragen zur Geschwindigkeit in Pro Webmasters zu lesen.

Ich erkenne mobiles Surfen mit serverseitigem PHP und stelle CSS, Bilder und UI-Muster für das Gerät im Quer- und Hochformat bereit ...