PSIのスコア改善をするお話

とあるサイトのPSIスコア改善の対応をしたので記録を残しておきます。

FCP改善

携帯電話側でのパフォーマンスは60～70台で安定しているのですがFCPが4～6秒かかることがあり改善をすることになりました。

改善できる項目として「レンダリングを妨げるリソースの除外」があります。

jsやcssのファイルを読み込むのに時間がかかっているようです。

代表的なのがjquery関連のファイルでしょうか。

まず試したのがjquery.min.jsです。

今回はTOPページにjqueryを使った動的な処理があるのでasyncは使えません。

あるあるなのですがCDNを変更するだけで改善する可能性があります。

例えばgoogleからCloudflareに変えたら速度があがるなんてことも稀にあるのです。

src="https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/..."
↓
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/X.X.X/..."

これで改善できたらラッキーぐらいの気持ちでいろいろ試しますがあまり変わりませんでした。

なのでローカルに落として試してみたところ若干改善することができました。

しかしまだまだ目標値には届きません。

次にスライダーで使用しているslick関連の改善を試みました。

css

href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"

src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"

こちらをローカルに落としてみたところ目標値に改善されました！

しかしサイトの表示が崩れてしまいました。。。

よくよく確認してみるとslick.cssの読み込みが必要だったようで追加してみたところ正常に表示できるようになりました。

速度もギリギリ目標値を安定して出すことができています。

単純にローカルに落としても連動するファイルがあったりするのでやっかいですね。

調子にのってたくさん対応しちゃうとエラーが発生したときに面倒くさくなるので、1ファイルずつ時間をかけて丁寧に確認しながら対応したほうがよいと思います。

大変だけど改善できると嬉しい！