fbpx

As Best Creative, Do Everything For a Goal…

Blog 社員ブログ

BLOG

社員ブログ

SEOWeb制作
ページ表示速度が大事!ページスピードの改善や測定方法について
2020/05/19

ページ表示速度について

ページの表示速度は、サイトを訪れるユーザーの満足度に大きく影響します。たかが数秒の差と侮ることなかれ。遅い場合だと、表示前にそっぽを向かれ離脱されるなんてこともザラにあります。逆に、表示速度を改善することで、より閲覧しやすいサイトと認識され、ユーザー体験の向上とともにアクセス数が上昇するケースがあるのも事実です。
したがって本記事では、ページスピードについて、測定方法や遅くなる原因究明を踏まえたうえで、改善に有効な施策まで紹介していきます。

目次

ページ表示速度とUXの関係

表示速度が遅いことは機会損失につながります。それはユーザー体験の損失といってもいいでしょう。ダイレクトにUXが低下してしまうため、集客等に注力しているのであれば痛手となります。いくらコンテンツが充実していても即座に離脱されるとなれば、内容を強化した意味を失うわけです。ページを開いても読み込み状態のまま待たされるユーザーの気持ちを察してください。ちなみに短気な筆者は途端にイライラし始めます(苦笑)。
と、余談はさておき、ユーザーはすぐに閲覧できるほかのサイトへ移ろうと考えるのが自然。そうやってせっかく接点を持てた顧客を、まさに一瞬で失うパターンも少なくありません。
いずれにせよ、多くのユーザーは自分の求めている情報をいかにスピーディーかつ快適に得られるかを重視しています。ゆえに、ページスピードの遅さは、ユーザー離れの致命的な原因になり得るでしょう。

ページ表示速度とSEOの関係

さて、影響は検索結果にも及びます。そう、SEOです。
繰り返し伝えるようにページの表示速度は、ユーザー行動に大きく関わります。良質なサイトとして評価されるには、直帰率や離脱率を抑えていく必要があると思いますが、これが高いとどうでしょう。もちろん知名度や話題性などがあれば、ページランクの蓄積も相まって上位に君臨できるかもしれません。が、そうでなければなかなか難しいと考えます。
ページが重い、遅いは悪です。表示速度が非常に重要であることは、ユーザーのみならずロボット(検索エンジン)にだってお見通し。どうしたって注力せざるを得ないですね。

新たなランキング指標「Core Web Vitals(コア ウェブ バイタル)」

こちら追加情報です。
先般、Googleはユーザー体験向上のため、Web Vitals というコンセプトをランキング要因に組み込む旨、アナウンスしています。
Googleが提供する解析ツール「サーチコンソール」では、すでにこの指標について判定可能です。拡張セクションの中の“ウェブに関する主な指標”でレポートされる仕組みとなっています。

