Webサイトの表示が遅い！重い！表示速度の改善方法

こんにちは。
大阪でWEBコンサルティングとWEB制作をしているワイズオフィスです。

今回はWEBサイトの表示スピードについて書きたいと思います。

WEBサイトの表示スピードの改善

表示スピードの重要性

まずWEBサイトの表示スピードがなぜ重要なのかをご説明します。
その一番の理由はサイト表示が早い方がユーザーフレンドリーだからです。サイトの表示が遅くいつまで経ってもコンテンツが表示されないサイトより、すぐに表示されるサイトの方がユーザーはストレスなく閲覧できます。そのため、ユーザーのためを思えばサイトスピードを意識することは非常に重要です。

加えてSEO上優位になることができます。
ページの表示速度はSEOの評価において重要な指標となっており、ページの表示速度が遅いサイトは速いサイトに比べて、SEOの評価が低くなってしまいます。
仮に全く同じコンテンツを投稿したサイトがあった場合、ページの表示速度が速いユーザビリティの高いサイトの方が上位表示されることになります。

Googleが発表している「ウェブマスター向けガイドライン」の「訪問者がページを利用しやすいよう手助けする」の項目には、次のように記されています。

ページの読み込み時間を最適化します。表示の速いサイトはユーザーの満足度を高め、ウェブ全体の質を向上させます（特にインターネット接続速度が遅い場合）。

Google PageSpeed Insights

サイトスピードを計測するときに便利なのがGoogle PageSpeed Insightsです。
Google PageSpeed InsightsはGoogleが無料で提供しているツールです。

Google PageSpeed Insightsは、URLを入力するだけでモバイル/PCのそれぞれのページパフォーマンスを測定してくれるツールです。

0~100点のスコアでページのパフォーマンスを測定してくれるうえ、ページ表示速度に悪影響を与えている箇所の改善案も提示してくれます。

 

主な改善箇所

画像や動画の改善

画像や動画を最適化し、ファイルの容量を抑えることで、表示速度を改善することができます。

画像や動画をアップロードする際は下記の点に注意してください。

・適切なファイルフォーマットで保存する
・リサイズを行う

画像、動画はファイルサイズが非常に大きくなってしまっていることがあり、見た目では気が付
きにくいために注意が必要です。

画像や動画が多いサイトなどでは、読み込みのタイミングに時間差を付けるLazy Loadを実装することで表示速度を改善することができます。

サーバーの改善

サイトスピードはサーバーの影響も大きく受けます。

・サーバーの保存形式がHDDなのかSSDなのか
・メモリは十分なのか
・PHPのバージョンは最新なのか

などさまざまな要素があります。 

ソースコードの軽量化

JavaScriptやCSSのコードに含まれる、余分な改行などを削除し、ファイルサイズを軽量化することで、ページの表示速度を改善することができます。

ソースコードが長かったり、無駄な改行の数が多かったりすると、その分読み込むファイルの容量が増えページの表示速度が遅くなってしまいます。

例えば下記のようなコードは読み込み速度に悪影響を及ぼします。

・不要なコメントアウト
・使用していないコード
・ページの表示に影響しない空白・改行

上記のようなコードが記述されている場合は、削除して軽量化するようにしましょう。

AMPの実装

AMP（Accelerated Mobile Pages）とは、モバイル端末でWebページを高速表示するためのプロジェクトやフレームワークのことです。

通常Webページにアクセスする場合、次のステップを踏みます。

1、サイトのサーバーにリクエスト
２、ファイルを受け取る
３、レンダリング
４、ページ表示

とくにリクエストからレンダリングまでの時間が長くかかりやすく、ページの表示速度を左右するポイントになっています。

一方でAMP対応ページの場合は、Webページの情報をGoogle・Twitter側でキャッシュとして保存することができるため、サーバーへのリクエストのステップを削減できます。