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

7

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?

CamSpy
quelle
Überprüfen Sie die Ladegeschwindigkeit Ihrer Site ohne CSS und Javascript. Das ist die tatsächliche Ladegeschwindigkeit. Verwenden Sie die Google-Seitengeschwindigkeit, um einen Hinweis darauf zu erhalten, wie und was optimiert werden soll.
Abu Nooh
1
Ihr Kommentar ist nicht zum Thema, ich weiß, wie man Geschwindigkeit testet. Ich weiß nicht, wie ich das Laden von Site-Inhalten für Handys
beschleunigen kann

Antworten:

4

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.

DisgruntledGoat
quelle
1
Keine gute Idee, nur für neue Browser zu optimieren, da die meisten Leute immer noch ältere Versionen von Browsern verwenden, einschließlich
Abu Nooh
1
@AbuNooh Tatsächlich werden Medienabfragen von den Browsern von über 90% der Besucher unterstützt. Ich habe meiner Antwort jedoch eine alternative Lösung und weitere Erklärungen hinzugefügt.
DisgruntledGoat
@DisgruntledGoat Wenn ich Miniaturansichten von Fotos verwenden möchte (ich habe 60 Daumen auf der Seite), wenn ich sie alle in Sprites stecke, sind es immer noch etwa 200-300 KB zum Herunterladen für Handys und dann weitere 300-400 KB zum Herunterladen für Desktops. Und dann die SEO-Probleme für Daumen als Sprites ... Was würden Sie in einer solchen Situation vorschlagen?
CamSpy
@CamSpy Ja, Miniaturansichten werden oft besser als separate Bilder aufbewahrt (schon allein zur Vereinfachung der Entwicklung). Eine der besten Lösungen in Ihrem Fall wäre das verzögerte Laden von Bildern. Hier finden Sie einige Diskussionen zu SEO.
DisgruntledGoat
1
Es macht Spaß zu wissen: Ein Element mit einem Bacgground-Bild, das angezeigt werden soll: Keines lädt das Bild nicht (zumindest das letzte Mal, als ich es überprüft habe)
Martijn
0

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.

Simon Hayter
quelle
1
Warte was? Vielleicht habe ich nicht aufgepasst, aber ich glaube nicht, dass die Anzeige keine Auswirkungen auf Downloads hat.
Rob
Es scheint, dass Sie mit Desktops-Browsern Recht haben, aber ich bin mir halb sicher, dass neuere Versionen von mobilen Browsern bei Verwendung von Medienabfragen in Kombination mit Anzeige: Keine, dann werden diese Elemente ignoriert. Bis ich dies testen kann, habe ich den Block über das Nicht-Herunterladen entfernt;)
Simon Hayter
@bybe Sie können auf dieser Seite testen: quirksmode.org/css/displayimg.html Ich habe die neueste mobile Safari eingecheckt und die Bilder werden heruntergeladen.
DisgruntledGoat
Ja, Grund, warum ich meine Antwort bearbeitet und adaptive Bilder hinterlassen habe, was eine sehr effektive Methode ist.
Simon Hayter
0

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

Jean-Christophe Duperron
quelle
Haben Sie etwas dagegen, diese Lösung zu teilen?
CamSpy