Page Speed Insightsで高得点を出す7つの努力【ロリポップ×Cocoon】

スポンサーリンク
Page-Speed-Insights-hiht-socoreBLOG(ブログについて)

ブログの表示速度が遅いことがずっと悩みでした。
webサイトの表示速度が遅いとGoogleからの評価も落ちてしまい、SEO的にもよくない。
Page Speed Insightsで計測しても30点台とか。ひどすぎて目も当てられない。

  • 格安サーバーのロリポップだから仕方がない
  • 重いけど高性能なWordPress無料テーマ「Cocoon」を使っているから仕方がない

と半ば諦めかけていました。

でもブログに本腰入れるためにどうしても表示速度を諦めたくなくて、いろいろ試行錯誤してきました。
でもどこを改善すればいいか全然わからない。
ながらくそんな調子だった私ですが、ついにPage Speed Insightsで高得点を出せました!

google page speed insghts

ロリポップとコクーンの組み合わせでも高得点の95点を記録できました!
30点台で低迷していたこのブログがですよ?! めちゃくちゃ嬉しいですね。

というわけで今回はロリポップとCocoonテーマを使いながらハイスコアを記録するために私が実際にやったことをお伝えします。
たった7つの項目なので、実践しやすいと思います。

【こんな人に読んでほしい】
・WordPressでブログをやってるけどPage Speed Insightsで高得点を出せない
・ロリポップを使っているので表示速度が遅いと思っている
・無料テーマ「Cocoon」が気に入っているけど表示速度が遅くなってしまう
・でも難しいことはわからない!

ちなみにわたしの環境はこんな感じです。

  • ロリポップはライトプランを契約
  • ドメインはムームードメインで契約
  • WordPressのテーマはCocoonを使用
  • Google AdSenseを導入している

似たような方は同じ方法を使えるのではないでしょうか。
難しいことがわからなくてもできるくらいかんたんなことだけなのでチャレンジしてみてくださいね。

スポンサーリンク

ロリポップ!アクセラレータの機能をオンにする

ロリポップのセーバーの管理・設定の中にロリポップ!アクセラレータという機能があります。
一度も触ったことがなければ、これはオフになっているはずです。
これをオンにします。

ロリポップアクセラレータ

エコノミープランの方以外が使用できる機能です。

サイトの表示を高速化し、サーバー高負荷時でも安定して表示させます。 WordPress、EC-CUBE、baserCMS(4.2.0以降)、独自動的アプリケーション、静的サイトなど、幅広く効果を発揮します。

お客様のウェブサイトの表示内容を、「キャッシュサーバー」に一時的に記録(キャッシュ)し、同じウェブサイトにアクセスがあった場合、キャッシュサーバーから応答します。お客様へ提供している同環境におけるテストでは、WordPressで制作されたサイトで【24倍】(※)のパフォーマンス改善がみられました。
https://lolipop.jp/service/specs/content-cache/

ロリポップ!サーバーのPHP設定をモジュールにする

ロリポップのセーバーの管理・設定の中にPHP設定があります。
これをモジュール版にします。
モジュール版を選択すると、サーバーのレスポンスが高速になります!

ライトプラン、エコノミープランの方はモジュール版を使用できないのでCGI版の一番バージョンが高いものを選びましょう。

ロリポップPHP設定

Cocoon設定の高速化のすべてにチェックを入れる

つづいてCocoonの設定に移ります。
Cocoon設定の中から高速化を選択し、すべてにチェックを入れます。
ブラウザキャッシュの設定やHTML、CSS、JavaScriptを縮小化してくれます。
この設定はCocoonの製作者様もおすすめしているやり方です。

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

Cocoon 高速化設定

webフォントを使わない

Cocoonではフォントの種類をいくつか選べます。
しかしwebフォントを選ぶと外部(google)から読み込む時間が発生するため、表示速度が遅くなってしまいます。

いいフォントを使いたい気持ちはわかりますが、ヒラギノ角ゴシックや游ゴシックでも十分あなたのブログは読みやすいはずです。

Cocoon webフォント

画像サイズを圧縮するプラグインを入れる

やけに大きい画像を使っていませんか?
高画質な画像やサイズの大きい画像は存在するだけで容量を食います。
となるともちろん表示速度も遅くなります。

私はいくつか画像サイズを圧縮するためのプラグインを入れています。

  • Compress JPEG & PNG images
    JPEGやPNG画像を自動で圧縮してくれます。無料で月500枚まで使えるので画像が多いブログでも安心ですね。
  • Imsanity
    画像を自動で設定したサイズまでリサイズしてくれます。もちろん既にアップロードした画像にも使えます。

不要なプラグインを削除する

前は使っていたけど今は使ってないんだよなー。
っていうプラグイン。いつか使うかも……って思いながらそのままにしていませんか?

それも表示速度を遅くする原因です。
不要なものは停止するだけでなく、すっぱり削除しちゃいましょう。

もちろんプラグインの入れすぎも重たくなる原因ですよ!

Googleアドセンスの自動広告をやめる

Page Speed Insghtsの改善点にGoogle DoubleClick ads~と書かれたものはありませんか?
これはAdSense広告のことを指しています。

Google AdSenceの自動広告はあちこちに広告を貼りまくるので、ページを重たくする要因です。

思い切って自動広告のHTMLコードは削除しちゃいましょう。
AdSense側で自動広告の機能をオフにするだけでは不十分ですので、必ずHTMLコードを削除しましょう。

時間を置いてから再度Page Speed Insghtsを試してみよう

今回は表示速度を早くするコツ7つを紹介しました。
これらの設定は読み込まれるまでに少々時間がかかりますので、だいたい30分~1時間後くらいにPage Speed Insightsを試してみましょう。

表示速度はいい方向に向かっているはずです!

目指せページ高速化!やれることはとりあえずやってみよう。

  1. ロリポップ!アクセラレータの機能をオンにする
  2. ロリポップ!サーバーのPHP設定をモジュールにする
  3. Cocoon設定の高速化のすべてにチェックを入れる
  4. webフォントを使わない
  5. 画像サイズを圧縮するプラグインを入れる
  6. 不要なプラグインを削除する
  7. Googleアドセンスの自動広告をやめる

ロリポップを使用していない人は3以降をやってみてください。
Cocoonを使用していない人でも自分のワードプレステーマに合わせてやれると思います。

Googleがページのスピードをチェックするツールを用意しているくらいですから表示速度が早いことは優先されるべき事項なんですよ。
これからも速さを維持、極めていきたいね。

格安で有名なロリポップが爆速宣言?!

わたしが使っているロリポップ!サーバーですが、とにかく安いことで有名です。
WordPressが使用できるライトプランはなんと年払いで3,000円(税別)。業界でもトップレベルの安さです。
PHP設定のモジュール版が使用できるスタンダードプランでも年払いで6,000円(税別)。

そんなロリポップですが、7月以降に全プランで表示速度の向上、容量増加の大規模リニューアルが予定されています。
サーバーを変えようかと悩んだこともありましたが、とりあえずロリポップ使っていこうと思います。



コメント