20 種提升網頁速度的技巧
[2] 常識:牢記設計規則
[3] 檢查 cookie 使用情況
[4] 盡可能延遲腳本加載
[5] 使用 PNG 格式的圖像
[6] 使用 YSlow 分析網頁
引言
不是所有人都能夠使用高速 Internet 連接。即使每個人都能夠使用高速網絡,也會因為各種各樣的原因使您的 Web 應用程序看起來運行緩慢。在這個寬帶速度不斷提高的時代,您應當關注一下頁面加載時間。將珍貴的頁面加載時間縮短幾秒,將更加珍貴的請求和響應時間縮短幾毫秒。您將為訪問者創造一種更好的體驗。
閱讀完本文之后,您將能夠較好地了解網頁加載時間優化的基本知識。您還能夠使用工具和知識更好地識別和判斷加載緩慢的頁面部分和瓶頸。
先決條件
在理想情況下,您應該安裝了 Mozilla Firefox。您還應該大體了解 Web 開發。本文涉及的主題并不復雜,但是如果您了解超文本標記語言(Hypertext Markup Language,HTML)、層疊樣式表(Cascading Style Sheet,CSS)以及 ™ 編程語言等主題,那么在學習本文時將更加得心應手。不需要使用集成開發環境(IDE),只需使用您喜愛的編輯器。
您必須在瀏覽器中啟用了 JavaScript。另外,要學習與 Firebug 和 YSlow 相關的內容,您需要安裝 Firefox Web 瀏覽器。
假設您沒有寬帶
許多人通過某種形式的寬帶連接訪問 Internet,這些形式可能是 DSL、網線、光纖或其他方法。但是,無法使用這類技術的用戶不得不使用撥號連接。您一定已經忘記撥號上網是什么感覺了,但您可以試著回想一下網頁逐行加載時的情形。
幸運的是,這些可憐的人們現在已經能夠獲得一些幫助。您可以通過縮短加載頁面的時間來改善他們的體驗。但是,撥號連接并不是降低加載和響應速度的惟一原因。許多 Web 設計人員錯誤地認為高速 Internet 連接的到來會使網站性能優化變得沒有必要。這種觀點是不對的。例如,過去使用桌面軟件執行的許多任務現在可以在線執行。在 Web 應用程序中獲得像桌面軟件那樣的高速響應體驗非常困難,因此性能優化非常重要。幸運的是,一些工具和最佳實踐可用于縮短響應和加載時間,提供更加流暢的體驗。
基本工具
對于所有與優化相關的任務,您必須使用工具來診斷瓶頸和識別問題。現在在 Web 開發中使用最廣泛的兩個工具是 Firebug 和 YSlow,它們都是開源、免費的 Firefox 插件。
Firebug
Firebug(參見 參考資料)是最流行的 Firefox 擴展之一,該應用程序能夠使 Web 開發人員的工作更加輕松。它包含許多非常有用的功能,比如:
- JavaScript 調試
- JavaScript 命令行
- 監視 JavaScript 性能和跟蹤 XmlHttpRequests
- 登錄 Firebug 控制臺
- 跟蹤
- 檢查 HTML 元素和動態編輯 HTML 代碼
- 動態編輯 CSS 文檔
YSlow
YSlow(參見 參考資料)分析網頁,并根據 Yahoo! 起草的高性能網站規則(參見 參考),告訴您網頁加載緩慢的原因。YSlow 是一個與 Firebug 集成的 Firefox 插件,因此您需要首先安裝 Firebug,然后才能安裝和使用 YSlow。