ウェブサイトの速度を上げる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 Composeオーケストレーションツールの詳細な説明

Docker の作成Docker Compose は、複数の Docker コンテナを定義して実行す...

Web デザイン スキル: iframe の適応高さの問題

おそらく、この問題にまだ遭遇していない人もいるでしょうから、まずは適応高さとは何かを説明しましょう。...

JS配列メソッドの詳細な説明

目次1. 元の配列が変更されます1. プッシュ(): 2.ポップ(): 3. シフト(): 4.un...

写真とテキストによる MySQL 8.0.21 インストール チュートリアル

1. ダウンロードリンクをダウンロードするダウンロードをクリックします。Oracle アカウントにロ...

Vue 実践における実用的な小さな魔法のまとめ

初回の読み込みを高速化できるルートの遅延読み込みをどうして忘れられるでしょうか?ルーティングの遅延読...

見落としがちなMySQLのCOLLATIONの例の詳細な説明

序文MySQL データベースの文字列型は、CHAR、VARCHAR、BINARY、BLOB、TEXT...

Docker コンテナを他のサーバーに移行する 5 つの方法

多くの場合、移行は避けられません。ハードウェアのアップグレード、データ センターの変更、古いオペレー...

Deepin で virtualenv をインストールして使用するチュートリアル

virtualenv は、分離された Python 仮想環境を作成するためのツールです。独立したディ...

Tencent Cloud 上で Hadoop 3.x 疑似クラスターを構築する方法を説明します

1. 環境整備CentOS Linux リリース 7.5.1804 (コア)インストールフォルダを作...

雨滴効果を実現する JavaScript キャンバス

この記事の例では、雨滴効果を実現するためのキャンバスの具体的なコードを参考までに共有しています。具体...

img タグの src 属性値が空の場合の 2 つのリクエストの問題 (IE 以外のブラウザ)

img src 値が空の場合、リクエストが 2 つ行われます。一部の学生は以前に同様の状況に遭遇した...

Linux ファイル記述子、ファイルポインタ、および inode の詳細

目次Linux - ファイル記述子、ファイルポインタ、インデックスノード1. Linux - ファイ...

MySQL8インストーラーバージョングラフィックチュートリアル

インストール必要な書類は下部に記載されていますステップ1 mysql-installer-web-c...

Vueカスタムツリーコントロールの使い方の詳細な説明

この記事では、Vueカスタムツリーコントロールの使い方を参考までに紹介します。具体的な内容は次のとお...

Centos7 への MySQL8 のインストールチュートリアル

MySQL 8 の新機能: MySQL をバージョン 5.x から 8.x に直接アップグレードする...