【10のコツ】Pagespeed Insightsのスコアで90を超える方法
こんにちは。Muuです。
この記事では、WordPressでブログを運営している方向けに、表示速度を上げるノウハウをまとめました。
題名の通り、Pagespeed Insightsのスコアで90を超えるまでに試して本当に効果があったもの10個を厳選しています。
自分のサイトを見てもらえれば分かるのですが、最大限まで広告を貼った状態で90点以上をキープ！！
ところで皆さんは、今年の６月中旬から「ページエクスペリエンスの更新」があるのは知っていますか？
Googleの公式ブログにも書いてあるのですが、いよいよ本格的に「表示速度」がSEOに関わってきます。
とは言え、
・何をやればいいか分からない
・難しいことはできない
・広告たくさん貼っても大丈夫？
など、いろんな悩みが出てくると思います。
そんな方でも大丈夫です！
分かりやすく丁寧に解説して行きます！！
本記事の内容
・【10のコツ】ブログの表示速度を上げるには？ブログの表示速度を上げるコツ
・テーマの変更
・無駄な機能を減らす
・AMP対応
・外部リソースの事前読み込み、非同期読み込み
・HTML/CSS/Javascript縮小化
・サーバーを変更
・サーバーキャッシュ/ブラウザキャッシュ
・Xアクセレータ
・GZIP圧縮
・画像圧縮＆サイズ変更
・注意事項：これだけは絶対にやめましょう
・【明確な基準あり】表示速度の最低ラインとは？
・【悩みを解決】結論：ここまで読んだ方は問題無し
ご覧の通り、自分が一年近くかけて学んできたことなので、盛りだくさんな内容ですね。
それをたった１時間のバイト代で手に入れることができるので、かなりコスパがいいです。（いずれ値上げします！）
やることが多くて大変ですが、全てこなせば他のブロガーとの大きな差別化が図れます。
一週間後には、あなたのブログもPageSpeed Insightsのスコアで90以上を取れているでしょう。
※万が一のために返金保証に対応していますが、内容はかなり充実しています。
【10のコツ】ブログの表示速度を上げるには？ブログの表示速度を上げるコツ
・テーマの変更
・無駄な機能を減らす
・AMP対応
・外部リソースの事前読み込み、非同期読み込み
・HTML/CSS/Javascript縮小化
・サーバーを変更
・サーバーキャッシュ/ブラウザキャッシュ
・Xアクセレータ
・GZIP圧縮
・画像圧縮＆サイズ変更
ほとんどの人にとって、見たことのない専門用語が多いかもですね。
なので、一つずつ詳しく解説していきますね。
テーマの変更
まずは、テーマを変更しましょう。
おすすめは、Cocoonです。
たぶん、ほとんどの人は知っているかもですが、便利なので紹介していきますね。
Cocoonの特徴
・無料
・表示速度が速い
・AMP対応
・SEOの機能が豊富
・使っている人が多いので、ネットに情報が多い
・カスタマイズできる
・デザインがシンプル
上の３つをよく見て欲しいのです。
Cocoonのメリットはなんと言っても表示速度が速いというところにあります。
この記事で紹介している表示速度を上げる方法もCocoonの設定を変更するだけで対応できることが多いです。
悩んでいる人は、とりあえずCocoonを使いましょう。
無駄な機能を減らす
自分のブログを見直してもらいたいのですが、無駄な機能とかってありませんか？
よくある無駄な機能
・クリックされない広告
・クリックされないリンク
・使ってないプラグイン
この３つのどれかに当てはまっていれば、今すぐ辞めましょう。
無駄な機能を減らすだけでも、サイトの表示速度は改善します。
上から順に解説していきますね。
まず初めに、よくある勘違いですが、広告は増やせば収益が上がるとは限りません。
むしろ、サイトが重くなって広告が表示されにくくなり、収入が減るので注意！
この辺はいずれ、「Adsense収益0.7円/PVの自分が解説するAdsense最適化法」という記事を作ろうと思っています。（フォローお願いします笑）
２つ目の「クリックされないリンク」というのは、
・関連記事
・新着記事
・人気記事
・オススメ記事
・アーカイブ
・カテゴリ一覧
・タグ一覧
・Twitter埋め込み
・翻訳機能
・シェアボタン
・コメント機能
などのことです。
特にコメント機能って、ほとんどの人にとっては要らないものだと思います。
人によってブログのデザインは異なるので難しいかもですが、絶対に無いといけないもの以外はなるべく減らしましょう。
３つ目の「使ってないプラグイン」というのはWordPress管理画面の
プラグイン>インストール済みプラグイン
から確認できるはずです。
皆さんはどのくらいのプラグインを使っていますか？
自分はこのくらいです。
全部で６つですが、そのうち３つは表示速度を上げるためのプラグインです。
皆さんも、使用するプラグイン６～10の範囲にとどめましょう。
特に、
・SEOプラグイン
・キャッシュプラグイン
・元々入っていたプラグイン
などは消しても問題ない場合がほとんどです。
AMP対応
皆さんのサイトはAMP対応できていますか？
AMPとは？
AMPとは2016年頃にリリースされたモバイルページの表示速度を速くするための規格であり、GoogleもAMPの対応を推奨しています。
AMPに対応することで直接的なSEO効果は無いと言われています。
ですが、モバイルの表示速度が速くなることで間接的な影響があると考えられます。
実際に自分のサイト（BlogMuu）もAMPに対応しているので、ご覧ください。（めちゃくちゃ速く表示されるはずです）
AMPに対応する方法ですが、この辺はすごく難しくてまともに解説しているサイトはありません。
CocoonにもAMP機能はありますが、
・エラーが出る
・使えない機能がある
・設定が難しい
などのデメリットがあります。
下の記事で、プラグインでAMPを設定する方法について解説しました。
デザインが崩れることは無いですし、設定も簡単なのでオススメ。
外部リソースの事前読み込み、非同期読み込み
一見、難しそうに見えるかもですが、テーマにCocoonを使っている人なら簡単に設定できます。
管理画面の「Cocoon設定」から「高速化」を選択後、「Googleフォントの非同期読み込み」にチェックを入れましょう。
これで完了です。
「外部リソースの事前読み込み」に関しては、勝手に設定されているはずなので、気にしないでOK
HTML/CSS/Javascript縮小化
先ほどの続きで、管理画面の
Cocoon設定＞高速化
で「縮小化」という項目があります。
・HTML縮小化
・CSS縮小化
・Javascript縮小化
の３つですね。
上の２つだけチェックをいれましょう。
理由は、Cocoonの「Javascript縮小化」と「AMP」を組み合わせるとエラーが出るからです。
ちなみに、「Fast Velocity Minify」というプラグインで「Javascript縮小化」をしたところ、エラーが出ないで済みました。
設定方法は、インストール後に「Enable JS Processing」にチェックを入れるだけ。
サーバーを変更
サーバーを変更するというのも意外と効果がありますね。
オススメは、エックスサーバーです。
自分の場合、wordpress.comのポンコツサーバーを使っていたので、乗り換えたときは感動しましたね笑
おかげでSEOにも好影響だったので、気になった人は試してみましょう。
エックスサーバーのメリットはいくつかあって、特に次の３つの機能が表示速度を上げてくれます。
・サーバーキャッシュ
・ブラウザキャッシュ
・Xアクセレータ
この３つについて詳しく説明していきますね。
サーバーキャッシュ/ブラウザキャッシュ
そもそもキャッシュとは、ウェブサイトの情報（HTML,CSS,Javascriptファイルなど）を一時的に保存しておく仕組みのことです。
いくつか種類がありますが、手軽に行えるものとして、「サーバーキャッシュ」、「ブラウザキャッシュ」などがあります。
ブラウザキャッシュとは、ユーザーがサイトにアクセスしたときに、ブラウザに作成されるキャッシュで、２回目以降のアクセス時に効果を発揮します。
サーバーキャッシュとは、誰かがサイトにアクセスしたときにサーバーに作成されるキャッシュで、最初のアクセスから効果を発揮します。
エックスサーバーでサーバーキャッシュとブラウザキャッシュを使う手順は簡単です。
エックスサーバーのサーバーパネル（管理画面）から、どちらもONに設定しておきましょう。
Xアクセレータ
先ほどの続きで、サーバーキャッシュの上に「Xアクセレータ」というものがあります。
聞いたことの無い人が大半かもですね。
Xアクセレータとは、エックスサーバーが独自に開発したもので以下の機能があります。
・静的ファイルの高速化
・PHPプログラムの高速化
・同時アクセス数の拡張
バージョン１よりも２の方が充実した機能なので注意！
エックスサーバーを契約している方は、
・サーバーキャッシュ
・ブラウザキャッシュ
・Xアクセレータ
の３つで簡単に爆速になりますよ！
GZIP圧縮
GZIP圧縮は簡単にできます。
バージョン2.4.4以上のApacheを使っている方は下のコードを.htaccessにコピペしましょう。
※事前のバックアップは必須！
<IfVersion >= 2.4.4>
<IfModule filter_module>
FilterDeclare compress
FilterProvider compress deflate "%{Content_Type} = 'text/html'"
FilterProvider compress deflate "%{Content_Type} = 'text/css'"
FilterProvider compress deflate "%{Content_Type} = 'text/plain'"
FilterProvider compress deflate "%{Content_Type} = 'text/xml'"
FilterProvider compress deflate "%{Content_Type} = 'text/x-component'"
FilterProvider compress deflate "%{Content_Type} = 'application/javascript'"
FilterProvider compress deflate "%{Content_Type} = 'application/json'"
FilterProvider compress deflate "%{Content_Type} = 'application/xml'"
FilterProvider compress deflate "%{Content_Type} = 'application/xhtml+xml'"
FilterProvider compress deflate "%{Content_Type} = 'application/rss+xml'"
FilterProvider compress deflate "%{Content_Type} = 'application/atom+xml'"
FilterProvider compress deflate "%{Content_Type} = 'application/vnd.ms-fontobject'"
FilterProvider compress deflate "%{Content_Type} = 'image/svg+xml'"
FilterProvider compress deflate "%{Content_Type} = 'image/x-icon'"
FilterProvider compress deflate "%{Content_Type} = 'application/x-font-ttf'"
FilterProvider compress deflate "%{Content_Type} = 'font/opentype'"
FilterChain compress
FilterProtocol compress deflate change=yes;byteranges=no
</IfModule>
</IfVersion>
SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off
SetEnvIf Request_URI ".*" Ngx_Cache_StaticMode・使用しているサーバーが分からない！
・Apacheって何それ？美味しいの？？
という方は、
・「自分の利用しているサーバー名」＋Apache
・「自分の利用しているサーバー名」＋nginx
で検索すれば分かるかと思います。
画像圧縮＆サイズ変更
最後に、画像圧縮、画像サイズの変更をしましょう。
この辺は全てILOVEIMGというサイトを活用しましょう。
いずれ
・画像サイズ変更のコツ
・画像選定のコツ
・画像圧縮＆サイズ変更するときの注意点
・画像編集の裏技
・サムネ作りのコツ
とかをまとめた記事も書くのでフォローお願いしますm(__)m
注意事項：これだけは絶対にやめましょう
・ブログの写真フォーマットをWebPに変換
・モバイルページの上の方でAdsense広告を貼る
・キャッシュプラグインを使用
・Adsenseの自動広告
・サイト訪問直後の広告
以上の５つは絶対にやめましょう。
理由を一つずつ解説していきますね。
一つ目の「ブログの写真フォーマットをWebPに変換」することで表示速度を上げることができます。
ですが、一部のOSではまだ「WebP」に対応していないのです。
そのため、WebPのフォーマットを使用すると「画像が見れない」という不具合が発生してしまいます。
確かに表示速度は速くなるはずですが、一部の人が画像を見れなくなるということを考えると、現段階でWebPは使わない方が良いでしょう。
二つ目の「モバイルページの上の方でAdsense広告を貼る」ことで、クリック率をちょっとだけ上げることができます。
ですが、そうするとモバイルでの表示速度はめちゃくちゃ下がります。
クリック率が上がっても広告収益が上がるとは限らないので、辞めておきましょう。（最低でも目次上から広告を設置しましょう。）
Adsense広告の最適化は自分の得意分野なので、いずれ解説した記事を作ろうと思います。
三つ目の「キャッシュプラグインを使用」することで表示速度を上げることができると言われています。
※キャッシュプラグインとは、キャッシュするためのプラグインのことです
ですが、この記事の初めの方で説明した通り、「エックスサーバー」や「Cocoon」にはそういった機能が備わっているので必要ありません。
また、キャッシュプラグインはデメリットが多いです。
キャッシュプラグインのデメリット
・重い（表示速度が下がる）
・不具合が多い
・使い方が複雑で分からない
この通りで、キャッシュプラグインには無駄な機能が多いので、逆に表示速度が下がります。
また、他のプラグインとの相性が悪くて不具合が発生することも少なくありません。
何と言っても、使い方が難しいのでやめましょう。
サーバーやWordPressのテーマにキャッシュ機能はついているので、プラグインを使う必要は無いです。
４つ目の「Adsenseの自動広告」を使うと広告を自動で設定することができます。
結論から言うと、以下の点でもったいないです。
・表示速度が下がる
・収益が増えにくい
・デザインが崩れる
Adsenseの自動広告はいいことが無いので、今すぐやめましょう。
５つ目の「サイト訪問直後の広告」によって多少の収益増加が見込めるのですが、ほとんど変わりません。
むしろ、サイトの表示速度が落ちるのでやめましょう。
この辺はPageSpeed Insightsにプレビューが表示されているので、それを参考に改善してみましょう。
サイトへのアクセス後に広告が表示されていないければOK
【明確な基準あり】表示速度の目標とは？
ここまでを読んでいただければ、「表示速度の上げ方」は十分に理解してもらえたかと思います。
ですが、どのくらいが基準なのか、どのくらいの速さで表示されれば良い評価をGoogleから受けるのか全く分からないですよね。
結論から言うと、以下の２つのツールを使って調べることができます。
・Google Search Console
・PageSpeed Insights
Search Consoleの方は、「エクスペリエンス>ウェブに関する主な指標」から
・不良 URL
・改善が必要な URL
・良好 URL
の３つに分類して見ることができます。
上の２つが無く、全て「良好 URL」であればあなたのサイトは完璧です。
もう何もする必要ありません。
ですが逆に言うと、「不良 URL」「改善が必要な URL」があったら、何かしら改善できるはずです。
続いて、PageSpeed Insightsでは
ウェブに関する主な指標テストに合格することを目指しましょう。
上の画像のように
・LCP
・FID
・CLS
の３つで「75%以上が良好であれば合格」という基準になっています。
残念ながら、自分のサイトではFIDという項目で71%なので、合格できていないですね💦
「ウェブに関する主な指標テスト」に今すぐ合格しないダメというわけでは無いですが、表示速度を上げる際の最終的な目標であるのは間違いないです。
なのでぶっちゃけ言うと、PageSpeed Insightsの一番上に出て来るスコアはあまり気にしないでOK
なので、この記事の題名は気にしないでOK
90点取れていても「ウェブに関する主な指標テスト」で合格できていなかったら意味ないです。
※追記：「ウェブに関する主な指標テスト」に合格しました
(≧∇≦)ﾉ
【悩みを解決】結論：ここまで読んだ方は問題無し
最初に話した通り、
・何をやればいいか分からない
・難しいことはできない
・広告たくさん貼っても大丈夫？
という悩みを抱えている方は多いかと思います。
結論から言うと、この記事を読んでちゃんと実行しているのであれば問題無しです。
「難しいことはできない」という方でも、Googleで調べれば簡単にできますし、自分もこれから解説記事を作る予定です。
つまり、既に行動を起しているあなたは、そのまま継続すればOK
今回は以上です！
フォロー＆SNSでシェアしていただけると嬉しいです。
ではでは～👋