LION BLOGはデフォルトでもページの表示速度が速いのですが、以下の2つのカスタマイズすることでより速くなります。
- CSS非同期読み込みを有効にする
- ブラウザキャッシュとGzip圧縮を設定にする
設定は簡単で、CSSとかhtmlとかの知識がなくても大丈夫です。
僕がPageSpeed Insightsで試したところ、以下のように高速化ができました。
- モバイル 71→99
- パソコン 91→99
計測する時間やタイミングによって表示速度は若干異なりますが。
ページ表示速度は検索結果にも影響することがあるので、さっそく設定してみて下さい。
※ページ表示速度は、GTmetrixという無料ツールでも調べられます。設定前と後でそれぞれ計測して、比べてみて下さい。
CSS非同期読み込みを有効にする
まずはCSS非同期読み込みからお伝えしていきます。
「外観」の「カスタマイズ」をクリックする
まず、WordPress管理画面の「外観」の「カスタマイズ」をクリックします。
「SEO設定」をクリックする
次に、メニューの「SEO設定」をクリックします。
CSS非同期読み込み設定を有効化する
そしたらメニューの下にある「■CSS非同期読み込み設定」を「有効」にします。
CSS非同期読み込み設定の4つにチェックを入れる
その下の4つ全てにチェックを入れます。
「公開」をクリックする
そしたらメニューの上にある「公開」をクリックします。これで完了です。ページの読み込み速度が向上しているはずです。
GTmetrixで計測してみて、設定前と比べてみましょう。
注意：ページを開いたときにデザインが崩れることがある
一つ注意があります。
このCSS非同期読み込み設定を有効にすると、ページを開いたときに一瞬だけデザインが崩れて見えることがあります。ただそういう仕様なので、目をつぶりましょう。
またごくまれに、ページを開いたときにデザインが崩れたままの時があります。でも大丈夫、ページを更新すれば元に戻ります。
一応、どのようにページが表示されるか、自分の目で確認してみて下さい。
設定をオフにする場合は「無効」にしてチェックをすべて外す
もしデザインの崩れがあまりにも気になるようだったり、CSS非同期読み込み設定をしても全く速くならなかったりする場合は、オフにしておきましょう。
オフにする場合は、「有効」を「無効」に戻して、4つ全てのチェックを外せばOKです。
ブラウザキャッシュとGzip圧縮を設定にする
次に、ブラウザキャッシュとGzip圧縮を有効にしていきます。
両方とも、「.htaccess」というファイルを編集していきます。
※エックスサーバーを使っている場合は「ファイルマネージャ」から対象のドメインをクリックして、「public_html」の中にある「.htaccess」にアクセスしてください。
「.htaccess」にコードを貼り付ける
「.htaccess」ファイルに、以下のコードを追加で貼り付けます。
その前に念のため「.htaccess」のバックアップを取っておくと安心ですね。
これだけでOKです。「.htaccess」の他の記述を上書きしないように注意してくださいね。
貼り付けたら忘れずに保存しておきましょう。
以上で高速化の設定は完了です。
ページの表示速度は検索結果やアクセスに影響が出る
ページ表示速度が遅いと、検索結果やアクセスに影響が出ます。ただ実際、検索結果への影響は微々たるものなのですが、読み込みが遅いサイトはついページを閉じたくなるものですよね。
それに僕は「いかに検索ユーザーに“素早く”最適な答えを提供するか」という意識で記事（サイト）を作ることが重要、だと考えています。その方がユーザーにとって便利だからですね。
なので、ページの表示速度は出来る限り速めていきましょう。