Webページの表示スピードを改善させる方法・手順をより分かりやすく解説
こんにちは！ TANE-beマーケターです。
今回は、新たに導入されたWebページの表示スピード改善について解説します。
※本記事には、サイトが大きく崩れたりエラーが起きる可能性のある作業が含まれます。
作業する場合は注意点をよく読み、危険性を理解した上で、ご自身の責任で行なっていただくようお願いいたします。
本記事のターゲット
- WordPressで作ったWebサイトのページスピードを高速化したい人
- ページスピードの改善を今すぐ実践したい人
本記事で解決する疑問
- ページスピードの高速化に関する具体的な手法
- 高速化におすすめのツールやWP用プラグイン
本記事では、以下のポイントについて解説します。
- ページスピードの高速化に関する概要
- 画像の最適化方法
- WordPressでキャッシュクリアを行う方法
- それぞれのおすすめプラグイン
注意点 （※作業前に必ずお読みください）
作業を試す場合は、着手前に必ずバックアップの取得をお願いいたします。
またバックアップを取った場合でも【 元の状態に戻せない作業も含まれている 】ため、十分な知識を持った方が作業をするか、または知識のある方に依頼するようにお願いいたします。
下記の作業を行いサイトに不具合が生じても、作業後ではサイトを元に戻すことができない場合があるのでご注意ください。
Webサイトのページスピードを改善する重要性
Webサイトのページスピードが遅いことで発生するデメリットや、改善で得られるメリットについては以下の通りです。
ページスピードに関する基礎知識や、PageSpeedInsightを用いたページスピードの確認方法は以下の記事をご覧ください。
ページスピードが遅いことによるデメリット
- SEO対策に悪影響を与える
- 離脱率が上昇する
- 管理コストが高くなる
ページスピードが遅い原因
- 使用されている画像が適切でない
- フォントの指定が適切でない
- キャッシュに関する設定が適切でない
- 外部コンテンツが多い
- JavascriptやCSSの記述が多い
- 効果測定用のタグを多く設置しすぎている
- サーバーとの通信環境が悪い
ページスピードを改善するメリット
- 検索時に上位表示されやすくなる
- ユーザーの満足度が向上する
- コンバージョン率が向上する
ページスピードを改善する方法
- リソースを圧縮する
- 画像を最適化する
- リンク先ページのリダイレクトを使用しない
- キャッシュを削除する
- サーバーの応答時間を短縮する
- スクロールせずに見える範囲のコンテンツサイズを削減する
本記事では、上記からページスピードを改善する方法に着目して、解説します。
リソースを圧縮する方法
GZIPを使用したリソース圧縮方法をご紹介します。
一般的な方法は、FTPソフトで取り出した「.htaccess」にプログラムの処理方法を指示するディレクティブを記述することです。ルートディレクトリにある.htaccessをダウンロードして、圧縮させないファイルと、mod_deflateがサーバーにある場合は圧縮することを記述します。
コードの記述例は以下の通りです。
記述方法は対応するサーバーごとに異なる場合もあります。また、複数の記述方法が考えられるものは2パターンを載せています。
<IfModule mod_expires.c>
#テキストファイルを圧縮
AddOutputFilterByType DEFLATE text/plain
#HTMLファイルを圧縮
AddOutputFilterByType DEFLATE text/html
#CSSファイルを圧縮
AddOutputFilterByType DEFLATE text/css
#XMLファイルを圧縮
AddOutputFilterByType DEFLATE text/xml
#XMLファイルを圧縮（サーバーごとに上のものと使い分け）
AddOutputFilterByType DEFLATE application/xml
#XHTMLファイルを圧縮
AddOutputFilterByType DEFLATE application/xhtml+xml
#RSS形式のXMLファイルを圧縮
AddOutputFilterByType DEFLATE application/rss+xml
#JavaScriptファイルを圧縮
AddOutputFilterByType DEFLATE application/javascript
#JavaScriptファイルを圧縮（サーバーの規定ごとに使い分け）
AddOutputFilterByType DEFLATE application/x-javascript
</ifModule>ただし、画像データに関しては、はじめから独自の圧縮が施された状態です。
そのため、画像は圧縮対象から除くようにしましょう。
画像に最適なファイル形式を選定する方法
画像に最適なファイル形式を選ぶことで、読み込み時間を短縮できます。それぞれのファイル形式の特徴をご紹介します。
| 形式 | 概要 |
|---|---|
| JPEG | JPEGは画像サイズが小さいことが特徴で、デジタルカメラのデータにも使われている形式です。lossy圧縮や、lossless圧縮にも使えます。 |
| PNG | PNGは画質が高いことが特徴です。背景を画像から取り除いたり、透明にしたりできます。画質がよいため、容量は大きく、lossless圧縮が必要なときに使われます。 |
| GIF | GIFは動画化された画像を表示できることが特徴です。lossless圧縮にのみ対応しています。ファイルの容量も比較的小さいため使いやすいでしょう。 |
| SVG | SVGはロゴやシンプルな画像に使われます。図形やテキスト、線やカーブの要素を含んでいることが特徴です。 |
WordPressのプラグインで画像圧縮を行う方法
画像の圧縮をWordPressのプラグイン経由でしてみましょう。プラグインとは、拡張機能のことを指します。プラグインを使うことで、簡単な操作で画像の圧縮が可能です。
ここでは、画像圧縮の方法を具体的にご紹介します。
TinyPNG – JPEG, PNG & WebP image compression
「TinyPNG – JPEG, PNG & WebP image compression」は、非常に扱いやすい画像圧縮プラグインです。
基本的な情報は以下の通りです。
| 項目 | 画像圧縮プラグイン |
|---|---|
| 対応できるファイル形式 | JPEG、PNG、WebP images. |
| 一括処理 | 可能。1ヶ月に500枚まで |
| リサイズ | 可能 |
| 過去画像の一括変換 | 可能。1ヶ月に500枚まで |
| おすすめポイント | プラグイン導入前の画像も圧縮できる |
以下では「TinyPNG – JPEG, PNG & WebP image compression」で画像圧縮をする手順について解説します。
手順
WordPress内の「プラグイン」メニュー内にある「新規追加」をクリックし、検索ボックスで検索しましょう。そして「今すぐインストール」をクリックし、「有効化」します。
次にアカウント登録です。「設定」メニューからTinyPNG – JPEG, PNG & WebP image compressionを選択し、名前やメールアドレスを登録します。
登録ができたら、各種設定を行いましょう。圧縮画像のサイズや画像のサイズなどを選択します。
画像を圧縮するためには、一括で圧縮したい場合「メディア」→「Bulk Optimization」を選択します。そうすると、画面下部に青いボタンが表示されるため、ここをクリックします。
一個別で圧縮したい場合は、「メディア」→「ライブラリ」の順に進みましょう。該当の画像の右横にある「Compress」のボタンをクリックすれば圧縮できます。
不要なリダイレクトを減らす方法
不要なリダイレクトを減らすことでも、表示スピードを向上させることが可能です。
リダイレクトとは、以前使用していたURLにアクセスしたユーザーを、新しいURLに自動的に移動させることです。
リダイレクトは主に、Webサイトをリニューアルしたり、ドメインを変更したりなどでURLを変更した際に使用されます。
この章では、リダイレクトを減らす方法について解説します。
リダイレクトチェーンとは
リダイレクトチェーンとは、2つ以上のリダイレクトが重なり連なっているもののことです。複数のリダイレクトが鎖のように連なっているため、リダイレクトチェーンと呼ばれます。
このようなリダイレクトチェーンは、SEOの観点からみてあまり好ましくないといえるでしょう。理由としては、リダイレクトでは複数ページのアクセス処理を行うため、時間がかかってしまい、サイトの表示速度を遅くしてしまうためです。
リダイレクトがいくつも連なっているリダイレクトチェーンでは、より多くの時間がかかってしまいます。
手順
不要なリダイレクトを減らすためには、リダイレクトチェーンを修正しましょう。不要なリダイレクトの削除ができれば、リダイレクトチェーンは簡単に是正できます。
リダイレクトには、301リダイレクトと302リダイレクトがあり、そのリダイレクトが一時的なものなのか、永続的なものなのか次第でどちらを使用するかが変わります。
301リダイレクトの整理
Screaming Frog SEO Spider を使用して、サイト内にあるリダイレクトチェーンを洗い出します。メニューの「Reports」→「Redirect Chains」を選択しましょう。そうすることで、リダイレクトチェーンのアクセスレポートが作成されます。
作成されたレポートから、不要なリダイレクトを探し、削除しましょう。
WordPressのキャッシュを削除する方法
表示スピードを遅くしている原因の1つに、WordPress内のキャッシュが貯まり過ぎて、処理が遅くなっていることが挙げられます。
この章では、WordPressのキャッシュ削除は、どのように行えばよいのかについてご紹介します。
WordPressでキャッシュ削除のプラグインを使用すると、サイトで不具合やエラーが起きる可能性もあるので、十分注意して作業を行うようにお願いいたします。
キャッシュとはWebページに一時的に保存される記録
タイトル通り、キャッシュとはWebページに一時的に保存される記録のことです。キャッシュが保存されることにはメリットもあり、デメリットもあります。
キャッシュが保存されることのメリットは、データを保存してもらえるため、ユーザーが以前サイトを訪れた際にサイト内で選んだデータがそのまま残ることです。
次に保存されるデメリットは、以前保存した時の状態のまま表示されるため、コンテンツが更新されてもすぐには反映されないという点です。ページの最新状態を確認したいときは、キャッシュを削除する必要があります。
WP Super Cacheを用いる
WordPressのキャッシュ削除機能を利用するのではなく、「WP Super Cache」と呼ばれるプラグインの使用がおすすめです。
WP Super Cacheは静的にHTMLを読み込むため、表示速度が速いことが特徴です。以下に基本情報をまとめました。
| 項目 | キャッシュプラグイン |
|---|---|
| 操作性 | 比較的簡易的 |
| 費用 | 無料 |
| おすすめポイント | HTMLファイルを静的に読み込むため、表示速度がはやい |
手順
WordPress内の「プラグイン」メニューの「新規追加」をクリックし右上にある検索ボックスに「WP Super Cache」と入力しましょう。
その後、右上にある「今すぐインストール」と書かれたボタンをクリックします。正常にインストールできたら、インストールのボタンが「有効化」という表示に変わるため、これをクリックします。
「設定」メニューからWP Super Cacheを選択し、簡易設定と詳細設定をしましょう。
簡易設定の方法
「簡易」を選択し、「キャッシング利用」にチェックを入れます。次に「ステータスを更新」をクリックしましょう。
詳細設定の方法
「詳細」を選択し、括弧で「推奨」と記載されている項目全てにチェックを入れます。これで、「WP Super Cache」が利用できます。
サーバーの応答時間を短縮する方法
Webページの表示スピードをあげるためには、サーバー本体の強化が最も重要だといえるでしょう。
この章では、サーバーの応答時間を強化する方法について解説します。
PHPのバージョンアップ
1つ目の方法として、PHPをバージョンアップさせることがあげられます。これによって、サーバーの応答時間を短縮できる可能性があります。PHPとは、サーバー側で使われているプログラミング言語のことです。
サーバー側の言語をバージョンアップさせることで応答が速くなると考えられます。
レンタルサーバーのサイトにアクセスし、PHPが更新バージョンアップできるかを確認しましょう。
サイトが大きく崩れる、エラーが出る、フォームが動かなくなるなどの可能性があります。
サーバーによっては、一度バージョンアップすると元に戻せなくなる場合もあります。
また、意図しない別サイトへの影響が発生し、そちらのサイトが見れなくなる・フォームに不具合が出る等の可能性もあります。
必ずそれぞれの作業の意図がわかる、専門的な知識のある人が行ってください。
例として、Xserverの画面でご紹介します。
まず、アカウントにログインし、「PHP Ver. 切り替え」をクリックしましょう。
ドメイン選択画面が表示されるため、切り替えたいドメインを選びます。
次に、プルダウンから、好みのバージョンを選択しましょう。サイトから推奨されているものもあるので参考にしてみてください。
これでPHPのバージョンアップは完了です。
スペックの高いサーバーへ切替
2つ目の方法として、スペックの高いサーバーへ切り替えることがあげられます。つまり、現在使用しているレンタルサーバーから、より高性能な他のサーバーに乗り換えるということです。
サーバーにもそれぞれ特徴があります。現在使用しているサーバーの処理速度や費用対効果などを見直し、より高い効果が得られるサーバーは他にないかを探してみましょう。スペックの高いサーバーに切り替えることで、サイト全体の表示速度を向上させる効果に期待できます。
スクロールせずに見える範囲のコンテンツサイズを削減する方法
Webサイトを構築する際、スクロールせずに見える範囲に重要なコンテンツを配置したいという人は多いでしょう。そのためには、コンテンツが最初に読み込まれるようにHTMLを校正することが重要です。
ファーストビューで読み込める範囲を優先的に記述し、不要な部分は削除しましょう。見える範囲内に、重要コンテンツを配置するようにHTMLを記述します。
ページ高速化に有効なWordPressのプラグイン「Autoptimize」
ページの表示スピードを高速化させるためには「Autoptimize」が有効です。これはWordPress内のソースコードを圧縮し、速度をはやめるプラグインです。具体的には、JavaScriptやHTML、CSSや画像を最適化したり、スペースや改行などを削除したりして表示スピードを大幅にアップさせられます。
コードの圧縮は、場合によってはそれ以降のサイトのリニューアルや更新などが難しくなる、サイト全体が大きく崩れる可能性があります。
十分注意して行ってください。
設定方法は、まずはプラグインを導入し、「設定」メニューから「Autoptimize」を選択しましょう。次に、JavaScript、HTML、CSSの3つ全てで「最適化」にチェックをします。JavaScriptとCSSは「連結する」のチェックを外し、同じ要領で画像の最適化もしましょう。このとき「画像の遅延読み込みを利用」にチェックを入れます。
最後に、ここまでの変更を保存すれば設定は完了です。
まとめ
自身のWebサイトの表示スピードが遅くても、原因が分からない、どのようにすれば改善できるかが分からないと感じている方は、多いのではないでしょうか。
自身のWebページの表示スピードが遅いと、サイトに訪れてくれたユーザーに迷惑がかかってしまいます。
一方で、スピードを高速化させるためにできる対策はたくさんあります。
ページスピードが遅いことにお悩みなら、ユーザーがサイトをストレスなく利用できるように、改善できる箇所を探すことが重要です。
この記事の執筆者
