Javascriptファイルの結合&圧縮を自動化してページを高速表示

はてな

 最近は、アフィリエイト収入を最優先したサイト作りをしていたように思う。いわゆる金の亡者であり、サイト来訪者を裏切ったと言えるかもしれない。これでは評価が落ちても仕方ない。
 その反省から、ユーザビリティー向上作業に没頭している。初心に戻るのが、せめてもの罪滅ぼしであろう。その一環として、数日前からWebサイトの高速表示に取り組んでいる。
1446068_26421276
  
 今まで実施していた主な高速化対策は以下の通りである。

  1. 全てのJavascript/CSS/jsonファイルをgzip圧縮(PHPでワンクリック処理)し、「.htaccess」にてgzip対応。
  2. 処理コストが大きいPHPの関数については、関数ごとキャッシュ化した。キャッシュを削除するPHPスクリプトとセットで使用。
  3. 画像については、可能な限りCSSスプライト(画像結合)してCSSで表示させるようにした。
  4. PHPやJavascriptについては、余計な処理を限りなく省くため、原則的にフレームワークを利用しない。
  5. PHP処理でボトルネックの箇所を可能な限り潰した。

 
 今回追加で実施した高速化対策は以下の通りである。

  1. UUとPVの取得方法を変更した。ページ表示ごとに取得していたが、処理コストが大きかったので、「PHPの関数ごとキャッシュ」を利用して5分間に一度取得するように変更。
  2. PHPファイルを追加で読み込むときは、使用したい関数が存在するか否かをチェックした上で、ない場合にのみ読み込むよう徹底した。
  3. JPGとPNGの容量圧縮した。
  4. AdSenseを全て非同期にした。
  5. AdSense検索のJavascriptリンクを、bodyタグの終了直前に移動した。
  6. モバイルページについてはCSSを一部インライン化。CSSファイルをhtmlタグの終了後に読む込むように変更した。
  7. 一部ページについて画像の遅延読み込みに対応した。「Echo.js」利用。
  8. 肥大化したJavascriptファイルを10前後に分割。共通分と個別ページ分に分けた。
  9. Javascriptファイルをワンクリックで一つに結合するPHPスクリプトを作成した。
  10. JavascriptとCSSファイルの更なる容量削減をはかるため、作業用のファイルを別に作成し、不要文字削除&gzip圧縮をワンクリックで実現させた。

 
 この中で、Javascriptファイルについて実行したことについてメモ的に残しておく。
 
 方針は2つあり、1つはファイル容量の削減、1つは読み込むJavascriptファイル数の最小化である。
 今までは、読み込むJavascriptファイル数の最小化を優先して、1つのJavascriptファイルにほとんどのスクリプトを詰め込んでいた。だが、ファイル容量が肥大化し、プログラムの可読性が著しく落ちてしまった。それゆえ、不要な処理が走っていても気付かない状況にあった。
 
 これではいけないと考え、Javascriptファイルの分割をした。共通分とそれ以外の個別ページ分に分けたところ、全部で10個前後の個別ページJavascriptファイルが新たに作成された。今回いろいろな高速化対策をやったけれども、Javascriptファイルの分割が最も大変だったよ。。。
 
 その上で、ページごとにJavascriptファイルを1つに結合することにした。ページごとに「共通分」と「個別ページ分」を結合したJavascriptファイルを、PHPを利用してワンクリックで作成できるようにした。

 並行してファイル容量の削減に取り組んだ。
 JavascriptとCSSファイルについては、従来までPHPを使ってワンクリックでgzip圧縮していた。

  • 「sample.js」→(gzip圧縮)→「sample.js.gz」

 更なる容量削減をはかるため、作業用のJavascriptファイルを別に作成し、改行削除等の不要文字削除とgzip圧縮をワンクリックで実行できるようにした。

  • 「working_sample.js」→(不要文字削除)→「sample.js」→(gzip圧縮)→「sample.js.gz」

 ちなみにWeb上にアップするのは「sample.js」と「sample.js.gz」だけである。「working_sample.js」は作業用なのでWeb上にアップしない。
 
 最終的には、作業用のJavascriptファイルを更新後にワンクリックするだけで、以下の一連の作業ができるようなPHPスクリプトを組んだ。

  1. 「共通分」と「個別ページ分」を結合し、ページごとにJavascriptファイルを作成。
  2. 上記Javascriptファイルの不要文字を削除。
  3. 上記Javascriptファイルをgzip圧縮。

 PHP側では、ページごとに読み込むJavascriptファイルを制御するように変更した。なお、個別のJavascriptファイルが必要ない場合は、共通分Javascriptファイルを読み込む。
 
 現在ローカル環境で最終テスト中なので、まだインターネットにアップしていない。Javascriptファイル分割により、様々な不具合が生じたので、一つずつバグを潰している段階である。
 バグ取り作業が嫌になったのでブログ記事を書いている、という状況ではあるが、今度は肥大化したCSSファイルを分割することを検討している。ただ、CSSファイルの場合、単純に分割するのではなく、再構築することになると思う。物凄く大変そうだな。ははは。

はてな

関連するアフィエイト情報