網站開發的好工具-網頁載入速度及網頁size偵測


firebug
網頁下顯示debug視窗

網頁載入時間

一般進行網頁設計開發的時候,經常忽略網頁在一般網友的載入速度快慢,但這種忽視對於一個網站來說卻是致命的,因為網友能夠容忍打開一個網頁的速度不過是幾秒鐘的事情,如果網頁因為設計或規劃時沒有考慮到這點,造成網頁的載入速度很慢的話,那麼網站漸漸的會被網友所唾棄,當然這樣的網站也不可能成功。

因此在開發網頁的時候,就要隨時注意網頁的載入時間問題。這裡介紹一個很方便的工具,可以很容易的知道網頁總共需要載入多少大小(size)的資訊及檔案,也可以很容易的知道載入時間要花多長。有了這樣的測試結果,就可以據此去改善網頁的圖片或者架構,降低整個網頁的大小,以期加快載入的速度,提高用戶的體驗度

Firebug

這個工具就是firebug(只有firefox瀏覽器有此插件),之前有介紹過 firebug 也是網頁設計的好幫手,可以直接編修它的debug視窗,然後在網頁上立即可以呈現出成果。

要啟動 firebug 必須點擊瀏覽器右上角的 firebug 圖標,會在網頁下方顯示除錯(debug) 的視窗。 如果要觀察網頁的載入狀況,可以點擊選單上的 "網絡"

firebug
網頁的所有元素大小總合 1MB

   

紅色圈圈的 "所有" 代表想看的內容是包含所有,有 Html、CSS、JS、圖片等,當然也可以看個別頁面上圖片的大小以及載入時間

以搜狐首頁為例,整個頁面的載入大小為 1MB,載入時間為 10.17s,debug視窗裡頭的每一條代表每一個元素被載入的時間及大小,可以從這裡去觀察整個網頁中是哪一個元素造成載入時間過長或者圖片太大需要縮小等。

firebug
載入時間 10.17s

如果只想觀察網頁上圖片的狀況,可以只選擇 "圖片",然後查看下方的載入大小以及載入時間。

網頁 debug 工具延伸閱讀

(*) Google Chrome 也提供網頁 debug 工具

本文地址:網站開發的好工具-網頁載入速度及網頁size偵測
內容對你有幫助嗎? 臉書分享:
分享到:

發表迴響

您的電子郵件位址並不會被公開。 必要欄位標記為 *

*

您可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

交換連結: Liang's Blog |