「ブログ運営において、表示スピードが重要!とよく目にするけれど、結局何をしたら良いかわからない…」
「今まで表示スピードについて目を逸らして、他の改善点に取り組んでいたけれど、そろそろ目を逸らせなくなってきた…」
表示スピードの改善については、ブログ運営を続けていくのなら、どこかのタイミングで向き合わなければなりません。上記のようなブログ運営初心者さんや、初級から中級へレベルアップしたい方向けで、言うなれば「表示スピード初心者」向けの記事となっています。
なぜ表示スピードが重要なのか?
表示スピードが重要なのは、ユーザー体験向上ためです。
ユーザーの立場にたつとイメージしやすいです。あなたも、表示スピードが遅いWebサイトを開くのをやめて、他のサイトを見ることにした経験はないでしょうか?
つまり表示スピードが遅いと、ページが開かれる前にユーザーが離脱してしまい読んでもらえない、ということです。そもそも、ユーザー体験の機会はなくなってしまい、記事内容がどんなに充実していても価値を届けられません。
- Speed Update:2018年7月
- Googleは以前から、検索結果のランキング要素に表示スピードを反映していました。2018年7月からは、モバイル検索のランキング要素とする、と公表しアルゴリズムのアップデートが行われました。
- ユーザーを最優先に考えるGoogleらしい措置です。これにより、デスクトップでのページ表示スピードだけでなく、モバイル版サイトについても気を配る必要性が増しました。
- ▼Googleアップデートについてはこちらの記事も参考にしてください。
★Googleアップデートとは 内部リンク★
表示スピードは減点方式
競合ページに比べて表示スピードが極端に遅い場合、ページのランキングが下がる要因になります。コンテンツの内容がほぼ同じページがあったとして、その2つのランキング付けにおいて、表示スピードが考慮されるということです。この場合、当然表示スピードが速いページがより上位に表示されます。
コンテンツの内容が充実しているAページと、充実していないBページがあったとして、どちらが上位表示されるのでしょうか?
Bのページの表示スピードがいくら速くとも、上位表示されるのはAのページです。
そのため、表示スピードについてはこだわりすぎず、競合のページと比較して極端に差がなければ問題ないといえます。時間をかけすぎず、コンテンツの内容にこだわることが大切です。
記事を上位表示させるために、表示スピードの改善を目指しているのなら、少し認識を変えた方が良いでしょう。表示スピードが速いのは、確かにユーザーにとってメリットです。しかし、表示スピードが速いからといって、上位表示されるわけではありません。
▼SEO対策で重要なことを見失わないことが大切です!復習はこちらの記事がおすすめです。
表示スピード改善のために、まずできることは?
なぜ表示スピードが重要なのかがわかったら、次は何をするべきかという話です。最初に着手するべきなのは、次の2点です。
表示スピード改善のために初心者がやるべきこと
・Webページについての知識をつける
・画像を圧縮する
表示スピード改善には、技術的な知識が必要
「表示スピードを改善しよう」と考えたのなら、これまで初心者としてサイトを運営してきた自分に別れを告げ、一段階成長するべきタイミングだといえます。
ただし表示スピードに関連する要素は、『Webサイトを構成する全て』といっても過言ではありません。
そのため、どうしても技術的な話題となりがちです。「Webページが表示される仕組み」などの基本も含め、知識が必要不可欠です。どのように改善すれば良いか、資料を見るときにも知識が必要となります。また、実践するときには周辺知識もないと思わぬ不具合に繋がる可能性もあります。
コアウェブバイタル|Googleの定める指標
まずは表示スピードの定義について知識をつけることをおすすめします。『表示スピード』と聞いて、具体的にどの部分のスピードを改善すれば良いかパッと思い浮かびますか?
「ページをクリックしてから表示されるまでの時間でしょ?」――ユーザーの立場であれば、この認識だけで問題ありません。
しかし、よりテクニカルに考えていくのなら、もう少し詳しく定義をもっておきましょう。Googleの定める指標が存在しています。『コアウェブバイタル』と呼ばれる3つの指標です。
- LCP (Largest Contentful Paint)
- ページ内の最も有意義なコンテンツが表示されるまでの時間を表します。
- FID (First Input Delay)
- Webページにアクセスし、初めておこなう操作にブラウザが応答するまでの時間を表します。
初めておこなう操作とは、クリックやタップなど、ユーザーがおこなう動作を指します。
- CLS (Cumulative Layout Shift)
- ページが安定して表示されているかどうかの指標です。表示されるコンテンツにレイアウトのずれなどが生じる場合、ユーザーの利便性は低下します。
画像の圧縮|初心者でも手を付けやすく、効果が得やすい
技術的な知識が少なくとも手をつけやすいのが、画像の圧縮です。画像の枚数が多ければ多いほど効果も得られやすいです。
「ただ知識をつけろと言われても、中々ピンとこない」
「まずは具体的に手をつけたい!」という方向けの手軽な改善方法です。
最も手軽なのはリサイズ
目的は画像の最適化なので、ファイルの容量を適切にコントロールできれば問題ありません。
特にブログ記事では、画像の枚数はそこまで多くなく、アイキャッチ画像とイメージ画像のみのコンテンツも少なくないでしょう。
その場合には、圧縮せず画像サイズの縮小(リサイズ)で対応できるケースもあります。高品質を保てる程度に、画像サイズを縮小してみましょう。
他にも、画像圧縮ツールを用いてファイルを圧縮する方法があります。圧縮にも様々な種類があり、ツールも多様なものが存在しています。
リサイズ以外の圧縮をしたい場合には、結局①の技術的知識をつける、に逆戻りしてしまいます。とは言え、リサイズで削減できる容量もバカになりません。まずは試験的に試してみて競合サイトと比べ、次の行動を選択しましょう。
- ①少し改善したけれど、競合ページに比べると効果が少ない場合
- 画像圧縮についての知識を優先的につけ、画像を更に圧縮してみましょう。それでも競合ページに比べ表示スピードが劣るのなら、以下の②に当てはまります。
- ②ほとんど効果がなかった場合
- 画像の圧縮ではない箇所を改善する方が効果的な場合もあります。画像圧縮ではなく、他の知識をつけることを優先させましょう。
▼画像圧縮も含めた、優先的に考えるべき表示スピード改善ポイントについて動画をご紹介しておきます。この動画をヒントに、どの分野から知識をつけていくか考えてみましょう!
表示スピード計測ツール
現状を知らなければ改善しようにもできませんよね。ここからは、表示スピードを計測する方法についてご紹介します。
表示スピードを計測するためのツールも複数存在していますが、初心者におすすめしたいのは以下の2つです。
- PageSpeed Insights
- Google Analytics
どちらもGoogleが提供しているツールです。
PageSpeed Insights
速度をスコア化して表示してくれるだけではなく、表示スピードを改善するためのアドバイスも提示してくれる、有難いサービスです。
また、計測の方法も簡単!計測したいページのURLを入力するだけです。競合ページとの比較も簡単ですね。携帯電話とデスクトップで表示した場合の2種類の結果を見ることができます。
▼動画の方がイメージしやすいと思いますので、わかりやすい動画をご紹介しておきます。先ほどご紹介したコアウェブバイタルについても解説してくれています。
Google Analytics
サイト分析として、既に使っている方も多いのではないでしょうか?まだ使っていなくとも、ブログ運営では避けて通れないツールなので、この機会に利用してみましょう!
既に使用中の方でも、意外と見落としているのが表示スピードの計測機能。実は、詳細まで知ることができるツールなんです。もしも見落としているのなら非常にもったいない!
こちらのツールでは、コアウェブバイタルではなく、以下のような要素について計測してくれます。
- 平均読み込み時間
- 平均リダイレクト時間
- ドメインの平均ルックアップ時間
- サーバーの平均接続時間
- サーバーの平均応答時間
- ページの平均ダウンロード時間
▼Googleアナリティクスでは他にも重要なチェック項目を確認できます。詳しくはこちらの記事をご覧ください。
まとめ
表示スピードの改善概要をお伝えしました。
表示スピードはユーザー体験の向上のために重要ですが、極端に遅すぎなければ大きな問題にはなりません。あまり深追いする必要はなく、競合ページと比較し大きな差がないところまで改善すれば充分です。
ただし、表示スピードの改善にはテクニカルな知識と技術が必要になります。勉強しておいて損はありませんので、少しずつ知識をつけていきましょう。
何はともあれ手をつけたい!と考えている方には画像の圧縮をおすすめします。ツールを使って手間をかけた圧縮をせずとも、リサイズで対応可能な場合もあります。
また、自分のサイトの表示スピードを知らずに改善するのは無謀です。Googleから提供されているツールで使いやすいものもありますので、数値を見て改善が必要かどうかを含め判断していきましょう。
ここまでお読みいただき、ありがとうございました。