Webサイトの表示速度改善をしよう！

ホームページを見ていて、なんだか読み込みが遅いなぁ・・・と思った事ありませんか？ユーザーにとってもWebサイトの表示速度が遅いことはストレスになりますが、SEO対策としてもページの表示速度を改善することはとても重要なことです。
今回はそのWebサイトの表示速度についてサイトを作り上げるWebデザイナーが取るべき対策をご紹介したいと思います。

ページの表示速度がもたらす影響

実際に、ページの表示が遅い場合どのようなデメリットがあるのでしょうか？まず、ページの読み込む速さは、Googleの検索順位を決定付ける指標のひとつとされています。表示速度が速ければ速いほど評価は高く、検索順位が上がる要因のひとつになりえます。またページの表示スピードは、コンバージョンにも深く関係すると言われており、「1秒のページスピードの遅延で、コンバージョンの7%減少する結果に」と言われることもあるようです。
ページの読み込み時間を短くすることによって、ユーザビリティも向上できます。

どうやってページの読み込み速度を調べるのか？

Google推奨のページ表示速度チェックツールがあります。ひとつはGoogleアナリティクスのサイト速度です。アナリティクスを導入しているサイトであれば誰でもこちらは見ることが可能です。
もうひとつは、GoogleのPage Speed Insightsです。こちらはサイトのURLを入力するだけでページ速度のスコアと改善方法のアドバイスをしてくれます。モバイルとPCでそれぞれ出してくれるのでとっても便利です。

サイトを高速化する具体的な方法

では、どういいた点を改善していけば、サイトを高速化でき、表示速度を改善していけるのか？先ほどあげたPage Speed Insightsで改善案として出されるものをご紹介していきたいと思います。
[auth]

画像を最適化しよう！

画像ファイルの容量を減らすことは大きくページの表示速度に関係します。ご存知だとは思いますが、必要以上にサイズが大きな画像は表示に時間がかかります。最近では画像を全画面表示で大きく表示させるようなデザインもよく見かけますが、そちらも多用してしまうとどんどんページの表示速度が落ちてしまうので、画像のサイズを考えて加工することが必要です。サイトで使用する画像のサイズに合わせて最適なサイズに画像をトリミングすることや、できるだけjpgを使うことも、大事ですね。

画像のトリミングに関しては、実際に試すとわかると思いますが、大きなサイズの画像をHTMLやCSSで小さなサイズを指定して縮小してみせることによって画像がぼやけたように見えます。ユーザーにとっても画像を見れるのは当然良いことですし、小さなサイズを指定することによって、ブラウザでは、一度画像を取得した後にリサイズを行うので再計算の時間がかかりますので画像サイズに関しては制作時に徹底して行っていきたいところですね。

サーバーへのHTTPリクエストの回数を最小限にしよう！

ページの表示時間の大半はページの画像、スタイルシート、スクリプト、Flashなどのパーツをダウンロードする時間だと言われています。これらの要素はそれぞれに対して1回ずつ
サーバーへHTTPリクエストが送信されます。ページの要素が多ければ多いほど表示されるのに時間がかかります。

サイトのデザインがシンプルであればあるほど、これらの要素も少なくなってくるのでいいのですが、デザインをシンプルにすることが難しいサイトももちろんあるでしょう。そういった場合は、最低限、できるだけ画像ではなくcssでできるものはcssですることや、複数のスタイルシートを使わない、スクリプトを減らし、読み込む順番を遅くするため、ページの最下部に記述することなどは意識して対応するといいでしょう。

WordPressの場合はプラグインをチェック！

WordPressを用いたサイト構築はとても多く、制作している側ならきっとおわかりだとは思うのですが、プラグインって、本当に助かるのです。カスタマイズの点でいうとなかなかなのですが、システムに明るくなくても、ある程度プラグインで対応できてしまうことも多々ありますよね。

ただ、このプラグイン、データ量が大きいこともありWebページの表示速度にそこそこ悪影響をもたらします。不要なプラグインは削除することはもちろんですが、できるだけプラグインを使わないことも表示速度を改善する一歩になります。プラグインなしでも解決できる方法が最近では検索すれば結構出てくることも多いので、Webページの表示速度に悩んだ場合は一度そちらも見直して見ると良いかもしれません。

見直しの方法としては、プラグインをひとつずつ無効化して、表示速度を計測していくのがわかりやすいかと思います。サイトのスピードを落とす原因となっているプラグインを探しあて、そのプラグインを使わずに対処することで表示速度の改善につながります。

ブラウザのキャッシュを活用しよう！

サーバーでブラウザのキャッシュを有効にしましょう。Webサイトを訪問したときにそのページの要素がキャッシュ、または一時ファイルとしてハードディスクに保存されます。そうすることによって、次に同じサイトを訪れたとき、ブラウザはサーバーにHTTPリクエストをもう一度送ることなく表示することが可能です。

jsやCSSファイルを軽量化しよう！

余分なスペースや改行、インデントなどの不要なバイトを取り除いていきましょう。javascriptやcssの記述なんて微々たるものと思われる方も多いかもしれません。しかしながら、ページ数の多いWebサイトやデザイン性の高いWebサイトほどjsファイルやCSSファイルのデータ量も大きくなってしまい読み込み時間に影響するほどのサイズになってしまうのです。

圧縮をかけることで改善されるのでぜひ活用しましょう！よくxxx.min.jsやxxx.min.cssなどというファイルを見かけることがあるかもしれませんがそういったファイルのminはminify(圧縮化)の略で無駄な改行や余白やコメントが全て削除されたファイルを表しています。

実際にファイルを開くとわかりますが、改行がほぼ（もしくは一切）ないファイルです。CSS/javascriptファイル minify化ツールもいくつかありますのでご紹介させていただきます。

・CSS Compressor
・Online JavaScript/CSS/HTML Compressor
※いずれも海外のサイトなので圧縮化で使用する際には必ずバックアップをとっておきましょう！

小技として・・・CSS　スプライトを使ってみよう！

CSSスプライトってご存知でしょうか？方法としては結構前からある方法ではあるのですが、個人的にはあまり好きではありません・・・。ただ、この方法を使うことによって、画像ファイルにリクエストする回数が減るので、Webページの表示速度改善にはつながるようです。簡単にどのようなものか説明すると、サイト内で使っている画像（パーツ）をできるだけ一枚の画像にまとめて、サーバへのリクエスト回数を減らすというような方法です。

画像とCSSだけで高速化が実現できるのでお手軽ではあるのですが、スプライト用の画像を準備するには工夫も必要なため、慣れるまでに時間がかかるかもしれません。バナーなどでホバー時に画像が変わるものなどでよく使っているのを見かけます。通常時の画像とホバー時の画像を1枚の画像にしてしまい、cssで画像置換を行なっていきます。

まとめ

いかがでしたでしょうか？特にWordpressを使ったサイト構築ですと、ページの高速化で悩まれる方が多いのではないでしょうか？いろんなことが実現できるWebサイト制作ではありますが、いろんなものを使えば使うほどページの読み込みに時間がかかってしまうので、よりよいWebサイトを作り上げていくには、サイトの高速化について考慮していくことも必要だと思います。どれも地道な作業ではありますが、ユーザビリティ向上のため、是非実践してみてください！
[/auth]

マーケティングでお悩みでしたら、
Bigmacにお任せください。