Tóm tắt
Google+ trở nên hoàn toàn đáp ứng.
Chủ động thích ứng
Google+ là nơi mọi người gặp gỡ nhau xung quanh những sở thích chung, từ Mèo Zombie đến Máy tính cổ điển. Cho đến gần đây, Google+ có hai phiên bản khác nhau của trang web - một phiên bản dành cho máy tính và một phiên bản dành cho web dành cho thiết bị di động được thiết kế cho các trình duyệt cũ hơn.
Thử thách
Việc duy trì hai trang web dẫn đến những thách thức riêng. Việc có các phiên bản riêng biệt của trang web đồng nghĩa với việc mỗi tính năng phải được triển khai hai lần. Điều này dẫn đến rất nhiều mã trùng lặp và mất thêm công sức để tối ưu hoá hai trải nghiệm cho máy tính và web dành cho thiết bị di động. Và khi ranh giới giữa các thiết bị ngày càng mờ đi, với máy tính hỗ trợ cảm ứng và thiết bị di động mạnh mẽ có màn hình lớn hơn bao giờ hết, việc có các thiết kế khác nhau cho máy tính và thiết bị di động ngày càng trở nên khó hiểu.
Khi chúng tôi thêm các tính năng, trang web cũ dành cho máy tính để bàn cũng trở nên chậm và mở rộng. Đầu năm nay, trang chủ của chúng tôi có kích thước khoảng 5 MB và tạo ra khoảng 250 yêu cầu HTTP. Chỉ là video không hoạt động hiệu quả. Hình ảnh trên trang web quá nặng và không được tối ưu hoá, khiến trang chậm hơn nữa. Do đó, sự kiện phát trực tiếp của chúng tôi gần như không thể truy cập được trên các mạng chậm và không ổn định. Những người dùng này có trải nghiệm khá tệ. Ngoài ra, việc yêu cầu hỗ trợ các trình duyệt cũ trên web dành cho thiết bị di động khiến chúng tôi không thể dựa vào JavaScript trên toàn bộ trang web và ngăn chúng tôi triển khai các tính năng có tính tương tác cao. Chúng tôi không thể dựa vào những tiến bộ về trình duyệt web dành cho thiết bị di động.
Giải pháp
Chúng tôi đã bắt đầu tập trung vào thiết kế đáp ứng: một cách triển khai sẽ có hiệu quả trên thiết bị di động, máy tính bảng, máy tính để bàn và nhiều thiết bị khác. Chúng tôi đã xem xét kỹ từng tính năng, trang, thư viện JavaScript và lớp CSS. Chúng tôi muốn xây dựng một hệ thống đảm bảo rằng trang web sẽ chỉ tải những dữ liệu thực sự cần thiết để hoạt động, trừ phi người dùng yêu cầu thêm. Thách thức đặt ra ở đây là việc xây dựng một trang web hoạt động bình thường trên điện thoại di động chậm hơn và có kết nối di động, nhưng vẫn mang lại trải nghiệm sống động tuyệt vời trên các trình duyệt có tốc độ nhanh và màn hình lớn.
Tập hợp các quy tắc ràng buộc này đồng nghĩa với việc chúng tôi phải xem xét kỹ lưỡng từng thay đổi về mã sau này. Để đạt được điều này, chúng tôi đã thiết lập quy tắc 6^5 để đảm bảo rằng trong lần tải trang đầu tiên, chúng tôi không tải xuống hơn 60 nghìn HTML, 60K JavaScript, 60K CSS, ảnh động của chúng tôi luôn là 60 khung hình/giây và độ trễ trung bình là 0,6 giây.
Để đạt được điều này, chúng tôi đã chọn các khung JavaScript và CSS hỗ trợ tạo mô-đun và tải từng phần ngay từ đầu. Do đó, chúng tôi đảm bảo rằng người dùng chỉ tải JavaScript và CSS xuống khi họ thực sự sử dụng tính năng cần đến. Chúng tôi thực hiện việc này thông qua phương pháp dựa trên mẫu kết hợp với hệ thống xây dựng và mô-đun của chúng tôi để mọi thứ hoạt động mà gần như không tốn nhiều công sức của nhà phát triển.
Với khung mới này, chúng tôi đã bắt đầu tạo nguyên mẫu cho việc triển khai lại Google+ trên web. Chúng tôi đã bắt đầu không cho phép những nội dung "xấu" và đặt các quy tắc nghiêm ngặt cho hoạt động phát triển. Một trong những quy tắc chính của chúng tôi là tất cả các trang của chúng tôi đều cần được hiển thị ở cả phía máy chủ và phía máy khách. Bằng tính năng hiển thị phía máy chủ, chúng tôi đảm bảo rằng người dùng có thể bắt đầu đọc ngay khi HTML được tải và không cần chạy JavaScript để cập nhật nội dung của trang. Sau khi tải trang và người dùng nhấp vào một đường liên kết, chúng ta không muốn thực hiện trọn vòng để kết xuất lại mọi thứ. Đây là lúc việc hiển thị phía máy khách trở nên quan trọng – chúng ta chỉ cần tìm nạp dữ liệu và các mẫu, rồi hiển thị trang mới trên máy khách. Việc này gây ra rất nhiều sự đánh đổi; vì vậy, chúng tôi đã sử dụng một khung giúp dễ dàng hiển thị phía máy chủ và phía máy khách mà không có nhược điểm là phải triển khai mọi thứ hai lần – trên máy chủ và máy khách.
Các quy tắc khác bao gồm việc không cho phép ảnh động có chiều cao và chiều rộng sẽ khiến trình duyệt bố cục lại và có tác động tiêu cực đến hiệu suất. Đối với các thao tác và ảnh động DOM, chúng tôi đã lên lịch các nhiệm vụ cần thực hiện đồng bộ với tốc độ làm mới hiển thị của trình duyệt. Chúng tôi cũng nhóm tất cả các tác vụ đo lường lại với nhau để có thể tránh các phép tính kiểu lặp lại tốn kém. Chúng tôi cũng phụ thuộc rất nhiều vào các công cụ phân tích tài nguyên của Chrome để đảm bảo mọi thứ hoạt động như dự kiến. Ngoài ra, chúng tôi đã tạo các công cụ tính toán tác động của việc thay đổi mã đối với kích thước trang để đảm bảo chúng tôi không làm tăng đáng kể kích thước trang.
Việc này đã mất một chút thời gian, nhưng sẽ khó khăn hơn nhiều nếu chúng tôi không có khả năng xác định và loại bỏ vấn đề trong quá trình xây dựng.
Chúng tôi đã ra mắt phiên bản web dành cho thiết bị di động của triển khai đáp ứng này vào tháng 2 năm 2015. Việc này cho phép chúng tôi xem xét kỹ thiết kế mới và quy trình mới. Chúng tôi sử dụng dữ liệu từ lần phát hành này để xác thực những điều có hiệu quả và những điều chưa hiệu quả. Chúng tôi đã thử thiết kế lại và bắt đầu mở rộng để hỗ trợ nhiều thiết bị hơn. Vào tháng 11 năm 2015, chúng tôi đã ra mắt phương thức triển khai mới này trên tất cả các thiết bị.
Kết quả
Google+ có thể tạo ra một ứng dụng web phức tạp với giao diện người dùng phong phú mà không làm giảm hiệu suất. Trang web giờ nhanh hơn và gọn nhẹ hơn bao giờ hết.
| Trước | Sau | |
|---|---|---|
| Tổng trọng lượng trang chủ, được nén (có hình ảnh) | 22.600 KB | 327 KB |
| Số lượng yêu cầu | 251 | 45 |
| HTML (không được nén) | 1.100 KB | 362 KB |
| JavaScript và CSS (đã nén) | 2.768 KB | 111KB |
| Thời gian tải trang hoàn tất trung bình (độ trễ) | 12 giây 0,7 giây đến byte đầu tiên |
3 giây 0,1 giây đến byte đầu tiên |