ウェブサイトの速度を上げる6つの方法

ウェブサイトの速度を上げる6つの方法

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 などのメモリキャッシュを通じてキャッシュすることで、最速の速度を実現できます。

<<:  HTMLフォーム属性のreadonlyとdisabledの使い方

>>:  JDKネイティブスレッドプールのバグを修正するTomcatの実装原理

推薦する

docker+devpi を使用してローカル pypi ソースをビルドする方法

以前、開発で頻繁に pip ダウンロードを使用する必要がありました。pip ソースを国産ソースに変更...

ウェブページを自動更新するための 3 つのコード

実際、この効果を実現するのは非常に簡単で、この効果は特殊効果と呼ぶことすらできません。次のコードを ...

MySQL の遅いクエリの落とし穴

目次1. 遅いクエリ構成1-1. スロークエリを有効にする2. 遅いクエリSQLの分析を説明する3....

Nodeはkoa2を使用してシンプルなJWT認証方式を実装します

JWT の紹介JWTとは正式名称はJSON Web Tokenで、現在最も人気のあるクロスドメイン認...

jsネイティブ構文プロトタイプ、__proto__、コンストラクタの徹底的な理解

目次1 はじめに2 前提条件2.1 データ型2.2 それが自身のプロパティであるかどうかを判断する ...

MySQL 5.7.17 zip インストールおよび設定チュートリアル MySQL 起動失敗の解決策

MySQL 5.7.17、現在最新バージョンのようです、ダウンロードアドレスここで、プラットフォーム...

MySQL での一時テーブルの使用例

ここ2日間ちょっと忙しくて、公式アカウントも数日更新が止まってしまいました。その結果、何人かの読者か...

jQuery はテーブルのページング効果を実装します

この記事では、テーブルのページング効果を実現するためのjQueryの具体的なコードを参考までに紹介し...

条件によるMysqlカウントの複数の実装方法を詳細に解説

最近、あるウェブサイトのバックエンドに一連の統計機能を追加していたのですが、条件によるカウントが必要...

Docker で Oracle 11g イメージ構成をプルダウンする際の問題を分析する

1. イメージをプルするdocker pull レジストリ.cn-hangzhou.aliyuncs...

Vueはユーザー名が使用可能かどうかの検証を実装します

この記事では、ユーザー名が使用可能かどうかを確認するためのVueの具体的なコードを例として紹介します...

NginxはURLのパスに応じてアップストリームに動的に転送します

Nginx では、URL のパス パラメータに基づいて、到達不可能なアップストリームに動的に転送する...

JSON.stringify を使用する際に発生する循環参照の問題を解決する方法の詳細な説明

プログラマーが日常的に TypeScript/JavaScript 開発を行う場合、複雑な Java...

詳細なハードウェア情報を取得するための Linux のいくつかのコマンドの詳細な説明

Linux システム、特にサーバー システムでは、デバイスのハードウェア情報を表示する必要がよくあり...

ElementUI el-select の過剰なデータに対する解決策についての簡単な説明

目次1. シナリオの説明2. 解決策オプションが多すぎる el-select コンポーネントの解決策...