ウェブサイトの速度を上げる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の実装原理

推薦する

シンプルなHTMLとCSSの使い方の詳細な説明

HTML と CSS を含む JD.com のホームページの静的ページ効果を 3 日間で完成させます...

MySQL 8.0.20 圧縮版のインストールチュートリアル(画像とテキスト付き)

1. MySQL ダウンロード アドレス。 http://ftp.ntu.edu.tw/MySQL...

JavaScript ループトラバーサルの 24 種類のメソッドをすべてご存知ですか?

目次序文1. 配列走査法1. 各() 2. マップ() 3. 〜のために4. フィルター() 5. ...

Vueの監視方法のケースの詳細な説明

Vueでの監視方法時計知らせ名前: 監視する属性に同じ名前を付ける必要があります。 1. 機能Vue...

ウェブサイトデザインに関するヒント

実は、最近はウェブデザインについてよく耳にするようになりました。インターネット業界は今とても発展して...

ブラウザタブの左端に表示されるウェブサイトのアイコンを設定します

この文の目的は何ですか?コードをコピーコードは次のとおりです。 <link rel="...

Web アプリ開発時間を短縮する 10 の時間を節約するヒント (グラフィカル チュートリアル)

今日の開発環境では、速いほど良いです。 「迅速なアプリケーション開発」、「アジャイル ソフトウェア開...

JS 非同期スタック トレース: await が Promise よりも優れている理由

概要async/await と Promise の基本的な違いは、await fn() は現在の関数...

2 級コンピュータ試験のための MySQL の知識ポイントとよく使用される MYSQL コマンド

2級コンピュータ試験のMySQL知識ポイントの基礎、一般的なMYSQLコマンドは次のとおりです。よく...

Serv-U FTPとADの完璧な統合ソリューションの詳細な説明

会社が現在使用しているソリューションを確認するためにバックエンドにログインしました。使用される FT...

MySQLのnull値に関する小さな問題

今日、null 値をテストしていたところ、小さな問題が見つかりました。ここに記録しました。以前にも遭...

nginx-naxsi ホワイトリストルールの詳細な説明

ホワイトリストルールの構文:基本ルール wl:ID [否定] [mz:[$URL:target_ur...

Vue ルーティング this.route.push ジャンプ ページが更新されない場合の解決策

Vue ルーティング this.route.push ジャンプ ページが更新されない1. 背景概要:...

JavaScript 配列メソッド - 体系的な概要と詳細な説明

目次一般的な配列メソッド配列要素の追加と削除配列ヘッダーの操作配列の末尾を操作する任意の場所に追加ま...

React プロジェクトにおける TypeScript の使用の概要

序文この記事では、TS の基本的な概念ではなく、プロジェクトで TypeScript (以下、TS ...