每個進行網站設計的人總是提出與網站速度有關的問題。快速加載的網站瀏覽起來更有趣,它們為普通訪問者提供了更好的整體體驗。
本文光龍網絡將介紹網站設計的標準措施,以幫助您的網站更快地加載而不是爬網速度,以及如何改進它的技巧。
1) 發出小的 HTTP 請求
減少頁面上的組件數量會減少創建或翻頁所需的 HTTP 請求數量,從而加快頁面加載速度。減少組件數量的一些有效方法包括:
合并文件,
將多個腳本合并為一個腳本,
將多個 CSS 文件合并到一個樣式表中,以及
使用 CSS Sprites 和圖像映射。
2) 盡早根除緩沖區
通常,當服務器完成對 HTML 輸出的處理時,您會獲得 HTTP 請求的結果。因此,延遲會根據服務器準備請求的 HTML 頁面的時間而有所不同。有一種按需方法可以獲取當時準備好的內容,即flush。在 PHP 中,您有一個 color() 函數,它發送瀏覽器的部分就緒 HTML 輸出。
思考沖洗的好地方就在 HEAD 之后。
3) 將 CSS 調用放在頁面頂部
將樣式表移動到文檔 HEAD 元素支持更快地輸出頁面,因為這使頁面可以輕松工作。
4)將JS放在頁面底部
JavaScript 腳本可以很好地阻止網頁設計中的并行下載;下載腳本時,瀏覽器不會開始任何其他下載。為了幫助更快地加載頁面,如果可以延遲,請將手移到頁面底部。
5)避免空的Href或Src
遇到空的圖片 src 時,您可能會發現瀏覽器什么也不做。但是,在大多數瀏覽器中,這是不可能的。IE 生成對頁面目錄的請求;Chrome、Firefox 3、Safari 等。這種行為可能會破壞用戶數據,浪費服務器計算周期,并創建一個永遠不會被查看的頁面。在最令人困惑的情況下,通過提供大量意外流量來削弱您的服務器。
6) 添加過期標題
網頁越來越復雜,包含更多的腳本、樣式表、圖像和 Flash。首次訪問頁面可能需要多個 HTTP 請求來加載所有組件。使用 Expires 標頭,這些組件變得可緩存,避免在后續頁面視圖中使用過多的 HTTP 請求。過期標頭最常與圖像相關聯。不過,它們可以而且應該用于所有頁面組件,包括腳本、樣式表和 Flash。
7) 避免 CSS 表達式
CSS 表達式是一種在網頁設計中動態設置 CSS 屬性的強大方法。這些表達式經常被考慮:
當頁面調整大小時,
當頁面被下拉時,
當用戶在頁面上滾動鼠標時。
這些頻繁的評估降低了用戶體驗。
8) CSS 和 JS 元素不應該包含在 HTML 頁面中,并且應該有單獨的頁面
通常,通過使用外部 JavaScript 和 CSS 文件,您可以輕松地生成更快的頁面,因為文件被瀏覽器緩存。每次請求 HTML 文檔時,都會下載嵌入在 HTML 文檔中的 JavaScript 和 CSS。這會減少 HTTP 請求的數量,但會增加 HTML 文檔的大小。
另一方面,如果 JavaScript 和 CSS 位于瀏覽器緩存的外部文件中,則 HTML 文檔大小會減小,而不會增加 HTTP 請求的數量。
9) 減少 DNS 查找
域名系統 (DNS) 將網站名稱放入 IP 地址以訪問這些網站。就像郵政局長如何使用您提供的地址來識別您的房子一樣。瀏覽器聯系一個 DNS 解析器,該解析器返回服務器的 IP 地址。DNS通常有價格;查找 IP 地址需要 20 到 120 毫秒。
10) 盡可能使用內部域/IP
程序員在編寫代碼時總是使用站點名稱來為郵件或其他任何東西設置新的出站連接。情況不應該如此。您應該在可訪問時使用 IP 或內部域。
例如,如果您想通過 SMTP 發送電子郵件,請將 \"localhost\" 寫為 SMTP 主機;郵件服務器存在于 Web 服務器所在的同一物理服務器上。假設郵件服務器托管在內部網絡中的遠程機器上。在這種情況下,您需要提及指向郵件服務器的內部(私有)IP 的域名,而不是指向公共 IP 的域名。
11) 刪除舊的或不需要的頁面
如果程序員對文件進行大量更改,他們通常更喜歡將舊頁面的副本保留為“page.old”。確保在網站在線發布之前刪除這些舊文件。盡管網絡服務器上有舊的或不受歡迎的頁面可能不會直接影響網站的性能,但它們可能會間接影響它。可能會忘記更新某些文件中的頁面更改。這些文件仍然會調用舊頁面,從而導致各種問題,而不僅僅是與性能相關的問題。
12)從所有頁面中刪除重復條目
有時,程序員會無意中將相同的代碼放在文件的不同位置。在發布網站之前,檢查代碼并找出是否有任何代碼重復出現并在發現時將其刪除是很重要的。
13) 確保沒有額外的不存在頁面導致 404 錯誤
發出 HTTP 請求并收到 404(未找到)錯誤的成本更高,并且會降低用戶體驗。
14) 不要在 HTML 中縮放圖像
Web 設計人員有時通過使用 HTML 圖像元素的寬度和高度特性來設置圖像大小。避免這樣做,因為它可能會導致比需要更多值得注意的圖像。例如,假設您的頁面需要尺寸為 240X720 的圖像,但使用寬度和高度屬性以尺寸 120X360 顯示它。在這種情況下,瀏覽器將下載比所需范圍更廣的圖像。
15) 有一個自定義的 404 頁面
設置一個自定義的 404 頁面來幫助用戶找到“未找到”頁面,最好是一個搜索按鈕。
光龍網絡的網頁設計. 獲取最有效的網頁設計服務,以制作更快、更用戶友好的網站。