1. .js ライブラリ ファイルのアドレスを Google CDN アドレスに置き換えます。 (Google API は現在中国ではあまり安定していないため、この方法を使用することはお勧めしません。) jquery や mootools などの js ライブラリを使用すると、読み込む必要のある .js ファイルの数が増え、サイズも大きくなります。従来の Web サイトでは、通常、それらのファイルを Web サイト自体のディレクトリにアップロードします。しかし、サイズが約 70 KB の jquery.js ファイルの場合、Web サイトの応答速度の向上には役立ちません。この場合は、Google API を使用する必要があります。 http://www.cnblogs.com/jquery.xxjs を http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js に置き換えることの重要性は、ユーザーが Google API を使用する Web サイトにアクセスした後、その API アドレスを呼び出す他の Web サイトにアクセスしたときに、ファイルを再度読み込む必要がないことです。それによりスピードアップの目的を達成します。 jquery ライブラリだけでなく、mootools yui などの他のライブラリでもこのメソッドを使用できます。 Google が提供する js API パスを収集する Web サイト (http://scriptsrc.net/) をお勧めします。ファイル パスの最新バージョンを取得するには、[コピー] をクリックするだけです。 2. js と CSS を合理化して最適化します。 キャッシュやgzipで保護していますが、jsやcssの最適化も必要です。私たちが記述する JavaScript スクリプトと CSS コードは、人間が読むのに適したようにインデントされ折り返されていますが、ブラウザはこれらのスクリプトを実行するためにこれらの意味のないスペースや折り返しを必要としません。したがって、これらのスペースと改行を削除し、JavaScript と CSS の変数を短くする必要があります。このような最適化ツールには、YUI Compressor や Closure Compiler などがあります。どちらのツールも Java ベースなので、使用するには JDK をインストールし、JAVA_HOME を設定する必要があります。 (確かに、プログラマーではないウェブマスターにとっては少し難しいです) 推奨アドレス( http://sweet.fengyin.name/?hl=zh-CN ) このツールでは、JDK をローカルにインストールする必要はありません。圧縮する JS ファイルと CSS ファイルを直接アップロードできます。YUI Compressor または Closure Compiler の使用を選択できます。 YUI CompressorまたはClosure Compilerで圧縮した後のコードは次のようになります。 関数hello(名前) { アラート('hello blog' + 名前); } こんにちは('ガーデン'); それは 関数 hello(a){alert("hello blog, "+a)}hello("Garden") インデントと空白行を削除すると同時に、変数名も短くなります。この最適化方法は元に戻すことができないため、将来の変更を容易にするために、これらの 2 つの圧縮を使用する前にソース ファイルのコピーをバックアップしてください。 3. JS ファイルと CSS ファイルを GZIP で圧縮します。 js と css の圧縮は、サーバーの動的スクリプトを通じて、またはもっと簡単に apache サーバーを使用して実行できます。次のコードを、Web サイトのルート ディレクトリの .htaccess に追加できます。 <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/json ヘッダー追加 Vary Accept-Encoding </モジュール> このコードは、サーバーの圧縮モジュールを呼び出して、上記のファイルを出力する前に GZIP 圧縮を実行することを意味します。gzip 圧縮後、すべてのファイルのサイズは 30% 以上削減されるはずです。特にjsを多く使用するブログの場合、gzipで保護することで速度が大幅に向上します。 4. js および CSS ファイルをキャッシュします:: ウェブサイトのルートディレクトリにある.htaccessファイルに次のコードを追加します。 <ifmodule mod_expires.c> <filesmatch "\.(jpg|gif|png|css|js)$"> 有効期限有効日 有効期限デフォルトは「アクセスプラス1年」 </ファイルマッチ> このコードは、jpg|gif|png|css|jsにヘッダーキャッシュヘッダーを送信し、1年間キャッシュすることを意味します。ブラウザがctrl+F5を使用して強制的に更新しない場合は、時間が終了するまでキャッシュされます。唯一の残念なことは、jsまたはcssファイルを変更する場合は、以前のパスまたはファイル名を変更する必要があることです。この方法でbase.js?ver=(x)を実行すると、ブラウザは次回自動的にそれを読み取ってキャッシュします。 5. CSSスプライトを使って画像を組み合わせる ウェブサイトでは、美化のために小さなアイコンや小さな画像がよく使用されますが、残念ながら、これらの小さな画像は多くの HTTP リクエストを消費します。そのため、スプライトを使用してすべての画像を 1 つの画像に結合することができます。http://csssprites.com/ を通じてオンラインで結合することも、PS で結合することもできます。 CSS スプライトの詳細については、http://baike.baidu.com/view/2173476.htm をご覧ください。 6. ウェブサイトの画像(写真)を最適化します。 画像やアイコンを多用するとウェブサイトに美しい効果をもたらすことができますが、画像とテキストを組み合わせて編集すると、ブログ投稿を非常に華やかに表示できます。しかし、画像のサイズはそれほど印象的ではありません。jpg は非可逆圧縮形式であり、png は可逆ですが、サイズがかなり大きいという欠点があります。画像のサイズを小さくしてダウンロード速度を最速にするには、アップロードする前に各画像を最適化する必要があります。フロントエンドに重点を置くYslowには、smushitというツールがあります。 http://www.smushit.com/ysmush.it/ より このツールは、元の品質を維持しながら画像のサイズを最適化できるロスレス画像圧縮ツールです。この最適化により、通常はサイズが 10% 以上削減されます。つまり、30 KB の画像は最適化後に 27 KB 以下になります... 要約: 上記の 6 つの最適化方法はすべてフロントエンドです。フロントエンドの最適化の重要性は、http リクエストを減らし、Web サイトのフロントエンド プログラム コンポーネントのサイズを縮小することです。 実際、バックエンドの最適化では、データベースクエリをさらに削減する必要もあります。頻繁に使用されるデータを memcache などのメモリキャッシュを通じてキャッシュすることで、最速の速度を実現できます。 |