ヤフージャパンプレミアム広告賞受賞

自社書籍

新卒採用情報

長期インターンシップ募集

採用情報

Bigmac 社長ブログ

スタッフ厳選!!おすすめ情報

ITAL株式会社

twitter
@Bigmac_work
google+
rss
rss
a
follow us in feedly
hatena.bookmark
このエントリーをはてなブックマークに追加

おすすめ情報

おすすめ情報

2017年2月5日

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

speed-up-your-website

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

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

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

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

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

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

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

画像を最適化しよう!

画像ファイルの容量を減らすことは
大きくページの表示速度に関係します。
ご存知だとは思いますが、
必要以上にサイズが大きな画像は表示に時間がかかります。
最近では画像を全画面表示で大きく表示させるようなデザインも
よく見かけますが、
そちらも多用してしまうと
どんどんページの表示速度が落ちてしまうので、
画像のサイズを考えて加工することが必要です。
サイトで使用する画像のサイズに合わせて
最適なサイズに画像をトリミングすることや、
できるだけ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サイトを作り上げていくには、
サイトの高速化について
考慮していくことも必要だと思います。
どれも地道な作業ではありますが、
ユーザビリティ向上のため、
是非実践してみてください!

このエントリーをはてなブックマークに追加
メルマガ登録