最後一個場次的活動那一樣就是在開始之前一樣提醒大家記得將手機就是轉成經營或者是振動的模式那我們最後一場的一個主題就是一秒鐘的分架或Pres網站優化的iPhone情緒那相信大家知道其實就是大家在見戰交最後的時候其實也會開始面臨一個問題就是你把網站變得就是功能越來越豐富就是你的可能見面變得越來越華麗可是你會面臨一個問題是你可能外掛加太多你整個就是你樓隱時間變得太長或者是大家會面臨一個問題就是你進到一個網站三秒之內如果你的網站沒有辦法開出來的話你其實是會流失流失要你的一個訪客那到底在一個網站優化裡面的話會遇到什麼樣的一個問題的話那我們接下來就請我們的威廉跟我們做一下分享那我們歡迎威廉這個感謝大家在這麼多有趣的議程當中選擇這個看起來就很肥皂這個主題然後江澤也是不知道從哪來的看起來很可疑的家伙OK先簡單的自我介紹一下我們是目前在日本工作叫威廉那目前在日本工作的工作室那我是第一次接觸Walk Camp是在Walk Camp Cure總公司然後之後參加Walk Camp Osaka還有包含今年Walk Camp Tokyo兩家法理院其他那種公司很超選OK那目前用Walk Class的經歷大概是十年十一年吧我從2.0版的時代開始就就開始在用那個人就是很喜歡參加這些動漫我都很過敏在場OK那因為每天上班都在講日文然後可能又講英文所以我現在中文可能聽起來很乖乖的所以今天如果聽著哪裡覺得好像不太順然後乖乖覺得是我的問題OK各位請不要客氣最後繼續等一下我要不要拍名再來我們再來 discuss 影片要講這麼多呢一句話其實就這個肥仔就這樣子而已OK不用太緊張今天重點只是要跟各位share一下我在用Walk Class我們在用完比較久之後就會發生一些像剛剛主持人講的我們很喜歡最佳功能可是最佳功能之後呢就是撥碼都已經輸了這是一個很尷尬的問題那我自己也採了不少地點就今天跟大家share一些今天那我們今天的流程大概就是罵的是怎麼回事這一線我們先討論問題的主軸然後再來加一點我的經驗然後最後是我們到目前為止最佳號原則是我該瘋什麼我該瘋個人的社交方式然後做一個小小的結論那今天希望各位帶回去其實只是一個這個最佳號的一個整體的概念那還有相關的關鍵字那先小小的調查一下好了今天製作原理學院的問題是寫柏格蘭不僅相關的科學麻煩你們去一下什麼大概差不多一半OK謝謝因為今天是Walking and 而且是總級篇所以我想今天的講的角度會比較比較抽象一點就是希望大家對整個流程大概有個概念然後希望大家都能夠回去思考一下我自己的專案裡面要怎麼樣去做一個最佳化因為最佳化其實不是一個Step by step 做一定有小的東西所以大家可以監視考一下那今天我們的次外的新會公開所以大家不用緊張那給大家一邊聽來一邊想一想的放輕鬆OK那先簡單介紹一下那個就是我的WalkerWalker這個字目前的反型那基本上Walker的Walker原我的首頁就是一定要有照片然後因為我是Mag user所以Mag user的螢幕大家都知道Ridina很棒看起來很漂亮那我就希望我們可以看起來很漂亮那所以照片就很大張名媒景我記得我的開的規格是大概像是3000屏數然後上面這個30002000 3000的樣子然後下面這個是也差不多2000 3000所以照片很重然後外掛很多這個各種JS掛好掛滿Walkers的Walkers這個外掛技能好棒這個外掛很好玩按一下加重一下按下去這個網站目前大概有30個外掛所以各位今天早上如果聽到各種不良示範寄到這個網站上全部都有基本上我更新的頻率沒有那麼高就是沒有這樣各位大大我還可以所以我可能更新一個更新一個首頁之後放在這邊就一個月不會走了那是一個State因為算是一個比較近State的狀態那目標很簡單就是我希望讓它變成疫苗其實我一開始注意到網頁很慢這件事情的時候首頁的loading大概是8到10秒我們抓10秒那10秒大概變疫苗大概就差不多要加快到10要到10分之一的速度那高級新度照片我不要少OK那個然後我在網站空間也不想少就是這個作者麻煩多就對了那呃這個首頁載入的這個秒數其實是我一開始就是在網站就是我意思到網頁其實很慢這件事情一開始測到數據所以它是一個慢慢進化的過程不是一口氣就秀這樣我們10秒變疫苗對那呃我用的測試工具是平等web testweb test那這個還算應該算蠻有大家Google一下就會放出大概前幾名大概就是用這一個好我們簡單來講我們先看結果這今年七月測試的時候都看到了這個一一、三個以內那我第一次看到這個時候我還真的是自己都超感動的然後知道是自己講的我們先簡單講一下慢是怎麼回事通常網站就是 user 跟你講我們在很慢的時候那個他的腦袋裡面想的是我的電腦拉著一條線去你的主機為什麼你的主機不理我OK呃可是工程師的觀點來講就是網站很慢那到底是哪裡很慢這個是工程師的觀點要先作問你分析你的UserUser進來之後你不是一條線進到主機裡面你一定會有中級網路中級網路基本上就是一個像黑洞一樣的地方那你看不見裡面有什麼你不知道他錄音多長那你User多安排那伺服器端你的伺服器也不可能只有一台你可能有好幾台甚至像前面的Session有講到是不是可能有catchno radius或是有backatch那所以今天我們想跟今天我想跟各位分享的是說我把問題分成兩個階段還好我先談伺服器端好了伺服器端的呃我會把它分成兩個階段那伺服器端的伺服器系統相關跟網站內不是你合伴Pation Level的問題那你伺服器設定的Level的問題那目前我的網站所採用的是AWS EC2對EC2 Instance各位知道EC2 Instance跟一般的VPS還有ShareHousing可能當去去搜尋一些什麼ShareHousing可能比較快比較便宜或VPS比較好有很多的好處好處是說你可以可以買新就是你去租CPU然後去租你的Storage上下做主比如說你今天你的Storage滿的時候你可以比如說我CPU是夠的可是我的那個我的Storage不夠所以我只要抽換Storage或是抽換它的有分文字就好了那這是我覺得它一個好處的地方那再來就是一個設計設定的部分我覺得這個如果要講話其實我可以再講一個Session可是設計設定我覺得開下去真的是還不錯的我覺得還不錯的是HCV2那個HCV2這件事情我們稍後會再解釋那HCV2簡單來講就是說你的HCV1去S的時候其實是一個有點像是排隊就是你的資源是一個一個排隊下來的可是HCV2贏在DEMO的時候它就像是並列在跑的那各位可以連結到下面這個Akamai提供的DEMOHCV2的DEMO下去好然後這比較有感覺那各位看那個動畫比較有感覺你如果HCV2贏在DEMO的時候在你的Portal的那邊會顯示H2OK再來就談快取外掛的部分快取外掛的部分你看這麼說快取外掛現在各位有在用快取外掛嗎想快取外掛在我剛開始用Wallpress的時候其實已經跟現在跟以前相比現在的快取外掛其實已經是算戰果時代OK以前的快取外掛就大概就那幾堆大家搜尋但它就那幾堆可是現在有很多的像免費有很多選擇那我自己認為用過還不錯我喜歡跟大家分享的是第一個W32CAT這個想大家都很清楚朋友們搜尋一下大概都是前幾名但是這個東西有一個小小的我跟你講小小的問題就是讓火力開起來你只要摸一個設定那可能你的網頁上顯示出來是你的網頁會會浪出來這裡一定會浪出來可是你可能會掉了一個什麼東西這種用完經驗上面就是可能你的JS在進行 objectcache的時候就掉了什麼東西然後你很難發現所以你要先考慮你如果點了這個選項你等一下怎麼測試要先影響一下而且它是不一定發生在網頁可能是back at接下來是lpsupercachelp supercache這麼說cache基本上是一個安全牌那它不會你該有的基本功能都有可是該怎麼講就是不會像wtntoolcache那樣子可以摸地方很多如果你覺得不會太有你覺得risky的話那可以討論wp supercache再來就是cache enablecache enable這個還蠻好玩的它的設定很像說跟前面比起來它的設定比較洋春一點但是它一個很特殊的功能是支援wp的個性那wp是什麼東西wp是一個google釋出的影像格式那簡單來講它會有一個大概百分之算百分之二十左右的一個image壓縮的好處那剛提到這個這是我個人的wog的影像縮檔其實很大那講到就是很大那對我來講開這個wp格式是有相當的好處那再來就是它的目前wp的支援是core跟opro那firebox的話firebox developer好像有支援我測試的時候是有支援那現在的一般用手反應過支援我不會覺得OK那在可是很非常可惜的是非常可惜的是那個sabaringsabaring當中想要的支援就是你的iOS的優準可能還享受不到那個好處OK所以也就是說wp這件事情其實是值得考慮但是通常是你要考慮它的support的部分那再來就是你要怎麼樣在warcraft上面你要怎麼樣在warcraft上面去使用wp這件事情我會覺得你可以使用下面這個image要tmide這個外掛它本來是一個裡面寫的最佳化的外掛但是它有一個選項是說你可以按下去之後它會自動幫你產生就是轉檔wp就是jpeg的時候wp或是png專wp那覺得這個外掛其實還滿好用我想它有一個附加功能是說你的它怎麼講就是我們前面講這個有瀏覽器支援瀏覽器支援的issue那這個外掛s的function就是說你可以去detect你的ender user的cline size是不是支援wp如果支援wp的情況下它會servewp的連結給ender user去load那如果不支援你喜歡它就支援這樣子這個放點點是wp不是wp是jpeg對剛剛講的是server端的部分那我們現在把這個討論的議題移動到cdl的部分那因為今天是所以我們可以把一個一個解釋cdlcdl或是required class的部分簡單來講就是這樣稍早的sation裡面有提到要怎麼樣稍早sation裡面有提到怎麼樣把那個檔案如何快速傳遞給user那其中一個方法就是離它越近越好今天的角色就是你把檔案拿到server最近的地方就是今天簡單的概念那cdl是我覺得他拿來當cdl也不錯他拿來當es也不錯讓幫我想起很好用可是我覺得就cdl有很多家可是這一家的其實還不錯所以他基本上免費它裡面有非常好玩的功能是fagofago是簡單來講它就是一個加速的功能可以想像能加速的功能解決一個backland對要怎麼解決fago的解決fago它解決是一個server跟server之前傳出的問題它是一個back home的問題那簡單來講它會讓你的tptfp就是time to first fight有一個改善那可是它計費的方式是月費制就是說你不管你是用free plan或是business plan或business plan那它是在你的 plan 上面再加五塊美金然後再算傳輸的量所以不管你是免費的還是付費的這個錢月費多少那你可以拿免費的 plan去再加這個 cargo先去往往看ok那fago fair的常見的接點台灣sus用戶常見大概就是台北香港或是美國西岸那其實fago fair一開始開放台北接點的那一段黃金時期我有經歷過那如果後來就嗯大家知道ok那你開啟了arrow之後在你的fago fair的panel裡面我也看到大概像這樣後面看的清楚嗎在這個panel裡面你可以看到就是每一個就是最近那24小時內的 user他會從來一個接點有多少的改善有多少的抗爭像今天我這個是千球道結到有一天是有台北的接點的 user有一個boss我也是大家加班40的40的performance improvement那各位每天可以都都可以進去看看然後每天有多少performance improvement我們然後清醒好一點ok我的課金是有效的ok可是我們今天講的這麼多就是剛剛講的幾個我覺得還不錯做了也許有效的手法但是並不是說做了就好像萬靈帶一樣砸下去就一定有效那個有一個問題是說像剛剛會的pig是他並不是做的boss都是支援的ok再來就是外部的這一層案這兩個事情其實有一點像我們先仔細講一下相容性問題剛剛講的那個EWD那個optimizer的外掛他的他會產生一個新的image file在你的社會上也就是說你如果把所有的東西放在同一台社會上你的webcache你的就是你的webcache那個html file還有你的webcache filedata base還有你的image css全部放在同一台情況下你會看到你的image file會有兩份可是你有兩份的file卻不是所有的user可以享受到這個好處這是一個尷尬的臉就是你又有如果是算花錢這件事情來講你花兩倍的錢可能就不是一定有那個好處再來是外部的這層案這件尷尬的事情就是你可能用一個第三方服務那第三方服務社會的JS那一台社會如果發生問題然後你又很不幸的把那個JS放在你的header或放你巴黎的那個地方你都頂下去的時候你看你所有的社會都是green light但是往一邊打不開那你的user才不會管那麼多你的user可能重新拿起來然後按下去然後跟你講說那你為什麼我一秒鐘兩秒鐘三秒鐘按下去增加一個bounce rate再來就是升級這件事情在稍早之前當中講很多大大很多跟各位不斷提醒就是all price的升一定要盡量保持最幸福那可是如果你在做最佳化的時候各位功能師大概心裡都有想過一件事情就是這個code好像哪裡怪怪的我想要把它改快一點我知道這個方法不錯但我摸了一下我相信我是對的有沒有大家都有有沒有而且是all price這麼open的open source那個source codegithub還是spn開下去我也來comment一下comment是ok的完全是ok如果那個review team決定去merge你的code那是非常非常棒的事情那可是大家總之會想要在自己的量上多摸兩下不是嗎自己的社會上多玩一下那就是一個尷尬問題就出現了你今天摸的code下次升級的時候會不會被蓋掉會不會被蓋掉那不論是框M或back end大家都會經歷過問題是框M的摸下去那是不是下一次升級就是那個區塊ok那當然有很多做法像是前面的session可能有提過用do action或是用hook的方式去做multiply的最佳化這個是就是規避這件事情那可是如果一開始像我一開始的時候就傻傻的直接不及的那個摸檔案就摸下去了然後扣了的部分就摸下去了所以我每一次按升級的時候就彈上我整個心裡都彈一下對然後最後一件事就是已經經歷過前面這麼多經這個剛剛說痛苦嗎還是各種彩遞的然後又經經彈在每天按了update之後最尷尬的結果來就是你今天在上面看到那個好 疫苗中顯示出來好棒棒的結果跟你按的User的User Experience並不完全相等我心裡中間兩名一半這個其實剛剛在那個測試的觀點上面其實在同一個服務裡面你只要換一個Tester的那個server可能從美東或浪美西那個速度就是不一樣我們剛剛提到說中繼網路部分中繼網路是牽涉到你跟User多餘那這個User今天變成了測試伺服器的時候那個距離也會改變然後你靠近那個測試觀點的那一台CDM的performance到底是多少這我們也不知道所以這些事情其實是滿我們講滿尷尬的那我目前做我目前有個小小的心得就是說第一個我要考慮的是我到底能不能一個人也能做完這件事情因為我的 blog從駕站到維護寫文章還有拍照就是可能要修圖這件事情那都是我一個人在進行的那我要考慮的是這個方案這個optimized的方案做手法做下去之後我能不能自己維護剛剛提到那個update的事情看下去了我能不能自己把它修回來我要花多少時間修回來那我明天做的這件事情我就沒有時間寫文章OK所以我目前的原則是這件事情做了後面的影響是多少這件事我當然這是我目前的要考慮的重點之一再來就是wordpress的檔案比較紅我要做最佳化的時候我會選擇從CDM的角度下手或是從server端改進server的某一個像memory cache的performance或是改進它的改進它Io performance那但是可以盡量不要去碰那個檔案就是迴避那個update的風險或是用custom用childchild sync就是指負景的方式去迴避這些迴避這些risk那再來就是功能的增減功能增減這件事情說用function in PHP或是用用to-fuck這個影響可以寫一個自己的customize的fuckin用customize的fuckin然後把你要的功能去enabledisable那在debug的時候你就會發現會讓你感覺好一點就是說這麼多外掛的情況下就一個一個去disable一個一個去enable那這樣子再拿一個外掛造成你多少performance的影響心裡會比較有數就是自己會比較安心一點我們的感覺那再來就是分散伺服器的負擔分散伺服器負擔這件事情可能跟最近最近darkercontainer這種流行像流行或是說就是你darker container還有你能怎麼樣去每一台伺服器的分散的這個s的省量是多少像剛才有提到說你的壞如果都是存在跟你的你的db跟你的web 12是放在同一台instance上面的時候那等於是你的一個s進來從頭到尾都在你同一台power上面執行那可是如果你分散是db一台12mancatch一台12那會不會一台12文的情況下就變成你的一個s進來也許你也有個low balance或是你的web 12會去把這些處理全部都分散掉也許你用darkercontainer情況下再搭k8s就是covernance你的就是說你會把問題的複雜度那個維度給減少這是目前我一個小小的一個新的要做比較簡單其實就是網頁的構成就是你的user跟你喊網頁很慢這件事情的時候但其實要考慮一下慢是慢在哪裡就是慢是慢在user的那個網頁的表示輸入上面可能發生Render Grouting或是你的外部的這些你進來導致你的網頁是卡住的或是說你的網站的主機本身loading就是太 heavy你的data base的query下去那個幾秒鐘回來的時間都卡在同一個server上來之後那就是一個不包的內容那還有就是你的cdn你的cdn採用什麼樣的技術你是用push或是boot的方式你要怎麼樣去balance你的cdn這個是全部都是影響網站速度的技術那不是只有wall price內部對 application的問題考慮到的是你的網站push的網頁出來到你ender user的那個路上那一整條路全部都是影響網站表現速度的因素之一那這個是一個cast by case其實是一個沒有唯一級的一個 issue像我們今天談論的一個談論一個算是小小的經驗它是在我的 blog 上因為圖很多那相對文字上沒有那麼多如果我今天各位的發覺是做新聞網站或是說你是做 video streaming那你要考慮的問題又不一樣如果你是做 EC 的或是做電子商用網站你可能要在你的 security跟你的 performancebalance 上面你要重新考慮你的權限你的那個考慮的權重會完全不一樣OK所以今天希望跟各位share的是這個有很多最佳化的方式可是是在哪一段要怎麼樣處理然後你先做這個最佳化處理之後你的是不是系統破充性就會減少你的微物產品是不是上升我想請問一下您說你現在用 EC2然後又掛了 CD2那我你又說你的圖片非常大那可以方便透露大概一個月會發揮多少發揮嗎說從 EC2 到 CDN然後再出版甚至AWS 買 CQR 之類的好軟目前我的主機一個月大概是用十幾塊錢的美金通通是一塊美金那 CDN 呢會用另外一手CDN 的話目前也是不差不多十塊美金