こんにちは!
キャスレーコンサルティング TS(テクニカルサービス)部の栗田です。

今回は、サイトの表示速度を上げるための第一段階としてJSとCSSの圧縮と
その後の自動デプロイについて触れてみたいと思います。

最後までお付き合い頂けますと幸いです!

まずはじめに

とてもよくあることですが、サイトを訪問した際にページが読み込み中のまま表示されず、
結局「戻る」ボタンを押すことがたまにありますよね…。

サイトを公開している方は、
「自分のサイトも表示速度が遅くないだろうか…」
といった感じでとても心配になりますよね。

※サイトのスピードは以下で確認出来ます。
PageSpeed Insights

PageSpeed Insightsを実施してみると想像以上に得点が出ず、
とてもショックを受けるなんてこともありますね…。

サイトの表示速度とアクセス数は比例していたり(遅いと人が来なくなってしまいますね…)、
またSEOにも少なからず影響すると言われていますので、どうにか改善しなければいけません!

まず初めにJSとCSSを圧縮し、ネットワークのトラフィックを軽減してみましょう。
但し、ファイルを一つ一つ圧縮をするのはとても面倒なので、自動化してデプロイ出来ればと思います。

JSS、CSSの圧縮

それではJSとCSSの圧縮について進めていきます。
まずは「YUI Compressor」を使用して、自動で圧縮する環境を作りたいと思います。

1. Javaのインストール確認
  YUI Compressorを使用するにはJavaがインストールされていることが前提となります。
  コマンドラインを起動し、

java -version

と入力してください。
エラーが出た場合はインストールされていないので、以下のサイトよりインストールを行って下さい。
  全オペレーティング・システム用のJavaのダウンロード

2.YUICompressorのダウンロード
  YUICompressorは、jarファイルで提供されています。
  以下から、jarファイルをダウンロードしてください。
  YUICompressor

フォルダの構成

1. デプロイ用フォルダ構成の作成
  例えばですが、開発環境上のフォルダ構成が、以下のように構成されているものとします。


(js、css、サーバーサイド(PHPなど)がhtdocsに構成されている)

  次に、圧縮されたファイルを配置するためのフォルダを構成したいと思います。
  今回は圧縮前後でファイルを分けたいので、以下のフォルダで構成します。
  _deployフォルダを作って、site以下を丸ごとコピーして下さい。


  最終的には_deploy\site以下が、サーバーのDocumentRoot配下にアップロードされるイメージです。

2.YUICompressorの配置
  先ほどダウンロードしたjarファイルを、index.hmlと同じフォルダに配置して下さい。

圧縮用のバッチ作成

  それでは、圧縮するためのバッチを作成したいと思います。
  ファイル名を「compress.bat」として、以下を記述して下さい。

REM js、css圧縮
SET yui=C:\xampp\htdocs\site\yuicompressor.jar
SETLOCAL enabledelayedexpansion
echo off
cd C:\xampp\htdocs\site
for /r %%a in (*.js) do (
SET src=%%~dpa%%~nxa
SET src=!src:C:\xampp\htdocs\=!
SET dest=..\_deploy\!src!
SET src=..\!src!
echo !src!
echo !dest!
java -jar !yui! --charset UTF-8 -o !dest! !src!
echo ------
)
for /r %%a in (*.css) do (
SET src=%%~dpa%%~nxa
SET src=!src:C:\xampp\htdocs\=!
SET dest=..\_deploy\!src!
SET src=..\!src!
echo !src!
echo !dest!
java -jar !yui! --charset UTF-8 -o !dest! !src!
echo ------
)
endlocal
PAUSE

  5行目は、カレントのフォルダをsiteにします
   例)C:\xampp\htdocs\site

  6行目(~15行目)は、site以下の全てのjsファイルを処理します。

  7行目は、見つかったjsファイルのフルパスを取得します
   例)C:\xampp\htdocs\site\js\account.js

  8行目は、フルパスの文字列のsiteより前を削除します
   例)site\js\account.js

  9行目は、コピー先フォルダとなります。8行目で生成した文字列を連結しています。
   例)..\_deploy\site\js\account.js

  10行目は、コピー元フォルダとなります
   例)..\site\js\account.js

  13行目でjs圧縮を行い、コピー先フォルダに保存します

  16行目以降は、上記と同じ処理をcssに対して行います

  これで_deployフォルダに圧縮後のファイルが展開されます。

