Optimizing Mobile Experience
0 likes938 views
https://nextcover.co and https://cleverse.com Demonstrate how we improve mobile site experience in our site. - How we define "good" experience - How we can measure app performance - What we have to do to make our site a better experience.
Optimizing Mobile Experience
- 3. สวัสดีครับ ผมชื่อ ริค อ่านว่า ’Rick’ ไม่ใช่ ‘Lick’
- 4. Co-founder & Lead Designer Co—founder & Magician
- 7. Advance six editor Feed Editor Code editor
- 8. หน้าที่หลัก หน้าที่อื่นๆ • Develop & Optimize Renderer • Develop & Optimize Editor • ออกแบบ UI UX บางส่วน • ออกแบบ Layout • Backend นิดหน่อย • Training การใช้งาน • แก้บัค งานอดิเรก นอน สิ่งที่ชอบ นอน สิ่งที่ไม่ชอบ ความง่วง ราศี แมงป่อง
- 10. “ประสบการณ์ที่ดี” คืออะไร 1. ต้องโหลดเร็ว 2. ลื่น ไม่กระตุกขณะเล่น 3. เล่นๆอยู่ต้องไม่หลุด
- 11. “ประสบการณ์ที่ดี” คืออะไร 1. ต้องโหลด ระ…เร็ว 2. ลื่น ไม่กระตุกขณะเล่น 3. เล่นๆอยู่ต้องไม่หลุด 4. อื่นๆ
- 12. ไทม์ไลน์การโหลดหน้าเว็บหนแรก ที่มันช้าเพราะว่า • Code backend ไม่ดี • HTML ขนาดใหญ่ • Server ราคาถูก • Net กาก • ไม่ได้ทาแคช 01 Network ที่มันช้าเพราะว่า • Net กาก • Resource ขนาดใหญ่ • มี Resource ที่ไม่จาเป็น • ไม่ได้ทาแคช 02 Network 03 JavaScript ที่มันช้าเพราะว่า • JS ทางานนาน • มือถือ กาก • Browser กาก ที่มันช้าเพราะว่า • จานวน HTML element มากไป • มี CSS ที่ทาให้ Dom paint นาน • มี CSS rule เยอะไป • มี CSS ที่ซับซ้อน • มือถือ กาก • Browser กาก Calculate + Layout + Paint 04 Render 1. Request to server 2. Server process 3. Download HTML 4. สร้าง DOM Tree 1. Download CSS,JS,รูป 2. สร้าง CSSOM Tree 3. CSSOM+DOM = Render tree
- 13. Network Debug Tools 01 Network 02 Network
- 15. 03 JavaScript Performance Tools สีเหลือง 1500ms 900ms 600ms
- 17. 1. Tahoma optimization. 2. เขียน CSS ให้ Animation ลื่นๆ 3. เทคนิคการลดเวลาการ Paint 4. เทคนิคทาให้การ Reflow ไวๆ 5. โหลด CSS ลงมาให้ไวที่สุด 6. ลด CSS rule reduction 7. CSS selector optimization. 7 Speed render tips.
- 18. 01/07 Tahoma Optimization !? รู้หมือไร่ font Tahoma ปล่อยเมื่อปี 1994 ทาโดยทีม Microsoft
- 19. VS Custom font, Tahoma Custom font
- 20. 3 วินาที… Custom font Custom font, Tahoma
- 21. 3 วินาที… 1.5 วินาที Custom font Custom font, Tahoma
- 22. 3 วินาที… 1.5 วินาที WINNER! Custom font Custom font, Tahoma LOSER..
- 23. Summary What we’ve learned 1. ให้ใส่ Font เครื่อง(Tahoma)เสมอ เพราะมีผลต่อความเร็วในการ Render 2. Web ที่เป็นภาษาไทยที่มีข้อความเยอะๆเท่านั้น ที่เห็นผลชัด ภาษาอังกฤษไม่มีผลอะไรมาก
- 24. Summary What we’ve learned 1. ให้ใส่ Font เครื่อง(Tahoma)เสมอ เพราะมีผลต่อความเร็วในการ Render 2. Web ที่เป็นภาษาไทยที่มีข้อความเยอะๆเท่านั้น ที่เห็นผลชัด ภาษาอังกฤษไม่มีผลอะไรมาก
- 26. 02/07 เขียน CSS ให้ Animation ลื่นๆ รู้หมือไร่ วันที่ CSS ปล่อยวันแรกคือ 17 ธันวาคม 1996 หรือ 21 ปีที่แล้ว
- 27. รู้หมือไร่ โดยแล้วปกติ Browser จะใช้ CPU ในการ Render แต่เราสามารถเขียน CSS เพื่อบังคับ Browser ให้ใช้ GPU ได้ ซึ่ง GPU เร็วกว่า CPU มาก
- 29. left: 30px เลื่อนแบบ กระตุกๆ เลื่อนแบบ ลื่นๆ transform: translate3d(30px,0,0) margin-left: 30px transform: translate(30px,0)
- 30. width: 500px ขยายแบบ กระตุกๆ ขยายแบบ ลื่นๆ transform: scale(1.5) translate3d(0,0,0) height: 500px transform: scale(1.5)
- 31. Real Example : ของที่ขยับใน cleverse.com www.cleverse.com นะ …. นี่มัน
- 32. คาแนะนา 1. ให้กลับไปเช็ค ว่าเราใส่ translate3d แล้วรึยัง 2. ถ้าเว็บที่ Content เยอะ ให้ Limit การใช้ เพราะอาจเกิดอาการ แลคและ หน้าขาวได้
- 33. 03/07 หลีกเลี่ยง CSS ที่ทาให้ Paint ช้า รู้หมือไร่ โปรแกรม Microsoft Paint ออกมาเมื่อ พฤศจิกายน 1985
- 34. รู้หมือไร่ มี CSS บาง Attribute ที่กินเวลการ Paint มาก ถ้าใส่ CSS attribute นั้นมากๆ จะทาให้การ Render โดยรวม ช้าลง
- 35. Attribute ที่ทาให้ Paint ช้า คือ Attribute ที่ โปร่งใส opacity : 0.5 box-shadow : 0px 0px rgba(0,0,0,0.5) background : rgba(0,0,0,0.5) color : rgba(0,0,0,0.5) border : rgba(0,0,0,0.5)
- 36. Real example : ปุ่ม Blog ใน cleverse.com www.cleverse.com นะ …. นี่มัน
- 37. คาแนะนา 1. ให้กลับไปดู UI ว่ามีจุดไหน ที่สามารถตัด Attribute ที่โปร่งใส ออกได้ไหม เช่น เงา ,สี text ที่โปร่งใส ,สี background ที่โปร่งใส 2. ทดลองตัดจุดโปร่งใสออก หลังจากนั้นให้ใช้ Performance tools ดู แท่ง สีเขียว ว่า Paint เร็วขึ้นไหม
- 38. 04/07 หลีกเลี่ยง หรือลด เวลาในการ Reflow รู้หมือไร่ Flow ไหล , Reflow แปลว่า ไหลใหม่อีกรอบ
- 39. รู้หมือไร่ การ Reflow คือการที่ Browser ต้อง คานวณขนาด,ตาแหน่ง และเริ่ม render หน้าเว็บทั้งหน้าใหม่ !!
- 40. เหตุการณ์ที่ทาให้ Browser ต้อง Reflow หน้าเว็บ 1. เพิ่ม/ลบ/เปลี่ยนแปลง dom ที่แสดงผลอยู่ 2. เปลี่ยน inline style 3. การอ่านค่า offsetWidth, offsetHeight 4. เปลี่ยน Class 5. ย่อจอ 6. อื่นๆ
- 41. วิธีควบคุม Scope ของการ Reflow ให้ Reflow แค่บางส่วน ( Layout boundaries ) http://wilsonpage.co.uk/introducing-layout-boundaries/ ค่อยยังชั่ว
- 42. คาแนะนา 1. ลด จานวนชั้น และ จานวนของ Element บนหน้าจอ 2. ซ่อนของที่อยู่นอกจอโดย display:none หรือ visibility:hidden 3. ใช้ position:absolute , position:fixed เพื่อคุม scope ของการ Reflow 4. Layout boundary คาแนะนาเพิ่มเติม http://wilsonpage.co.uk/preventing-layout-thrashing/ http://jankfree.org/
- 43. 05/07 จงโหลด CSS ลงมาให้ไวที่สุด ! รู้หมือไร่ ไวคือความเร็ว ส่วน ไวไวเป็นบะหมี่กึ่งสาเร็จรูป
- 44. รู้หมือไร่ ถ้ายังมี CSS ที่ยังโหลดไม่เสร็จ Javascript จะไม่โดนรัน และ Website จะไม่ Render
- 45. 1. หลีกเลี่ยง CSS import @import url("navigation.css") 2. เขียน CSS ที่สาคัญๆ ติดมาพร้อม html เลย <style>.cool{}</style> 3. ใส่ Media Query ที่ link tag <link href=”mobile.css" media="(max-width:768px)" > 4. ตรง Tag script ใส่ async เพื่อจะได้ไม่ต้องรอ css load เสร็จ <script src="demo_async.js" async></script> 5. ลดขนาดไฟล์ CSS 6. โยก link tag ไปไว้ใน <head></head> เพื่อให้ CSS Load ก่อน 7. ใช้ preload <link rel="preload" onload="this.rel='stylesheet'" as="style" href="cool.css"/> คาแนะนา
- 46. 06/07 CSS Rules Optimization ! รู้หมือไร่ Rule แปลว่ากฎระเบียบไม่ใช่ Hole ที่แปลว่า รู
- 47. รู้หมือไร่ จานวน CSS Rule มีผลต่อการ Render ยิ่งจานวนเยอะ ยิ่ง Render ช้า
- 48. เพื่อจะได้ Merge Style ของ Element ให้ถูกต้อง Browser จะต้องวน CSS Rule ทุก Rule ก่อนทั้งหมดหนึ่งรอบ (เพื่อ Build CSSOM tree) ต่อให้ไม่ได้ใช้ มันก็ต้องวน
- 50. คาแนะนา 1. ลบ ไฟล์ CSS ที่ไม่ได้ใช้ออก ( สาเหตุไม่เกี่ยวกับโหลดเร็วช้าแต่ เกี่ยวกับ Render ) 2. ลบ CSS Rule ที่ไม่ได้ใช้ออก 3. ใช้ Performance tab ดูสีม่วงเพื่อทดลองว่าช่วยไหม
- 51. 07/07 CSS Selector Optimization ! รู้หมือไร่ CSS ย่อมาจาก Cascading Style Sheets.
- 52. รู้หมือไร่ CSS selector นั้น มีผล ต่อความเร็วของการ Render เขียนไม่ดี ทาให้ Render ช้าได้
- 53. 1. CSS Selector ที่ Universal จะ Render นาน 2. CSS Selector แบบพ่อลูก จะ Render นาน Universal ช้า Specific เร็ว หลายชั้น ช้า ชั้นน้อยๆ เร็ว
- 54. คาแนะนา 1. เขียน CSS Selector ให้ Specific เท่าที่ทาได้ 2. พยายามลดให้ Selector เหลือน้อยชั้น 3. ใช้ Performance tools วัดแถบสีม่วงและเขียว
- 55. เวลาไม่พอ....
- 56. เวลาไม่พอ.... 1. Caching. 2. Static file CDN. 3. GZIP 4. DataURL Font 5. Tips ในการลดขนาดรูป 6. Tips ในการลดขนาด JavaScript 7. Tips ในการลดขนาด Font 8. Tips ในการลดขนาดไฟล์ HTML 9. Tips ในการลดขนาด 3d model Network 1. วิธีทาให้ Scroll animation ลื่น 2. Nextcover optimization case study. 3. Cleverse optimization case study. 4. วิธีหาสิ่งผิดปกติในการ Render React 5. toDataUrl alternative. 6. Async Js. 7. Async download image. 8. 3d render JavaScript สาหรับมือถือ. JavaScript
- 59. Media-Rich CMS Platform Video content Platform Presentation tools Data-analytics & AI API gateway for insurance
- 60. 1 2 LIKE & SEE FIRST FOR MORE CONTENT Engineering Design Culture