前田デザイン室公式サイトパフォーマンス改善

課題

前田デザイン室公式サイトの表示速度が遅い。

whats.maeda-design-room.net

PageSpeed Insightsの測定結果
スマホ:35
PC:68

スマホ表示の体感速度は5秒以上。とても遅い。

ゴール

PageSpeed Insightsでスマホ・PCのスコアを90以上に改善する

※最低限50あれば良いとの話があるが、せっかくなので90を目標にする

測定方法

各改善ごとに3回計測し、ベストな点数をとる

正しく結果を評価するには、何回か計測を行い、その中で最良の点数を使います。PageSpeed Insightsはサーバーに負荷をかけるので、計測回数は2~3回で良いでしょう。

PageSpeed Insightsの点数の上げ方│クロール対策│CLUSTER SEO BLOG

 

やったこと

1.フォント・CSSの遅延読み込み: 35→56(+21)
linkタグにmedia属性とonload属性を追加。
該当しないmedia属性を指定すると、非同期で読み込めるという裏ワザ。
これが一番効果が大きかった。

The Simplest Way to Load CSS Asynchronously | Filament Group, Inc.

<link rel="stylesheet"
media="print"
onload="this.media='all'"/>

 

2.画像の圧縮: 56→62(+6)
すべての画像ではなく、PageSpeed Insightsで指摘された画像のみ圧縮。

圧縮サイト

TinyPNG – Compress PNG images while preserving transparency

 

3.画像の遅延読み込み: 62→57(-5?)
初期表示でスクロールしないと見えないエリアにある画像を遅延読み込みさせる。

こうすることでページ自体の読み込みが速くなる。
使ったライブラリは「echo.js」。

GitHub - toddmotto/echo: Lazy-loading images with data-* attributes

jQuery不要の軽量レイジーロード!echo.jsの使い方

と思ったが、点数としては、下がった。
オフスクリーン画像の遅延読み込み」の項目は1.8s→0.15sまで短縮できたが、他の項目に影響が出たと思われる。

なお、遅延読み込みはlazyloadというライブラリがメジャーなようだが、今回はただシンプルに遅延読み込みができればよかったため最も軽量という理由でecho.jsを選んだ。

LP高速化のために5つの画像の遅延読み込みライブラリを比較した - Qiita


4.CSSの遅延読み込みをやめる:57→60(+3)
評価指標のひとつに、ページ読み込み後のレイアウトのズレの少なさがある(CLS)。
1でCSSを遅延読み込みさせたところ、初期表示後にレイアウトのずれが大幅に出ていたので元通り普通に読み込むようにした。

ウェブに関する主な指標レポート - Search Console ヘルプ

 

5.ダミー画像サイズの指定:60→62(+2)

3の対応にて、スクロール外の範囲はダミー画像を初期で読み込むようにしたが、そのサイズが元画像のサイズと異なっており、その影響でCLSが悪化したと考えられる。一律で同じダミー画像を当てず、元画像と同じサイズのダミー画像を複数用意したところ、若干数値が回復した。

6.jQueryほかscriptの非同期読み込み:62→65(+3)
ヘッダーとフッターを共通ファイルにし、jQueryで読み込んでいたため非同期読み込みにできていなかった。
メンテナンス性は下がるが、TOPページのみヘッダー・フッターを直書きし、jQueryの読み込みでdeferを指定するようにした。
Google AnalyticsGoogle Tag Managerなどのスクリプトは、すべてasyncを指定。
その他scriptタグには極力deferを指定。
Page Speed Insightsで0点→96点に上げるために当店がやったこと | 志木駅前のパソコン教室・キュリオステーション志木店のブログ

7.JSのminify:65→65(+0)

JSはファイル数が少なかったため個別圧縮して上書き。行数も少ないからか、数値は変わらず。

 

8.CSSのminify:65→68(+3)
SCSSを使っているため、コンパイルと同時に圧縮する方法がないか調査。
下記の記事通り、Live Sass Compilerの設定を行うだけで簡単に圧縮できた。

https://monoxa.net/2019/04/how-to-minify-sass-directly-with-vsc/

 

以降9-11を同時進行で進めた結果、1度だけスコアが74まで上がったが、そこから数回図っても60-65の間にとどまった。

 

9.フォントの同時読み込み
2種類のGoogleフォントを別々のタグで読み込んでいたが、同時に読み込む方法があった。アクセス数が減るため、若干速くなるはずだがPageSpeed Insightsの数値的変化はなし。

Google Fontsのパフォーマンスを最適化する6つの方法

 

10.必要なウェイトのみフォントを読み込み

今までどのページも一律でfont-weight 400, 500, 700を読み込んでいたが、TOPページでは700を使用していなかったため削除した。

 

11.preconnectでfonts.gstatic.comを非同期読み込み

読み込んでいるgoogleフォントのリクエスト先(↓)を見ると、内部でさらにfonts.gstatic.comを呼び出していることがわかる。
https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400

この読み込みが終わるまでほかのプロセスが止まるという話だったので、プリコネクトによってこのfonts.gstatic.comの読み込みを待たずに他の処理ができるようにした。

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Google Fontsのパフォーマンスを最適化する6つの方法


結果
11月中での最高スコアは、
PC→95点、スマホ→74点となり、PCは目標達成。

スマホで70点台が出たのは1度のみで、平均は60-65点ほどとなった。

目標達成できなかったものの、改善前よりは大分表示で待たされることがなくなった。

考察

スマホでPageSpeed Insightsのスコアを上げようと思ったら、本腰入れてスコア算出の仕組みやブラウザの表示の仕組みを理解する必要がある。理解しないまま色々な記事を手当たり次第に試しても、PCに関してはあまり苦労なく90点以上になったが、スマホでは60点台から抜け出せなかった。

・表示速度を意識した設計が大切。今回サイト内では、ヘッダー・フッターを共通化してjQueryで各HTMLに埋め込んでいたが、その方法だとjQueryを読み込まない限りファーストビューが表示されなくなる。ファーストビューに関わる部分は、jQueryを使わずに共通化する方法を考える必要がある。

・今回はサーバー側の設定は触らなかったが、ローカルと公開中のページでLCP※が500msほど異なるため、よりスコアを上げるにはサーバー側の設定を見直す必要がある。
※Largest Contentful Paintの略。ファーストビューにおいて占有率が高いコンテンツが表示されるタイミング。

・JSファイルを小分けにしているため、webpackを使うとより改善できる見込み。