「ページの表示速度を改善する方法が知りたい！」
「表示速度をチェックできるツールはある？」
「PageSpeed Insightsを使ってるけど、どうやって改善すればいい？」
SEOを意識している方ならば、このような疑問を持っている方も多いのではないでしょうか。
この記事では、Webサイトのページ表示速度を改善するための基本対策を中心に解説していきます。ページの表示速度を測定できるツールも4つ紹介し、とりわけ重要とされる「PageSpeed Insights」での改善方法も具体的にチェックしていきます。
ページの表示速度の改善は、SEO評価にも影響するといわれており、紹介する内容をしっかり理解することで、今後役立つであろうSEO対策の知識が身につきます。どのような改善施策を試みれば良いのか、1つ1つ丁寧に見ていきましょう。
目次［目次を全て表示する］
ページの表示速度が遅い場合のリスク
ページの表示速度が遅い場合、ユーザーエクスペリエンスの低下が特に問題でとされ、2つのリスクが主に考えられるでしょう。
1つ目は、ユーザーエクスペリアンスの低下によって直帰率が高まるリスクです。ページの表示速度が遅くなると、ユーザーの直帰率は増加傾向にあり、これにくわえて滞在時間や離脱率にも影響が出てくるとされています。
2つ目は、ユーザーエクスペリエンスの低下によってSEO評価が下がり、検索順位が低くなるリスクです。検索エンジンはユーザーの快適な体験を重視しています。そのため、SEO評価基準の1つでもあるページの表示速度が低速と判断されると、検索順位に悪影響を与えることもあります。
これらのリスクから、ページの表示速度が遅い状態を放置しておくメリットはSEOの観点からもほとんどないとされ、ユーザーエクスペリエンスを妨げる弊害として認識しておいた方が良いでしょう。
ページ表示速度を測定できるツール4選
ここまで読むと、自分の担当するWebサイトの表示速度が気になってくるのはないでしょうか。ページの表示速度は、ツールを使えば測定できるため、気になる方はこれから紹介するツールを使ってチェックしてみてはいかがでしょうか。
ここでは、ページ表示速度を測定できるツールを4つ紹介していきます。
1：Google PageSpeed Insights
「Google PageSpeed Insights」は、Googleが開発・提供し、Web制作の現場でもよく活用される測定ツールといわれています。
Google PageSpeed Insightsにアクセスしたら、まずはサイト上部にある「ウェブページのURLを入力」に測定したい有効なURLを入力し、「分析」をクリックしましょう。
測定が終わるとスコア表示され、点数に影響した箇所と改善点が一覧で表示されます。改善点を修正したのちは、再度上記を繰り返し、何度も表示速度をチェックできます。
2：Test my site
「Test my site」もGoogleが提供する測定ツールで、モバイルページの表示速度がチェックできます。競合サイトとの速度を比較したり、速度改善後の費用対効果を見積ったり、ビジネスマーケティングを意識した内容がちりばめられているのが特徴です。
まずは「ドメインを入力してください」に対象のドメイン名を入力し、横にある右矢印で測定を開始します。速度結果では、表示までに費やした秒数とともに、「低速」「平均」「高速」の3段階で判定してくれます。
優先的に改善する点はもちろん、「すべての修正を確認する」で詳細な分析レポートを自身のメールアドレスに送信することで、個別の最適案もチェックできます。
3：Chromeデベロッパーツール
旧DeveloperToolsの「Chrome DevTools」は、Webサイト内のHTMLやCSSを確認する際によく活用されますが、ページの表示速度もチェックすることができます。
まず、「Google Chrome」で測定したいページを表示させ、メニューの「その他のツール」「デベロッパーツール」を選択し、「Chrome DevTools」を開きます。
ウィンドウ上部にある「Performance」を選択し、レコードボタン横の「リロードボタン」をクリックして測定を開始します。
測定後は、「Loading」「Scripting」「Rendering」「Painting」「Other」「Idle」の項目ごとに、見やすいカラフルなグラフで計測結果を確認します。
4：Google Analyticsの使い方
「Google Analytics」は、あらゆる視点からユーザーのアクセス状況を分析できます。SEOを含むマーケティング解析を行う場合に、ぜひ積極的に導入したいツールの1つです。
「Google Analytics」にログインしたら、レポートの「行動」「サイト速度」「ページ速度」でページごとの表示速度を確認していきます。
しかし、そのほかの測定方法と異なり、ユーザー自身のネット環境や通信状況も加味されるため、あくまでも目安として参考程度に留めておくと良いでしょう。
ページの表示速度を改善するための基本対策
ページの表示速度といえば、これから紹介する3つの項目は日頃から意識して対策を講じておくと良いでしょう。常に意識してWeb制作を行うことで、SEO評価で高いレベルを維持しやすくなります。
ここでは、ページの表示速度を改善するための基本対策について紹介します。
画像に合わせて最適なサイズやフォーマットで保存する
画像を使用する際は、最適なサイズで保存しましょう。大きすぎるサイズの画像は、読み込み時に時間がかかり、ページの表示速度に影響する可能性があります。リサイズできるツールを使って、ページに合ったサイズを意識しましょう。
大きい画像を使う場面では、画像圧縮ツールを使ってファイルサイズを小さくすることができます。画像圧縮は「ロスレス圧縮」ともいわれ、画質への影響はできるだけ抑えながら、画像ファイル内に含まれる余分なデータを整えてくれます。
また、画像フォーマットも大切です。BMP、TIFF、PNGといったフォーマットはファイルサイズが大きくなりやすいため、比較的ファイルサイズの小さいJPEG、GIF、WebPなどを検討しましょう。
CSSやJSを減らして負荷をなくす
不要なCSSやJSを減らしてページ表示の負担をなくしましょう。余分な余白や改行を削除することで読み込み時間を短くできます。自身で調整することも可能ですが、CSSやJSを圧縮するツールを活用するのがおすすめです。
不必要な要素を省いてファイルサイズを軽くする
使用されていないにもかかわらず、記述されているコードないでしょうか。不必要な要素がある場合には、できるだけ省いてファイルサイズを軽くしましょう。コードは上から順番に処理される点を考慮して、CSSやJSなどの各記述の効率性を見直すことも大切です。
また、使用されていない外部ファイルが一緒に読み込まれている場合もあります。「Chrome DevTools」の検証ツールを活用して、どの要素が不必要であるかも確認すると良いでしょう。
PageSpeed Insightsでの表示速度改善方法
ページの表示速度が測定できるツールについてはすでにいくつか紹介しましたが、よく使われるであろう「PageSpeed Insights」では、どのような改善方法が提案されるのでしょうか。主に5つの最適案に焦点を絞ってチェックしていきます。
事前にどこをチェックするか把握しておくことで、作業効率も高まりやすく、検索エンジンから評価されるまでの時間を短縮できるでしょう。
ここでは、PageSpeed Insightsでの表示速度改善方法について解説していきます。
画像ファイルをWebPに対応させて改善する方法
画像ファイルをWebPに対応させましょう。
画像を次世代フォーマットといわれるWebPにする方法はいくつかありますが、Googleが発表した「Squoosh（スクオッシュ）」という画像圧縮Webアプリの活用がおすすめです。インターネットのある環境ならば、ブラウザ上で使用できます。
まず、Squooshを開いて、フォーマットを変換したい画像を選択します。そして、メニューにある「Compress」の選択タブから「WebP」を選び、保存ボタン押しましょう。任意の場所にWebPへ変換された画像が保存されます。
ただし、これから普及する段階のフォーマットでもあるため、未対応ブラウザは事前にチェックして使用するようにしてください。
画像要素にloading属性をつけて改善する方法
画像要素にはloading属性をつけましょう。
画像要素にloading属性をつけると、遅延読み込み、つまり画像以外の読み込みから優先して行うことで、ページの表示速度の改善につながります。記述方法は、Imgタグ内に「loading="lazy"」をくわえるだけで実装可能です。
しかしながら、loading属性はファーストビューの画像要素には付加しない方が良いでしょう。ファーストビューにある画像にこれをつけてしまうと、レンダリング完了までに時間を要してしまい、結果的にページの表示速度が悪化する場合があります。
YouTube動画でのiframeを改善する方法
ページにYouTube動画を埋め込むと、読み込みに時間がかかりやすく、ページの表示速度が遅くなりがちです。YouTube動画に関しては、iframeの記述に手をくわえましょう。
その対策としては、先ほども紹介したloading属性をiframeタグ内に記述し、遅延読み込み処理で対応できます。
ファーストビューで、遅延読み込みをするとページ表示速度が低下する恐れがあります。ファーストビューでのloading属性の使用は避け、たとえば埋め込み動画を軽量表示できるJavaScriptライブラリ「Lite YouTube Embed」の活用を検討しても良いでしょう。
WordPressを使用している場合には、プラグインである「WP YouTube Lyte」の導入も検討してみてください。
リソースを圧縮して改善する方法
HTML、CSS、JSといったリソースを圧縮して速度改善する場合には、圧縮ツールを活用していきましょう。
HTMLの圧縮には「HTMLMinifier」、CSSの圧縮は「CSSNano」「csso」の使用がGoogleによって推奨されています。また、JavaScriptのコードを圧縮したい場合は「UglifyJS」「Closure Compiler」といったツールも試してみてください。
ブラウザのキャッシュを活用して改善する方法
ブラウザのキャッシュを活用して、ページの表示速度を改善させましょう。
ブラウザのキャッシュを活用して改善するには、HTMLやCSSといったそれぞれのリソースに、目安として1週間から1年間程度のキャッシュ期間を設定します。
「キャッシュ」はブラウザで表示したリソースをPC内に保存し、再び同じページを表示する際、一度保存したデータを引っ張り出して再利用してくれます。
こうすることで、情報取得のためのサーバーへのリクエスト回数を減らすことができ、ページの表示速度改善につながるでしょう。
マーケティング施策ではページの表示速度の改善が重要！
いかがでしたでしょうか。この記事では、ページの表示速度の改善方法について紹介してきました。
ページの表示速度を改善することで、ユーザーが快適なWeb閲覧を体験できます。これにより、直帰率や離脱率の改善が期待でき、またSEO評価が高まるというメリットも享受できるでしょう。
マーケティング施策では、ページの表示速度の細かい見直しが重要とされています。自身のマーケティング戦略の一環として、紹介した基本対策や測定ツールの導入を検討してみてください。
