이미지 읽기에 시간이 걸리는 대책(Rails)

rails로 첫 페이지에서 이미지를 사용하지만 개발 환경이든 정식 환경이든 읽는 데 많은 시간이 걸린다.
('까까까까까'라고 뜨는데, 이는 절대 이용자 입장에서는 짜증이 날 수밖에 없다.)
나는 내가 한 일을 대책으로 기록할 것이다.
환경은 다음과 같습니다.
ruby 2.6.5
Ruby on Rails 6.0.3.
공식 환경에서 AWS(EC2) 사용

개선 전의 상황

아까도 썼는데 어쨌든 그림을 읽기가 힘들다.
일지에서 확인하면 이런 느낌이에요.

웹 열람에 3초가 걸리면 절반이 페이지를 떠난다고 하는데 이 경우 보기를 읽는 데 4초가 걸려 너무 많이 걸린다.(4초 넘게 처음 봤어요.)

개선 내용

개선할 수 있는 게 뭔지 조사 중이야.나는 이런 물건을 발견했다.
WebP란
・독법은 폭신폭신하다.
· Google에서 새로 제작한 이미지 형식 파일의 확장자는 ".webp"입니다.
· JPEG에 비해 파일 크기가 작고 화질도 열화되기 쉽지 않다
・일부 비대응 브라우저가 있습니다.
참고로 2020년 10월까지 해당 광장의 이미지는 다음과 같다.

IE와 MacOS 사파리는 비대응(iOS 사파리 대응) 느낌이죠.
지금까지JPG를 사용했기 때문에 바로 웹P로 바꿨어요.(인터넷에서 검색하면 jpg→webp로 변환할 수 있는 도구가 있습니다.)
그나저나 ImageMagick에 WebP를 썼어요.
WebP 사용 가능 여부에 대해서는 다음 기사를 참조하십시오.
ImageMagick 및 WebP
변환 결과는 다음과 같습니다.
↓ jpg 파일

↓ 웹 파일

확실히 사이즈가 작아졌네요!
화질도 확실히 떨어졌지만 개인적으로는 개의치 않는다.

개선 결과

파일을 WebP로 변경한 후 읽기 시간은 다음과 같습니다.

4초에서 2초로 줄일 수 있어요!마음에 둔 카카오카카오도 잃어버리고 순조롭게 표시된다!
그런데 이렇게 해서 2초가 줄었나?
2초가 더 걸리기 때문에 불필요한 파일과 렌더링을 최소화해야 한다.

참고 문장

https://qiita.com/yoya/items/0848a6b0b39db4cd57c2
https://caniuse.com/webp
https://qiita.com/szaizen/items/6a5819925cf3fa5fe79e