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

推薦する

JavaScript メッセージ ボックスの例

JavaScript では、警告ボックス、確認ボックス、プロンプト ボックスの 3 種類のメッセージ...

Vue3 でパンくず関数コンポーネントをカプセル化するいくつかの方法

目次序文1. パンくずリストはなぜ必要なのでしょうか? 2. 一次包装1. 実装のアイデア2. コー...

よく使われる HTML 形式のタグ_Powernode Java Academy

1. タイトルHTML では、<h1></h1> から <h6>...

Vue大画面表示適応方法

この記事では、vueの大画面表示適応の具体的なコードを参考までに紹介します。具体的な内容は以下のとお...

最新の JavaScript で非同期タスクを書く方法

序文この記事では、非同期 JavaScript の進化と、それがコードの記述方法にどのような変化をも...

読み取り専用と無効の微妙な違いの詳細な説明

「読み取り専用」と「無効」はどちらも、ユーザーがフォーム フィールドの内容を変更できないようにします...

Linux でのファイルの編集、保存、終了の実践的な説明

Linux でファイルを編集した後、保存して終了するにはどうすればよいですか?保存して終了するコマン...

CentOS8.1 で Gitlab サーバーを構築するための詳細なチュートリアル

Gitlab と Github の違いについては、あまり説明する必要はありません。一言でまとめると、...

CSS により、子コンテナが親要素を超えます (子コンテナは親コンテナ内で浮動します)

序文場合によっては、次の図のような浮動効果の要件が必要になります。 成し遂げる標準的な通常の状況では...

一定期間の日ごと、時間ごとの統計データを取得するMySQLの詳しい説明

毎日の統計情報を取得するプロジェクトを実行する際、プロジェクト ログを分析する必要があります。要件の...

Docker パッケージング ノード プロジェクトのプロセスの説明

バックエンド プログラマーとして、フロントエンドのものをいじらなければならないこともあります。そこで...

React Hooksの使用例

目次簡単なコンポーネントの例より複雑な親子コンポーネントのケースオンセレクトの書き方反応する子供Re...

VueのVuexの4つの補助機能について

目次1. 補助機能2. 例1. mapState と mapGetters 2. mapMutati...

スクロールバーを非表示にする HTML の簡単な実装

1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...

JSON.stringify の簡易版の実装とその 6 つの主要機能の詳細な説明

目次序文JSON.stringify の 6 つの機能特集1特集2特集3特集4特集5特集6手動で文字...