[Tin tức] Expert Talk | Tối ưu Front-end để web của bạn load dưới 5 giây

🔴 Expert: Trần Trọng Thanh – hiện tại là Principal Software Engineer | Chotot.vn

▪️ Trong bài toán “Làm sao để user không phải chờ quá 5 giây để load trang?”, tất nhiên các kỹ sư cần phải tối ưu rất nhiều thứ bao gồm kiến trúc hệ thống, phân tải, database… nhưng vì sao chúng tôi chỉ đề cập đến front-end?

▪️ Bởi vì khi front-end không được tối ưu, bất chấp back-end của bạn có mạnh mẽ cỡ nào, hoặc hệ thống của bạn chỉ có một, hay vài user truy cập họ vẫn phải chờ quá 5 giây để load trang

▶︎ Với thời lượng gần 2 giờ đồng hồ cho phép bạn tiếp cận lượng kiến thức đủ sâu để tối ưu front-end, là khâu cần tối ưu đầu tiên trong quá trình xây dựng một website, vốn phải đủ nhanh với 1 user trước khi nghĩ đến phục vụ hàng triệu user

🛎 Cùng điểm qua mục lục của video (Diễn giả trình bày bằng tiếng Việt)

Intro Front End Optimization [00:00:01]
How to make your web apps load fast [00:01:38]
Common Advices [00:03:50]
Why? [00:04:55]
What happen from entering URL on address bar to full rendered page 00:05:05
HTTP Request Anatomy [00:05:31]
DNS Lookup [00:06:32]
Initial Connection [00:07:25]
Time to First Byte(TTFB) [00:10:13]
Advices for Initial Connecttion & TTFB [00:10:14]
Content Download [00:18:15]
Advices for Content Download [00:18:26]
Critical Rendering Path [00:22:31]
Advices for Critical Rendering Path [00:26:28]
How about Single Page App? [00:33:42]
Typical SPA’s downloaded HTML [00:44:44]
Common performance problems with Single Page App [00:45:30]
User-centric performance metrics [00:46:44]
SPA page speed optimization targets [00:49:53]
SPA Optimization Rules of Thumb [00:50:09]
What is common among Angular, React, Vue? [00:50:49]
Webpack [00:52:32]
Minify JS on production [00:53:49]
Shared Bundle [00:54:41]
Code Spliting [00:57:34]
Tree Shaking [01:01:05]
Webpack Bunble Analyzer [01:01:37]
Common tree shaking-ready techniques [01:03:57]
Preload and Prefetch [01:08:03]
Can we make critical rendering path works for SPA? [01:09:09]
What is Universal JS Applications [01:09:54]
Client only Redux architecture [01:11:17]
Universal Redux architecture [01:13:05]
How to audit your page? [01:16:47]
[demo] [01:16:50]
Benchmark on production [01:23:47]
What we discussed was only part of Front End Optimization [01:23:49]
The RAIL model [01:24:12]
Q&A [01:25:08]

Cùng rất nhiều thông tin bổ ích và trao đổi bên cạnh slide trình bày, hãy theo dõi toàn bộ nội dung của diễn giả Trần Trọng Thanh – CTO Naustudio, người có rất nhiều năm kinh nghiệm xử lý perfomance web.