如何加快web 頁面的訪問速度
1. 儘量減少HTTP請求
80%的時間是花在 images, stylesheets, scripts, Flash
等等的請求上。
那麼最好的提升網站速度的方式就是簡化你的設計。
. 簡化你頁面上的元素
. 儘可能的用css代替圖片
. 合併多個樣式表 放入一個
. 減少scripts指令碼,並把他們放在頁面底部
2. 減少server響應時間
(2) 線上檢測
3. 啟用壓縮
可以考慮使用 gzip 壓縮傳輸 90%的瀏覽器支援gzip
如 yahoo 減少下載時間 70%
apache:使用 mod_deflate
nginx: 使用 HttpGzipMoudle
iis: 使用 Configure HTTP Compression
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
4. 開啟瀏覽器快取
方式一:Last-Modified 上一次修改時間
Last-modified: Fri, 16 Mar 2007 04:00:25 GMT File Contents (could be an image, HTML, CSS, Javascript...)
瀏覽器在請求的時候,會自動比較上一次修改
時間是否更新,如果未更新,則304啟用快取檔案
方式二:ETag 驗證簽名
ETag: ead145f File Contents (could be an image, HTML, CSS, Javascript...)
如果伺服器時間本來就是錯的怎麼辦,簽名是唯一證明每一個
檔案的唯一標識
如果檔案被修改了,ETag會自動更改
方式三:Expires 設定過期時間
Expires: Tue, 20 Mar 2007 04:00:25 GMT File Contents (could be an image, HTML, CSS, Javascript...)
設定快取失效時間,
方式四:Max-Age 最大生存週期
如何設定:
apache:
開啟 mod_headers 和 mod_expires 模組
配置過期頭
ExpiresActive On ExpiresDefault 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屬性 如果為空 瀏覽器會自動請求
當前整個頁面
7. 優化css
避免直接在標籤裡面新增屬性
就是減少行內css樣式
儘量將重複的屬性部分 新增至一個css類裡面封裝起來
8. css部分樣式內嵌在頁面中
部分來自外部檔案