小娃 發表於 12-12-6 21:45

分析網頁載入速度的工具

最近找時間來調校coco-in的速度。首先介紹分析網頁載入速度的工具,有2個網站不錯。
Google page speed
https://developers.google.com/speed/pagespeed/insights

http://gtmetrix.com/


這2個tool都會跑出報表,priority高的表示必須優先改進。
下面最高的是使用瀏覽器快取功能,不過我研究了好久,還是不知道要在哪裡指定。




所以今天先看看有沒有別的可以做。
Medium priority裡有一項啟用壓縮功能,這個滿實用的。
我上網查了以後,原來是我的nginx沒有啟動css及js的gzip功能。
這個vps已經用1年多了竟然沒開這個功能。我應該早點認識這些分析網頁速度的工具。

啟動gzip就比較簡單了。
上網找一下資料,必須修改nginx.conf,抄抄寫寫就完成囉。
如下面檢測工具,可以看到coco-in的gzip壓縮完成了。




下面是gtmetrix跑出來的報表,也是說要使用瀏覽器快取功能,
不過不知道在哪裡改設定。{:4_155:}
小娃再想想吧。




小娃 發表於 12-12-6 22:07


這個網站真是超聰明的。
它發現圖檔可以縮小。不但提出建議,連縮小後的圖檔都準備好了,按一鍵可得。




0204 發表於 12-12-7 00:15

超專業的小娃~   感謝分享{:4_113:}

wyuki 發表於 12-12-7 00:24

這個部分非小弟專業~
只能說一句....辛苦您了~
感謝再感謝~{:4_113:}

drfutures 發表於 12-12-7 02:10

這個似乎不錯玩...........

philipz 發表於 12-12-7 11:01

看看CDN方案是不是論壇網站?

補充內容 (12-12-7 13:53):
Sorry,是適不適合。

Sirius 發表於 12-12-7 13:22


下面是gtmetrix跑出來的報表,也是說要使用瀏覽器快取功能

它的意思是否要使用者啟用瀏覽器的快取功能?
目前新的瀏覽器應該預設是啟用的才對



順便提供一個線上PNG圖檔的減肥網站介紹:TinyPNG 線上 PNG 圖檔壓縮、減肥工具
也許有的人會用到

Sirius 發表於 12-12-7 13:37

使用者若要看某個網頁中各項目的載入時間,也可用Firebug看(Firefox, Chrome, Opera都有此add-on)
裝好Firebug後,將其開啟,切到「網路」頁
載入網頁,就可看到載入時間的分析畫面



這功能對於設計網頁的人很有用,必要時可分析一下哪一部分需要減肥{:8_529:}

Sirius 發表於 12-12-7 13:47

本帖最後由 Sirius 於 12-12-7 13:48 編輯

剛剛又看到另一個在使用者瀏覽器端分析單一網頁載入的工具,支援多種瀏覽器
裡面也提到了CDN

YSlow

YSlow analyzes web pages and why they're slow based on Yahoo!'s rules for high performance web sites

Feature highlights

    Grades web page based on one of three predefined ruleset or a user-defined ruleset;
    It offers suggestions for improving the page’s performance;
    Summarizes the page’s components;
    Displays statistics about the page;
    Provides tools for performance analysis, including Smush.it™ and JSLint.

小娃 發表於 12-12-7 21:40

Sirius 發表於 12-12-7 13:22 static/image/common/back.gif
它的意思是否要使用者啟用瀏覽器的快取功能?
目前新的瀏覽器應該預設是啟用的才對



它的意思好像是要指定物件過期的時間,
比方說有些永遠不變的東西,過期日是1週甚至更久。
則瀏覽器載入一次之後,下次還沒到期就不載入。
可是我看不懂要在哪裡設定,是在server還是在http語法裡設定?


小娃 發表於 12-12-7 21:48

Sirius 發表於 12-12-7 13:47 static/image/common/back.gif
剛剛又看到另一個在使用者瀏覽器端分析單一網頁載入的工具,支援多種瀏覽器
裡面也提到了CDN



這個tool挺好用的,內嵌在Google Chrome裡容易上手。



剛才跑出一些報表,小娃花點時間研究一下它是什麼。
它也有提到CDN。

tedwang 發表於 12-12-7 22:50

小娃 發表於 12-12-7 21:40 static/image/common/back.gif
它的意思好像是要指定物件過期的時間,
比方說有些永遠不變的東西,過期日是1週甚至更久。
則瀏覽器載入 ...

是否要找一下 "Cache-Control" "Expire" "max-age" 這幾個key words?

小娃 發表於 12-12-8 17:02

Sirius 發表於 12-12-7 13:47 static/image/common/back.gif
剛剛又看到另一個在使用者瀏覽器端分析單一網頁載入的工具,支援多種瀏覽器
裡面也提到了CDN



我花點時間研究了CloudFlare的資訊,
很可惜它在台灣沒有伺服器。
所以反而會比直接連接要慢。( COCO的主機在台灣)
我覺得這個服務滿不錯的,很看好它的未來成長。

2coco 發表於 12-12-8 19:18

超專業的小娃~ {:4_113:}

辛苦您了 {:4_127:}{:4_127:}{:4_127:}
頁: [1]
查看完整版本: 分析網頁載入速度的工具