Nginx 最適化サービスで Web ページ圧縮を実装する方法

Nginx 最適化サービスで Web ページ圧縮を実装する方法

リソースを節約するためにWebページの圧縮を設定する

1.まず、設定を変更しましょう

vim /usr/local/nginx/conf/nginx.conf
http {
......
  gzip on; #コメントを解除して gzip 圧縮機能を有効にします gzip_min_length 1k; #圧縮ファイルの最小サイズ gzip_buffers 4 64k; #圧縮バッファ、サイズは 4 64k バッファ gzip_http_version 1.1; #圧縮バージョン (デフォルトは 1.1、フロントエンドが squid2.5 の場合は 1.0 を使用してください)
  gzip_comp_level 6; #圧縮率 gzip_vary on; #圧縮されたページを保存するためのフロントエンドキャッシュサーバーをサポート gzip_types test/plain text/javascript application/x-javascript text/css text/xml application/xml application/xml+rss
  image/jpg image/jpeg image/png image/gif application/x-httpd-php application/javascript application/json;
  #圧縮タイプ。どの Web ドキュメントが圧縮機能を有効にするかを示します。
} 

ここに画像の説明を挿入

ここに画像の説明を挿入

2. 表示したい写真をフォルダにドラッグします

ここに画像の説明を挿入

3. この画像をウェブページに挿入する

vim インデックス.html
......
<img src="game.jpg"/> #Webページに画像を挿入する</body>
</html> 

ここに画像の説明を挿入

4. サービスを再起動する

ここに画像の説明を挿入

5. 要素をチェックインし、圧縮されていることを確認する

ここに画像の説明を挿入

Nginx 最適化サービスによる Web ページ圧縮に関するこの記事はこれで終わりです。Nginx による Web ページ圧縮に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • nginx 基本チュートリアル
  • Nginx 設定入門チュートリアル
  • Windows での nginx HTTP サーバーの入門チュートリアル
  • Nginx ロードバランシングとは何か、そしてそれをどのように設定するか
  • nginx を最適化する 6 つの方法
  • Nginx がフロントエンド リソースへのクロスドメイン アクセスの問題をどのように解決するかの詳細な説明
  • proxy_pass を設定した後に Nginx が 404 を返す問題を解決する
  • Nginx をベースに特定の IP への短期アクセス数を制限する
  • Nginx の構成と HTTP 実装コード分析との互換性
  • Nginx サービス クイック スタート チュートリアル

<<:  Vue-Routerのルート設定の詳しい説明

>>:  MySQL Workbench の使い方チュートリアルの詳しい説明

推薦する

中国語ウェブコンテンツを紹介する10の経験

<br /> テキスト、シンボル、リンクの 3 つの側面に焦点を当て、主に中国語で、私の...

CSS で子 div の高さを親コンテナの残りのスペースに合わせる方法

1. フローティング方式を使用する効果画像: コードは次のとおりです: (.content の高さは...

webkit-box-reflect を巧みに使用してさまざまな動的効果を実現する (要約)

かなり前の記事で、 -webkit-box-reflectプロパティについて説明しました。リフレクシ...

HTML でよく使われるメタ百科事典 (推奨)

メタタグは、HTML言語のヘッド領域にある補助タグです。HTML文書のヘッダーにあるヘッドタグとタイ...

商品クエリ機能を実現するJavaScript

この記事の例では、商品検索機能を実現するためのJavaScriptの具体的なコードを参考までに共有し...

JDカルーセル効果を実現するための純粋なHTMLとCSS

JD カルーセルは、動的な効果を追加せず、主に位置決めの知識を使用して、純粋な HTML と CS...

HTML構造化実装方法

DIV+css構造 CSSレイアウトを学んでいますか?まだ純粋な CSS レイアウトを完全に習得でき...

モバイル端末の水平および垂直画面ビューポート検出を決定するための js のいくつかの方法

目次1. 異なるビューポートを取得する方法2. 水平画面と垂直画面のJavaScript検出3. 水...

HTML の 2 つのタブ ナビゲーション間の競合の解決方法

まず問題の説明から始めましょう:同じページで、1 つのタブに float:left が必要で、もう ...

このリファレンスとJavaScriptのカスタムプロパティの詳細な説明

目次1. このキーワード2. カスタム属性3. 包括的なケース1:タブの実装付録要約する1. このキ...

MySQL での and or クエリの優先度分析

これは見落とされがちな問題かもしれません。まず、次の点を明確にする必要があります。 MySQL では...

Dockerスペースがいっぱいでコンテナに入れない場合の解決策

トラブル発生が突然で、業務も迫っていたため、現場のスクリーンショットを撮る時間がありませんでしたので...

MYSQL 文字列強制変換メソッドの例

序文2 つのテーブル内の同じフィールドの型が異なっていたり、エンコード タイプが異なっていたりするた...

Docker はすべてのコンテナをバッチ起動して閉じます

Dockerの場合すべてのコンテナコマンドを開始する docker を起動します $(docker ...

広告を閉じるための JavaScript カウントダウン

広告を閉じるまでのカウントダウンを実装するために JavaScript を使用するまだフロントエンド...