Tại sao giao diện Google Cloud tải chậm?

[Nhật Quang]

Mở trang trên Google Cloud Console thường mất nhiều thời gian do khối lượng JavaScript lớn và thời gian xử lý trên CPU. Bài viết phân tích quy trình tải trang Cloud Functions, chỉ ra các điểm nghẽn và đề xuất cách tối ưu.

Mở một trang trong Google Cloud Console thường lâu — trên máy MacBook Pro cao cấp (2018) và kết nối Gigabit, mỗi trang tải hơn 15 MB mã JavaScript. Phân tích bằng Chrome DevTools cho thấy việc chạy mã này là nguyên nhân chính khiến giao diện bị đóng băng lâu.

Những số liệu chính​

Mục tiêu đo được: HTML ban đầu rất nhanh (~150ms) và chứa một SVG spinner để hiện trạng thái. Tuy nhiên hai bundle JavaScript đầu tiên bắt đầu tải và dù không mất nhiều thời gian download, việc chạy mã khiến giao diện bị đóng băng. Toàn bộ mã trang Google Cloud khoảng >15 MB.

Quy trình tải và điểm nghẽn​

Việc phân tích/biên dịch mã JavaScript tốn thời gian: chỉ phân tích mã đã mất ~250ms, biên dịch thêm ~750ms (không tính các bước compile khác). Việc render ban đầu của ứng dụng Angular mất khoảng 1s. Sau khi phần giao diện chung xuất hiện, trang tiếp tục tải thêm 18 file JavaScript (~1.5 MB) và sau đó thêm 3 bundle khác (~6 MB).

Trễ do thứ tự yêu cầu và thời gian chờ​

Yêu cầu tải danh sách Cloud Functions mất ~700ms nhưng không bắt đầu ngay khi bundle xong vì phải chờ một request kiểm tra quyền (testIamPermissions). Kết quả CPU bị nhàn rỗi nửa giây — thời gian này có thể tận dụng để bắt đầu các yêu cầu quan trọng sớm hơn.

Vấn đề nội dung thừa và trùng lặp​

• Code coverage của Chrome DevTools cho thấy trang chỉ chạy ~53% mã JavaScript đã tải — có nhiều mã không cần thiết cho trang này.
• Có những đối tượng cấu hình lớn: ví dụ một object ~200 KB với 4997 khóa. Việc nhúng trực tiếp như một object JavaScript thay vì JSON có thể khiến trình thông dịch tốn nhiều thời gian hơn.
• 
  Bundle khởi tạo ban đầu còn chứa nội dung phụ (ví dụ sidebar điều hướng phức tạp) — phần này nên tải sau khi nội dung chính đã sẵn sàng.

Đề xuất tối ưu​

• Tách bundle: ưu tiên tải mã cần thiết cho nội dung chính trước, trì hoãn phần điều hướng hoặc tính năng phụ.
• Trích dữ liệu cấu hình lớn ra file JSON riêng và dùng JSON.parse khi cần, thay vì nhúng trực tiếp object JavaScript.
• Giảm trùng lặp: tách và tái sử dụng các module/dữ liệu chung để giảm kích thước tải xuống và xử lý.
• Sử dụng công cụ coverage để xác định mã không dùng đến và loại bỏ hoặc tải theo demand.
• Tối ưu thứ tự khởi động: khởi chạy các fetch quan trọng sớm hơn để tránh CPU nhàn rỗi và giảm tổng thời gian chờ.
• Trên kết nối chậm, mặc dù băng thông quan trọng, nhưng do nén và cache, chi phí CPU (phân tích/biên dịch) thường ảnh hưởng lớn hơn — nên cân nhắc giảm độ phức tạp runtime.
• Theo dõi hiệu năng trang đăng nhập và SPA bằng các công cụ (Chrome DevTools, DebugBear...) để phát hiện điểm nghẽn và so sánh cải tiến theo thời gian.

Áp dụng những chiến lược trên sẽ giúp cải thiện thời gian hiển thị nội dung chính và trải nghiệm người dùng khi làm việc với các ứng dụng JavaScript lớn như Google Cloud Console.

Nguồn: https://www.debugbear.com/blog/slow-google-cloud-ui