MENU
Category

【爆速】 試行錯誤して発見したページスピード超改善方法!

ブログを開設したのに、ページスピードが遅い・・・

デスクトップのスコアは高いのに、モバイルのスコアは低い!!!

なんて方、多いのではないでしょうか???

ページスピードが遅いと読み手が離脱してしまうという点で、SEOにおいても重要な要素の1つです。

今回はブログ初心者の僕が実践し効果を感じたPageSpeedを爆速に改善する方法を紹介します!

効果抜群だったもののみを紹介するので、特にブログ始めたての方はぜひ試してみてください🔥🔥

本記事で対応する主な原因

  • 使用していないJavaScriptの削減
  • 適切なサイズの画像
  • 次世代フォーマットでの画像の配信
  • (レンダリングを妨げるリソースの除外)
  • (使用していないCSSの削減)

現代ではスマホでインターネットを閲覧する人が多いため、モバイル のスピードが遅いとかなり致命的になってしいます。

今回はモバイルのスピードに焦点を当ててみていきましょう!

記事作成時のモバイルスピードはこんな感じです☆

目次

ページスピードの計測方法

PageSpeed Insightsの使い方がわかる方は飛ばしてください

まずはPageSpeed Insightsにアクセスし、検索バーにサイトのアドレスを入力ます。

このまま下に行くと、このような画面になりますね。

うーーん、流石にひどい!

さらに下にいくと、

どのようにすればページスピードを改善することができるか、確認することができます。

使用していないJavaScriptの削減(基本編)

JavaScriptでなぜ遅くなるのか?

JavaScriptってなに?

メチャクチャ簡単に言うと、WEBサイトに動きをつけるプログラミング言語です!

そのため、JavaScriptの記述が多いとサイトが重くなってしまいます

かといって、サイト設計には必須のプログラミングなので安易には消せないのですよね。

そこで、JavaScriptの読み込みを遅延処理して表示速度をを改善しようというわけです!

Flying Scripts by WP Speed Mattersの導入

まずは1番影響がありそうな使用していないJavaScriptの削減に着目します。

Flying Scripts by WP Speed Matters というプラグインを導入していきましょう。

このプラグインでは、指定したJavaScriptの実行をユーザーが操作するまで遅らせる事ができます。

Flying Scriptsの使い方ははコチラを参考にしてください。

PageSpeed Insightsで再確認

ではもう一度ページスピードを再確認してみましょう。

これだけで38から54まで改善しました!!

あれだけあった「遅延のもとになるJavaScript」も、ここまで削減。

といいつつも、なにか一つ残ってやがります。

54点じゃ物足りない。。。

目指すなら、せめて80点代は取りたい。。。

この、「recaptcha」なるものが、さらなる強敵なのか・・・???

使用していないJavaScriptの削減(reCAPCHA編)

ここからは、
・Invisible reCaptcha(reCAPTCHA設置プラグイン)
・Contact Form7(お問合せフォーム作成プラグイン)
の2つを導入されている方が対象になります。

あくまで私のページスピードが改善した方法であり、すべての方に当てはまる保証はできません。

本記事のメインテーマである「reCAPTCHA」のお話です。

reCAPTCHAはめちゃくちゃ重い!

アンチスパム対策として、AkismetではなくreCAPCHAを用いている方は結構いるのではないでしょうか?

私もその1人であります。

わい

Akismetの「商業利用」って、ぶっちゃけよくわからないもんね。。。

でもreCAPCHAって、とっても重いんですよね。

先程見たように、FlyingScriptsを使ったとしてもしつこく残っているくらいです。

中には「reCAPCHAを使いたいけど重たすぎるからAkismetに乗り換えた!」なんて方もいたりするようです。

ただ、やっぱりAkismetの利用は控えたい。

そこで色々調べて試行錯誤した結果、一つの結論に至りました。

実は、「Invisible reCaptcha」と「Contact Form7」の設定の重複が原因の1つかもしれないのです!

重複の確認・解除方法

STEP
設定 > Invisible reCaptcha > お問合せフォーム

「Contact Form7の保護を有効化」にチェックが入っていることを確認

STEP
お問い合わせ > インテグレーション > reCAPTCH

「reCAPCHAはこのサイト上で有効化されています。」と書かれていることを確認し、
「インテグレージョンのセットアップ」をクリックします。

STEP
Contact From7に設定されているreCAPCHAキーを消去する

「キーを消去」をクリック

このようになれば完了です。

こうすることで、Invisible reCaptcha経由のみでreCAPCHAが有効になりました。

PageSpeed Insightsで再確認

では確認してみましょう!

おおお!!54から83に!!!

かなり改善したと言えそうです。

適切なサイズの画像 / 次世代フォーマットでの画像の配信

