🤦🏼 👋🏽 🤟🏿 Web Optimizerのセットアップと使用 🎷 🤱 👨🏻‍✈️

PHPサイトのクライアント最適化を自動化するWebアプリケーションのバージョン0.5のリリースは無期限に延期されましたが、アプリケーションの現在の設定と機能の簡単な概要を準備することにしました。

仕事の特徴

Webオプティマイザーは、出力HTMLドキュメントをインターセプトし、最適なフォームに変換します。特に、CSSファイルとJavaScriptファイルについてheadセクション全体が分析され、静的ホストがある場合、それらの間で画像が配信され（画像のアドレスが変更され）、広告とカウンターのあるブロックが</body>前に転送されます（再び、適切な設定を有効にする）。 HTMLも最小化されます（余分な改行とインデントは削除され、コメントとすべての余分な文字は削除できますが、これらはリソースを大量に消費する操作であり、デフォルトではオフになっています）。

アプリをダウンロード
code.google.com/p/web-optimizator/downloads/list

Webオプティマイザーのセットアップ

以下は、ウェブオプティマイザーバージョン0.4.9.7で使用可能な設定です（変更なしで0.5になります）。

ディレクトリのキャッシュ 。ここで、（ファイルシステム上の）キャッシングディレクトリへのパスを設定できます。保存された縮小CSS、JavaScript、およびHTMLファイルが書き込まれます。ここで、サイトのルートディレクトリを決定することもできます（すべての相対パスを正しく計算するために必要です）。デフォルトでは、すべてのキャッシュディレクトリはWebオプティマイザー自体のcacheフォルダーに割り当てられます。
圧縮設定 この設定グループは、JavaScriptファイルとCSSファイルを組み合わせて最小化する役割を果たします。デフォルトでは、JavaScriptファイルはJSMin（またはjavaが利用可能な場合はYUI Compressor）を使用してマージおよび最小化されます。 Dean Edwards Packerを使用してJavaScriptを圧縮することもできます（これはgzip圧縮がない場合に最適です）。ここでは、HTML出力を最小限に抑える方法を構成することもできます（余分な改行やスペースを簡単に削除し、1行に「プル」し、（または）コメントを削除します）。 IEの条件付きコメントは、まったく影響を受けません。
外部JavaScriptファイルを含めます 。 Webオプティマイザーは、外部JavaScriptファイル（他のドメインから呼び出される）および内部コード（ <script>直接囲まれている）をロードできます。ここでは、 <style> （デフォルトで有効）にあるCSSコードの「接着」を設定できます。結合ロジックから除外する必要があるファイル名（フルパスではなく名前）を（スペースを介して）指定することもできます。テスト段階で、Tiny MCEとFCE Editorのソースライブラリを組み合わせることは不可能であることがわかったため、デフォルトでは除外されています。
控えめなJavaScript 。このグループには、さまざまなJavaScriptオプションの読み込みをブロックしないようにする設定が含まれます。特に、結合されたJavaScriptファイルを<body>前に出す（またはDomContentLoadedイベントで呼び出すために呼び出す）こともできます。また、ドキュメントの一番下（JavaScriptコードの後、結果のHTMLコードがソースに挿入される）で、カウンター、広告、ウィジェットの読み込みを行うことができますメインコンテンツが読み込まれた後、追加の広告ユニットが徐々に表示されるようにするためのページ上のスペース。
時間の変更を確認しないでください 。この設定により、各ページを読み込むときにすべてのファイルの時間とコンテンツをチェックせず、キャッシュされたバージョンの存在のみをチェックできます。このため、サーバーのパフォーマンスが大幅に向上します（デフォルトでは、設定は有効になっています）。元のJavaScriptファイルまたはCSSファイルをデバッグしたり頻繁に変更したりする場合は、設定を無効にすることをお勧めします。
Gzip圧縮（アーカイブ） 。この設定グループは、ブラウザにJavaScript、CSS、またはHTMLファイルをアーカイブとして提供するかどうかを制御します。 Gzip圧縮を使用すると、テキストファイルを転送するときにトラフィックの70〜85％を節約できますが、サーバーに最適ではない場合があります（特に、PHPおよび高負荷プロジェクトによる圧縮の場合）。いずれの場合でも、可能な限り、すべての圧縮設定は.htaccess行われます（CSSおよびJavaScriptの静的形式）。 .htaccessを変更できない場合、JavaScriptおよびCSSコード.htaccess gzipバージョンはキャッシングディレクトリに保存されます。これにより、CPU負荷が最小限に抑えられます（PHP経由）。
永遠のキャッシング 。このグループの設定は、JavaScript、CSS、HTML、または静的ファイル（画像とアニメーション）のキャッシュヘッダーの設定を担当します。画像とアニメーションの場合、対応するルールは.htaccessにのみ配置され、他のファイルの場合、必要に応じてPHPを介して複製されます。既定では、静的ファイルのキャッシュ期間は10年に設定されています（ファイルを変更する場合、新しいバージョンはファイルの内容のmd5ハッシュに基づいて作成された異なる名前を持ちます）。 HTMLファイルの場合、クライアントキャッシュの適切な有効期限を手動で設定できます。この設定と次のグループ（HTMLファイルのサーバー側のキャッシュ）の違いは、出力HTMLがサーバーに保存されないことです。特定の時間、HTMLドキュメントを再要求できないことをブラウザーに伝えるだけです。ブラウザがこの指示に従うかどうかは、完全に良心にかかっています。
HTMLファイルのキャッシュ 。サーバー側を大幅に高速化するには、ほとんどすべての場合、サーバーのキャッシュが必要です。そして、ほぼすべてのCMSがこれをサポートしています（あるレベルまたは別のレベルで）。 Webオプティマイザーは代替手段を提供します（現在のシステムが方法を知らない場合、またはより「厳しい」ソリューションが必要な場合）：HTMLドキュメントの単純なキャッシュ。この設定を有効にすると、HTMLファイルはキャッシュディレクトリに保存され、システムの内部ロジックを処理することなく、Webオプティマイザーの最初の呼び出し時にレンダリングされます。当然、キャッシュの有効期限が考慮されます。また、ドキュメント全体ではなく、最初の1〜2 KBを（ドキュメントのリセットを介して）すぐに発行し、残りを計算することもできます。これは、一部の環境でページの読み込みを視覚的に高速化するのに役立ちます。キャッシングを設定するには、除外する必要があるサイトのURLの部分のリスト（正規表現を設定することも可能）と、キャッシングファイルの配信を強制する必要があるロボットのリスト（USER AGENTS）を使用できます。
CSSスプライト おそらく、ウェブオプティマイザーの最も技術的に強力で最も物議をかもしている部分です。スプライトを正しく使用すると、桁違いに（！）多数の背景画像（20〜100〜3〜10）を含むページを読み込むときにサーバーへのリクエスト数を減らすことができます。ただし、IE6の結合画像の表示にはいくつかの問題があり（デフォルトでは、画像は32ビットパレットで作成され、IE6はそのようなPNGの透明度を正しく処理できません）、IE6をスプライトの作成から除外する（適切な設定を使用）か、不透明な画像を使用することで問題が解消されます。フルカラー画像にPNGの代わりにJPEGを使用するための設定も利用できます。「アグレッシブ」モード（コンテナの実際のサイズを考慮せずにrepeat-xとrepeat-yが組み合わされます）、空きスペースを追加します（現代のブラウザでそのような画像をスケーリングするときに基本を避けます）。
安定性を向上させるために、「制限付き」メモリモードが追加されました。PHPプロセスのメモリが64 MB未満の場合（これは、約3000 x 3000ピクセルのスプライトを作成するのに十分で、ほとんどのサイトで十分です）、4000ピクセルの大きな領域の画像は除外されます。また、CSSスプライトの作成プロセスから線形サイズ（デフォルトでは900）で大きな画像を除外し、ファイル（ファイルへのフルパスではなくファイル名を設定）を直接除外する設定もあります。
データ：URI data:URIテクノロジーを使用すると、CSSファイルに背景画像を直接含めることができます。最新のすべてのブラウザーとIE8でサポートされています。画像サイズには24 Kbの制限があります（32 Kb data:URIコードdata:URIは24576バイトのバイナリコードから取得されます）。 data:URI作成するdata:URI IE7ハックのdata:URIはCSSファイルに挿入されるため、これらのブラウザーのサイト設計は変更されません。また、 data:URI作成するdata:URI画像を最適化することが非常に望ましいです。これには、 smush.itのAPI が使用されます。正しい画像の最適化には、画像自体に対するWebサーバーの書き込み権限が必要です。この設定はデフォルトでは無効になっています。これは、画像を1回だけ最適化し、後続の結果をCSSファイルの後続のビルドに使用することが理にかなっているためです。
複数のホスト 。この設定により、静的ホストでのイメージの配布を有効にできます。 1つのイメージは常に各イメージに対応します（使用可能なすべてのホストからの同じイメージでキャッシュが詰まるのを防ぐため）。このメカニズムを使用してロードを高速化するには、すべての代替ホストを提供するIPアドレス（通常は現在のサイト）にDNSで登録し、これらのホストの形式でサーバー構成のメインサイトのエイリアスを追加する必要があります。例：
```
  ServerAlias i1.site.ru
 ServerAlias i2.site.ru 
```
その後、 i1 i2をWebオプティマイザーのホストのリストに追加し、これらのホストでイメージが「散乱」されていることを確認できます。 Webオプティマイザーをインストールすると、多数のホストが代替サイトとして（サイトの同じルートで）使用できるかどうかが自動的に確認され、手動で指定されたすべてのホストの可用性が確認されます（テストイメージはそれらからダウンロードされます）。「安全な」インストール（少し後）をオンにすると、ホストのチェックが使用できなくなり、Webオプティマイザーの設定を再起動せずに手動でホストを登録する必要があることに注意してください。
.htaccessを使用します。 gzipの圧縮とキャッシングの設定のほとんどは、サーバー側のスクリプトでの追加作業を避けるために、サーバーの構成ファイルに書き込むことができます。これは.htaccessファイルを使用して実行できます（必要な場合は、後ですべての設定をhttpd.condファイルに転送できhttpd.cond ）。 Webオプティマイザーは使用可能なモジュールを自動的にチェックし、で記録を構成し. htaccess . htaccess （当然、このため後者は書き込み可能でなければなりません）。 mod_gzip 、 mod_deflateおよびmod_filterは、ファイルをオンザフライで圧縮し、 mod_rewriteおよびmod_mimeは、静的アーカイブを行います。 mod_headersおよびmod_setenvifプロキシサーバーおよび古いブラウザで圧縮ファイルを正しく処理するため。 mod_expiresキャッシングイーグルの設定用。 .htaccessサイトディレクトリ（これは、複数のサイトが同じホストの異なるディレクトリにある場合に便利）またはサイトのまさにルートに配置することもできます。デフォルトでは、両方の場所は同じです。 .htpasswd 、Webオプティマイザーのインストールを保護することもできます。この場合、設定にアクセスするには、ブラウザーのHTTP基本認証ウィンドウからユーザー名とパスワードを入力する必要があります（これにより、保護された領域外にキャッシュディレクトリを配置した後、Webオプティマイザーをサイト内の任意のディレクトリに移動できます）。
Webオプティマイザーのロゴ 。現時点では、このグループの設定は一切使用されていません。将来的には、プロジェクトへのリンクが記載された「Web Optimizerによる加速」という小さな活字が各サイトに追加されるでしょう。しかし、これまでのところ、このトピックに関する決定は行われていません。
/index.php自動的に変更し/index.php 。 Webオプティマイザーは、数十個のCMSの正しい操作に必要なファイルの自動変更をサポートしています（不明なシステムの場合、その名前はCMS 42として表示され、ルートindex.php常に変更されます）。ファイルを自動的に変更する前に、サイトのチェーン最適化が開始され、すべてのキャッシュファイルが作成され、メインページの初回の長時間の読み込みが回避されます。

