COCO研究院

 找回密碼
 註冊
搜索
查看: 3085|回復: 13

分析網頁載入速度的工具

[複製鏈接]
發表於 12-12-6 21:45 | 顯示全部樓層 |閱讀模式
最近找時間來調校coco-in的速度。首先介紹分析網頁載入速度的工具,有2個網站不錯。
Google page speed
https://developers.google.com/speed/pagespeed/insights

http://gtmetrix.com/


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

pagespeed.gif


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

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

gzip_ok.gif


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

caching.gif


評分

參與人數 4金錢 +7 收起 理由
Sirius + 2 太強了!
禾佳 + 2 很棒的文章,感恩!
超級美少女 + 2 按一個讚!
tedwang + 1 按一個讚!

查看全部評分

 樓主| 發表於 12-12-6 22:07 | 顯示全部樓層

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

image_size.gif


發表於 12-12-7 00:15 | 顯示全部樓層
超專業的小娃~   感謝分享
發表於 12-12-7 00:24 | 顯示全部樓層
這個部分非小弟專業~
只能說一句....辛苦您了~
感謝再感謝~
發表於 12-12-7 02:10 | 顯示全部樓層
這個似乎不錯玩...........
發表於 12-12-7 11:01 | 顯示全部樓層
看看CDN方案是不是論壇網站?

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

評分

參與人數 3金錢 +6 收起 理由
超級美少女 + 2 按一個讚!
Sirius + 2 很棒的文章,感恩!
小娃 + 2 聽起來很不錯,感謝。

查看全部評分

發表於 12-12-7 13:22 | 顯示全部樓層
下面是gtmetrix跑出來的報表,也是說要使用瀏覽器快取功能


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



順便提供一個線上PNG圖檔的減肥網站介紹:TinyPNG 線上 PNG 圖檔壓縮、減肥工具
也許有的人會用到
發表於 12-12-7 13:37 | 顯示全部樓層
使用者若要看某個網頁中各項目的載入時間,也可用Firebug看(Firefox, Chrome, Opera都有此add-on)
裝好Firebug後,將其開啟,切到「網路」頁
載入網頁,就可看到載入時間的分析畫面

Firebug

Firebug


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

評分

參與人數 1金錢 +3 收起 理由
小娃 + 3 很棒的功能!

查看全部評分

發表於 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.

評分

參與人數 1金錢 +3 收起 理由
小娃 + 3 原來YSlow是這個意思,昨天有看到它的評分.

查看全部評分

 樓主| 發表於 12-12-7 21:40 | 顯示全部樓層
Sirius 發表於 12-12-7 13:22
它的意思是否要使用者啟用瀏覽器的快取功能?
目前新的瀏覽器應該預設是啟用的才對

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


 樓主| 發表於 12-12-7 21:48 | 顯示全部樓層
Sirius 發表於 12-12-7 13:47
剛剛又看到另一個在使用者瀏覽器端分析單一網頁載入的工具,支援多種瀏覽器
裡面也提到了CDN

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

yslow.gif

剛才跑出一些報表,小娃花點時間研究一下它是什麼。
它也有提到CDN。
發表於 12-12-7 22:50 | 顯示全部樓層
小娃 發表於 12-12-7 21:40
它的意思好像是要指定物件過期的時間,
比方說有些永遠不變的東西,過期日是1週甚至更久。
則瀏覽器載入 ...

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

評分

參與人數 2金錢 +5 收起 理由
Sirius + 2 好主意
小娃 + 3 感謝!我搭配這幾個keyword試試!.

查看全部評分

 樓主| 發表於 12-12-8 17:02 | 顯示全部樓層
Sirius 發表於 12-12-7 13:47
剛剛又看到另一個在使用者瀏覽器端分析單一網頁載入的工具,支援多種瀏覽器
裡面也提到了CDN

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

發表於 12-12-8 19:18 | 顯示全部樓層
超專業的小娃~

辛苦您了
您需要登錄後才可以回帖 登錄 | 註冊

本版積分規則

手機版|Archiver|站長信箱|廣告洽詢|COCO研究院

GMT+8, 24-6-9 06:09

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回復 返回頂部 返回列表
理財討論網站 | AI繪圖AI超擬真美女AI beauty AI Stable DiffusionAI正妹AI Lookbook