J'utilise des images sur la première page des rails, mais le chargement a pris beaucoup de temps à la fois dans l'environnement de développement et dans l'environnement de production. (J'ai senti qu'il était affiché saccadé et je n'étais pas frustré si j'étais dans la position d'un utilisateur absolu.) Enregistrez ce que vous avez fait comme contre-mesure.
L'environnement est le suivant. ruby 2.6.5 Ruby on Rails 6.0.3. AWS (EC2) est utilisé pour l'environnement de production
Comme je l'ai mentionné plus tôt, j'étais confus en lisant l'image.
Quand je l'ai vérifié dans le journal, cela ressemblait à ceci.
J'ai entendu dire que s'il faut 3 secondes pour naviguer sur le Web, la moitié d'entre eux quittent la page, mais dans ce cas, le chargement de la vue prend 4 secondes, donc cela prend trop de temps. (Je ne l'ai jamais vu dépasser 4 secondes.)
Quand je cherchais quelque chose à améliorer, j'ai trouvé quelque chose qui s'appelait `` WebP ''. Qu'est-ce que WebP </ b> ・ Comment lire Weppy (j'avais l'habitude de lire "Webpee" au premier coup d'œil ...) ・ L'extension de fichier est ".webp" dans le format d'image nouvellement créé par Google. ・ La taille du fichier est plus petite que JPEG et la qualité de l'image est moins susceptible de se détériorer. -Certains navigateurs ne le prennent pas en charge.
À propos, les navigateurs pris en charge à partir d'octobre 2020 sont indiqués dans l'image ci-dessous.
Avez-vous le sentiment que IE et Safari pour MacOS ne sont pas pris en charge (Safari pour iOS est pris en charge)?
Jusqu'à présent, j'utilisais .JPG, donc j'ai immédiatement changé pour WebP. (Il existe un outil qui convertit jpg en webp lorsque vous effectuez une recherche sur le net.) Au fait, j'ai utilisé WebP avec ImageMagick. Je me suis référé à l'article suivant pour voir si WebP peut être utilisé. [ImageMagick et WebP](webp https://qiita.com/yoya/items/0848a6b0b39db4cd57c2)
À la suite de la conversion, il y avait les différences suivantes.
↓ fichier jpg
↓ fichier webp
Certes, la taille diminue! La qualité de l'image est certainement médiocre, mais personnellement, cela ne me dérangeait pas.
Après avoir changé le fichier en WebP, le temps de chargement est le suivant.
J'ai pu le réduire de 4 secondes à 2 secondes! Le saccadé qui m'inquiétait a disparu et il est maintenant affiché en douceur!
Mais cela réduit-il à lui seul 2 secondes?
Cela prend encore 2 secondes, donc je vais essayer de réduire les fichiers inutiles et le rendu afin qu'il puisse être aussi court que possible.
https://qiita.com/yoya/items/0848a6b0b39db4cd57c2 https://caniuse.com/webp https://qiita.com/szaizen/items/6a5819925cf3fa5fe79e
Recommended Posts