ワイWordPressでブログ運営してて、サイトの読み込みスピードが遅いんよなー
ダーマンそれはちょっと改善したいですよね
ワイでも改善してもなかなか数値が上がらんくてどうしたらええんか困っとるんや
ダーマンご安心を。解決方法教えます！
答えは「Flying Scripts by WP Speed Matters」というプラグインです。これでスコア爆上がりしました。
PageSpeed Insightsによるページ表示速度改善方法をお伝えします。
ページ表示速度とは何か？
WordPressでブログ運営してて、表示が遅いとユーザーから逃げられちゃいますよね。
ブログ開いて待てる時間の秒数って2秒って言われています。
サイト運営してる側からしたら「もうちょっと待ってよー」って思ってしまいますよね。
でも閲覧者側の立場に立てば、ボクも2秒ぐらいが限界でした。
遅いページはすぐに閉じちゃいます。
Googleもページの表示速度を重要視してる
2021年5月からGoogleのランキング要因に「コアウェブバイタル」なる概念が取り入れられているようです。
コアウェブバイタルとは？
Googleが2020年に発表したUX指標のこと。モバイル検索が対象でPCは対象外みたいです。下記3つの指標はいずれもページが表示されるまでのスピードに関係しています。
・LCP…メインとなる要素の読み込み時間
・FID…ページにアクセスして初めて行動した後の結果が反映されるまでの時間
・CLS…ページコンテンツの視覚的な安定性
なので今後のブログ運営にはページの表示速度はかなり重要な要素になってきます。
自身のサイトがどれぐらいのページ表示速度なのか？
じゃ、実際にサイトの表示速度を改善していきましょう。
表示速度の確認方法は「PageSpeed Insights」というサービスを使います。
PageSpeed Insightsって何？
「PageSpeed Insights」は、Googleが提供するサイトのスコアを測定するためのツールです。「0～100」のスコアでページ表示速度が速いのか？遅いのか？判定を行ないます。色分けされていて、緑色であれば良好と捉えてOKです。
では早速ボクのサイトを確認してみましょう。
ダーマンう…これはちょっとまずいですね
スマホとPC両方を確認できてスマホの数値が特に悪いです。
これは早急に改善していかねばなりません。
上記のコアウェブバイタルでもモバイル検索が対象って言ってますしね。
ここでひとつのデータをご紹介します。
総務省の情報通信機器の保有状況についてです。
スマホがぶっちぎりに増えてます。
次にボクのサイトのデバイス別データです。
スマホ多いですね。
なので優先順位から考えてスマホファーストになるのは必然です。
改善方法で有効だったのはコレ！
PageSpeed Insightsでみたら色々と改善しなさいよって項目がずらずらと出てきます。
その中で有効だったのが「使用していないjavascriptの削減」です。
これを修正することでスコアが爆上がりしました。
改善方法の前に他修正項目含めて内容をざっとお伝えしますね。
改善すべき項目
表示されたのはざっと下記の項目です。
- 次世代フォーマットでの画像の配信
- 効率的な画像フォーマット
- 適切なサイズの画像
- 使用していないCSSの削減
- 使用していないJavaScriptの削減
- Largest Contentful Paint の画像のプリロード
ひとつずつ見ていきましょう。
次世代フォーマットでの画像の配信
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。
これをやれば一番効果がありそうではあるんですが、ちょっと現実的じゃないですよね。
というのも対応してるブラウザがまちまちだからです。
WebP
WebPはGoogleが開発してる静止画フォーマットですが、iPhoneのデフォルトブラウザであるsafariに対応していません。なので使いづらいですね。
JPEG2000
これはJPEGの進化版です。対応ブラウザはSafariのみ。WebPとは逆の展開です。なので使いづらい。
JPEG XR
マイクロソフトが開発した画像フォーマットです。対応ブラウザはマイクロソフト系のIEとEdgeのみ。ほんと使えない。わざとですかね？
そんなわけで、Chrome、safari、IE、Edgeを網羅してる形式っていまのところ無いんですよね。
だからこの改善方法はやりづらいという結論なんです。
効率的な画像フォーマット
画像を最適化すると、読み込み時間を短縮しモバイルデータ量を抑えることができます。
正直この部分に関しては手探りです。思うような効果は得られていません。
とりあえずプラグインにて画像を圧縮したりしていますが、効果があるのかは懐疑的です。
まぁ、しないよりはマシかな。
適切なサイズの画像
適切なサイズの画像を配信して、モバイルデータ量を節約し読み込み時間を短縮してください。
ここに該当していたのはヘッダー画像のみ。
近々修正します。
使用していないCSSの削減
スタイルシートから使用していないルールを削除して、スクロールせずに見える範囲のコンテンツで使用されていない CSS の読み込みを遅らせると、ネットワークの通信量を減らすことができます。
通信量が減ればそれだけ、早く表示されるのでユーザーにとって優しいということですね。
この部分もちょっと手つかずなので割愛します。
使用していないjavascriptの削減
使用していない JavaScript を減らして、必要になるまでスクリプトの読み込みを遅らせると、ネットワークの通信量を減らすことができます。
これもCSS部分と意味はほぼ一緒ですね。
不要なスクリプト削ればそれだけユーザーにとって優しいページとなります。
今回ボクはこの部分だけを改善して上記の数値へアップさせました。
その手順を後述します。
Largest Contentful Paint の画像のプリロード
LCP 時間を改善するため、LCP 要素で使用する画像をプリロードしてください。
LCPはLargest Contentful Paintの略で、画像やコンテンツブロックが表示されるまでの待機時間を表します。
難しい設定は不要！5分でできるサイトスコア爆上がり方法
ダーマンでは早速修正していきましょう
ワイえー、でもjavascriptの削除とか難しすぎるわー
ダーマン正直僕もちょっとそこは敬遠してたんですよね。でもめちゃ簡単に出来る方法がありました
プラグインを使います。
それはコレ。「Flying Scripts by WP Speed Matters」です。
上記プラグインは ユーザーが何かしらのアクション操作（例えばスクロールなど）をするまでJavaScriptの実行を遅らせるプラグインです。
導入方法
では早速WordPressの管理画面に入って、プラグインから「新規追加」を選びましょう。
次の画面で検索フォームに「Flying Scripts by WP Speed Matters」と入力します。
すると該当のプラグインが出てきますのでインストールしましょう。
インストールしたら有効化して「setting」を選択します。
PageSpeed Insightsの方に戻って、項目右にある「^」部分をクリック。
アコーディオンメニューでズラズラっと表示されます。
該当のjsファイルがいくつか表示されますので、下記画像のようにリンクアドレスをコピーしましょう。
それをメモ帳などに貼り付けます。
そして下記画像のようにjsのファイルのみをコピーします。
そしてプラグイン設定画面の方へ移って 「 Includes Keywords」内に貼り付けます。
Includes Keywordsに入力したファイルが実行を遅らせたいファイルになります。
いくつかあるので全て入れたかったのですが、僕の場合1つのjsファイルを加えるとうまく実行されなかったので、そのファイルを加えるのはやめました。
そしてTimeout部分で実行されるまでの時間を決めます。僕は5秒に設定しました。
上記の2つは色々と試しながら微調整されることをオススメします。
最後の「Save Changes」をクリックして完了です。
さてサイトのスコアはどのくらい向上したのか見てみましょう。
ワイおぉ！結構スコア上がっとるやんけ！
ダーマンこれはかなり嬉しいですね。
モバイルのスコア「47」→「86」に大幅アップしました！
これは嬉しいです！
「えっ…！？私のサイト遅すぎ！」ページ表示速度の改善方法を伝授！まとめ
いかがだったでしょうか。
今回紹介した方法はページ表示速度の一部分のやり方でした。
しかしまだ改善するところは多々あり、その部分も行っていかねばなりません。
ページの表示速度によって今後順位に影響するのは間違いないです。
やれる対策をやれるだけやっておきましょう。
それでは、また！