使用例

Web Optimizerは、あらゆるサイトのクライアント最適化のための強力で柔軟なツールです。ただし、適切に調整するには、注意を払い、目的の結果を理解する必要があります。デフォルト設定に対する最も一般的な変更のいくつかを見てみましょう。

すべてのページに共有JavaScriptファイルまたはCSSファイルが含まれます 。多くの場合、サイト全体に必要なすべてのページに共通のJavaScriptライブラリまたはスタイルシートを挿入できます。 Webオプティマイザーがこの共通ファイルを他のすべてのファイルとマージしないようにするには、構成で除外することができます。
```
 外部JavaScriptファイルと埋め込みコードを含める->マージからファイルを除外する->ファイルのコンマ区切りリスト 
```
CSSスプライトを無効にします。いくつかの理由（ホスティングでのGDLibの適切なサポートの欠如、メモリの制限など）により、CSSスプライトを作成しようとすると、ブラウザーに「白い画面」が表示される（そしてサイトが開かなくなる）場合があります。このような場合、CSSスプライトを完全に無効にすると、通常次のことが役立ちます。
```
  CSSスプライト-> CSSスプライトを適用->いいえ 
```
必要に応じて、最小化されたCSSファイル（またはマージされたソース）を指定することにより、 Auto Spritesを使用してCSSスプライトを手動で作成できます。
IE6でのサイトの誤った表示 。この場合、IE6のスプライトを無効にするだけで次のことができます。
```
  CSSスプライト-> CSSスプライト作成プロセスからIE6を（ハック経由で）除外->はい 
```
IE6がスタイルマージ（および他の多くのハックと一緒に背景オーバーレイ）を正しく処理しない可能性もあります。その後、 data:URI無効にしdata:URI
```
 データ：URI->データの適用：URI-> no 
```
または、CSSファイルを組み合わせます：
```
 圧縮設定-> CSSファイルの最小化と結合->いいえ 
```
安全なインストール 。 Web Optimizerは、任意のディレクトリ（サイト内）にインストールでき、 htpasswdを介してパスワードで保護htpasswdます。これを行うには、以下を含めます。
```
  .htaccessの使用-> htpasswdでWebオプティマイザーのインストールを保護->はい 
```
同時に、がWebオプティマイザー自体のあるフォルダーの外側にあることを確認する必要があります（そうでない場合、自分以外のサイトへのすべての訪問者にとってすべてがばらばらになります）。
静的サイトの接続 。 Webオプティマイザーは、PHPが利用可能なすべてのサイトで使用できます。既に静的サイトがある場合は、各ページの最上部（またはindex.php ）でWebオプティマイザー呼び出しを接続できます。
```
  <？php
 require（/path/k/Web/Optimizer/web.optimizer.php）;
 ？> 
```
そして、ページの一番下で：
```
  <？php
 $ web_optimizer-> finish（）;
 ？> 
```
スケジュールモード（すべてのキャッシュファイルを作成した後）では、Webオプティマイザーロジックの実行に5〜10ミリ秒かかるため、ダウンロードのサーバー側には影響しませんが、クライアントは大幅に高速化されます。 Webオプティマイザーへの呼び出しを追加するページが、PHPインタープリターを介して処理されることを確認する必要があります（サーバー設定によって決定される拡張子.phpまたはその他のものがあります）。
スケジュールされた最適化 。すでに、Webオプティマイザーは、「静的」モードで任意のサイトの公開スキームに統合できます。これを行うには、Webオプティマイザーがインストールされているサイトのすべてのページを開き、表示されたHTMLおよびキャッシュディレクトリをコピーするだけです。 Web Optimizerがdev.site.ruインストールされているとしdev.site.ru たとえば、 wget実行することにより
```
  wget -d -r -c http://dev.site.ru/ 
```
サイトの最適化された「キャスト」を取得します。これは既に動作中のシステムにダウンロードできます。
HTMLを1行で結合します 。すでに上で説明したように、WebオプティマイザーはすべてのHTML出力を1行で「マージ」できます。これを行うには、有効にします
```
 圧縮設定-> HTMLを1行に圧縮->はい
圧縮設定-> HTMLコメントの削除->はい 
```
これらの設定はサーバーに余分な負荷を追加することに注意してください（正しい正規表現は非常にリソースを消費します）。また、JavaScriptコード（コメントを介して挿入されます）を削除する可能性があります。また、 script 、 textarea 、 pre内のコードは変更されません（仕様に準拠）。したがって、これらの設定は慎重に使用してください。
smush.itによる画像の最適化 。 Smush.itはYahoo!エンジニアによって開発されました Googleを使用すると、自動モードで背景画像のサイズを最適化できます。 CSS Spritesライブラリを使用して画像の最適化を有効にできます（バージョン0.4.9.7のこの例はまだ機能しませんが、SVNで既に利用可能であり、0.5に含まれています）。
```
  <？php
 require（ '/ full / path / to / css.sprites.php'）;
 $ smushit = new css_sprites（）;
 $ smushit-> smushit（ '/ full / path / to / image'）;
 ？> 
```
結果として、イメージの代わりに（変更する権利がある場合）、最適化されたコピーを取得します。グループで作業画像を実行するのではなく、グループのコピーで実行して、変更をロールバックできるようにすることをお勧めします。

アプリをダウンロード
code.google.com/p/web-optimizator/downloads/list

Web Optimizerのセットアップと使用

仕事の特徴

Webオプティマイザーのセットアップ

使用例

More articles: