表示速度は正義
リニューアルした日経電子版が高速すぎてヤバイ件とか小さくすると大きくなる !? WordPressのサムネイル生成をタイミング良く連続で目にした。
底に書かれているのは
現在の世界基準
- 表示開始時間 0.5秒以内
- 表示完了時間 2秒以内
なおかつ1ページあたり200KBを超えたらLTE回線では3秒以下での配信はできない
詳しくは「レスポンシブ前提のWordPressの表示速度高速化の考え方」を読んでいただくとして・・・
これなんていう無理ゲー?
でも遅いのはイラつくのでなるべく高速化するのは正しい。
で現状を調べてみました。
このサイトはHTTP/2対応しているしAmazonのCloudFrontも使っているし遅くはないだろうと高をくくっていたけど測ってみました
GTmetrixで測定してみました。
PageSpeed Score F
YSlow Score E
Fully Loaded Time 3.4S
Totale Page Size 5.69MB
Requiests 134
これはひどい。ここまでひどいとは思っていなかった。
あまりにもひどいのでPageSpeed Insightsでも確認してみる
モバイル 66/100
パソコン 78/100
と言うことで修正していきます。
- リダイレクトを減らす
- 画像を減らす
- linkタグでDNSの事前解決を行う
- WebPを検討してみる
linkタグでDNSの事前解決を行う
ヘッダーにリンク先に使うサイトを明記します。
面倒なのでheader.phpを修正します。
画像はCDNから配信しているのでそこのDNSの事前解決を行います。
<link rel=”dns-prefetch” href=”//cdn.barasu.org”>
フォントはGoogleからダウンロードするのでそれも明記
<link rel=”dns-prefetch” href=”https://fonts.googleapis.com”>
Fontの利用をどうするかも要検討
どこのURLを使用しているかはWebPageTest.orgで確認可能です。
リダイレクトを減らす
リダイレクトが増えたらそれだけ遅くなります。わかってはいるけど面倒で・・・https://www.barasu.org/wp-content/uploadとかに上がったファイルをCDNへのリダイレクトはWebサーバの機能を使って行っていましたがDBの中に入っている値を変更します。
まとめて変更するツールとしては「Search Regex」を利用します。
これでまとめてばばーんと変更。
これでリダイレクトは減るはず。
画像を減らす
一番時間のかかっていた画像はヘッダー画像でした。
確かにヘッダー画像は大きいからしょうがないけど、ヘッダー画像がなくてもいいのでサクッとOFFにする。
404687 12月 13 2016 cropped-Title201613-2000×1199.jpg
なんと一番大きなサイズは400Kもあった。これを毎回配信していたら目標の200K以下には絶対にならないのでサクッと利用しないようにしました。
最近はデジカメから直接とかはあまりしないけど、写真の容量が増えてきているのは間違いないし
EWWW Image Optimizerを利用してまとめて最適化しているつもりだけど、瑞慶覧さんおすすめのアプリを利用してポチポチと減らしていくのが正しいのかなぁ。
WebPを検討してみる
WebPは検討してみました。
ブラウザの対応状況をみてみると・・・
ということでSafariやEdgeでは未対応。
WebP Galleryで見てみても確かにSafariでは見えない。
これはさすがにつらいので見送りました。
画像が軽くなる=高速化=コスト削減 には嬉しいんだけどなぁ。