Core Web Vitalsが定義する3つの指標はそれぞれ以下の通り。

  • Largest Contentful Paint (LCP)
    ページで最も大きな要素が読み込まれるまでの時間に当たります。対象となるのは主に画像や動画でしょう。記事のみのコンテンツであれば本文もしくが見出しがその的になると考えられます。

  • First Input Delay (FID)
    操作入力が開始可能になるまでの待機時間を表します。
    クリックやタップも該当。つまりはインタラクティブ性です。

  • Cumulative Layout Shift (CLS)
    コンテンツの移動を示すスコアです。表示されるレイアウトが安定されるまでを測ります。


  • 実施予定が2021年以降とはいえ、今のうちから改善へ向けた動きをとるに越したことはありません。UXの健全性は(ユーザーはもちろんのこと)Googleが望むものといえます。
    ツール等駆使しながら、まさしくページの最適化につなげてください。
    いずれにせよ、今後確実に取り組まなければならない課題です。

    ページ表示速度を確認する方法

    ページの表示速度が重要だということは説明しましたが、実際のスピードを調べるにはどうすれば良いのでしょうか。もちろん、自身でサイトにアクセスした体感をもとに、程度を判定するのも悪くはありませんが、ページの読み込みには使用している機器(PC・スマホなど)のスペックや通信状態など、個々の通信環境も多かれ少なかれ影響します。そのため、はっきりと審判を下すにはやや曖昧。そこで、おすすめしたいのが測定ツールでのチェックです。代表的なものは「PageSpeed Insights」や「Test My Site」が挙げられます。いずれも入力スペースに測定したいページのURLを入力するだけで、そのページスピードのスコアが示されるというものです。ありがたいことに、表示速度を上げるための改善ポイントまで示してくれます。重宝される方が多いのも納得です。
    加えて、Googleアナリティクスといったアクセス解析ツールでも分析結果として確認可能です。サイト単位で調べられるため、複数のページの結果を同時にみることができ、平均含めて一目瞭然で比較が可能になります。

    なお、一説によるとユーザーがスムーズだと感じる表示タイムの目安は2秒までだそう。言い換えれば、表示に3秒以上かかってしまえば遅いページだと認識される可能性が高いということです。閲覧開始ページのみならず回遊遷移の際も同様。
    当たり前ですが、全てのページにおいて快適なスピードを提供する必要があります。

    ページ表示速度が遅くなる理由

    ページ表示速度が遅くなるのは、なぜなのでしょうか。考え得る主な原因をピックアップしました。

    コンテンツが多い

    サイトにはさまざまなコンテンツが盛り込まれています。文章だけでなく、画像や動画など、ページをわかりやすく見応えのあるものにするため、ユーザーにとって充実したページになるべく多くの工夫が凝らされています。しかし、それらが原因となり遅延が生じてしまう場合もあります。一体どういうことか。各コンテンツのデータ量が膨らんでいるため、その分ページが開かれるには多くの通信が必要となり、結果全ての内容が表示されるまで時間を要してしまうのです。

    HTMLやCSSに無駄が多い

    WEBページを作る際は、HTMLやCSSなどのプログラミング言語が用いられます。複数の階層で複雑に設置されるため、直接ページに現れない無駄なプログラムが生まれることもあります。これがまさに原因です。ページ読み込みの際、余計に時間がかかってしまいます。

    JavaScriptが多い

    JavaScriptはWEBサイトの動作にバリエーションを持たすことができる便利なプログラミング言語です。JavaScriptを使用することで、WEB上でさまざまなアクションが可能になります。一方、メリットして扱える分、多用すれば負荷もかかります。データが蓄積されると重くなり、表示に遅延が生じるため注意が必要です。

    画像が重い

    ページの中に画像を設置している場合も気を付けなければいけません。表示速度が遅くなる原因としてもはや定番です。
    画像が少しずつダウンロードされる様子を、イライラしながら待ったあの経験。きっと筆者だけではないはずです(苦笑)。

    ページにアクセスが集中している

    これはページ自体に問題があるというよりは、アクセス数に対しサーバのスペックが釣り合っていないことが原因です。アクセスが集中した際、サーバが通信を捌ききれないと、重みに耐えきれず不安定のままページの読み込みに支障をきたします。あるいはサーバダウンで閲覧不可能になるため、事前に対策を練ることが必要です。

    ページ表示速度を改善するための方法

    前章で説明したページの表示速度が遅くなる原因を踏まえて、改善に有効な方法をご紹介します。

    コンテンツの数を整理し減らす

    多数のコンテンツを詰め込み、ユーザーにとってできる限り有益なページを作りたいと考えること自体は大賛成です。しかし、ページスピードの遅さゆえ、ユーザーに不満を感じさせ、あまつさえ離脱されるようなことになれば、本末転倒。せっかく用意した力作コンテンツも全て無駄になってしまいます。そこでおすすめしたいのが、整理整頓、調整です。ページに設置されているコンテンツを洗い出しましょう。特段必要のないもの、コンバージョンへの貢献度が低いもの等あれば、思い切って削るのも一つの手です。

    HTML・CSS・JavaScriptを見直し無駄をなくす

    ページを構築するHTML・CSS・JavaScriptの見直しは必須です。無駄をなくすことで道(とページ)は開けます。意味のない改行やスペース、インデントなども表示速度を遅くさせる要因です。一つひとつは些細なことかもしれませんが、積み重なれば大きな影響を及ぼします。なお、CSSやJavaScriptのファイルが複数ある場合、できる限りまとめることで、省エネとスピードアップが期待できます。軽量化されると同時にフォルダ管理のしやすさに寄与し、更新面でのメリットも生まれるでしょう。

    画像の解像度や種類を変更しサイズダウンに努める

    画像はページを見やすくするための大事なファクター。過剰に設置するのは考えものですが、全く無しにすることも現実的ではありません。そこで、画像を設置する場合は、サイズダウンできるような工夫を加えましょう。例えば、画像形式にこだわるやり方です。WEBで公開されている画像の形式には、「JPEG」「GIF」「PNG」など、さまざまな種類があり、それぞれに特徴があります。JPEGは、写真をはじめ多くの色数が必要な画像に適した形式です。逆に色数の少ないイラストなどを保存すると、サイズが大きくなる傾向にあります。この場合はGIFがおすすめです。比較的小さいサイズ形式で保存してください。

    画像と形式の相性を確認し、最適化することによってサイズダウンが図れ、ひいてはページの表示速度アップにつながります。また、画像の寸法をコンパクトにするのも良いでしょう。ページ内を見たとき、無意味に大きな画像はないでしょうか。本当にその大きさでなければいけないのでしょうか。必要最低限の大きさに圧縮することも有効な手段です。再三述べている通り、重たい画像はページの読み込み時間を長くします。この最たる要因を見直すだけで改善が見込めるでしょう。

    ブラウザキャッシュを用いる

    WEB上にはキャッシュという機能があります。ブラウザ上で行われる一時的なデータ保存により、1度訪れたことのあるページに再度アクセスするとき、以前の訪問時よりスムーズにアクセスできる仕組みです。ブラウザキャッシュを利用すれば、さらにページを素早く表示させることができるでしょう。方法としては、「.htaccess」というファイルに指定のコードを入力するだけなので非常に簡単です。

    サーバのスペックを上げる

    ページをアップしているサーバのスペックを上げることで、ページの表示速度を上げるという方法もあります。もし、アクセスが増加したことによりページの読み込みが不安定になり表示速度を遅くしているのであれば、現状より容量が大きくスペックの高いサーバに変更してみてください。通信の高速化に伴い、スピードアップが可能になります。

    サーバが落ちてしまい、復旧までユーザーを呼び込むことができないとなると大きなダメージです。表示速度以前に、サーバに対する不安は早めに解消しておくことをおすすめします。

    AMPでページスピード高速化

    AMPでページスピード高速化

    モバイルページを高速に表示させるための手法としてAMP(Accelerated Mobile Pages)と呼ばれるフレームワークの活用が挙げられます。
    これは、大まかに「AMP HTML」「AMP JS」「AMP Cache」の3つの要素から構成されるものです。
    JavaScriptの制限やWebサイトをいちいち読み込ませることなく保存上のキャッシュだけでコンテンツを返す(表示させる)など極力負荷を軽減する仕様となっています。
    このように、リソースサイズを静的に規定するAMPによって、読み込み時間を省くことが可能です。
    サイトの構造が複雑になりすぎるとうまく機能しないケースもありますが(過去にはECサイトやポータルサイトで露見されました)、ニーズは高くさまざまな媒体で活用されています(代表的なメディアは食べログ、マイナビニュースなど)。

    PWAの導入でUX向上

    PWAの導入でUX向上

    PWA(Progressive Web Apps)とは、ずばり、アプリさながらのページスピードを可能とするWebサイトの機能です。
    仕組み上(実装されるのは'/service-worker.js')、キャッシュによって高速化を実現。
    オフラインでもサイトを利用できるため、データサイズやインターネット環境に悩まされることなく、スムーズな閲覧に寄与します。
    当然、UX向上につながるといってもいいでしょう。

    なお、その他のメリットとして、ダウンロード無しであること、プッシュ通知の配信が可能になること(許諾は必要)が挙げられます。

    ページ表示速度を改善し多くのユーザーを呼び込もう

    今以上にもっと多くのユーザーにページを閲覧してもらうためには、表示速度の確認と改善は重要です。スピードを遅くしている理由はここまでお伝えしてきたようにいくつもの要因が存在します。ページやサイト全体を分析したうえで、適した改善方法を探っていきましょう。
    そういうわけで、本記事を参考に、ページ表示速度の見直しを図り、よりユーザーの満足度の高いサイト作りへアプローチしてみてください。

    (本文:イケダ)

    SHARE

    PLEASE CONTACT US

    サングローブのサービスにご関心のある方は、
    いつでも下記のボタンからお問い合わせください。

    Go to TOP
    Go to TOP