画像系はEWWW Image Optimizerというプラグインを使うこと一発解決できるのでちゃっちゃかやっていきましょう~

STEP
プラグイン > 新規追加
STEP
「EWWW Image Optimizer」を検索 > 今すぐインストール > 有効化
STEP
EWWW Image Optimizer > 設定
STEP
初期設定①
  • サイトを高速化(Speed up your site)をチェック・・・上
  • 今は無料モードのままにする(Stick with free mode for now)をチェック・・・下

STEP
初期設定②

そのままでOK

  • メタデータを削除
  • 遅延埋め込み
  • WebP変換(1920/1920)
  • 埋め込みヘルプ
  • 匿名の報告

設定を保存

完了

STEP
Enable Ludicrous Modeを選択
STEP
変換 > 「変換リンクを非表示」にチェック

プラグインの設定はこれで終了です。

STEP
メディア > 一括最適化 > 最適化されていない画像をスキャンする
STEP
〇〇点の画像を最適化
STEP
待つ

これにて画像の一括最適化は完了です。

このプラグインを入れておくだけで、今後は自動で画像を最適化してくれます!!(放置でOK)

(最終手段)有料テーマを導入してみる

無料のテーマであるcocoonにも高速化機能は備わっていますが、有料テーマを導入することで更に改善させることが期待できます。

例えば「レンダリングを妨げるリソースの除外」「使用していないCSSの削減」は有料テーマに変えることで改善する可能性が高いです。

「有料テーマ」と聞いて思い浮かぶのが、

くらいでしょうか。

個人的には上3つ(JIN、SWELL、SANGO)は初心者向け、下3つ(AFFINGER、STORK、THE THOR)は猛者向けというイメージがあるので、初心者が選ぶならば上3つから選ぶのが無難なのではないかなと思います。

値段比較(2022/3/3現在)

JIN:¥14,800
SWELL:¥17,600
SANGO:¥11,000

すべて買い切りです。

SANGOが一番安く、SWELLが一番高い価格設定になっています。

ネット上にどれだけ情報があるか

これら3つのうち「JIN」と「SWELL」は圧倒的に利用者が多く、ネット上に多くの情報があるためわからないことがあればすぐに解決できる可能性が高いです。

  • JIN:あのhitodeさんが使用・紹介しているため広まった
  • SWELL:使いやすさと高速性が評価されて初心者を中心に広まった

「わからない事があればすぐに調べて解決したい!」ってたかはJINかSWELLから選ぶのが良いと思います。

(重要)高速性

JINとSWELLをおすすめしましたが、実を言うとJINは「ページ表示速度が遅い」というデメリットが口コミでよく挙げられています。

JINに乗り換えたらCocoonよりも遅くなった!!っていう口コミもちらほら。

一方で、SWELLは初期状態でもかなり高速化されているというのが売りの一つです。

アップデートで改善しているもののSWELLに比べるとまだまだ遅いというのが現状で、高速化を求めるためにJINからSWELLに乗り換える方も多いそうです。

「JIN」、「SWELL」ともに初心者でも使いやすいかなりおすすめできるテーマですが、「ページスピードを重視したい!!」という方には迷わずSWELLをおすすめします!!

少し値段が張りますが、「なんとしてでもページスピードを改善したい!」って方は自己投資として検討してみるのもありかもしれませんよ!

当サイトでも「SWELL」を使用しています。

(最終手段・改)レンタルサーバを変更してみる

色々頑張って対策もしたけどやっぱりスピードが上がらない!!もう無理!!って方の最終手段です。

正直今まで紹介してきた方法より大きな効果は望めないと思いますが、最終手段・改としてサーバを乗り換えてみるのもありです。

当サイトではConoHa WINGを使用しています。

あのhitodeさんも使用されていて、何よりも速いことが特徴です。

よく「エックスサーバー」と比較されるConoha Wingですが、

エックスサーバー:長い実績があり老舗の安定感がある
ConoHa WING:新生のサーバで表示スピードがかなり速い

という感じで比較されがちです。

「スピード」を重視するのであるならばConoHa WINGのほうが適しているのかなって感じですね!

よく有名ブロガーさんがおすすめしている

あたりを使っている方で、限りなくサイトスピードの改善に力を入れている方はConoha Wingへの乗り換えを検討してみるのもありですね笑

【ページスピード爆速化方法】まとめ!

  • Flying Scripts by WP Speed Mattersを用いて、JavaScriptの読み込みを遅らせる
  • 「Invisible reCaptcha」と「Contact Form7」の設定の重複を解除する
  • EWWW Image Optimizerを用いて、画像を最適化する
  • 有料テーマの導入を検討してみる
  • レンタルサーバの変更を検討してみる

ページスピードが遅い場合、ぜひ1度試してみてください!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね☆
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次
閉じる