Khóa luận tốt nghiệp: Nghiên cứu về tối ưu hóa hệ thống frontend và ứng dụng thực tế trên dự án website hiện đại

Trong kỷ nguyên số hóa hiện nay, hiệu năng của các ứng dụng web và website đóng vai trò then chốt trong việc định hình trải nghiệm người dùng và thành công kinh doanh. Đặc biệt, hiệu năng Front-end, bao gồm tốc độ tải trang, khả năng phản hồi và sự ổn định giao diện, ảnh hưởng trực tiếp đến sự hài lòng của người dùng, tỷ lệ chuyển đổi và thứ hạng trên công cụ tìm kiếm. Nhận thấy tầm quan trọng này, khóa luận đi sâu nghiên cứu về tối ưu hóa hệ thống Front-end. Mục tiêu là khám phá các nguyên lý và kỹ thuật tiên tiến, sau đó áp dụng một cách có hệ thống vào dự án website hiện đại "TravelScott", xây dựng trên React, TypeScript, Vite, và Tailwind CSS. Nghiên cứu này sẽ tiến hành đo lường, phân tích và so sánh hiệu quả các giải pháp tối ưu giữa phiên bản chưa tối ưu và phiên bản sản phẩm để cung cấp một cái nhìn thực tế về quy trình cải thiện hiệu năng web.

Sinh viên ngành Khoa học Máy tính, Kỹ thuật Phần mềm, Công nghệ thông tin; các lập trình viên Front-end, kỹ sư hiệu năng web; và các nhà nghiên cứu quan tâm đến tối ưu hóa hiệu năng web và phát triển web hiện đại.

Khóa luận này tập trung nghiên cứu toàn diện về tối ưu hóa hiệu năng Front-end, một yếu tố sống còn đối với sự thành công của các dự án website hiện đại. Nội dung được cấu trúc thành ba chương chính. Chương 1 cung cấp cơ sở lý thuyết vững chắc, bắt đầu bằng việc trình bày tầm quan trọng của hiệu năng web đối với trải nghiệm người dùng, tỷ lệ chuyển đổi và thứ hạng SEO. Phần này đi sâu vào các khái niệm cốt lõi như Critical Rendering Path (CRP) – chuỗi bước trình duyệt cần thực hiện để hiển thị nội dung, và các chỉ số đo lường chuẩn hóa Core Web Vitals (Largest Contentful Paint - LCP, Interaction to Next Paint - INP, Cumulative Layout Shift - CLS) do Google khuyến nghị. Đồng thời, các nhóm kỹ thuật tối ưu hóa chính, bao gồm Tối ưu kích thước tài nguyên (Size Optimization), Tối ưu thực thi tác vụ (Task Optimization), Tối ưu bộ nhớ đệm (Cache Optimization), và Tối ưu thứ tự ưu tiên tải (Priority Optimization) cũng được phân tích chi tiết, cùng với phương pháp đo lường hiệu năng sử dụng công cụ như Lighthouse. Chương 2 là phần ứng dụng thực tế, nơi các nguyên lý và kỹ thuật trên được triển khai trên dự án website "TravelScott". Khóa luận mô tả hiện trạng ban đầu của dự án, các công nghệ Front-end hiện đại được sử dụng như React và Vite, và phương pháp đo lường hiệu năng chi tiết. Sau đó, quá trình áp dụng các giải pháp tối ưu hóa vào dự án được trình bày một cách có hệ thống, đồng thời so sánh hiệu năng giữa phiên bản chưa tối ưu (Preview) và phiên bản đã tối ưu (Production) được triển khai trên nền tảng Vercel. Cuối cùng, Chương 3 đánh giá kết quả đạt được, phân tích mức độ cải thiện hiệu năng, những khó khăn, thách thức và bài học kinh nghiệm trong quá trình thực hiện. Khóa luận cũng đề xuất các hướng phát triển tiềm năng trong tương lai. Nhờ đó, nghiên cứu này không chỉ mang lại kiến thức sâu rộng về tối ưu hóa Front-end mà còn cung cấp một cái nhìn thực tiễn về giá trị ứng dụng của nó trong việc cải thiện trải nghiệm người dùng và hiệu quả kinh doanh.