スマホで見たときに画像が途中で切れた画像になってしまいます。

Question

前提・実現したいこと

こちら
こちらのサイトなんですが、スマホで見たときに、トップページのヘッダーのキービジュアルが途中で切れた画像になってしまいます。
それをうまく表示できるようにしたいです。
pcでデベロッパーツールを使ってスマホ表示をエミュレートしてみるとうまく表示されるのですが、スマホの実機で見てみるとだめです。
時間が立つと問題なく表示されるようになるようなんですが、何がいけないのでしょうか。

補足情報（FW/ツールのバージョンなど）

こちらの画像は３枚の画像がふわっと切り替わって順番に表示されるようになっています。
@keyframesをつかっています。

試したこと

画像のプリロードをすれば直るかもしれないと思ってhead内にlinkタグのpreloadというのをやってみましたが、だめでした。
アニメーションが原因としか考えられなかったので、animationプロパティをいろいろ変えてみて表示確認してみましたが、だめでした。

お忙しいとろこ申し訳ありませんが、わかる方いらっしゃったら教えてください。よろしくお願いいたします。

Answer 1

たぶん単純に画像データが大きくて重いんじゃないかと思います。
こちらでウェブページを分析してみてください。
改善のアドバイスも出てきます。
PageSpeed Insights

Comments

[shunsaku87]

丁寧にありがとうございます！！
こんないいサイトあるんですね！！
画像を圧縮したら解決しました！
ありがとうございました！

[shunsaku87]

解決した方法をここに記述しておきます。
PageSpeed Insightsのサイトで推奨された、プラグインのEWWW Image Optimizerというので画像を圧縮して最適化したら、うまく表示されるようになりました。