Measures for taking a long time to load images (Rails)
I use images on the top page of rails, but it took a long time to load in both the development environment and the production environment. (I felt that it was displayed jerky and I was not frustrated if I was in the position of an absolute user.) Record what you have done as a countermeasure.
The environment is as follows. ruby 2.6.5 Ruby on Rails 6.0.3. AWS (EC2) is used for the production environment
Situation before improvement
As I mentioned earlier, I was confused when reading images.
When I checked the log, it looked like this.
I've heard that if it takes 3 seconds to browse the web, half of them leave the page, but in this case it takes 4 seconds to load the view, so it takes too long. (I've never seen it exceed 4 seconds.)
Details of improvement
When I was looking for something to improve, I found something called WebP.
What is WebP </ b>
・ How to read Weppy (I used to read "Webpee" at first glance ...)
・ The file extension is ".webp" in the image format newly created by Google.
-The file size is smaller than JPEG, and the image quality is less likely to deteriorate.
-Some browsers do not support it.
By the way, the supported browsers as of October 2020 are as shown in the image below.
Is it a feeling that IE and Safari for MacOS are not supported (Safari for iOS is supported)?
Until now, I used .JPG, so I immediately changed to WebP. (There is a tool that converts jpg to webp when you search on the net.) By the way, I used WebP with ImageMagick. I referred to the following article to see if WebP can be used. [ImageMagick and WebP](webp https://qiita.com/yoya/items/0848a6b0b39db4cd57c2)
As a result of the conversion, there were the following differences.
↓ jpg file
↓ webp file
Certainly the size is getting smaller! The image quality is certainly poor, but I personally didn't mind.
Improvement result
After changing the file to WebP, the loading time is as follows.
I was able to reduce it from 4 seconds to 2 seconds! The jerkyness that I was worried about has disappeared and it is now displayed smoothly!
But does this alone reduce 2 seconds?
It still takes 2 seconds, so I will try to reduce unnecessary files and rendering so that it can be made as short as possible.
Reference article
https://qiita.com/yoya/items/0848a6b0b39db4cd57c2 https://caniuse.com/webp https://qiita.com/szaizen/items/6a5819925cf3fa5fe79e
Recommended Posts