Web ページのアクセスを高速化する方法_html/css_WEB-ITnose

Webページの読み込み速度を改善するにはどうすればよいですか?

1. HTTP リクエストを最小限に抑える

時間の 80% が画像、スタイルシート、スクリプト、Flash
などのリクエストに費やされます。
ウェブサイトの速度を向上させる最善の方法は、デザインを簡素化することです。

. ページの要素を簡素化します
. できるだけ画像の代わりに CSS を使用します
. スクリプトを減らしてページの下部に配置します

2. サーバーを削減します応答時間

(1) chrome ページ速度チェック プラグイン pagespeed

(2) オンライン検出

(3) YSlow 検出を使用する

3. 圧縮を有効にする

送信するには gzip 圧縮を使用することを検討できます。ブラウジングの 90% サーバーは yahoo などの gzip

をサポートしており、ダウンロード時間が 70% 削減されます

apache: mod_deflate を使用します
nginx: HttpGzipMoudle を使用します
iis: HTTP 圧縮の構成を使用します

(1) apache
英語 Web サイト

http ://httpd.apache.org/docs /current/mod/mod_deflate.html

中国語の Web サイト
http://apache.chinahtml.com/mod/mod_deflate.html

フォーマットを追加:
AddOutputFilterByType DEFLATE text/html text/ plain text/xml
詳しい使用方法については、こちらをご参照ください:

(2)nginx
公式ドキュメント:
http://wiki.nginx.org/HttpGzipModule
詳細な設定例:
http://blog.chinaunix.net /uid-20622737-id-3464367.html

http://www.jb51.net/article/48995.htm
このモジュールは組み込みであり、コンパイルする必要がないことに注意してください

    gzip on;    gzip_min_length 1k;    gzip_buffers 16 64k;    gzip_http_version 1.1;    gzip_comp_level 6;    gzip_types text/plain application/x-javascript text/css application/xml;    gzip_vary on;

(3 )iis

https://technet.microsoft.com/en- us/library/cc753681%28v=ws.10%29.aspx

4. ブラウザーのキャッシュをオンにします

方法 1: Last-Modified Last-modified: Fri, 16 Mar 2007 04:00:25 GMT ファイルの内容 (画像、HTML、CSS、JavaScript など)

リクエストを行うと、ブラウザは自動的に最後の変更を比較します
更新されていない場合は、304 が有効になります

方法 2: ETag 検証署名

ETag: ead145f ファイルの内容 (画像、HTML、CSS、JavaScript など)

サーバー時間が元々間違っていた場合はどうなりますか? 署名がそれぞれの唯一の証拠です
ファイルの一意の識別子
ファイルが変更されると、ETag は自動的に変更されます

方法 3: 有効期限を設定します
有効期限:火曜日, 20 3月 2007 04:00:25 GMT ファイルの内容 (画像、HTML、CSS、JavaScript など)
キャッシュの有効期限を設定します。

方法 4: Max-Age の最大有効期間

設定方法:
Apache:

mod_headers および mod_expires モジュールをオンにする

有効期限ヘッダーを構成する

ExpiresActive OnExpiresDefault A0# 1 YEAR - doesn't change often<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">ExpiresDefault A31536000</FilesMatch># 1 WEEK - possible to be changed, unlikely<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">ExpiresDefault A604800</FilesMatch># 3 HOUR - core content, changes quickly<FilesMatch "\.(txt|xml|js|css)$">ExpiresDefault A10800</FilesMatch>

最大有効期間ヘッダーを構成する

# 1 YEAR<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">Header set Cache-Control "max-age=31536000, public"</FilesMatch># 1 WEEK<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">Header set Cache-Control "max-age=604800, public"</FilesMatch># 3 HOUR<FilesMatch "\.(txt|xml|js|css)$">Header set Cache-Control "max-age=10800"</FilesMatch># NEVER CACHE - notice the extra directives<FilesMatch "\.(html|htm|php|cgi|pl)$">Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"</FilesMatch>

5. 圧縮されたリソース

(1) HTML を圧縮する

圧縮用の chorme 拡張子、クリックして「最適化されたコンテンツ」を表示します

圧縮された効果を見ることができます
(2) 圧縮された CSS

(3) 圧縮された JavaScript

6. 画像を最適化します

画像サイズ 画像を大きく表示します

画像形式 jpeg の後に png を使用するのが最適です (古いブラウザはサポートしていません)
gif の使用量を減らします

src 属性 空の src 属性を避ける 空の場合、ブラウザは自動的に繰り返し属性を追加するように要求します。 css クラスを作成してカプセル化します

8. 一部の CSS スタイルはページに埋め込まれます

一部は外部ファイルから取得されます



9. 使用される Web サイトのプラグインの数を削減します

10. s

詳細については、ここをクリックしてください:
https://developers.google.com/speed/docs/insights/rules