簡化網頁 最佳化WEB應用的方法

來源:互聯網
上載者:User
web|網頁|最佳化

在最近的項目中,我發現許多過於臃腫的網頁。對於內連網中的網站而言,這一般不會造成什麼問題。不過,當你通過互連網向外發布網頁時,效能可能是我們關心的主要問題——畢竟,多數使用者並非通過高速串連訪問網站。本周,我來分析一下最佳化WEB應用的方法。

常見問題與可能的最佳化方案

載入網頁的時間過長,這僅僅是WEB使用者的常見投訴之一,但這也是最明顯的問題。WEB開發人員的主要問題在於:他們認為自己的平台滿足一個目標使用者群。但使用者的電腦配置與互連網連線速度各不相同,所以開發人員應能滿足使用者的最低要求。

頁面大小除影響下載速度以外,它還會影響WEB伺服器資源,如磁碟空間和頻寬資源。有許多方法可以對網頁進行簡化。經驗證明,僅僅保留必要的內容、並儘可能地簡化映像與指令碼,這些都是很好的方法。

將網頁保持在30-40K範圍內,這是人們常用的標準。那麼,該如何簡化網頁呢?下面的列表提供了一個可能的選擇樣本:

  • 使用CSS:CSS能夠顯著簡化頁面設計,並減少載入時間。因為使用HTML表會增加頁面中的字元,所以應使用CSS,並使頁面最小。
  • 使用CSS和JavaScript外部檔案:這樣可促進檔案在頁面間的再利用,並集中維護。另外,初次請求/載入後,檔案即被存入緩衝。
  • 少用過長網頁:可以使用多個(更小)頁面來加速回應時間,減少檔案大小。
  • 僅在必要時應用特效:載入Java程式和Flash動畫往往需要很長時間,使用者無法處理這類內容。
  • 避免使用架構:這是經驗之談,因為瀏覽器必須要求並下載架構,首先要求下載主架構,再要求下載其它架構。
  • 考慮映像大小:映像的常用標準大小為12K,但你應把它計算在整個頁面大小之內。
  • 避免或減少伺服器冗餘傳輸:你可以通過AJAX方案來解決這個問題。

找出問題

處理上表中列出的網站/網頁問題可能有些乏味,不過有一些免費的WEB工具可協助你找出這些問題。

這些工具處理網頁(通過URL)並確定整個頁面的大小,以及網頁中所使用的對象和映像等元素。在決定如何改善網頁時,這些資訊非常有用處。

下面是WebSiteOptimization.com上的網頁分析器(Web Page Analyzer)工具所產生報告的一部分。報告很長,所以只列出以下的的分析與建議兩部分:

TOTAL_HTML——恭喜!本頁面中HTML檔案(包括主HTML檔案)的總數為1,多數瀏覽器都可對它進行多線程訪問。減少HTTP請求是網站最佳化的關鍵。

TOTAL_OBJECTS——警告!本頁面中共有16個對象——考慮把它減少到合理的範圍。組合、精簡併最佳化外部對象。用CSS翻滾代替圖形翻滾來加速顯示,減少HTTP請求。

TOTAL_IMAGES——小心!本頁面中圖片數量適中(10幅)。考慮在網站中少使用圖片,或嘗試在多個頁面中使用同一幅圖片以充分利用緩衝。

TOTAL_CSS——小心!本頁面中有4個外部CSS檔案。考慮將其減少到合理的範圍。組合、精簡併最佳化外部CSS檔案。理想情況下,在網頁中應只有一個(或在高流量網頁中為一個嵌套CSS)檔案。

TOTAL_SIZE——恭喜!整個頁面共為20067位元組。在56Kbps連線速度下,本頁面只要不到8秒——或4.80秒——就能載入。但仍有改善的空間。

TOTAL_SCRIPT——恭喜!本頁面的外部指令檔總數為1。外部指令碼不如CSS檔案可靠,因此考慮把所有指令碼組合到一個指令碼中,或把它們嵌套到高流量頁面中。

HTML_SIZE——恭喜!這個HTML檔案共有9441位元組,小於20K。如果指定圖片的高和寬,這個大小允許頁面在8秒內——使用者願意等待頁面顯示的平均時間——顯示出來。

IMAGES_SIZE——恭喜!圖片總大小為3732位元組,小於15K。理想情況下,每幅圖片應小於1160位元組,以滿足一個TCP-IP包的要求。

SCRIPT_SIZE——恭喜!所有外部指令碼共為2374位元組,小於4080位元組。它滿足三個TCP-IP包的要求。

CSS_SIZE——小心!外部CSS總大小為5520位元組,大於4080位元組但小於8K。對外部檔案而言,努力使其小於1160位元組,以適應一個TCP-IP包的要求。考慮最佳化CSS,去除一些特性,將它減小到合理的大小範圍。

MULTIM_SIZE——恭喜!所有外部多媒體檔案總大小為0,小於4K。

如你在樣本中所見,它提供了網頁總大小,以及其中各種元素大小等詳細內容。所產生報告中的主要內容為評估資訊(恭喜,小心或警告)。樣本頁面的大多數結果可以接受,頁面中圖片和對象使用的評語為警告和/或小心。建議減少對象/圖片的數量——這將減少頁面的整體大小,並縮短下載時間。

結論

如果使用者無法接受頁面載入時間,他們會立即轉向其它網站,因此網頁的回應時間對於充分利用應用程式極為重要。頁面大小是影響網頁載入時間的重要因素。有許多方法可以限制網頁的大小,包括(但不限於)使用更小的圖片、CSS和外部CSS/JavaScript資源。手工應用工具對網頁進行徹底分析可為我們提供簡化應用頁面的線索。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。