自動デプロイ

1. WinScpの導入
  今回は、Winscpのコマンドを利用してデプロイを実施します。
  以下よりダウンロードして、インストールを行って下さい。
  WinSCP

2.デプロイ用のバッチ作成
  それでは圧縮したjsやcss、phpなどのサーバーサイドのファイルを自動でデプロイしてみましょう。
  サーバー側のデプロイ先は、var/wwwにhtmlディレクトリを作り、そこにアップロードする形とします。
  DocumentRootをvar/www/htmlにしたい場合は、apacheの設定を行って下さい。
  ファイル名を「deploy.bat」として、以下を記述して下さい。

robocopy "C:\xampp\htdocs\site" "C:\xampp\htdocs\_deploy\site" /mir *.php
copy C:\xampp\htdocs\site\*.html C:\xampp\htdocs\_deploy\site /Y

@echo open scp://【user】@【address】:【port】 -privatekey=【key】>cmd.txt
@echo option transfer binary>>cmd.txt
@echo cd /var/www/html>>cmd.txt
@echo lcd C:\xampp\htdocs\_deploy>>cmd.txt
@echo synchronize remote -delete site site>>cmd.txt
@echo put -permissions=644 index.html ./>>cmd.txt
@echo exit>>cmd.txt

"C:\Program Files\WinSCP\WinSCP.com" /script=cmd.txt
PAUSE

1行目は、phpファイルをsiteフォルダから_deploy\siteフォルダにコピーします。
 コピーの際はお互いのフォルダを同期化します。

2行目は、index.htmlを_deploy\siteフォルダにコピーします。

4行目でサーバーにログインします。
 【user】はログインユーザー
 【address】はサーバーのアドレス
 【port】はサーバーのポート番号
 【key】は鍵認証の秘密鍵ファイルのパス
 今回はsshを利用する想定です。サーバー側の設定は、以下をご覧下さい。
 ルート検索サイトを公開してみた(前編:サーバー構築編)

 あとは、サーバー側の/var/www/htmlのhtmlディレクトリの所有者を変更をして下さい。

sudo su 【user】
chown 【user】

 ※/var/www/の所有者は、rootのままにして下さい。
  また、パーミッションを777にするなどもやめたほうが良いと思います…。

6行目は、サーバー側のカレントディレクトリ(/var/www/html)を設定しています。

7行目は、ローカル側のカレントディレクトリ(C:\xampp\htdocs\_deploy)を設定しています。

8行目は、ローカルのC:\xampp\htdocs\_deployをサーバーの/var/www/html/siteにアップードします。
 -deleteは同期元にないファイルを同期先から削除します。

9行目は、index.htmlのパーミッションを644にします。

12行目で1~11行目を実行します。

最後に

JS、CSSの圧縮はかなり有効で、最大で40%ほど圧縮出来る事もあるようで、とても驚きです!

更にはキャッシュを有効にすることでも、表示スピードを大幅に改善出来るようです。
今回は圧縮のみですが、2KBのファイルが500byteまで圧縮されました!
ファイルの圧縮により、少しは速度が上がると思われます。
※今回は、サイズを1/4にすることができました!
 小さな試験用のサイトで試してみましたが、大きなサイトほど影響が出るのではと思います!

これからも、サクサク動くサイトを提供出来るように日々勉強に励めればと思います。

 最後までお付き合い頂きまして、
本当にありがとうございました!!

栗田
CSVIT事業部 TS(テクニカルサービス)部 栗田
効率化が図れたらとても良いことですね!