2023年2月現在、SEO対策のかなめとして、絶対改善が必要な項目であるページの表示速度ですが、どう改善したらいいのかわからない、そんな初心者向けに簡単にすぐできる対処方法だけを紹介します。
まずは「PageSpeed Insights」でページの表示速度をチェック
まずはじめにPageSpeed Insightsをつかって現状を把握しましょう。
ちなみに私の運営しているブログの対策前のページスピードはこちらです。
パフォーマンス19と最悪な状況ですね…
それでは一つずつ解決していきましょう。
改善できる項目を見ると上からみてもこんなに問題は山積みです。
- 次世代フォーマットでの画像の配信 5.94s(秒）
- レンダリングを妨げるリソースの除外 2.71ｓ（秒）
- 使用していない JavaScript の削減 0.75ｓ（秒）
- 使用していない CSS の削減 0.6ｓ（秒）
- 最初のサーバー応答時間を速くしてください 0.57ｓ（秒）
- CSS の最小化 0.15ｓ（秒）
それでは順番に解決していきましょう。
画像をWebP変換しページスピードを改善する簡単な方法
まずはじめに「次世代フォーマットでの画像の配信 5.94s(秒）」この問題を解決するだけでもかなりページスピードは改善されそうです。
使用中の画像も一括でWebPに変換してくれるプラグイン「Converter for Media」を使いましょう。
プラグインの新規追加から検索窓に「Converter for Media」とコピペして検索するとロケットのロゴのプラグインが出てきますのでインストールし、有効化しましょう。
※画像はJPEGやPNGを使っている方が多いと思いますが、軽量化するにはWebPに変換するのが圧倒的に早いです。使い方も簡単なので今すぐページスピードを改善できます。
Converter for Mediaの使い方
使い方は非常にシンプルで簡単です、手順通りに進めましょう。
まずは「/themes」にチェックを入「seve changes」をクリックして保存。
下にスクロールすると下記の項目が出ます。
矢印の「Start Bulk Optimization」をクリックすると変換が始まります。
画像の枚数にもよりますが、100パーセントになるまで待ちましょう。
これで完了です。再度ページスピードを確認してみるとパフォーマンスの項目がかなりの改善が見られます。
下にスクロールし改善できる項目を確認すると「次世代フォーマットでの画像の配信」の項目が消えています。改善できたということですね。
それでは残りの項目を簡単に解決できる方法としてcocoonの高速化という機能を紹介します。
「レンダリングを妨げるリソースの除外」を改善
次は「レンダリングを妨げるリソースの除外」を改善していきましょう。
「レンダリングを妨げるリソースの除外」とは簡単説明すると、まだ読み込まなくてもいいJavaScriptやCSSの読み込みを遅らせてとりあえず早くページを表示させるようにしてね！ということだと思ってもらうといいです。
これは使っているテーマによってテーマの機能で設定できる場合もありますが、プラグインでも対処ができます。
それでは初心者向けのテーマcocoonでの対処法から紹介します。
cocoonの高速化で簡単に表示速度をアップさせる方法
初心者向けのワードプレステーマcocoonですが、便利な機能としてサイトを高速化させる機能があります。
cocoon設定の「高速化」という項目をクリックすると下記のページが出ます。
上記の画像は設定前なので、すべての項目が未チェック状態ですが、このページの項目すべてにチェックを入れていきます。
その時、使っているプラグインが動作しなくなる場合や表示が崩れるなどもありますので、一つずつ確認しながらチェックする項目を増やしていくと確実です。
よくあるパターンは「JavaScript縮小化」にチェックを入れたときにプラグインが動かなくなることがあります。その場合はこちらのページに簡単にできる対処方法がありますので参考にしてください。
全てにチェックを入れ問題なくページが表示されることが確認出来たら完了です。
ページスピードをチェックしてみましょう。
パフォーマンスが53まで改善しました。
レンダリングを妨げるリソースの除外の短縮できる時間（推定）が2.46ｓ（秒）から0.95ｓ（秒）と、かなり短縮されたのがわかります。
プラグインで「レンダリングを妨げるリソースの除外」を改善
使うプラグインはこちらです。
この二つのプラグインは開発者が同じなので相性が良いので合わせて使うのが良いでしょう。
プラグインを追加したら、設定を行います。
それではさらに細かい項目を網羅していきたいと思います。
使用していない JavaScript の削減をしていこう！
プラグインの「Flying Scripts」を使って【使用していない JavaScript の削減】の対策をします。
プラグインの新規追加から検索窓に「Flying Scripts」とコピペし出てくる、オレンジ色のJSと表示されるロゴのプラグインです。インストールし有効化しましょう。
「Flying Scripts」は、必要な時にしか動かなくていいよとJavaScriptに伝え、無駄な動きを制御してくれるプラグインだと思ってもらえばいいです。
「Flying Scripts」の設定方法
「Flying Scripts」の使い方はシンプルです。設定の下のほうにある「Flying Scripts」をクリックすると下記のページが出てきます。
矢印がさす「Include Keywords」の項目に、PageSpeed Insightsの【使用していない JavaScript の削減】の項目の右端の下矢印をクリックして展開すると出てくる、
URLの上にカーソルを持っていき、右クリックから「リンクのアドレスをコピー」をクリックで下記のようなURLがコピーできます。
https://pagead2.googlesyndication.com/…/show_ads_impl_with_ama_fy2021.js?client=ca-pu…
↑こういうのが出てきます。※長いので一部…で表記
えっ！どこをコピペしたらいいの？となると思いますが簡単です。
下記のページに貼り付けたら、余分なところを消して、黄色のアンダーラインが弾いてある部分「○○〇.js」だけ張り付ければOKです。
コピペが完了したら、「Save Changes」をクリックして完了です。
確認をしていくのですが、すぐに設定が反映されていないのでPageSpeed Insightsでページスピードを数日間にわたってたびたび確認していくのが良いです。
ちなみに直後にページスピードを確認するとパフォーマンスが68まで改善していました。
ちなみにこの時、さらに下までスクロールし、【使用していない JavaScript の削減】の項目をサイド確認してください。対策したはずですが、消えてなかったり、さっきはなかった「○○○.js」が増えていたりします。
URLを確認して、「Flying Scripts」に追加してないものは見つけ次第追加していきましょう。
今回2つ見つかり、「Flying Scripts」に新しく追加しました。
またページスピードを確認してみるとなんとパフォーマンスが72まで改善し、ユーザー補助も88にアップしています。
一応【使用していない JavaScript の削減】の項目を確認すると新しく追加する必要のある「○○○.js」は見当たらないのでとりあえずこの項目の対策はここまでです。
しっかりと反映されるまでは少し時間がかかりますので、たびたび確認しながらページスピードの改善を見守りましょう。
ちなみに後日インスタフィードが正しく表示されてないことが判明し、修正しました。
あとで追加した「jquery.min.js」を削除したら表示が戻りましたので、Smash Balloon Instagram Feedを利用している方は「Flying Scripts」の設定の時、「jquery.min.js」は含めないようにしましょう。
【最初のサーバー応答時間を速くしてください】改善方法
今だ、表示が真っ赤な【最初のサーバー応答時間を速くしてください】の項目です、むしろ短縮できる時間（推定）が0.57ｓ（秒）から0.95ｓ（秒）に伸びています。
短縮できる時間が伸びた理由は、ページスピードを改善するために新しく2つのプラグインを追加したためだろうと推測できます。
ということはプラグインが多いと最初のサーバー応答までの時間が長くなるということがわかりますね。
不要なプラグインは停止ではなく削除しましょう
不要なプラグインを削除することでページスピードの改善ができます。
使ってないプラグインを停止したまま放置って結構やりがちだと思いますが、ページスピードに影響してしまいますので、削除しましょう。
他、同じ機能のものを2つ使っているような場合もどちらかに厳選するといいでしょう。
例えば、今回の場合は、Jetpackを有効化しているので、Akismetは不要ですが、停止したまま消し忘れていました。早速削除します。
削除は、赤い削除をクリックで完了です。有効化されているプラグインは、無効化してからしか削除できませんので、いらないプラグインは無効化してから削除しましょう。
不要なプラグインを削除後ページスピードを確認するとパフォーマンスが80まで改善。
最初のサーバー応答時間を早くしてくださいの項目は0.95ｓ（秒）から、0.88ｓ（秒）と少しの改善がありましたが、不要なプラグインを1つ削除しただけでこの改善は大きといえるでしょう。
他にも同じように削除するだけで改善するものがありますので紹介します。
不要なテーマも削除しましょう
最初からインストールしたあった使ってないテーマがそのままにいなっていませんか？もしあるならすぐ削除しましょう。
今回、不要なテーマがないので削除後のページスピードの改善度合いが見せられませんが、プラグインの削除と同等の効果が得られます。
テーマcocoonを使用している方は、有効化するのは「cocoon Chaild」ですが「cocoon Master」もをセットでインストールして使います。初心者の方は、間違ってcocoonの親テーマを削除してしまわないよう気を付けましょう。
PHPのバージョンを最新に変更する
PHPのバージョンを8.1（CGI版）に変更するだけでかなり早くなります。
サーバーがロリポップの場合は、「サーバーの管理設定」から「PHP設定」をクリックし、PHPのバージョンを選択して変更をクリックして変更完了です。
最初のサーバーの応答時間を早くしてくださいの項目が0.71ｓ（秒）まで改善しました。
簡単な「最初のサーバー応答時間を速くしてください」の対策は？
一番簡単なのは、契約しているサーバーのプランをアップグレードするとページの表示スピードはかなり改善します。
参考にロリポップの料金プランを見るとそんなに高くないのでおすすめです
変更時に切り替えの時間がかかり、サイトが見れない時ができてしまうので、今回はプランの変更はしませんが、時期を見て変更予定です。
これからワードプレスでブログを始める方は、はじめからハイスピードプランを選んでおくと、のちに手間がかからず良いかもしれません。
cocoonはWEBフォントが選べるけどデフォルトを選ぶといい
WEBフォントは読み込みに時間がかかるのがネック、いろいろ対策するのも手ですが、最初からデフォルトのフォントを選択するのが、高速化には一番の近道です。
この設定は、「cocoon設定」を開き、「全体」というタブを選択すると出てきます。
簡単にWEBフォントが選べるのがcocoonの良いところですが読み込み時間のかかるWEBフォントを選ばないことで読み込みに負担をかけずに済みます。
表示速度を改善する方法まとめ
【PageSpeed Insights】でご自分のブログやサイトの表示スピードをチェックし、表示速度を改善する方法を紹介しましたが、ひととおりこれだけ対策をすることでかなり表示されるまでの速度は改善したと思います。
ページの離脱率が高いという方は表示されるまでのスピードが改善するだけでページを見てもらえる可能性も高くなると思います。
少なくとも、表示されるまでが時間がかかりすぎて離脱されるということだけはなくすことができるでしょう。
ここでは初心者にも簡単にできる方法だけを紹介しましたので、ぜひやってみてはいかがでしょうか？