Optimize webpage speed: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
No edit summary
No edit summary
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
分析工具：分析網頁連線下載速度，並提供網站開發者建議的服務或軟體


分析工具
== 線上工具 ==
* [[Web_Ping#分析網頁連線下載速度，並提供網站開發者建議的服務或軟體 | 分析網頁連線下載速度，並提供網站開發者建議的服務或軟體]]
* [https://developers.google.com/speed/pagespeed/insights PageSpeed Insights — Google Developers] offered by Google: [https://developers.google.com/speed/pagespeed/insights#url=www.google.com.tw&mobile=false Sample report] {{access | date= 2012-08-14}}
** 教學: [http://briian.com/?p=6315 Google Page Speed 網站最佳化建議工具，讓網站更快、更省流量！]


檔案壓縮
* [http://gtmetrix.com/ GTmetrix] "Website Speed and Performance Optimization" {{access | date= 2012-08-14}}
** 介紹: [http://freegroup.org/2010/07/gtmetrix/ GTmetrix 線上網頁速度檢測、分析工具，協助改善用戶經驗]
 
* [http://www.webpagetest.org/ WebPagetest - Website Performance and Optimization Test] 介紹: [http://briian.com/?p=9069 WebPagetest 網頁連線、載入速度測試工具（支援 30 測試點、16 種瀏覽器、測試手機版與桌面版網頁） | 重灌狂人]
* [https://www.dareboost.com/en/home DareBoost - Website Performance and Quality Test Tool] 輸入網址可以測試網頁效能與內容品質。看摘要內容不需要註冊會員，關掉它的提示還是可以進行測試。{{access | date = 2015-04-11}}
* Google 的 [https://web.dev/ web.dev] 服務提供效能、最佳實務建議、網頁親和力 ([[Accessibility]])、SEO (搜尋引擎最佳化) 等的評分與建議。範例報表: [https://lighthouse-dot-webdotdevsite.appspot.com/lh/html?url=https://www.google.com Lighthouse Report] {{access | date = 2018-11-15}}
 
* [http://tools.pingdom.com/fpt/ Pingdom Tools]([http://www.flickr.com/photos/planetoid/5096188393/ 圖例]): (a)測試網頁各元件載入時間(Full page test)，圖形化呈現載入時間長短，藉此觀察網頁效能、 (b)以及從Pingdom Tools網站到目標網站的連線檢查(Ping、trace route)
 
* [http://webwait.com/ WebWait - Benchmark Your Website] 網頁下載計時器
 
* [http://www.websiteoptimization.com/ Web Site Optimization: Speed Up Your Site website opion web speed optimize web site performance company] --> Web Page Analyzer
 
* [http://www.webpagetest.org/ WebPagetest - Website Performance and Optimization Test]
 
* [https://www.giftofspeed.com/ Test & Optimize Website Speed - GiftOfSpeed] 可以選擇從荷蘭、美國、英國、新加坡、德國其中一處連線測試。測試結果包含不同網頁元件下載所需時間。{{access | date = 2016-07-28}}
 
 
== 軟體 ==
* {{Gd}} [http://code.google.com/speed/page-speed/ Page Speed Home] for {{Fx}}
* [https://peacockmedia.software/mac/reactivity/ ReActivity for Mac OSX - Easily test your page load speed and size] on {{Mac}}
* Google chrome -> 工具 -> 開發人員工具 -> Audit。 提供網站開發者 Network utilzation, web page performance建議。
* [https://developers.google.com/web/tools/lighthouse/ Google Lighthouse Audit Scores]: [https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk Lighthouse] extension for {{Chrome}}
 
* {{Gd}} [http://developer.yahoo.com/yslow/ Yahoo! YSlow] + [http://www.getfirebug.com/ Firebug] for {{Fx}}: [http://www.getfirebug.com/net.html Firebug and Network Monitoring] (說明: [http://briian.com/?p=5526 Firebug 幫網頁稱重量、測速度，抓出拖慢網站的元兇！　　【重灌狂人】])操作方式: 按{{kbd | key=F12}} 啟動Firebug, 然後切換到「網路」標籤
: http://farm3.static.flickr.com/2083/1776124036_800ff3441d_o.jpg
: Image hosted by [http://www.flickr.com/photos/planetoid/1776124036/ Flickr]
 
* [http://www.fiddler2.com/fiddler2/ Fiddler Web Debugger - A free web debugging tool]
: http://farm6.static.flickr.com/5213/5457161299_6410ae7c01.jpg
: Image hosted by [http://www.flickr.com/photos/planetoid/5457161299/in/photostream/ flickr]
 
* [http://www.httpwatch.com/ HttpWatch: An HTTP Viewer and HTTP Sniffer] for {{IE}} 6 & 7 & {{Fx}}
** 介紹: [http://steachs.com/archives/1450 網頁診斷工具【HttpWatch Basic Edition】即時分析網頁瀏覽數據 for IE、Firefox]
 
* [https://addons.mozilla.org/en-US/firefox/addon/httpfox/ HttpFox][http://code.google.com/p/httpfox/]  An HTTP analyzer addon for {{Fx}}
 
* [https://chrome.google.com/extensions/detail/ognampngfcbddbfemdapefohjiobgbdl Speed Tracer (by Google)] for {{Chrome}}
 
 
== 檔案壓縮 ==
* [[Javascript]]: [http://jscompress.com/ JSCompress: Minify Javascript Online / Online JavaScript Compression]
* [[Javascript]]: [http://jscompress.com/ JSCompress: Minify Javascript Online / Online JavaScript Compression]
* CSS: [https://cssminifier.com/ CSS Minifier], [http://csscompressor.com/ CSS Compressor]
* [[CSS_tools#CSS_.E6.AA.94.E6.A1.88.E5.A3.93.E7.B8.AE | CSS 檔案壓縮]]: [https://cssminifier.com/ CSS Minifier], [http://csscompressor.com/ CSS Compressor]
* 圖檔: [http://optimizilla.com/zh/ 在线图片优化器]
* 圖檔: [http://optimizilla.com/zh/ 在线图片优化器]
自訂函數太慢
* 當檔案數增加至萬以上的數量級，透過 PHP 自訂函數處理檔案很慢時，可以考慮改用作業系統原生的檔案命令。
== 相關頁面 ==
* [[Javascript#performance_issue:_compression_tools.2C_using_CDN | javascript 檔案壓縮或使用 CDN]]


相關資料
相關資料
* [https://developers.google.com/speed/pagespeed/ PageSpeed Tools  |  Google Developers]
* [https://developers.google.com/speed/pagespeed/ PageSpeed Tools  |  Google Developers]


[[Category:Web_dev]]
[[Category:Web_Dev]] [[Category:Tool]]

Latest revision as of 11:34, 20 December 2023

分析工具：分析網頁連線下載速度，並提供網站開發者建議的服務或軟體

線上工具[edit]

  • Pingdom Tools(圖例): (a)測試網頁各元件載入時間(Full page test)，圖形化呈現載入時間長短，藉此觀察網頁效能、 (b)以及從Pingdom Tools網站到目標網站的連線檢查(Ping、trace route)


軟體[edit]

1776124036_800ff3441d_o.jpg
Image hosted by Flickr
5457161299_6410ae7c01.jpg
Image hosted by flickr


檔案壓縮[edit]

自訂函數太慢

  • 當檔案數增加至萬以上的數量級，透過 PHP 自訂函數處理檔案很慢時，可以考慮改用作業系統原生的檔案命令。

相關頁面[edit]

相關資料

Retrieved from "https://wiki.planetoid.info/index.php?title=Optimize_webpage_speed&oldid=24098"