Webページの表示速度を改善するには？PageSpeed Insightsでよく提案される改善項目と対応方法を解説

気になったWebページを訪れたのに、なかなか表示されずイライラしたり、待ちきれず離脱してしまった経験は誰にでもあるでしょう。

表示速度が遅いページはユーザーの離脱率を高め、プロモーションの成果にも悪影響を与えることがあります。

ページの表示速度を計る方法としては、Googleが提供する無料ツール「PageSpeed Insights」を使うのがオススメです。ページの表示速度を簡単に測定することができ、改善方法のアドバイスも提案してくれます。

今回は、そんなPageSpeed Insightsの診断結果でよく提案される表示速度の改善方法について、詳しく解説します。

PageSpeed Insightsとは？

PageSpeed Insightsは、診断したいページのURLを入力するだけで、ページの表示速度に関する診断を受けられる無料のオンラインツールです。

デスクトップ版とモバイル版の両方で表示速度を0～100のスコアで判定し、表示速度が優れているほど高いスコアになります。

Yahoo!のトップページを診断してみた図

画像引用元：PageSpeed Insights

PageSpeed Insightsから提案される改善項目

診断結果に基づいて、ページの表示速度を改善する具体的な提案を受け取ることができます。

多くのページの診断結果に出てくる項目は、大きく分けると「画像のサイズや形式に関連するもの」と「コードの書き方に関連するもの」に区別できます。

私の経験上ですが、具体的な項目としては以下の6つが頻出かつ改善幅が大きいケースが多いです。

しかし、改善できる項目の多くは、対応にデザインやコーディングの知識が求められます。

診断で改善の余地があることまでは分かっても、具体的なタスクに落とし込んだり、誰に相談すると解決するのかを判断するのは難しいですよね。

PageSpeed Insightsから提示される改善項目は他にも多くありますが、この記事では上記の改善項目6つについて、それぞれの概要や具体的な対応方法を解説していきます。

画像のサイズや形式に関する改善項目

まずはページに表示される画像に関する改善項目を解説します。

特に広告などに使用するランディングページは、購買意欲をかきたてるために多くの画像を掲載することが多く、その分ページの表示も遅くなりやすい傾向です。そのため、画像の作り方に問題があると、1つ1つの画像のファイルサイズの肥大化が積もり、表示速度に大きな影響を与えてしまいます。

適切なサイズの画像 / 効率的な画像フォーマット

この2項目は一緒に対応すべきものなので、まとめて解説します。画像の最適化にあたって、まず知ってほしいのは以下の2点です。

つまり、必要以上に高画質だったり大きな画像を使用している場合や、適さないフォーマットで作成された画像を多様していると、表示速度が遅くなってしまうのです。

適切な画像サイズとは

シンプルな話ですが、ユーザーがページを閲覧している端末よりも画像が大きい場合、不要なサイズ分だけ削減する余地があります。

画像サイズは最大でも、iPhoneなどで使用される高解像度のディスプレイ向けに、デバイスの画面サイズの3倍もあれば十分です。2023年4月現在で最も大きいiPhoneであるiPhone 14 Pro Maxを基準にすると、画面幅428pxの3倍で横幅1284pxあれば、Webに掲載する写真としては十分ということになります。

また、高解像度のディスプレイ向けと、通常のディスプレイ向けで異なるサイズの画像を指定することも可能です。通常のディスプレイで閲覧しているときに、不必要に大きな画像を読み込まないようにもできるのです。画像の出し分けに関してはコーディングを対応してくれる人に相談すると良いでしょう。

画像の幅は1200px程度あれば十分である一方、スマホのカメラやデジカメなどで撮影した写真は、そのままだと幅3000～4000px以上あり、過剰であることが分かります。

画質を落としてファイルサイズを削減する

画像サイズを必要十分なものに抑えたら、画質も同じく調整します。写真は高画質にするほどファイルサイズが大きくなりますが、画質についても必要以上に良くなっているケースが本当に多いです。

例えば私がスマホで撮影した写真は、そのままだと幅3024px 高さ4032px、ファイルサイズは591KBありました。

