Scouter: Unleashing the True Power Level of Web Performance

A session from LINE THAILAND DEVELOPER CONFERENCE 2025 by Charnsak Dangmanee, Solution Engineer, LINE Thailand

Transcript

1. Scouter Unleashing the True Power Level of Web Performance
3. Dragon ball Scouter
4. IT’S OVER 9000!!!
5. + = ???
6. Meet our hero ….
7. Goku as a Software Engineer Hi, I’m Goku!
8. No, It’ me! Goku as a Software Engineer @ LINE Company (Thailand) At LINE Company (Thailand)
9. OA Plus Platform It’s a OA+ Platform
10. OA Plus Platform It’s a OA+ Platform • OA Plus aims to become an all-in-one platform that is able to connect services to LINE platform • Enable service creators to build solutions to our platform. Such as MyShop, MyCustomer, MyCustomer | CRM • Provided core features such as Chat, Broadcast, Audience Group, Rich Menu, etc.
11. OA Plus Platform • OA Plus aims to become an all-in-one platform that is able to connect services to LINE platform • Enable service creators to build solutions to our platform. Such as MyShop, MyCustomer, MyCustomer | CRM • Provided core features such as Chat, Broadcast, Audience Group, Rich Menu, etc.
12. OA Plus Platform • OA Plus aims to become an all-in-one platform that is able to connect services to LINE platform • Enable service creators to build solutions to our platform. Such as MyShop, MyCustomer, MyCustomer | CRM • Provided core features such as Chat, Broadcast, Audience Group, Rich Menu, etc.
13. OA Plus Platform • OA Plus aims to become an all-in-one platform that is able to connect services to LINE platform • Enable service creators to build solutions to our platform. Such as MyShop, MyCustomer, MyCustomer | CRM • Provided core features such as Chat, Broadcast, Audience Group, Rich Menu, etc.
14. OA Plus Platform • OA Plus aims to become an all-in-one platform that is able to connect services to LINE platform • Enable service creators to build solutions to our platform. Such as MyShop, MyCustomer, MyCustomer | CRM • Provided core features such as Chat, Broadcast, Audience Group, Rich Menu, etc.
15. OA Plus Features with LIFF Survey Rich Menu Link Tracking
16. OA Plus Features with LIFF Survey Link Tracking Rich Menu
17. OA Plus Features with LIFF Rich Menu Survey Link Tracking
18. • Platform for web apps provided by LINE • Running your web app as Web view in LINE Application • LIFF apps can get data from the LINE Platform such as the LINE user ID, send messages, shareTargetPicker, etc. What is LIFF? LIFF (LINE Front-end Framework)
19. What is LIFF? LIFF (LINE Front-end Framework) 2 1 • Platform for web apps provided by LINE • Running your web app as Web view in LINE Application • LIFF apps can get data from the LINE Platform such as the LINE user ID, send messages, shareTargetPicker, etc.
20. LIFF Flow https://liff.line.me/2007907319-Q9wGpX2a https://www.line-website.com/linedevconf2025-agenda
21. LIFF Flow https://liff.line.me/2007907319-Q9wGpX2a https://www.line-website.com/linedevconf2025-agenda https://liff.line.me/2007907319-Q9wGpX2a/extra-path?&key=value https://www.line-website.com/linedevconf2025-agenda/ liff.state=urlencoded(extra-path?&key=value)
22. LIFF Flow https://liff.line.me/2007907319-Q9wGpX2a https://www.line-website.com/linedevconf2025-agenda https://liff.line.me/2007907319-Q9wGpX2a/extra-path?&key=value https://www.line-website.com/linedevconf2025-agenda/ liff.state=urlencoded(extra-path?&key=value) https://www.line-website.com/linedevconf2025-agenda/extra-path?&key=value liff.init()
23. Then, Why do we need Scouter for LIFF APP?
24. OA Plus Features with LIFF Link Tracking Survey Rich Menus
25. OA Plus Features with LIFF Survey Rich Menu Link Tracking
26. OA Plus Features with LIFF Survey Rich Menu Link Tracking Entry Page
27. OA Plus Features with LIFF Survey Rich Menu Link Tracking Entry Page https://liff.line.me/{lifid}/link-tracking/id https://liff.line.me/{lifid}/survey/id https://liff.line.me/{lifid}/rich-menu/id web.oaplus.biz/liff.state=(link-tracking/id) web.oaplus.biz/link-tracking/id web.oaplus.biz/survey/id web.oaplus.biz/rich-menu/id
28. OA Plus Features with LIFF Survey Rich Menu Link Tracking Entry Page https://liff.line.me/{lifid}/link-tracking/id https://liff.line.me/{lifid}/survey/id https://liff.line.me/{lifid}/rich-menu/id web.oaplus.biz/liff.state=(link-tracking/id) web.oaplus.biz/link-tracking/id web.oaplus.biz/survey/id web.oaplus.biz/rich-menu/id liff.init()
29. OA Plus Features with LIFF Survey Rich Menu Link Tracking Entry Page https://liff.line.me/{lifid}/link-tracking/id https://liff.line.me/{lifid}/survey/id https://liff.line.me/{lifid}/rich-menu/id web.oaplus.biz/liff.state=(link-tracking/id) web.oaplus.biz/link-tracking/id web.oaplus.biz/survey/id web.oaplus.biz/rich-menu/id liff.init()
30. OA Plus Features with LIFF Survey Rich Menu Link Tracking Entry Page https://liff.line.me/{lifid}/link-tracking/id https://liff.line.me/{lifid}/survey/id https://liff.line.me/{lifid}/rich-menu/id web.oaplus.biz/liff.state=(link-tracking/id) web.oaplus.biz/link-tracking/id web.oaplus.biz/survey/id web.oaplus.biz/rich-menu/id Separated repository & deployment
31. OA Plus Features with LIFF Survey Rich Menu Link Tracking Entry Page https://liff.line.me/{lifid}/link-tracking/id https://liff.line.me/{lifid}/survey/id https://liff.line.me/{lifid}/rich-menu/id web.oaplus.biz/liff.state=(link-tracking/id) web.oaplus.biz/link-tracking/id web.oaplus.biz/survey/id web.oaplus.biz/rich-menu/id Can you add custom consent before going to each services?
32. OA Plus Features with LIFF Survey Rich Menu Link Tracking Entry Page https://liff.line.me/{lifid}/link-tracking/id https://liff.line.me/{lifid}/survey/id https://liff.line.me/{lifid}/rich-menu/id web.oaplus.biz/link-tracking/id web.oaplus.biz/survey/id web.oaplus.biz/rich-menu/id Custom Consent web.oaplus.biz/liff.state=(link-tracking/id)
33. OA Plus Features with LIFF Survey Rich Menu Link Tracking Entry Page https://liff.line.me/{lifid}/link-tracking/id https://liff.line.me/{lifid}/survey/id https://liff.line.me/{lifid}/rich-menu/id web.oaplus.biz/link-tracking/id web.oaplus.biz/survey/id web.oaplus.biz/rich-menu/id Custom Consent web.oaplus.biz/liff.state=(link-tracking/id)
34. Took a long time to visit the destination link that might be lead to user drop-off Example long response Link Tracking
35. I need to tackle it!!!
36. I need to tackle it!!! What should I do first?
37. The first thing to do is …
38. The first thing to do is …
39. . . .
41. Chrome Network Tab CMD + Shift + C (RIght Click -> Inspect) Select Network tab
42. Chrome Network Tab CMD + Shift + C (RIght Click -> Inspect) Select Network tab Response Status
43. Chrome Network Tab CMD + Shift + C (RIght Click -> Inspect) Select Network tab Response Status Request domain
44. Chrome Network Tab CMD + Shift + C (RIght Click -> Inspect) Select Network tab Response Status Request domain Resource Type
45. Chrome Network Tab CMD + Shift + C (RIght Click -> Inspect) Select Network tab Response Status Request domain Resource Type Waterfall Timeline
46. Chrome Network Tab Inspect more detail in each request
47. Chrome Network Tab Inspect more detail in each request It’s powerful but…
48. Chrome Network Tab Inspect more detail in each request How many times has LIFF reloaded/refreshed? It’s powerful but…
49. Chrome Network Tab Inspect more detail in each request How many times has LIFF reloaded/refreshed? What is the total time? It’s powerful but…
50. Chrome Network Tab Problem Overloaded Overprocessed Overcomplicated Too much information crammed into one place Hard to quickly scan what really matters A lot of details
51. Chrome Network Tab Problem Overloaded Overprocessed Overcomplicated Simple answer take too many task Finding the number and duration of redirects isn’t straightforward.
52. Chrome Network Tab Problem Overloaded Overprocessed Overcomplicated Too many steps to get the report Need to click and click to see the request path
53. Let’s use Scouter!
54. Scouter!
55. Scouter! More than measuring power revealing weaknesses Chrome Extension Analyze Detect Optimize
56. Scouter Features Simplify network request Overloaded Overprocessed Overcomplicated Clear & Focused View Noise Reduction (filter out unnecessary requests)
57. Scouter Features Visualized Timing Overloaded Overprocessed Overcomplicated Highlighted redirect url
58. Scouter Features Copy to save report Overloaded Overprocessed Overcomplicated Utility function (Pause / Clear button)
59. Scouter Features - Highlighted No cache Use cache
60. Scouter Features - Highlighted No cache Use cache 2.62s
61. Scouter Features - Highlighted No cache Use cache 2.62s
62. Scouter Features - Highlighted No cache Use cache 2.62s 1.68s
63. Scouter Features - Highlighted No cache Use cache
64. Scouter Features - Save Result
65. Scouter Features - Save Result
66. Built in less than 1 day
67. Built in less than 1 day Without any experience about Chrome extensions before
70. Copilot: the teammate every dev needs Because two brains are better than one
71. GitHub Copilot • Generative AI tool for coding assistant • Integrates with many IDE natively Ex. VS Code, Jetbrain, Neovim, etc. • Developed by GitHub, OpenAI, and Microsoft
72. GitHub Copilot • No vibe code • Generative AI tool for coding assistant • Integrates with many IDE natively Ex. VS Code, Jetbrain, Neovim, etc. • Developed by GitHub, OpenAI, and Microsoft
73. GitHub Copilot • No vibe code • No prompt technique • Generative AI tool for coding assistant • Integrates with many IDE natively Ex. VS Code, Jetbrain, Neovim, etc. • Developed by GitHub, OpenAI, and Microsoft
74. GitHub Copilot • No vibe code • No prompt technique • Just NES • Generative AI tool for coding assistant • Integrates with many IDE natively Ex. VS Code, Jetbrain, Neovim, etc. • Developed by GitHub, OpenAI, and Microsoft
75. GitHub Copilot - NES • NES = Next edit suggestions • Better way of auto complete • Make one change. GitHub Copilot handles the rest. • Use as a teammate with knowledge of creating Chrome Extensions
76. Implement Save Html as Image GitHub Copilot - NES
77. Collect event from network request GitHub Copilot - NES
78. Scouter Summary
79. Scouter Summary +
80. Scouter Summary + →
81. Scouter Summary + → →
82. Scouter Summary Increase Productivity Automate report 1 click! Enhance page performance From 10s 3s
83. Scouter Summary Increase Productivity Automate report 1 click! Enhance page performance From 10s 3s
84. Scouter Summary Increase Productivity Automate report 1 click! Enhance page performance From 10s 3s
85. Beyond Scouter • With just a little time, small tools can unlock massive productivity
86. Beyond Scouter • With just a little time, small tools can unlock massive productivity • Next-gen engineers turn pain points into opportunities.
87. Beyond Scouter • With just a little time, small tools can unlock massive productivity • Next-gen engineers turn pain points into opportunities. • AI grows smarter every day, but it’s your engineering sense that makes it powerful
88. Beyond Scouter • With just a little time, small tools can unlock massive productivity • Next-gen engineers turn pain points into opportunities. • AI grows smarter every day, but it’s your engineering sense that makes it powerful You can unleash your true power and I believe it’s over 9000!