PageSpeed Insights で100点を目指す

PageSpeed Insights で100点を目指す
Image by sik-life from Pixabay

2022.03.10（更新日：2022.03.11）

当サイトも試行錯誤しながらホームページの高速化を図っていたが、ようやく納得レベルになった。
それまで「wordpress 高速化」なんて検索して、有効な情報を得ながら試してみた訳だが90点までが限界。
個人的考えだが「結局のところ・・・」と結論付いたので記事にしてみた。

この記事は１年以上経過しています。内容的に古い場合があります。

まずは軽量化

PageSpeed Insightsでまず指摘されるのは「表示するまで時間がかかる」ファイルたち。これらを可能な限り削ぎ落とす必要がある。オススメのプラグインの紹介もあるけど、長くなるので名称だけで使い方は省略する。

兎にも角にもアップ画像を圧縮

アップ前に圧縮しておけば問題ないが、面倒な場合はプラグインが欠かせない。プラグインごとで圧縮率が違うが、結構高めでお気に入りは「TinyPNG – JPEG, PNG & WebP image compression」。無料版では月に100枚の制限があるが、この条件を超えないのであればかなりいいのではないかと思う。
もしアップ前に処理をしたいのならオンライン版のもあるのでそちらを使用。

TinyPNG (plugin)TinyPNG (online)

画像には「webp」も加える

Google推奨のwebpだけれども、Safari（mac os）で若干の不安はあるものの、モダンブラウザでは使用可能になった。とにかく軽さは一目瞭然なので、今後この画像フォーマットを積極的に使いたい。

ただしmacでの表示が最新のBigSurに付属のSafari以外は駄目みたい。なので以前記事にした「レスポンシブでの画像の切り替えはpictureとsrcsetで」の方法でwebpとjpgの両方を指定することで対応する。

/* HTML sample.webpとsample.jpg */
<picture>
  <source type="image/webp" srcset="sample.webp">
  <img src="sample.jpg" alt="sample">
</picture>

ただしwordpressの場合、記事中などでこれをいちいち設定するのは結構面倒。なのでこの辺はプラグインに任せるとする。もし画像の圧縮も兼ねて行いたいのなら前出の「EWWW Image Optimizer」がオススメ。
また画像圧縮を別の方法で行っているのなら「WebP Converter for Media」を使用するといいと思う。
どちらもwebpに対応しているブラウザでは「webp」。そうでない場合は元画像を使用してくれる設定が出来る。

EWWW Image OptimizerWebP Converter for Media

jQueryを使わない

100点を目指すためjQueryの読み込みをやめた。Javascriptをネイティブのみで処理。（この辺はテーマによりけりなので悩みどころかも）

htaccessファイルでの処理

これも一般的なことだけれど侮れない。PageSpeed Insightsの指摘を潰すには効果的。されど正直サーバーサイドの深い知識はないのでざっくり説明。

gzip圧縮

ファイルサイズを縮小してくれる。故に通信量が減った分、コンテンツの表示スピードが早くなる。圧縮効果が得られるものだけトライするのが良い。（らしい）

<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE
 
  # 古いブラウザで無効にする
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
 
  # 圧縮済みの画像は再圧縮防止
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
  # プロクシサーバが間違ったコンテンツを配布防止
  Header append Vary Accept-Encoding env=!dont-vary
 
  # 圧縮する設定を記述
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
</ifmodule>

ブラウザキャッシュ設定

早い話が「1度読み込んだものを指定の時間保持してね」と言うもの。なので表示が早くなる。更新頻度に合わせて各キャッシュする期間を調整する。

<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/html "access plus 1 weeks"
  ExpiresByType text/css "access plus 1 weeks"
  ExpiresByType text/js "access plus 1 weeks"
  ExpiresByType text/javascript "access plus 1 weeks" 
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 weeks"
  ExpiresByType application/pdf "access plus 1 weeks"
  ExpiresByType application/javascript "access plus 1 weeks" 
  ExpiresByType application/x-javascript "access plus 1 weeks"
  ExpiresByType application/x-font-ttf "access plus 1 months"
  ExpiresByType application/x-font-woff "access plus 1 months"
  ExpiresByType application/x-font-opentype "access plus 1 months"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 months"
</ifModule>

その他諸々試した

「ファーストビュー」部分のCSSをheadに直書きやHTML自体の圧縮。これら行うと結局ファイルが煩雑になるんだよね。HTMLの圧縮なんかプラグインで試したけれど「タグの抜け？」があったり。メンテナンスのリスクを考えると納得いかないので全て断念。

それなりの効果はあったが・・・

「最初のサーバー応答時間を速くしてください」だけはなんともならない。（そりゃソーダ）

結果論

一般的に出回っている情報は高速化に有効だ。けれど最終的にはサーバーの処理能力によるものが物を言う。試しに流行りの処理速度を売りにしているサーバー「colorfulbox」を使用してみることにした。
結果このサイトは「今までの悩みはなんなん？」と言うくらいに早くなり「PCレベルで100点」を手に入れることが出来た。（スマホは99点）突き詰めると「サーバー」ってことなのです。あくまで個人的な考えだけれど自己判断でご参考に。

「100点だからなんなの？」的なことだが、製作者故の性として記事にしておく。

ColorfulBox