SlideShare a Scribd company logo
系統配置與前端優化建議
Simon Liang (YC) @ Hiiir
2015/6/8
大綱
● 服務資源架構現況
● 服務資源架構思考 (3)
● HTML&CSS架構思考 (3)
● 資源取用與順序思考 (2)
服務資源架構現況
● shopping
o Aplication & HTML
o Decoration image & Icon
o JS CSS Combine plugin
o Single JS
● static
o Product images
● mall.static
o Event images
服務資源架構思考 (1/3)
● shopping
o 工作角色過多, 且提供檔案較大的image & JS, 占線時
間會拉長
o 建議: 此Domain單純提供Apllication & HTML服務即
可, Server 負載能力會更好
服務資源架構思考 (2/3)
● static
o 提供Product images, 這個部分建議再擋一層CDN作
HA, 並透過CDN服務商機制作圖檔優化, 降低K數
● mall.static
o 提供Event images, 角色跟static類似, 處理方式相同
● mall.static & static (Original)
o 建議整併為Photo, 擋一層CDN service
o 關閉nginx access log 加速並降低磁碟負擔 (如有
CDN就可忽略)
服務資源架構思考 (3/3)
● static (new)
o 專門提供JS, CSS, Decoration images , 同樣可以擋
一層CDN作緩存
o JS & CSS 建議使用minify模組, 將多支檔案串連為同
一支並最小化, 減少Request次數與K數
o 搭配版本號與Expire tag作緩存控制
o 此服務為網頁呈現必須, 搭配上shopping回傳之HTML,
為兩大基本要素, 故穩定度最為重要, 為切分之原因
HTML&CSS架構思考 (1/3)
HTML tag使用方式思考, 確認頁面文意是否
有被正確傳達
H1標籤應標記此頁重點大標, 而非網站Logo,
H2標記分類標籤, 亦有此問題
HTML&CSS架構思考 (2/3)
減少不必要的巢狀tag, 維護上會更為容易, 檔
案也會比較小
Line 86: <li> 已經是block element, 不需要再
一層<div>
Line 90: inline element 包覆 block element
不合規範
HTML&CSS架構思考 (3/3)
適度的在大區塊使用id作為tag命名, 可減少CSS
互相影響之狀況, CSS可以更簡短
CSS selector階層不宜過多, 至多3層左右為限,
Performance會比較好
資源取用與順序思考 (1/2)
• 透過minify套件, 將JS or CSS合為單一檔案,
並進行壓縮 => 減少Request次數&縮小檔案
大小 (目前Request次數過多, 多數Request
Conection 都需要等待前面一批結束)
• 避免inline JS & CSS, 除非動態產生必須
• CSS於<head>階段載入, JS於</html>前載入
即可, 以加快DOM載入速度
資源取用與順序思考 (2/2)
• 圖檔Request過多, Decoration images應
combine成同一張圖片, 透過CSS background
-position取用即可
• icon類型圖片色彩不多, 索引色(256)就可應付,
可降低滿多K數
• 多數商品圖未出現於畫面可視範圍內, 可嘗試
兩階段Lazyload加快頁面載入速度
END

More Related Content

Viewers also liked

Rainbow by ecs-3.com: протоколы испытаний на огнестойкость
Rainbow by ecs-3.com: протоколы испытаний на огнестойкостьRainbow by ecs-3.com: протоколы испытаний на огнестойкость
Rainbow by ecs-3.com: протоколы испытаний на огнестойкость
RAINBOW by ECS-3.COM
 
Computer networks
Computer networksComputer networks
Computer networks
A7madal6ayer
 
RAINBOW by ECS-3.COM: The panels (english version)
RAINBOW by ECS-3.COM: The panels (english version)RAINBOW by ECS-3.COM: The panels (english version)
RAINBOW by ECS-3.COM: The panels (english version)
RAINBOW by ECS-3.COM
 
RAINBOW by ECS-3.COM: Advantages of our product (english version)
RAINBOW by ECS-3.COM: Advantages of our product (english version)RAINBOW by ECS-3.COM: Advantages of our product (english version)
RAINBOW by ECS-3.COM: Advantages of our product (english version)
RAINBOW by ECS-3.COM
 
2015 06 04 quality control (english version)
2015 06 04 quality control (english version)2015 06 04 quality control (english version)
2015 06 04 quality control (english version)RAINBOW by ECS-3.COM
 
RAINBOW by ECS-3.COM: Каталог вариантов отделки панелей (русская версия)
RAINBOW by ECS-3.COM: Каталог вариантов отделки панелей (русская версия)RAINBOW by ECS-3.COM: Каталог вариантов отделки панелей (русская версия)
RAINBOW by ECS-3.COM: Каталог вариантов отделки панелей (русская версия)
RAINBOW by ECS-3.COM
 
Landmark company profile
Landmark company profileLandmark company profile
Landmark company profileJoseph Links
 
RAINOW by ECS-3.COM: панелі (українська версія)
RAINOW by ECS-3.COM:  панелі (українська версія)RAINOW by ECS-3.COM:  панелі (українська версія)
RAINOW by ECS-3.COM: панелі (українська версія)
RAINBOW by ECS-3.COM
 
Linux in schools ahmad al tayer project 10bb
Linux in schools ahmad al tayer project 10bbLinux in schools ahmad al tayer project 10bb
Linux in schools ahmad al tayer project 10bb
A7madal6ayer
 
Funding development through foreign direct investment
Funding development through foreign direct investmentFunding development through foreign direct investment
Funding development through foreign direct investment
Eric Tewiy
 
Los animales mas peligrosos.
Los animales mas peligrosos.Los animales mas peligrosos.
Los animales mas peligrosos.lolaprubio
 
Funding cameroon's development through foreign direct investment
Funding cameroon's development through foreign direct investmentFunding cameroon's development through foreign direct investment
Funding cameroon's development through foreign direct investment
Eric Tewiy
 
Conference tour economy of ecology
Conference tour economy of ecology Conference tour economy of ecology
Conference tour economy of ecology
RAINBOW by ECS-3.COM
 
RAINBOW by ECS-3.COM: Мобильное здание (русская версия)
RAINBOW by ECS-3.COM: Мобильное здание (русская версия)RAINBOW by ECS-3.COM: Мобильное здание (русская версия)
RAINBOW by ECS-3.COM: Мобильное здание (русская версия)RAINBOW by ECS-3.COM
 
RAINBOW by ECS-3.COM: GMP детально (русская версия)
RAINBOW by ECS-3.COM: GMP детально (русская версия)RAINBOW by ECS-3.COM: GMP детально (русская версия)
RAINBOW by ECS-3.COM: GMP детально (русская версия)RAINBOW by ECS-3.COM
 
RAINBOW by ECS-3.COM: Контроль качества (русская версия)
RAINBOW by ECS-3.COM: Контроль качества (русская версия)RAINBOW by ECS-3.COM: Контроль качества (русская версия)
RAINBOW by ECS-3.COM: Контроль качества (русская версия)
RAINBOW by ECS-3.COM
 
RAINBOW by ECS-3.COM: Преимущества стратегии (русская версия)
RAINBOW by ECS-3.COM: Преимущества стратегии (русская версия)RAINBOW by ECS-3.COM: Преимущества стратегии (русская версия)
RAINBOW by ECS-3.COM: Преимущества стратегии (русская версия)
RAINBOW by ECS-3.COM
 
RAINBOW by ECS-3.COM: Ноу-хау (укр)
RAINBOW by ECS-3.COM: Ноу-хау (укр)RAINBOW by ECS-3.COM: Ноу-хау (укр)
RAINBOW by ECS-3.COM: Ноу-хау (укр)
RAINBOW by ECS-3.COM
 
RAINBOW by ECS-3.COM: Многоквартирный жилой дом (русская версия)
RAINBOW by ECS-3.COM: Многоквартирный жилой дом (русская версия)RAINBOW by ECS-3.COM: Многоквартирный жилой дом (русская версия)
RAINBOW by ECS-3.COM: Многоквартирный жилой дом (русская версия)
RAINBOW by ECS-3.COM
 
RAINBOW by ECS-3.COM: Quality control (english version)
RAINBOW by ECS-3.COM: Quality control (english version)RAINBOW by ECS-3.COM: Quality control (english version)
RAINBOW by ECS-3.COM: Quality control (english version)
RAINBOW by ECS-3.COM
 

Viewers also liked (20)

Rainbow by ecs-3.com: протоколы испытаний на огнестойкость
Rainbow by ecs-3.com: протоколы испытаний на огнестойкостьRainbow by ecs-3.com: протоколы испытаний на огнестойкость
Rainbow by ecs-3.com: протоколы испытаний на огнестойкость
 
Computer networks
Computer networksComputer networks
Computer networks
 
RAINBOW by ECS-3.COM: The panels (english version)
RAINBOW by ECS-3.COM: The panels (english version)RAINBOW by ECS-3.COM: The panels (english version)
RAINBOW by ECS-3.COM: The panels (english version)
 
RAINBOW by ECS-3.COM: Advantages of our product (english version)
RAINBOW by ECS-3.COM: Advantages of our product (english version)RAINBOW by ECS-3.COM: Advantages of our product (english version)
RAINBOW by ECS-3.COM: Advantages of our product (english version)
 
2015 06 04 quality control (english version)
2015 06 04 quality control (english version)2015 06 04 quality control (english version)
2015 06 04 quality control (english version)
 
RAINBOW by ECS-3.COM: Каталог вариантов отделки панелей (русская версия)
RAINBOW by ECS-3.COM: Каталог вариантов отделки панелей (русская версия)RAINBOW by ECS-3.COM: Каталог вариантов отделки панелей (русская версия)
RAINBOW by ECS-3.COM: Каталог вариантов отделки панелей (русская версия)
 
Landmark company profile
Landmark company profileLandmark company profile
Landmark company profile
 
RAINOW by ECS-3.COM: панелі (українська версія)
RAINOW by ECS-3.COM:  панелі (українська версія)RAINOW by ECS-3.COM:  панелі (українська версія)
RAINOW by ECS-3.COM: панелі (українська версія)
 
Linux in schools ahmad al tayer project 10bb
Linux in schools ahmad al tayer project 10bbLinux in schools ahmad al tayer project 10bb
Linux in schools ahmad al tayer project 10bb
 
Funding development through foreign direct investment
Funding development through foreign direct investmentFunding development through foreign direct investment
Funding development through foreign direct investment
 
Los animales mas peligrosos.
Los animales mas peligrosos.Los animales mas peligrosos.
Los animales mas peligrosos.
 
Funding cameroon's development through foreign direct investment
Funding cameroon's development through foreign direct investmentFunding cameroon's development through foreign direct investment
Funding cameroon's development through foreign direct investment
 
Conference tour economy of ecology
Conference tour economy of ecology Conference tour economy of ecology
Conference tour economy of ecology
 
RAINBOW by ECS-3.COM: Мобильное здание (русская версия)
RAINBOW by ECS-3.COM: Мобильное здание (русская версия)RAINBOW by ECS-3.COM: Мобильное здание (русская версия)
RAINBOW by ECS-3.COM: Мобильное здание (русская версия)
 
RAINBOW by ECS-3.COM: GMP детально (русская версия)
RAINBOW by ECS-3.COM: GMP детально (русская версия)RAINBOW by ECS-3.COM: GMP детально (русская версия)
RAINBOW by ECS-3.COM: GMP детально (русская версия)
 
RAINBOW by ECS-3.COM: Контроль качества (русская версия)
RAINBOW by ECS-3.COM: Контроль качества (русская версия)RAINBOW by ECS-3.COM: Контроль качества (русская версия)
RAINBOW by ECS-3.COM: Контроль качества (русская версия)
 
RAINBOW by ECS-3.COM: Преимущества стратегии (русская версия)
RAINBOW by ECS-3.COM: Преимущества стратегии (русская версия)RAINBOW by ECS-3.COM: Преимущества стратегии (русская версия)
RAINBOW by ECS-3.COM: Преимущества стратегии (русская версия)
 
RAINBOW by ECS-3.COM: Ноу-хау (укр)
RAINBOW by ECS-3.COM: Ноу-хау (укр)RAINBOW by ECS-3.COM: Ноу-хау (укр)
RAINBOW by ECS-3.COM: Ноу-хау (укр)
 
RAINBOW by ECS-3.COM: Многоквартирный жилой дом (русская версия)
RAINBOW by ECS-3.COM: Многоквартирный жилой дом (русская версия)RAINBOW by ECS-3.COM: Многоквартирный жилой дом (русская версия)
RAINBOW by ECS-3.COM: Многоквартирный жилой дом (русская версия)
 
RAINBOW by ECS-3.COM: Quality control (english version)
RAINBOW by ECS-3.COM: Quality control (english version)RAINBOW by ECS-3.COM: Quality control (english version)
RAINBOW by ECS-3.COM: Quality control (english version)
 

Similar to 系統配置與前端優化建議

广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化taobao.com
 
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsExam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
 
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
Mu Chun Wang
 
Clou doc intro_chn_20170919
Clou doc intro_chn_20170919Clou doc intro_chn_20170919
Clou doc intro_chn_20170919
sang yoo
 
E tom ngoss规范及siebel系统在电信行业的应用 陈永林
E tom ngoss规范及siebel系统在电信行业的应用 陈永林E tom ngoss规范及siebel系统在电信行业的应用 陈永林
E tom ngoss规范及siebel系统在电信行业的应用 陈永林
corlin chen
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染Ailsa126
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Design
jay li
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browserjy03845581
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browserjy03845581
 
赵泽欣 - 淘宝网前端应用与发展
赵泽欣 - 淘宝网前端应用与发展赵泽欣 - 淘宝网前端应用与发展
赵泽欣 - 淘宝网前端应用与发展d0nn9n
 
使用Amazon Machine Learning 創建智能應用程式
使用Amazon Machine Learning 創建智能應用程式使用Amazon Machine Learning 創建智能應用程式
使用Amazon Machine Learning 創建智能應用程式
Amazon Web Services
 
一淘新首页总结
一淘新首页总结一淘新首页总结
一淘新首页总结jieorlin
 
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)ziggear
 
客户端存储与计算
客户端存储与计算客户端存储与计算
客户端存储与计算xiaotao ning
 
Beyond rails server
Beyond rails serverBeyond rails server
Beyond rails server
Michael Chen
 
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
newker
 
写更好的CSS
写更好的CSS写更好的CSS
写更好的CSS
Smallni Ding
 
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗Drupal Taiwan
 
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考Qq.com前端架构实践与思考
Qq.com前端架构实践与思考greengnn
 

Similar to 系統配置與前端優化建議 (20)

广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
 
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsExam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
 
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
 
Clou doc intro_chn_20170919
Clou doc intro_chn_20170919Clou doc intro_chn_20170919
Clou doc intro_chn_20170919
 
E tom ngoss规范及siebel系统在电信行业的应用 陈永林
E tom ngoss规范及siebel系统在电信行业的应用 陈永林E tom ngoss规范及siebel系统在电信行业的应用 陈永林
E tom ngoss规范及siebel系统在电信行业的应用 陈永林
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Design
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
 
赵泽欣 - 淘宝网前端应用与发展
赵泽欣 - 淘宝网前端应用与发展赵泽欣 - 淘宝网前端应用与发展
赵泽欣 - 淘宝网前端应用与发展
 
使用Amazon Machine Learning 創建智能應用程式
使用Amazon Machine Learning 創建智能應用程式使用Amazon Machine Learning 創建智能應用程式
使用Amazon Machine Learning 創建智能應用程式
 
一淘新首页总结
一淘新首页总结一淘新首页总结
一淘新首页总结
 
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
 
客户端存储与计算
客户端存储与计算客户端存储与计算
客户端存储与计算
 
Beyond rails server
Beyond rails serverBeyond rails server
Beyond rails server
 
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
 
写更好的CSS
写更好的CSS写更好的CSS
写更好的CSS
 
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
 
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
 

系統配置與前端優化建議