ページの表示速度が上がるとユーザー体験も向上する、するとGoogleさんの評価も上がる、つまり表示速度が早い方が順位も付きやすい（はず）。
PageSpeed Insights というWebツールを使えばページ速度に点数を付けてくれて、主な問題点なども教えてくれます。
私が管理している、とあるサイトでは何点かというと・・。
30点！低い！
最低でも50点は必要とのことなので50点目指して頑張ります。50点は平均点だそうです。
ちなみにモバイルとパソコンで点数が異なりますがスマホファーストの現代において、気にしなければならないのはもちろんモバイルです。というかだいたいパソコンの方が点数高いので、モバイルの点数を上げられればOKかなと思います。
Jetpackによる画像の最適化
WordPressを使っているサイトの場合、Jetpackの設定画面からパフォーマンスタブを選び「パフォーマンス及びスピード」の機能をオンにしましょう。Jetpackがないなら入れましょう、いろいろと便利。
上画像の下にある「画像の遅延読み込み」もついでにオンにしましょう。（何かの設定なのかタイミングなのか、全ての画像が真っ白で何も表示されなくなることがありましたので設定後は必ず確認しましょう）
さぁ、これで何点になったかな？
おぉーまずまずですね。
レンダリングを妨げるリソースの除外
難しい話しは割愛しますが、ディスプレイに表示された要素（ファーストビュー）に必要のないJSやらCSSは最後に読み込んだ方がいいんじゃない？という提案です。ハリボテでいいから初期表示をとにかく早くしちゃおうぜってことですね。
プラグイン「Async JavaScript」をインストールして以下の設定をします。
初めは「Apply Async」でやってみたのですが「Apply Defer」の方が点数が高くなったのでこちらにしました。あくまで私は、ですけどね。この辺の用語はちゃんと知っておいた方がいいですよね、あとで調べます。あと崩れてないかどうかは必ずチェックしましょう。
次にプラグイン「Autoptimize」をインストールして以下を設定。
「変更を保存してキャッシュをクリア」を忘れずに！ページが崩れていないか再度チェックしましょう。
よし、これで何点になったかな？
ぎりぎり！(笑)
でもこれ、テストをする度に点数が上下します。実は50点超えたのを見たのは1回だけで平均すると40~45点くらい。
ここからさらに点数を上げるには「次世代フォーマットでの画像の配信」に手を出すべきなのでしょうが、一部やってみたところかなり面倒だったのでパスします。やるならWebPが一番良さそうなのですが、対応していないブラウザの場合はこう、見たいなIFをコーディングしなければならず、スマホ用のサイズ書き出しと合わせて1画像に4枚準備とか、もーめんどくさいです。
とりあえず50点いったから、これだけでいいや。
コメントを残す