今回も引き続き、別の改善策をお話しします。

前回の記事はこちら⇒WEBを高速化するための改善策

また、前回の軽量化のお話しはhtmlベースでのお話しをさせていただきましたが、

WordPressを使っている方であればプラグインを探して使えば同じことができます。

皆さん、こんにちは。

業務コンサルタントの高橋です。

今回は、キャッシュを活用することによって高速化を図る改善策をお話しします。

ブラウザーのキャッシュを使う

ブラウザーには自分のマシンに画像データなどを蓄積しておくキャッシュ機能があります。

それを一定期間使う設定をしてあげることによってデータの転送量が減り、結果的には

表示されるスピードが速くなるというものです。

実際には下記のようにmod_expiresの設定を.htaccessなどにしてあげます。

<IfModule mod_headers.c>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 1 seconds” // キャッシュの初期化
ExpiresByType text/html “access plus 1 seconds”
ExpiresByType image/gif “access plus 2419200 seconds” // 4週間での設定
ExpiresByType image/jpeg “access plus 2419200 seconds”
ExpiresByType image/png “access plus 2419200 seconds”
ExpiresByType text/css “access plus 2419200 seconds”
ExpiresByType text/javascript “access plus 2419200 seconds”
ExpiresByType application/x-javascript “access plus 2419200 seconds”
ExpiresByType application/javascript “access plus 2419200 seconds”
</IfModule>
</IfModule>

“access plus 2419200″の部分は、”access plus 4 weeks”でもかまいません。

これで、ブラウザーのキャッシュクリアを行うか、強制的なリロードが行われない

限りキャッシュデータが使われるということになります。

4週間というのは例ですので、それぞれのウェブサイトにあったキャッシュ期間

を設定されるのが良いでしょう。

更新比較のETagをオフにする

Etagは、ブラウザー側のキャッシュファイルとサーバ側にあるファイル内容や更新日

などが同じかを比較するものですが、この比較をその都度行っていてることによって

スピードのロスが生じます。

そこで、下記のようにEtagをオフにする設定を.htaccessなどにしておきます。
<ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None

このような感じです。

まだ他にも行えることはありますが、概ねこれくらいのことをしてあげれば

結構改善されるはずです。

（機会があれば、また書かせていただきます。）

前回、今回と、ウェブサイトの高速化改善策に関するお話しをしてきましたが、

まずはご自身のサイトの状況を把握されると良いです。

私の場合は、グーグル社が提供しているデベロッパーツールを使ったりしています。

PageSpeed Insights

一度お試しください。

注：.htaccess は設定ファイルですので、間違った記述をされるとウェブサイトが

表示されなくなります。ご注意ください。

今回は、前回告知しました通り、実際の改善策に関してご紹介します。

前回の記事はこちら⇒WEBの高速化を考慮すべき理由

皆さん、こんにちは。

業務コンサルタントの高橋です。

WEBの高速化を考慮すべき理由に関しては前回の記事をご覧いただくとして、

早速、WEBを高速化するための改善策をご紹介していきます。

１．スタイルシート（CSS）の不要な部分を削除する

WEBを改修しているうちに、以前は使っていたが今は使用していないセレクタが

あったりします。それを見つけて該当箇所を削除します。

これを行うことによってCSSファイルのサイズを小さくしてあげます。

Chromeブラウザーを使っている方は、デベロッパーツールの中にAuditsという

タブがありますので、それを走らせることで確認できます。

２．画像のファイルサイズを小さくする

デザインなどのお仕事をされている方は別として、画像は少々品質を落としても

パッと見はわからないくらいであれば問題ないはずです。

であれば、少々画像のファイルサイズをコンパクトにしてあげれば良いです。

私は画像を使用する都度コンパクトにしています。

ちなみに、TinyPNGとういウェブツールを使わせてもらっています。

TinyPNG のサイトはこちら

３．CSSやJavaScriptのファイルを１つにする

例えば、style.css、common.cssなど、複数のスタイルシートを読み込ませている

場合、それぞれをロードしにいく分ロスがあります。

これはJavaScriptにも同じことが言えますので、JavaScriptも１つにまとめて

しまう方が良いです。

また、他のCSSを読み込むのに＠importを使うのは、スピードのことを考えると避けた方が

良いです。

＠importで指示されたところから別のファイルを参照しますので、それがロスです。

４．html・JavaScript・CSSを圧縮する

html・JavaScript・css、どれも余分なスペースや改行が入っていることが多いです。

それもファイルサイズが大きくなっている要因の１つ。

ですので、その余分なスペースや改行をなくしてしまうのが一番効率がいいわけです。

しかし、手動でやっていると大変手間がかかってしまうので、私は圧縮してくれる

ウェブツールを使って圧縮しています。

Online JavaScript/CSS CompressorやHTML Minifierというウェブサイトで、

貼り付けてボタンをクリックするだけで圧縮してくれます。

Online JavaScript/CSS Compressor のサイトはこちら

HTML Minifier のサイトはこちら

まずは第一段階として、各ファイルサイズをコンパクトにすることをお話ししました。

これだけでも違ってきますので、是非試してみてください。

WEBサイトが今より高速化される。つまり、速く表示されることによって得られる

メリットがあるのです。

皆さん、こんにちは。

業務コンサルタントの高橋です。

WEBサイトを高速化させる理由としては単純です。

UX（ユーザーエクスペリエンス）を考えた場合、タラタラ表示されるWEBサイトと、

瞬時に表示されるWEBサイト、どちらが良いでしょうか？

当然答えは後者になります。

ご自身がインターネットで何かを検索し、結果表示されたいくつかのサイトを

順番に閲覧する際、表示スピードが遅いサイトからはそそくさと離脱してしまった

経験があるかと思います。

これ、早く情報を得たいのにも関わらず、それが得られない状態に気持ちが

次へ行ってしまっているのです。

非常にもったいない機会損失ですよね。

もしこれが、瞬時に表示される良いWEBサイトであったとするならば、そこから

離脱してしまうことはスピードの面に関してはなかったでしょう。

このWEBサイトを高速化することに関してはユーザーにだけメリットがある

わけではありません。

ユーザーに好まれるようになっているWEBサイトであるということは、その分

そうでないWEBサイトと比較した場合には評価は少なからず高くなります。

そうです。いつも言っている通り、ユーザーにとって親切であり、ためになる

WEBサイト作りを心掛けることの一つです。

さて、次回のWEBに関する情報では、実際にどういったことをしてWEBの高速化を

行っていくのかを掲載しますので、よろしければ読んでみてください。