初心者がサイト高速化に挑戦してみた(テーマcocoonの場合)

IT初心者

はじめに

以前、Googleの提供する表示スピードを判定するサイトにて、当サイトを計測したところ、下記のような悲惨なスコアを叩き出してしまいました(モバイル版でのスコアです。PCはもう少しマシでした)。

しかし、最終的に簡単な処理を施しただけで、ここまでスコアを上げることに成功しました(下記の画面)。

まだまだ低いスコアですが、それでも16点上がるのですから、たいしたものではないでしょうか。
ちなみにパソコン版については合格点に近いスコアとなっています。

完璧なスピードアップをしようとすると、高速なレンタルサーバーを借りるか、あるいはかなり難しい処理をしないといけないようです。
私にはそこまでの金銭的余裕も技量もないので、とりあえず、簡単にできる方法だけ試してみました。
それで、ここまで数字が伸びるのですから、やってみて損はないと思います。
以下に方法を示します。
※ただし、これは「cocoon」というテーマを使っている方に限ります。
一部、プラグインの導入は他のテーマでも有効かもしれませんが……
なお、スコアは測定するタイミングによって、多少上下します。

まずは「cocoon設定」から「高速化」を選択。

実験は姉妹サイト「My favorite things」を使って説明します。
そちらのサイトは動画こそないものの、画像をたくさん使っています。
当初のスコアはこんな感じでした。

 

モバイル版の数字です。
ちなみにパソコン版は72点でした。

WordPressのダッシュボードから「cocoon設定」→「高速化」を選択し、クリックしてください。

すると、以下のような画面が出ますが、4つすべてにチェックを入れてください。

この下には以下のような画面が出ます。

プラグイン「Lazy Road」をインストールしている方には不要なのかもしれませんが、試してみた限り、プラグインと喧嘩しなかったので、一番上の「Lazy Roadを有効にする」のみチェックしました。
他のふたつについては好みで試してみてください。
「多少タイムラグがあります」という表示が気になったので、私はチェックしませんでした。

さらに下にはこのような設定がありますが、「速さが犠牲になる」という表示が気になったので私はチェックしませんでした。

チェックをいれたら「変更を保存」してください。

ここまで行った段階で測定したところ、モバイル版でここまでスコアが上がりました。

こちらはパソコン版です。
なんと92点まで上がっています。
モバイル版に関しては、アドセンスや一部プラグインの導入、ツイッターやYou Tubeから動画を取り入れていた場合、どうしても遅くなるそうです。
50点くらい行けば上出来みたいですね。

ここまででも十分なのかもしれませんが、もうひとつだけ対策をします。
キャッシュをいじるプラグインをインストールします。
注:これから行う対策はサーバのソフトウェアが「Apache」である場合のみの手法です
私は「ロリポップ!」サーバの「スタンダードプラン」を使用しているので該当します。
サーバのソフトウェアが「nginx」や「LiteSpeed」の方は使えません
そちらにはそちらに合うプラグインがあるようです。
以下のサイトを参考にしてください。

Cocoonおすすめのサイト高速化設定
Cocoonと相性の良いページの高速化設定方法の紹介です。Cocoonデフォルト機能だけでも十分にPageSpeed Insightsで高得点が狙えます。加えて、ページキャッシュプラグインや、画像最適化プラグインを利用すれば、より良い良いパフォーマンスを目指すことも可能かと思います。

プラグイン「WP fastest cache」をインストール

こちらのプラグインです。
インストールして、有効化してください。
WordPressのダッシュボード内にチーターのマークができるので、そこをクリックしてください。
以下のような設定画面が出ます。
一番下に言語を選択できる場所があります。
「日本語」を選択してから設定に入ってください。
基本的には以下の画面のようにチェックを入れておけば大丈夫とのことです。
なお、モバイルになぜチェックを入れないのかと疑問を持たれたかもしれませんが、レスポンシブデザインになっている多くのサイトと相性が悪いからとのことです。

細かい設定もできるようですので、いろいろ試されるのもいいかもしれません。
こちらのサイトが詳しかったので、紹介させていただきます。
私も参考にさせていただきました。

WP Fastest Cacheの"正しい"設定方法 | Pasolack-パソラック-
ブログの読み込み速度が悪い、Google PageSpeed Insightの評価が低い…。なんて悩んでいる方にオススメな『WP Fastest Cache』を紹介。他のブログでは間違っていることもあったので、丁寧にまとめてます。

すべて行った結果は以下のとおり。
上がモバイル版、下がパソコン版です。
パソコンに関してはかなりの高スコアになりました。

最後に

高速化をしたいと思っても、様々な設定をいじる必要があるとハードルが高くなってしまいます。
しかし、ここに紹介した内容であれば、初心者の私でも簡単にできたことなので、試してみる価値はあると思います。
cocoon設定やプラグインの設定をもっと細かくすれば、組み合わせによっては、さらなるスピードアップも期待できるかもしれません。
一番いいのは、高速のサーバと契約することなのかもしれませんが、そこはお金の問題があって難しいですよね(笑)
それと、ここまで説明しておいてなんですが、速度は上がっても、肝心の記事がたいしたことなければ、Googleでの掲載順位は上がりません。
しかし、表示にイライラされるようでは、読んでもらえるものも読んでもらえないわけで……
やはり、試してみる価値はあるかと思います。

2020.01.28追記
もし、スピードテストをして「キーリクエストのプリロード」という警告が出ていた場合、アドセンスの審査時に入れたコードが残っているなら、消してみると少し早くなることがわかりました。
「cocoon設定」→「アクセス解析・認証」内にある「ヘッド用コード」という場所に審査時のコードが残っていたら、削除してみてください。
cocoonの場合は、審査合格後は「cocoon設定」→「広告」内にある「広告コード」の方を使用するので、広告が消えることはありません。
お試しください。

2020.02.26追記

どうやら、高速化、特にLazy Loadあたりをいじると、一部画像の表示がおかしくなることもあるようです。おかしいなと感じたら、プラグインを停止するか、高速化設定のチェックボックスを外すなどしてください。

コメント

タイトルとURLをコピーしました