iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 6
2

延續昨天行動版要素,其實不僅僅適用於行動版網頁的設計,比方說測試這件事情對在開發來說是非常重要的,如果你的網站中沒有那麼多的臭蟲,相對於臭蟲多的地方,你的網站更安全,更能獲得使用者的青睞!

Google在Progressive Web Apps的文件中提到

53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no janky scrolling or slow-to-respond interfaces.
這邊提到了有幾個比較重要的概念,等等會提到的速度、效能,以及UX體驗,今天的主題大概會圍繞在這幾點下面。

速度及效能

Google也提到,如果你的網頁載入超過三秒你將會失去53%的使用者,意味著你必須讓你的網頁快!快!還是快!
你可以透過很多的方式,例如去壓縮你的CSS、JS、圖片甚至是HTML,但是這個壓縮畢竟有限,你必須要有更好的Solution,於是提出了Cache來解決,你不必每次都在等伺服器回應你檔案,比較不常在變更的CSS或是JS檔直接Cache在本機上,以露天網站為例

只要是第一次進入網站,會將所有的資源從伺服器中下載下來
firstCome
(第一次進入網站)

在第二次進入網站的時候可以看到除了網頁是從伺服器中下載回來的以外,前面的jquery 及 vue、vuex是從記憶體快取讀出,css則是由硬碟快取取出來,不僅僅降低使用者對伺服器請求的減少在速度上面我們也可以看到有明顯的不同
cache
(第二次進入網站)

接下來要知道你所有的等待時間是花在哪裡!
這一次用的是某知名拍賣網站的連線範例,從這張圖可以了解你花了多少時間在做什麼樣的事情
瞎X
先來解釋一下每一個名稱所代表的意義

Connection Start

  • Stalled
    停滯時間 (會發生停滯的現象大多是因為電腦或瀏覽器本身的問題,所造成的狀況)
  • Initial connect
    初始化連線時間
  • SSL
    與SSL握手時間
    Request/Response
  • Request sent
    從瀏覽器發送請求到伺服器的時間
  • Waiting (TTFB)
    簡單來說就是伺服器處理時間,演算法較差的程式通常會在這佔掉較多的時間 (TTFB => Time To First Byte)
  • Content Download
    伺服器回傳到瀏覽器時間

在不同的狀況會有許多的時間狀態,可能還有Proxy 之類的,但我們可以透過Timing Tab來了解是不是在哪個環節上出現了點問題,進而去提升網站的效能,手機不像桌上型電腦有著相對穩定的連線品質,我們更應該去計較,這些Performance的問題。

明天再來寫UX體驗吧!


減肥專欄

今天實在是越來越冷,也越來越懶得動,可是每次去運動前好像都會有一種想發懶的感覺,不知道是不是因為冬天要冬眠的原因,老實說不運動都是在找藉口,每天都要飲料的我,今天買了一杯無糖綠茶,這樣罪惡感好想才不會那麼重,今天晚上去跑跑步好了,老實說我覺得沒有人帶著我做重訓都不會想要動,跑跑步是蠻紓壓的!

小知識

為什麼要培養運動習慣
開始培養運動習慣後,曾經實驗觀察,將休息時間量化與工作量量化後,在相等時間的休息與相等工作量的請況下,有做運動的那一週,相較沒有運動的那週,精神狀態更好工作效率也有明顯的提升在思緒上面更清楚,這只是跟大家分享我自己的狀況,每次去健身房幾乎都待個一個小時至兩個小時之間,給自己一個放鬆的時間

每日一句

女生說,絲襪夏天不會熱,冬天不會冷
我會說,網襪春天很時尚,秋天很潮流
By 覺得黑絲也不錯的工程師


上一篇
Day5 全員耍廢中(上) Mobile設計
下一篇
Day7 全員耍廢中(下) Mobile設計
系列文
Go!從無到打造最佳行動網站30

1 則留言

0
rutentest
iT邦新手 5 級 ‧ 2017-12-17 01:31:13

請問是喜歡弄破網襪的工程師嗎?

我要留言

立即登入留言