iiie@diy

by syttg

"Google PageSpeed Insights"のスコアが悪化した対策

f:id:gorislog:20181204101820j:plain

 

※現状、満足のいく改善は行えていません。備忘録としてお読みください。

 

定期的にブログの表示速度をGoogleの”PageSpeed Insights”で計測していたんですが、スコアが急落しました。

 

PageSpeed Insights

 

いつのまにか、PageSpeed Insightsのページが変わっていたので条件が変わったのかな。

 

変化前に測定した際(最後にブログデザインを弄った際)はパソコン60~70、モバイル80~90でしたが、

 

f:id:gorislog:20181204095344p:plain

 

パソコン85~92、モバイル28~34と、かなり悪化しました。

 

記事数の増加と、写真コンテンツが増えたことが原因だと考えましたが、トップページのページ表示速度で測定したので、関係無し。

 

読み続けると以下の情報が記載されてました。

 

f:id:gorislog:20181204095732p:plain

 

特に効果の高そうな以下の項目に対してメス入れすることに。

1. オフスクリーン画像の遅延読み込み

2. 適切なサイズの画像

 

まず、”オフスクリーン画像の遅延読み込み”について。

ページ表示時に、容量の多い画像データを読み込む際に、画面外の画像を遅延させて読み込ませるというモノ、あるいは粗い画像をいったん読ませて後から差し替える仕様にするという事らしい。ページの読み込みがスムーズになるらしく、ストレス軽減につながるらしい。

ただ、このオフスクリーン画像の遅延読み込みについては、”はてなブログ”での実装は結構難易度が高いモノらしいです。

紹介している記事はいくつかあったんですが、実装しても軽減を実感することはできませんでした。上手く導入できてない可能性が高いですが....。

 

blog.rokuzeudon.com

 

syncer.jp

 

なので、この方法は以降も試してダメでしたら代案の検討したいと思います。

 

次に、適切なサイズの画像。

 

トップページで一番読み込み量の多かった画像はbxSliderで使用されている画像。この画像は、記事内で使用されている大きい画像をそのまま使用している為、画像読み込み量が多いみたいです。もともとbxSliderはスクリプトで横幅を指定しているので、記事内で使用している画像よりもはるかに小さい画像で事足ります。(僕の場合は横幅250pxで指定)

 

f:id:gorislog:20181204182018p:plain

※フォトライフのオプションで、画像サイズを指定してからアップロードしました

 

そこで、記事内の画像をいったん保存し、”はてなフォトライフ”側でアップロード。アップロード時に横幅(長編)を250pxに指定したことで、読み込み画像容量を8分の1程度まで低減させました。

結果スコアとしては1~3程度向上しました。

 

f:id:gorislog:20181204182158p:plain

 

あとは、画像読み込み量を減らすために、トップページの記事表示数を10件→8件へ減らしました。一覧形式だと、画像表示が大きい&多くなってしまうので、閲覧速度に影響があると思ったからです。

2018/12/7. ↑記事数の数を変動し、再測定したら読み込み速度に変化はありませんでしたので、ブログの閲覧がしやすい一覧記事数は10→8→12件に変更しました

 

また、無駄なカテゴリーを減らしました。この辺りは関係は薄いかもしれませんが、記事検索の際に重複するカテゴリーがあると該当する項目が増えるため、調べるのに邪魔になるので前々からカテゴリー整理するつもりだったので、ちょうどいいと思って行いました。

 

効果は薄いですが、できることから低減させていきます。以後、対応した内容に関してはこの記事に追記します。