okuden-labo
6/7/2016 - 6:57 AM

[2015年度版]WEBサイトの高速化

[2015年度版]WEBサイトの高速化

2015年度版_WEBサイトの高速化.md
content_copyfile_download
  • Rendered
  • Source

01.サイトのページスピードを確認する方法

まずはサイトのページスピードを下記のサイトで確認しましょう。

サイト表示速度チェックツール

02.CSSの読み込みを最適化する

  • cssからcssをインポートする@importは使わない
  • htmlからcssのインクルードは、＜head＞タグの中などhtmlの先頭近くに置く
  • CSSファイルを1つのファイルにまとめる
  • CSSを圧縮する
  • CSSスプライトでまとめる

03.JavaScriptの読み込みを最適化する

  • htmlからJavaScriptのインクルードは、の直前に書く
  • JSファイルを1つのファイルにまとめる
  • 必要なスクリプトを非同期で読み込む ※<script async>オプションを使うことで非同期にJSを読み込める
  • 外部JSを読み込むscriptタグにはdeferかasync属性を付ける

JavaScript/CSSの圧縮ツール

JavaScript/CSSの圧縮ツール

04.画像読み込みを最適化する

  • アイコン、ロゴは画像を使わずWebフォントを使う
  • 大量に画像がある場合は遅延読み込みにする
  • PNG画像やGIF画像はCSSスプライトで表示する
  • PNG画像を圧縮する
  • JPEG画像を圧縮する
  • 小さいは画像はbase64形式で埋め込む

画像の圧縮ツール

画像の圧縮ツール

遅延読み込み

ページ下部にあるような画像は最初から読み込む必要がないので、「その表示領域（スクロール領域）に入ったら画像を表示する」という指定を行い、遅延読み込みにする。おすすめはjQueryのLazy Loadです。

画像をbase64形式に変換

画像をBase64に変換するツール(data URI scheme)-シングスブログ

05.サーバーサイドの調整

  • hmtl, css, JavaScriptなどのテキストデータはgzip圧縮転送しましょう
  • JavaScriptやcssはhtmlの中にインラインで極力書かずに別ファイルにしてブラウザのキャッシュを効かせましょう
  • ホスティング会社の高速化設定を使う ※エックスサーバーのmod_pagespeed、FastCGIなど

gZip圧縮の設定

gzipで圧縮するファイルは画像以外の、HTML・CSS・JSなどのテキスト形式のファイルです。 ホスティング環境により対応できるサイトとそうでないサイトが変わるかと思います。

gZip通信かどうかを確認するサイトGIDZipTest

gzipをすべてのファイルに適用するには、サーバー側でモジュールを使用します。Apacheの場合は以下の記事を参考にしてください。 http://oxynotes.com/?p=6519

ブラウザキャッシュの設定

CSSやJS、画像などの内容が頻繁に変更されないファイルに関してはキャッシュを効かせることで、ダウンロードを省略でき、高速化することができます。 やり方としてはApacheのモジュールを使ったりすることで設定できます。

.htaccessにおけるCache-Controlの設定

Cache-Control は、サーバキャッシュやリクエスト方法を定義する項目です。

<Files ~ ".(gif|jpe?g|png|ico|js|css|gz)$">
    Header set Cache-Control "max-age=2592000"
</Files>

※2592000は30日なので、86400/日

.htaccessでExpiresヘッダ（有効期限）の設定

下記の仕様でサンプルを作成してみました。

  • デフォルトは30分
  • HTML ファイルは1日
  • gif, jpg, png 等の画像ファイルは7日
  • CSS, JavaScript, PDF等は1ヶ月

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 30 minutes"
ExpiresByType text/html "access plus 1 days"
ExpiresByType image/jpg "access plus 7 days"
ExpiresByType image/gif "access plus 7 days"
ExpiresByType image/png "access plus 7 days"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
</ifModule>

ブラウザキャッシュの設定に関する参考サイト

06 wordpressの高速化

wordpressの高速化についても基本は同じですね。

07.参考サイト