👩🏽‍🤝‍👨🏾 🥃 👩‍🏭 GzipでJS + CSSを組み合わせて圧縮するcompress.phpでサイトの読み込みを高速化する方法 😬 🤛🏾 🙍🏻

code.googleで提供される詳細な手順により、次のことが可能になります。

すべての多数のJSスクリプトとCSSスタイルを圧縮する
1つのJSと1つのCSSで受信したすべてのファイルを結合する
受信した2つのファイルをGZIP形式に圧縮します。これは、ほぼすべてのブラウザーで認識され、その場で解凍できます
ブラウザに2つのファイルをキャッシュさせる.htaccessを作成します

これはすべて、単一のcompress.phpスクリプトを実行すると発生します。

たとえば、私のサイトのスクリプトの圧縮の結果：

JS：gzip 26 698 Bで圧縮、gzip 95 796 Bなしで圧縮、120 147 B
CSS：gzip 46 049 Bで圧縮、gzip 160 001 Bなしで圧縮、281 870 Bあり

トラフィックの節約は329,270 B です。しかし、ダウンロード速度の主な利点は、14個のファイルではなく、2個だけがダウンロードされることです（ブラウザーは要求に時間を浪費しないため、はるかに高速です）。さらに、これは1回だけ実行され、サーバー自体によって動的に実行されることはありません（特に、すべてのサーバーがこの圧縮構成をサポートしてプロセッサリソースを節約するわけではないため）。

その結果、次のことが判明しました。

<link rel="stylesheet" type="text/css" href="min/styles_1349888114.cssgz" /> <script src="min/all_1349888114.jsgz" /></script>

手順は驚くほど簡単です：

compress.phpスクリプトをダウンロードします
ダウンロードスクリプトcssmin.php 、 jsmin.php
これらの3つのスクリプトをサイトのルートにアップロードします*
サイトのルートにcompress_timestamp.phpファイルを作成し、compress.phpスクリプトがこのファイルを上書きできるように許可を設定します*
サイトのルートに空のminフォルダーを作成します

index.phpで、ヘッダーに次のコードを含めます。

 <?php require_once('compress_timestamp.php'); // timestamp   ,   .  $compress_stamp=unix_timestamp if (stripos($_SERVER['HTTP_ACCEPT_ENCODING'],'GZIP')!==false) $gz='gz'; else $gz=null; echo '<script src="min/js_schedule_'.$compress_stamp.'.js'.$gz.'" />',PHP_EOL; echo '<link rel="stylesheet" type="text/css" href="min/css_schedule_'.$compress_stamp.'.css'.$gz.'" />',PHP_EOL; ?>

compress.phpファイルを編集し、適切な場所にスクリプトとスタイルをリストします。

 <?php file_compress('css_schedule.css',array('./CSS/menu.css', './CSS/ThreeColumnFixed.css', './CSS/sprite.css', './CSS/iCal.css')); file_compress('js_schedule.js',array('./js/all1.js', './js/jquery.js', './js/love_habrahabr.js', './love_4pda.js')); ?>

すべてを開始したのは、これらの魔法の機能（1つのファイルに圧縮して圧縮する）のためでした。必要なファイルは、GZippedバージョンと通常バージョンのMINフォルダーに作成されます。ブラウザが古い場合は通常のJSおよびCSS形式が発行され、新しい場合はJSGZおよびCSSGZが発行されます。

compress.phpスクリプトをリモートで実行すると、すべてが自動的に行われます
ダウンロードするサイトを確認してください

*簡単にするために、すべてのファイルをサイトのルートに保存しますが、セキュリティ上の理由からこれを行わない方がよい

これでサイトの読み込みが速くなり、JSとCSSのコードは恋人が解読するのが難しくなります。

サイトのスクリプトを変更するたびに、サイトをロードする前にcompress.phpを実行する必要があります。それ以外はすべて自動的に行われます。

CSSスタイルの画像へのリンクは、CSSがMINフォルダーにあることを考慮して呼び出す必要があることを忘れないでください。

サイトをさらに高速化する場合は、簡単な解決策があります。静的ファイルのヘッダーを設定して、ブラウザーが長時間キャッシュするようにします。これは、サイトのルートに.htaccessファイルを配置することで実行できます。

 ## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType audio/mp3 "access 1 year" ExpiresByType audio/wav "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" </IfModule> ## EXPIRES CACHING ##

あとがき：この記事は初心者向けです。プロは既に（初心者向けの複雑な設定で）かさばるプラットフォームの助けを借りてこれをすべて行っています。 compress.phpを使用することはお勧めしませんが、これを使用すると、JSスクリプトとCSSスタイルを組み合わせて圧縮する必要があることを確認できます。

code.googleのソース

投稿者：Arn Burkhoff

GzipでJS + CSSを組み合わせて圧縮するcompress.phpでサイトの読み込みを高速化する方法

More articles: