Maßnahmen zum langen Laden von Bildern (Rails)
Ich verwende Bilder auf der oberen Seite der Schienen, aber das Laden sowohl in der Entwicklungsumgebung als auch in der Produktionsumgebung hat lange gedauert. (Es wurde ruckartig angezeigt und ich hatte das Gefühl, dass es frustrierend wäre, wenn ich mich in der Position eines absoluten Benutzers befände.) Notieren Sie, was Sie als Gegenmaßnahme getan haben.
Die Umgebung ist wie folgt. ruby 2.6.5 Ruby on Rails 6.0.3. AWS (EC2) wird für die Produktionsumgebung verwendet
Situation vor der Verbesserung
Wie ich bereits erwähnte, war ich durch das Lesen des Bildes verwirrt.
Als ich es im Protokoll überprüfte, sah es so aus.
Ich habe gehört, dass, wenn das Surfen im Internet 3 Sekunden dauert, die Hälfte von ihnen die Seite verlässt, aber in diesem Fall dauert das Laden der Ansicht 4 Sekunden, sodass es zu lange dauert. (Ich habe noch nie gesehen, dass es länger als 4 Sekunden dauert.)
Details zur Verbesserung
Als ich nach Verbesserungen suchte, fand ich etwas namens "WebP". Was ist WebP </ b>? ・ Wie man Weppy liest (ich habe auf den ersten Blick "Webpee" gelesen ...) -Googles neu erstelltes Bildformat mit der Dateierweiterung ".webp" ・ Die Dateigröße ist kleiner als JPEG und die Bildqualität verschlechtert sich weniger wahrscheinlich. -Einige Browser unterstützen dies nicht.
Die unterstützten Browser ab Oktober 2020 sind übrigens wie in der Abbildung unten dargestellt.
Ist es ein Gefühl, dass IE und Safari für MacOS nicht unterstützt werden (Safari für iOS wird unterstützt)?
Bis jetzt habe ich .JPG verwendet und bin sofort zu WebP gewechselt. (Es gibt ein Tool, das JPG in WebP konvertiert, wenn Sie im Internet suchen.) Ich habe übrigens WebP mit ImageMagick verwendet. Ich habe auf den folgenden Artikel verwiesen, um zu sehen, ob WebP verwendet werden kann. [ImageMagick und WebP](webp https://qiita.com/yoya/items/0848a6b0b39db4cd57c2)
Infolge der Umstellung gab es folgende Unterschiede.
↓ JPG-Datei
↓ Webp-Datei
Sicher wird die Größe immer kleiner! Die Bildqualität ist sicherlich schlecht, aber es hat mir persönlich nichts ausgemacht.
Verbesserungsergebnis
Nach dem Ändern der Datei in WebP beträgt die Ladezeit wie folgt.
Ich konnte es von 4 Sekunden auf 2 Sekunden reduzieren! Das Ruckeln, um das ich mir Sorgen gemacht habe, ist verschwunden und wird jetzt reibungslos angezeigt!
Aber reduziert sich dies allein um 2 Sekunden?
Es dauert immer noch 2 Sekunden, daher werde ich versuchen, unnötige Dateien und Rendering zu reduzieren, damit es so kurz wie möglich gemacht werden kann.
Referenzartikel
https://qiita.com/yoya/items/0848a6b0b39db4cd57c2 https://caniuse.com/webp https://qiita.com/szaizen/items/6a5819925cf3fa5fe79e
Recommended Posts