これが、幅1242px 高さ1656pxにリサイズすることで419KBになります。さらに、目立たない範囲で画質を落としたら211KBになりました。リサイズと画質の調整で、元のデータの1/3近くまで削減できたことになります。

もちろん、目に見えるレベルで画質を落とすことは、ユーザー体験の悪化を招きます。写真の見栄えに問題が起こらない範囲で画質を調整してください。

画像1枚だと約400KBの削減ですが、仮に同じくらい無駄がある画像ファイルがページに100枚あった場合、40MBもの無駄な読み込みになりますから、ページを閲覧する環境次第では大きなストレスになってしまいそうです。

適切な画像フォーマットとは

Webで使用する画像フォーマットにはいくつか種類がありますが、代表的なのは「JPEG」「PNG」「GIF」の3種類です。

それぞれ、以下のような特徴があり、適したフォーマットで保存することで、高画質かつファイルサイズも軽くできます。反対に、適さないフォーマットを選択してしまうと低画質なのにファイルサイズが重くなってしまいます。

適切なフォーマットの判断に迷ったら、以下のフローチャートに沿って決めてみてください。さきほど例にあげた猫の写真であれば、JPEGが適切だと判断できます。

今回紹介した、画像フォーマットの選び方、専用ソフトを必要としないフォーマット変換や画質調整の方法については以下の記事で詳しく解説しています。

JPEG・PNG・GIFの違いとは？広告運用者も知っておきたい、最適な画像ファイル形式の選び方

次世代画像フォーマットでの画像の配信

さきほどJPEG、PNG、GIFの3種類からどれを選ぶべきか解説し終えたばかりですが、「WebP（ウェッピー）」など、より高機能な画像フォーマットも存在しています。それが「次世代画像フォーマット」と呼ばれるものです。

次世代画像フォーマットとは

次世代画像フォーマットはその名の通り、JPEGでもPNGでもGIFでもない、新しい画像フォーマットを指します。従来の画像フォーマットと比べると、より高画質かつ軽量なのが特徴です。

これだけを聞くと、全部次世代画像フォーマットにすればいいじゃないかと言いたくなりますが、次世代画像フォーマットはサポートしている閲覧環境が限定される、という弱点があります。

いくら高画質で軽くても、表示されないのでは意味がありません。そのため、PageSpeed Insightsで次世代画像フォーマットの使用が提案されたからと言って「今すぐ導入しよう！」と判断するわけにはいかないのです。互換性を重視するために、現在も多くのWebサイトでは従来の画像フォーマットを使用しています。

次世代画像フォーマットは「WebP」を覚えておこう

次世代画像フォーマットもたくさんの種類があり、それぞれ違った特徴と異なるサポート環境があります。ただ、Googleが開発している画像フォーマットである「WebP」が機能面でもサポート環境でも優秀であるため、ひとまずWebPだけ押さえておけば問題ありません。

2023年4月現在、WebPはInternet Explorer、mac版safari（macOS 11 Big Surより古いもの）を除けば利用が可能です。つまり、Internet Explorerと、少し古いOSのmacさえ気にしなくて良い場合は、積極的にWebPに置き換えても構わないということになります。

参考：WebP をネイティブでサポートしているウェブブラウザを教えてください。

現状はまだまだ次世代画像フォーマットでページを制作する機会は少ないですが、サポート環境の増加により今後増えていくことが予想できます。

また、サポート環境が限られるのが難点である次世代画像フォーマットですが、現状でもWebPのサポート環境ではWebPを使用し、非サポート環境では従来の画像フォーマットを使用するようページを構築することは可能です。

従来の画像フォーマットでは軽量化がどうしても難しい場合、出し分けるためのコーディングの工数、両方の画像を制作する工数（構築フェーズだけでなく運用フェーズも含む点に注意）と相談にはなりますが、いざという時はWebPに切り替える選択肢も持っておきましょう。

WebPの書き出しはデザイナーに相談しよう

WebP形式の画像は、公式サイトのコンバーターを利用して変換するか、Photoshopで書き出すことで作成できます。

参考：WebP コンバータのダウンロード
参考：Photoshop での WebP ファイルの操作

画像データの制作にCanvaを利用している方もいるかと思いますが、現時点でCanvaはWebPファイルを読み込むことは出来ても、作成することはできません。WebPが必要な場合はまずデザイナーに相談してみましょう。

参考：WebPをPNGに無料で変換

コードの書き方に関連するもの

ここからは、いわゆるコーディングで解決できる改善項目について解説していきます。画像の軽量化のように誰でも扱えるツールで解決できるものは少なく、十分な知識が無ければコーダーやエンジニアと連携しながら対応していく必要があります。

オフスクリーン画像の遅延読み込み

ページにアクセスした際、通常だとページ内にある画像を含めた全てのファイルを順番に読み込んでいき、読み込みが完了次第表示していきます。

ただ、この場合だとスクロールしなければ表示されない位置にある画像もいっぺんに読み込んでしまうため、読み込む量が増えて結果的にページがなかなか表示されないことがあります。

画像の遅延読み込みに対応すると、画面をスクロールし、画像が掲載される位置まで到達したタイミングで画像を読み込ませることができます。

画像の遅延読み込みを実装する方法として「lazysizes.js」というJavaScriptが広く利用されています。ここでは実装方法の解説は行いませんが、技術的にはさほど難しくありませんので、コーディングをお願いしている人に相談してみましょう。

※技術的には難しくありませんが、対象となる画像数やページ数が多い場合、単純に工数がかさみます。まずは主要なページのみ実装し、実際の広告パフォーマンスに良い影響がみえてから他ページにも展開するなど、順を追って対応するのも一つです。

レンダリングを妨げるリソースの除外

「レンダリング」とは、1つ前の項目で説明したように、ブラウザがページの情報を読み込んで、ユーザーに見やすい形で表示するプロセスのことを指します。このプロセスの邪魔になる要素を除外することで表示速度を改善するための提案です。

ではどのような要素がレンダリングを妨げるのかというと、CSSやJavaScriptといった外部ファイルの読み込みが該当します。レンダリングはソースコードの先頭から順に行われるので、ページのファーストビューのように重要でいち早く表示させたいコンテンツよりも上部に外部ファイル（さほど重要でないものも含めて）が記述されていると、重要な部分の表示が後回しになってしまうのです。

対応方針として、以下の3通りのやり方が考えられます。

それぞれ一長一短があり、読み込み速度の面では改善されても、元々の機能がうまく動かなくなってしまう懸念もあり、どの方針を選ぶにせよ慎重に対応する必要があります。

「レンダリングを妨げるリソースの除外」によって大きな表示速度改善が見込める場合、まずはコーダーやエンジニアに相談のうえ、対応に掛かるコストやリスクをすり合わせることから始めてみてください。

使用していない JavaScript（またはCSS）の削減

使用していないファイルがあればソースコードから削除してください。余計なファイルを読み込まない分だけ、表示速度が改善します。

例えば導入していたアクセス解析ツールを解約した後に、導入の際に設置したJavaScriptなどのファイルが残ったままになっていると、ツールを利用していなくてもページにアクセスするたびに不要なJavaScriptを読み込ませてしまうことになりますよね。

長年の蓄積で、まるで秘伝のタレのように誰も用途が分からないファイルを大量に読み込んでしまっているページもあるのではないでしょうか。

使用しないJavaScriptやCSSの読み込みをやめるには、ソースコードから該当のファイルを読み込む記述を削除するだけです。

まとめ

PageSpeed Insightsでよく見かける改善項目には、画像に関するものとコードに関するものがあり、画像に関するものはある程度確実に対応可能なことが分かってもらえたかと思います。

一方、コードに関するものは表示速度以外へ与える影響も多く、工数やリスクも天秤にかけたうえで対応すべきかの判断をする必要があります。

デザイナーやコーダー、エンジニアなど、領域ごとにどのような人たちを頼るべきなのか的確に判断していく力は、今後マーケティングの業務でもますます求められていくでしょう。