ディスクリプションタグとは
SEO対策
サイトの表示スピードを改善させる方法は？メリットやデメリットもあわせて解説
Googleの検索結果に影響を与える、新しい要因であるコアウェブバイタルが発表されてから、WEBサイトの表示速度への関心が高まっています。
サイトの表示速度を改善させたいと思っているものの、具体的に何をすれば良いのかわからない方もいるでしょう。
そこで、本記事では、サイトの表示速度を改善させる方法とともに、方法ごとにメリット・デメリットを解説していきます。
この記事の執筆者
アダムテクノロジーズ執行役員
SEOコンサルタント
株式会社アダムテクノロジーズ 執行役員。
ユーザーニーズと最も近いSEO対策で、あらゆるビジネスを加速させ、より良い社会の実現を目指す。
入社から5年間で100社以上のSEO対策に従事し、様々なジャンル・キーワードでの上位表示を実現。顧客目線での目標達成にコミットしたSEOコンサルティングが強み。
目次
表示
閉じる
画像を最適化する
最適化とは、表示速度を改善するために適した形式にすることを指します。WEBサイト上の画像を最適化することで、表示速度の改善を期待できます。
画像を最適化する方法は、大きく分けて3つあります。
【画像を最適化する方法の例】
- 圧縮
- 画像フォーマットの変更
- 遅延読み込み
「画像の圧縮」は、画像ファイル自体を加工して軽量化することです。軽量化によって、サイトを管理するサーバーの負荷を軽減できるため、表示速度の改善を期待できます。
次に、「画像フォーマットの変更」は、使用している画像のファイル形式を容量の軽い形式に変更することです。画像の圧縮と同様に、サーバーの負荷を軽減できます。
最後に、「遅延読み込み」は、表示されている範囲外の画像を遅れて読み込ませることを指します。遅延読み込みであれば、一度にやり取りするデータ量を減らせる分、最初の読み込みにかかる時間も減らせます。
なお、「遅延読み込み」に関しては、WordPressのサイトであれば、プラグインを入れるだけで対応可能です。
表示速度を改善する方法の中でも、画像の最適化は比較的導入しやすい方法と言えます。
メリット：画像の形式を問わず対応できる
画像の最適化には、画像の形式を問わず対応できるメリットがあります。画像の形式を問わないということは、ほとんどのWEBサイトに実装できるということです。
たとえば、画像の圧縮であれば、既存のJPEGやPNGを次世代フォーマットの「WebP」「JPEG 2000」「JPEG-XR」に置き換えるだけで、表示速度の改善を期待できます。
【次世代フォーマットの例】
| 名称 | 詳細 |
|---|---|
| WebP | Googleが開発した最新の画像形式。より小さくリッチな画像を表示できる特徴がある。 |
| JPEG 2000 | JPEG規格委員会による新しい画像形式。圧縮率を高めてもブロックノイズやモスキートノイズが出にくいのが特徴。 |
| JPEG-XR | デジタルカメラやPC上で静止画像の運用に使われる画像形式。圧縮効率の高さと低メモリリソースに特徴がある。 |
次世代フォーマットは、それぞれ特徴が異なるため、用途による使い分けがおすすめです。
ただし、次世代フォーマットの対応状況は、ブラウザごとに異なります。実装を検討している人は、あらかじめ Can I useからブラウザへの対応状況を確認しておきましょう。 Can I useにアクセス後、画面上部の入力フォームに画像形式を入力すれば、ブラウザへの対応状況を確認可能です。
デメリット：画像の圧縮やサイズの指定には手間がかかる
画像の最適化のデメリットとして、既存の画像の圧縮やサイズの指定に手間がかかる点が挙げられます。
たとえば、ヘッダーやフッター、サイドバーを除いて平均10枚の画像を使っているページが50ページある場合、最適化が必要な画像は500枚ほどです。最適化とアップロードの作業が1枚あたり5分かかるとして、すべての画像の最適化には2,500分、約41時間にかかる計算になります。
また、画像ごとに最適化の方法が違うなど、作業の自動化が難しい場合には、時間だけでなく手間もかかります。自社内で作業するのが難しい場合には、専門の業者に依頼するのも良いでしょう。
リソースを圧縮する
リソースとは、ページの表示に必要なHTMLやCSS、JavaScriptなどのコードを指します。リソースを圧縮することにより、WEBサイトの表示速度を改善可能です。
WEBページを表示する際には、読み込むリソースのデータ量が少ないほど、サーバーとの間でやり取りするデータ量も減ります。サーバーとの間でやり取りするデータ量が減れば、それだけ表示にかかる時間を短縮できます。
つまり、リソースの圧縮によってデータ量を減らせれば、WEBページの表示速度を改善できるのです。
なお、リソースの圧縮と同様に、不要なリソースの削除も有効です。コメントアウトや以前のコードを残している場合には、バックアップを取った後に削除する方法もあります。
メリット：さまざまなツールで対応できる
リソースの圧縮は、それぞれの形式に応じた圧縮ツールで対応できます。手動で書き換える必要がなく、コードの種類を問わず圧縮可能なため、サイトを問わず実行可能です。
【リソースの圧縮ツールの例】
| 名称 | 対応言語 |
|---|---|
| HTMLMinifier | HTML |
| CSS Minifier | CSS |
| css nano | CSS |
| UglifyJS | JavaScript |
たとえば、CSS Minifierは、スタイルシート内の余白やインデント、余分な改行を削除できるツールです。圧縮したいスタイルシートを直接ペーストすれば、余分な記述が削除されたスタイルシートが出力されます。
また、UglifyJSは、JavaScriptを軽量化できるツールです。WindowsとMacの両方に対応しており、一旦圧縮したコードを圧縮前に戻すこともできます。
ただし、ツールによってはコンパイラなどの開発環境が必要なため、プログラミングの知識がない方には扱いが難しいと言えます。デメリット：確認や管理が難しくなる
実際に人が管理しているコードは、可読性を保つため、改行やインデント、コメントアウトなどを利用している傾向があります。
一方、リソースの圧縮ツールによって出力されたコードは、改行やインデント、余白が削除された状態になっているため、可読性が低い傾向があります。
可読性が低いということは、目視での確認や複数人による管理の難しさにつながります。そのため、ツールによるリソースの圧縮には、確認や管理の難しさというデメリットがあります。
ブラウザのキャッシュを有効化する
ブラウザのキャッシュとは、ブラウザが負荷を軽くするために保存している、過去に訪問したWEBサイトのデータです。ブラウザのキャッシュを有効化すれば、表示速度の向上を期待できます。
PCやスマートフォンからサイトを訪問する際には、利用しているブラウザがサーバーに情報を要求します。ブラウザ上で表示されるサイトは、サーバーから受け取った情報を元に生成されたデータです。
ブラウザのキャッシュを無効にしている場合、サイトを表示するには、訪問のたびにデータの生成が必要です。
一方、ブラウザのキャッシュを有効にしている場合、一度訪れたサイトであれば、データの生成をせずに表示可能です。キャッシュを有効化している状態で訪れたサイトのデータは、あらかじめブラウザ内に保管されているからです。
サーバーから受け取る情報や生成するデータが少なくて済む分、表示にかかる時間も少なくなります。つまり、ブラウザのキャッシュを有効化すれば、表示速度を改善できるのです。
なお、キャッシュと混同されやすい内容として、Cookieがあります。Cookieはサイトを訪問したユーザーのデータのため、サイトのデータであるキャッシュとは異なります。
メリット：サーバーの負荷を軽減できる
ブラウザのキャッシュを有効化した状態であれば、ブラウザにサイトのデータが保管されているため、サーバーから情報を受け取ってデータを生成する工程を省略できます。 仮に、アクセスの集中などでサーバーとの通信が制限されている状態であっても、最後に訪問した状態のサイトを表示できるのです。
一方、情報を送る側であるサーバーは、ブラウザとの情報のやり取りを一部省略できます。
つまり、ブラウザのキャッシュの有効化によって、サーバーの負荷を軽減できるメリットを得られます。
デメリット：更新を反映できない場合がある点
サイトを訪問した際、ブラウザのキャッシュを有効化した状態では、最後に訪問した状態のサイトが表示されます。
仮に、最後の訪問後にサイトが更新された場合は、更新前のサイトが表示されてしまいます。
そのため、ブラウザのキャッシュの有効化には、サイトの更新を反映できていないおそれがあるというデメリットがあります。
更新を反映させるための対策
最新の状態のサイトを表示させるためには、対策が必要です。
【サイトを最新の状態で表示させる対策の例】
| 対策の例 | 詳細 | 方法 |
|---|---|---|
| キャッシュの削除 | ブラウザの設定からキャッシュを削除すること | Google Chrome：ブラウザの右上の三点リーダーから、「その他のツール」「閲覧履歴を消去」を選択後、「閲覧履歴」「ダウンロード履歴」「キャッシュされた画像とファイル」にチェックを入れて、「閲覧履歴データを消去する」を選択する |
| スーパーリロード | ブラウザのキャッシュを読み込まずに最新の情報からデータを生成すること | Windows：「ctrl」+「F5」 Mac：「⌘」+「R」 |
キャッシュの削除は、ブラウザの設定から可能です。キャッシュを削除することによって、ブラウザ内のデータ量が減るため、PCやスマートフォンのストレージの容量を増やせます。
次に、スーパーリロードは、ブラウザのキャッシュを削除せずに、サーバーから得た最新の情報を元にデータを生成する方法です。新たにデータが生成されるため、ブラウザ内のデータ量が増え、PCやスマートフォンのストレージの容量が減ってしまいます。
キャッシュを残しておきたい方にはスーパーリロードを、ストレージの容量を減らしたくない方にはキャッシュの削除をおすすめします。
サイトの表示速度を確認する方法
WEBサイトの表示速度は、ツールを使って確認できます。
【表示速度を計測するツールの例】
たとえば、PageSpeed Insightsは、Googleが提供しているサービスです。サイトにアクセスして、任意のURLを入力すれば、０点〜100点までの点数で表示速度に関する総合評価を受けられます。
総合評価の他にも、「改善できる項目」「診断」といった詳細な評価を受けられるため、「サイトの表示速度を改善したいが何から着手して良いかわからない」といった方は、はじめにPageSpeed Insightsの利用をおすすめします。
まとめ
Googleによるスピードアップデートやコアウェブバイタルによって、WEBサイトの表示速度の重要度が増してきています。
いままでは「ちょっと不自由だけど仕方ない」だった状況が、「改善しなければならない」に変わりつつある状況です。
自身のサイトの改善が必要なのか判断できない場合には、PageSpeed InsightsやTest My Siteなどのツールを使って、表示速度を計測してみるのも良いでしょう。
そのうえで、何から手をつけて良いかわからない方には、弊社では、Webサイトの表示スピードを改善する「WEBサイト表示スピード高速化サービス」をご用意しています。まずは、下記のページから無料で資料をダウンロードしてみてはいかがでしょうか。
WEBサイト表示スピード高速化サービス資料 無料ダウンロードするWordPressのサイト表示スピード改善をするなら「HP爆速くん for WP」
WordPressは世界で40%以上のWEBサイトで導⼊されている無料CMSで、エンジニアでなくても簡単にWEBサイトの構築が可能です。
しかし、⾼度なカスタマイズや表⽰スピードの⾼速化においては、WEBだけでなくWordPressに関する専⾨的な知識が必要で、⼀般的なWEB制作会社やSEO対策会社では対応できない可能性もあります。
WordPressサイトの表⽰スピードに悩む企業の課題を解決するため、SEO技術者集団の「ADAMTECHNOLOGIES 」と、WordPress専⾨家チーム「株式会社e2e」と技術共同開発し、WordPressサイトに特化した表⽰スピード⾼速化サービス『HP爆速くん for WP』をご提供しています。
「HP爆速くん for WP」は、Page Speed Insightsのスコアが上がらなければ一切料金をいただかない、完全成果報酬型のWordPressサイトの表示スピードの高速化サービスです。
「HP爆速くん for WP」の詳細が知りたい方は、下記リンクからご確認ください。
成果報酬型WordPressサイトの高速化サービス 『HP爆速くん for WP』の詳細はコチラ
