「PageSpeed Insights」で計測した結果をもとに、ページ速度を上げるためにやった事をまとめました。
改善前のスコア
スマホのスコア
PCのスコア
もう、もはや逆に開き直れるスコアです。。
スマホに関して、前は29だったので、さらに下がりました。
もちろん、タイミングにもよりますが、それでも良くて25ぐらいでした。
パソコンに関しては69ぐらいだったのが、29というスコアに。
「何があったの？」という状態です。
できる事からワードプレス、テーマ、サーバーの改善行う事を決意。
オフスクリーン画像の遅延読み込み
ブラウザで表示されてる所から画像を読み込もうという項目。
いわゆる遅延読み込みや「lazy load」の事で、これに関しては「jetpack」プラグインを使用。
ワードプレステーマに関してCocoonを使っており、Cocoonのテーマ内の機能で遅延読み込みがあるので、そのテーマ内の遅延読み込み機能を使いたかったのですが、サイドバーの画像表示がうまくいかず断念。
「jetpack」の遅延読み込みがうまくひょうじされたので、こちらを利用。
サイトのパフォーマンスが低下すると言われている「jetpack」ですが、統計情報が見やすかったり、ワードプレスの超公式なプラグインですし、個人的には使ってていろいろ得るものあるだろうと使っています。
結果的にあとでゴニョゴニョするんですが。。
遅延読み込みでエラー
ただ、どうしても上部に表示される画像は遅延読み込みとして認識されてないのか、サムネイル2枚ほどエラーが出てしまってました。
おそらくは原因は以下なんじゃないのかなと予想。
- 記事一覧の一番上の広告が表示されるまでに時間がかかる
- 本来ファーストビューで見切れるサムネイル画像が表示される
- その後、広告が表示されて、サムネイルが押し下げられる
- 本来遅延読み込みしているサムネイルが遅延してない判定
なので、広告のタイプをディスプレイからネイティブタイプの広告に変更しました。
それで今のところ、エラーは消えました。
レンダリングを妨げるリソースの除外
下記の記事に救われました。
詳しく内容を書いてくれてます。
JavaScriptを非同期で読み込むことができるよう、子テーマのfunctions.phpに追記する方法です。
これによってJavaScriptが読み込みが完了する前に、画面の表示がされます。
ソースコードを見やすくさせるハイライト系のJSはエラーになる事が多く、参考にさせていただいた内容をそのままコピペでは、Cocoonのデフォルト「highlight.js」が「hljs is not defined」というエラーでハイライト表示がされない状態でした。
ですので、一行追加して対策しました。
if (!(is_admin() )) {
function add_defer_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.min.js' ) ) return $url;
// 以下追加した内容
if ( strpos( $url, 'highlight.min.js' ) ) return $url;
return "$url' defer charset='UTF-8";
}
add_filter( 'clean_url', 'add_defer_to_enqueue_script', 11, 1 );
}
使用していない CSS を削除してください（jetpackのcss削除）
こちらも下記の記事を参考にさせていただきました。
jetpackのCSSとJavaScript無効化する方法が紹介されています。
WEBフォント非同期
こちらも下記の記事を参考にさせてもらいました。
閲覧者がブラウザを閉じるまで、WEBフォントを再読み込みせずに済む優れものです。
こちらを参考に対象のWEBフォントを非同期になるように設定しました。
サーバーの変更
去年の年末（2018年末）にずっと使ってたロリポップを卒業し、スターサーバーに変更しました。
なぜスターサーバーにしたかというと、理想コストの価格帯の中でSSDサーバーを試せるのがスターサーバーだったからです。
ですが、サーバーを変えて半年、体感的にはロリポップのライトプランよりは早くなったかなという感じで、特に管理画面はめちゃくちゃ早くなりました。
でも、PageSpeed Insightsでは、サーバー応答速度で引っかかる。。
という事で、ケチらず価格帯を上げて、デメリット要素のほとんどない評判のいい「カラフルボックス」にサーバーを変更しました。
相変わらず「次世代フォーマットでの画像の配信」は一旦無視
画像のフォーマットをJPEG2000、JPEG XR、WebP等の次世代の圧縮性の高いファイルに変更してねという内容。
サーバー変更の記事でも書きましたが、新しいフォーマットは様子見です。
様子見というより、そもそも新しいフォーマットにワードプレスがまだ対応していない。
ワードプレス側でうまく変換される時代がきてくれるでしょうという他力本願です。
ブラウザもどんどん、新しいフォーマットに対応してるみたいですし、変換するのものすごく面倒でしょうけど、けっこう近い未来に対応せざるを得ないかもしれないですね。
一応、下記の書き方の様に「picture」タグを使えば、対応していないブラウザには今までのフォーマットの画像を表示できます。
<picture>
<source type="image/webp" srcset="img.webp">
<img src="img.jpg" alt="サンプル">
</picture>
やっぱり、JPEG2000はhitomiの「LOVE2000」を思い出します。
そして、当時、僕の兄は間違って「hitomi2000」って言ってました。
画像の圧縮やCDN
画像に関して、次世代フォーマット以外で対応できる事として、jetpackのCDNを使ったりしてましたが、画質の粗さが目立つのとそこまで効果を感じれなかった（スコア3~5上がる程度）ので辞めました。
その代わりにパンダで有名な「Compress JPEG & PNG images」で画像圧縮を徹底しました。
ページ速度測定、結果
サーバーをカラフルボックスに変更した際に書いた内容と同じなのですが、以下が結果です。
スマホのスコア
PCのスコア
スマホ21点、PCは29点だったので、スマホもPCもスコア的に28点以上、上がりました。
結果的にサーバーの変更が一番、スコアを伸ばした感じがします。
「次世代フォーマットでの画像の配信」これをクリアできればスコア的にぐーーんと伸びそうです。
まとめ
普段、定期的に見てるサイトやブログを「PageSpeed Insights」で勝手ながら確認しましたが、「そんなにみんな気にしてないのね」というような印象を感じました。
と言うのも、おそらく僕が見てるサイトはページ速度やSEOを気にしなくても、もう集客できる状態というのもあると思いますし、「PageSpeed Insights」なんかいちいち気にしてられるかというような考えかもしれません。
共通してたのはサーバーの応答時間の項目は合格しているサイトがほとんどでした。
広告でめちゃくちゃ重く感じるサイト（まとめサイト系）でも、サーバー応答時間が良いからなのかタイミングによってはスコアがめちゃくちゃ良かったです。
とにかく、ユーザビリティ的にもSEO的にも気にしないといけないページの表示速度ですが、5Gの波が控えてますし、数年後にはまた基準やルールが変わるでしょうし、対応することに越したことはないのですが、「必死に対応しても意味がなかった。。」って事になるかもしれませんね。
いつの時代もそれの繰り返しですが。。。
当たり前ですが、一番大切なのはコンテンツの質を高める、これ一択ですね。。。！
コメント