事実と根拠をもとに実用性の高い情報を
結論、影響します。
ですがページ読み込み速度が速ければ上位になるということではないのです。
ここ勘違いしている人がとても多いです。
遅いとユーザービリティーの観点で競合に比べて不利になるので、結果順位が落ちる可能性があります。
そうです、可能性があるんです。
落ちるわけではないのです。
2018年に正式に”Speed Update” についてアナウンスを出しています。
https://twitter.com/googlesearchc/status/1016276644321996800
この様にモバイルページについても表示速度をランキングの順位項目に入れると言っています。
ちなみにSNSでは有名なマナブさん（https://twitter.com/manabubannai）のブログを測定してみました。
モバイルの点数結構悪いですよね？？
それでも多くのキーワードでSEO1位を維持しています。
つまり、あくまで表示スピードはSEO評価基準の1つであり、コンテンツの量や質、運営歴なども考慮されていることが分かります。
それよりもPCの速度がすごくてビックリします。。。
アレだけ記事数あってDBも結構使ってると思うのですが、にも関わらずワードプレスでこの点数はすごいと思います。
Googleとピングダムによる、ページの表示時間と直帰率の調査結果である以下のグラフが全てを物語っています。
引用元：https://www.pingdom.com/blog/page-load-time-really-affect-bounce-rate/
このグラフによると、2秒以内に読み込まれたページの平均直帰率は約9%程度。
3秒を超えると急激に直帰率の数値が上昇し、5秒には直帰率約40%にまで上昇してしまいます。
そして7秒で直帰率は50%を越えます。
「3秒以内にページ表示させるように」という目安ができたのはこう言った背景があるからです。
せっかく見てもらっても半分が離脱してしまってはすごい機会損失ですからね。。。
ちなみにGoogleも同じような調査結果です。
この画像からも、
3秒以上で53％の離脱。
ページの読み込みが長くなるほど直帰率は高くなり、ページ表示速度1秒のサイトが3秒に増えると直帰率が32%増、5秒だと90％増、6秒だと106％増、10秒だとなんと123％増にもなるという調査結果なのです。
つまり、表示前に離脱されるようなページはユーザーにとって価値があるとは言えないですよね。
こう考えればユーザービリティー面でSEOの評価に影響が出るのは当たり前なのです。
https://twitter.com/JohnMu/status/996253266689347584
正確にはSEO対策に優位に働くのではないです。
サーバーのレスポンスが早くなれば、Googlebotが早くクロールできるので結果的にクロールされるページ数も多くなるということです。
Google公式アナウンスによると、表示速度の対象項目として以下の3種類を計測してます。
解説すると、、、
ということなんですね。
じゃあ具体的には何を修正・改善すればいいの？ってことで以下にまとめます。
これらはGoogleが提供するPageSpeed Insightsという速度測定ツールでも改善案を出してくれます。
「まず画像のサイズ大きくないか？」確認しましょう。
ブログで貼る程度で画面全体に表示するとかでなければ、width600px〜800pxあれば十分です。
次にファイルサイズです。
PC内にある画像のサイズを確認しましょう。
Windowsなら右クリック→プロパティ
macなら右クリック→情報を見る
で〇〇KBとか表示が出ますので確認してください。
これを圧縮して大体150〜200KB以下になるようにします。
（基本100KB以下がベスト。）
圧縮には以下のサイトがとてもおすすめです。
https://tinypng.com/
このサイトは圧縮率が高く、それでいて画像の劣化も目立たないのでおすすめです。
png,jpgの両方対応してます。
ブラウザのウィンドウ内に表示されている画像のみを段階的に読み込む機能です。
そうすることで、最初にページが読み込まれた時に処理しなければならない作業を減らせるので結果的に表示速度がアップします。
実はWordPressはこの機能が標準で搭載されています。
（WordPress5.5以降）
自分のサイトの画像を右クリック→「検証」確認してみてください。
loading="lazy"このタグがあれば画像の遅延読み込みが機能しています。
WebPについては今回のテーマから脱線してしまうので別記事で解説します。
※追記
WebP化の手順を解説した記事をやっとアップしました。。
以下のように改行せずに凝縮したり、なるべくコード数を減らすことです。
私の感覚としてはcssは10000行とか行ってても、あまり問題ないように感じているので優先度はそんなに高くなくていいかもしれません。
https://web-repo.com/seo-webp.toc_list li{font-size:1.6rem;}a.blogcard-href:before {content:"合わせて読みたい";position:absolute;bottom:0;right:0;padding:1px 10px;font-size:12px;font-weight:boler;color:#fff;background-color:#2e98d6;}.toc_list li{font-size:1.6rem;}article h2{background:#0068b7;color:#fff;}.entry-title{font-weight:bold;}.post h2, .post h3{font-weight:bold;}.post p{color:#505050;}.post div{color:#505050;}それよりも次にコードを触る際に、見にくいのでここまでは対応しなくてもOKかと。
さてここから今回のキモの内容です。
PageSpeed Insights
基本的に速度測定には皆さんこのツールを使っていると思います。
しかし、これでは不十分です。
このあたりで悩まされます。
ですので、今回は別の方法をお伝えしようと思います。
その前に前提条件として環境を準備してください。
この測定を行った時の私のネット環境はこちら。
コロナの影響でしょうか。最近とてもwifiの速度が遅いです。。。
ソフトバンク光を使っているのですが、ダメですね。笑
測定ページで右クリック→「検証」
「element」「console」などのタブが出てくると思いますので、「performance」をクリックして以下の画像のボタンを押してください。
少し待つと測定が終わります。
上の縦長の赤枠は、ページ表示の完了を表しています。
下の赤枠は、完了までの時間を表しています。
つまりこのブログは表示完了まで1.59秒かかっていることが分かります。
この表示時間を3秒以内にすることを目標にしてみてください。
画像の円グラフに注目します。
黄色の範囲が広いですよね？
つまりここに費やしている時間が長いのでここを改善できるのでは？と考えます。
次に「Call Time」をクリックします。
それぞれ「Total Time」をチェックします。
今回は「Evaluate Script」を観てみます。
「Total Time」は約512msです。
2番目に時間がかかっている項目なので改善の余地ありそうですね。
右端の青文字に適当にマウスを乗せます。
画像は薄い文字になってしまってますが、これはGoogleタグマネージャーのjavascriptを表していることが分かります。
どのjavascriptかわかったので、ここから改善方法は3つに分かれます。
※アナリティクスやタグマネージャーのコードは正しいデータが取れなくなる可能性がありますので、footerに移すのはオススメしません。
このように、どのアクティビティが重いのかを分析して適切な対処をしていけば確実にページ表示速度は改善できます。
ぜひ参考にしてください。
SEOの課題、改善点のアドバイスをさせていただきます。
アフィリエイトのご依頼、web広告、sns広告の運用代行など可能です。
インフルエンサーマーケの独自のノウハウを構築しています。
ご相談ください。
ワードプレスの完全オリジナル構築や既にあるサイトの改修が可能です。
webサイトデザイン設計〜コーディングまで一貫してお受けできます。