WEBサイト構築の素人がサイト表示速度を改善するまで

前回のエントリから 実に4ヶ月ぶりのブログ更新です。
続き物として書くつもりだった前回エントリのタイトルからはそっと「その１」という文字を削除しました。

メインの仕事に余裕ができたので、最近は副業の遠野 民話漬のプロモーションに時間を使っています。
昨年完全無料化で話題になったYahoo!ショッピングのストア構築もさっそく完了しました。
こちら→http://store.shopping.yahoo.co.jp/minwazuke/

かんたんすぐに出店できる「ライト出店」ではなく、月商100万円以上を目指す「プロフェッショナル出店」です。現在の民話漬の規模を考えたらライト出店で十分なのですが、器は大きいほうがいいでしょう。
驚異的なジャンプ力を持つノミでもコップにしばらく入れると、コップの高さ以上には飛べなくなるといいますものね。

Yahooストア構築はマニュアルにそって淡々と進めるだけでつまらなかったので、今回はWEBサイト構築の素人がどうやって自社WEBサイトの高速化をしたかについて書いてみます。

なぜ高速化する必要があるのか？

以前から自社サイトの表示速度がなんとなく遅い気がしていました。
お客さんには少しでも快適に買い物していただきたいですし、サイトの表示速度は検索順位にも影響するそうです。

さっそく現状を把握するためにGTmetrixというサービスで計測してみました。
さてどうでしょう？

案の定、改善余地がありそうです。
「Page Speed」はGoogleのサイト速度計測サービスで結果が「B（80%）」、「YSlow」はYahooのサイト速度計測サービスで結果が「C（78%）」でした。

Yahoo!JapanもGoogleの検索エンジンを使ってますし、まずは自身でもよく使うGoogleの測定結果への対策だけに注力します。
一番気になるのは「Leverage browser caching」、これを解消するのが一番効果がありそうです。

何をすればいいのか？

この「Leverage browser caching」という助言、要はブラウザのキャッシュを効かせたほうがいいよ、ということみたいです。
調べてみるとブラウザのキャッシュを有効化するためには「.htaccess」ファイルにApacheの設定を追記するのが一番簡単そうです。
効果が見込めて実行もしやすい。実施決定！！

ところで.htaccessって？

.htaccessファイルは特定のディレクトリに設置すると、.htaccess内に記述された内容が設置されたディレクトリとその下層のディレクトリに対して適用されるというものです。

.htaccessはどこ？

さて、.htaccessはどこにあるんでしょう？
自社サイトはWordpressにWelcartプラグインを使って構築しています。
Wordpressの場合、インストールしたディレクトリにあるそうです。

FTPはCyberduckというMacのクライアントをつかってます。
Cyberduckで色々と探ってみても見当たりません。

ここでSIerのときにテストでAIXサーバを触っていた頃の古い記憶を呼び起こします。 たしか、コンマで始まるファイルは隠しファイルじゃなかったか！？

そこでCyberduckのメニュー探ると表示メニューにありました。
「不可視ファイルを表示」

無事にファイルを発見。

VIコマンド？

.htaccessをダウンロードし、テキストエディットで編集しようとしましたが、隠しファイルなのでFinderに表示されずに開けない。。。少し調べたところ、Macで隠しファイルを表示させるのは割りとハードルが高そうです。

しょうがないのでターミナルの出番です。もう一度、SIerのときのキヲクをたどる。。。
うろ覚えのVIコマンド。
・「i（Insert）」を押して、挿入モードにしてコピペ！
・「:（コロン）」を押して、指示モードに
・ 「wq(Write, Quit)」で、上書き更新してファイルを閉じる


はぁはぁ♡ 久々のコマンドライン操作に興奮！！


ちなみに追記した内容はこちらです。
画像ファイルとCSSファイルは１週間は再読み込みするな、という命令です。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType text/css "access plus 1 weeks"
</ifModule>

ファイルのバックアップを取って、 編集した.htaccessをアップロードして完了。
さあどうだ！？

結果

「Page Speed」の結果が80%から87%に改善しました。
「YSlow」は全く結果が変わりません。

体感的にもさくさく表示されるようになりました。
めでたしめでたし。

おわりに

今回の改善で画面の表示が早くなった分、今度はFacebookの「いいね！」「シェア」の表示が遅いのが気になり始めました。
これはJavascriptとの同期設定が問題らしいです。次はコレに取り組みます。

ちなみに、現在のGoogle検索ランキングで民話漬の自社サイトのランキングはこうなってます。
・「遠野　漬物」→１位
・「岩手　漬物」→２位
・「東北　漬物」→３位
・「漬物　もろみ」→61位


「漬物　もろみ」での検索結果を10位以内に入れたいところです。
もろみ関連のコンテンツの充実もしていかないといけません。

おっと忘れてました。
改善中の自社お取り寄せサイトはこちら→http://minwazuke.com