Đằng sau bức ảnh preview của Facebook

Lời mở đầu

Nếu bạn đi phỏng vấn, mua đồ hay hẹn hò đi chơi, thì những ấn tượng đầu tiên rất quan trọng.

Sử dụng Facebook cũng vậy, một trong những điều đầu tiên đập vào mắt khi bạn xem profile của người khác chính là ảnh cover.

Những hình ảnh đó có ý nghĩa đặc biệt quan trọng khi người dùng trải nghiệm sản phẩm.

Nhưng mỗi bức ảnh thường có dung lượng từ vài trăm KB đến vài MB nên có thể làm download và hiển thị chậm.

Điều này được minh chứng rõ rệt khi ta hết tiền 3G hoặc hôm nào cá mập cắn cáp - ngồi nhìn vào cái box màu xám trong khi chờ ảnh được download (khoc2).

Với Facebook, đối tượng hướng tới là tất cả mọi quốc gia trên thế giới, vậy nên trường hợp người dùng có kết nối chậm là khá phổ biến (giả dụ như Ấn Độ - nơi mà nhiều người dùng Facebook vẫn sử dụng mạng 2G).

Từ đó, đội ngũ kỹ sư của Facebook đã phải gánh 1 nhiệm vụ:

Phải thiết kế và xây dựng thế nào để người dùng có ấn tượng ban đầu tốt hơn ?

Ban đầu chúng tôi tập trung vào ảnh Cover - nằm ở trên profiles, ảnh phải có chất lượng đẹp, độ phân giải cao.

Ảnh Cover cũng là thứ dễ nhìn thấy nhất khi vào Facebook, nhưng đồng thời nó cũng là thứ load chậm nhất.

Có 2 nguyên nhân chính gây ra điều đó:

• Thứ nhất, ảnh Cover thường có dung lượng tới 100KB, kể cả sau khi đã được nén ở định dạng JPEG. Đó là lượng data rất lớn, nếu như bạn nhận ra 2G chỉ cung cấp truyền tải khoảng 32KB/s

• Nguyên nhân thứ hai liên quan đến API. Trước khi download ảnh, application sẽ request URL của ảnh từ GraphQL server. Sau đó, để thực sự lấy được ảnh, app sử dụng URL đó, tạo ra request thứ hai tới CDN server tải ảnh về. Và độ trễ của request thứ hai thường lâu hơn request đầu tiên.

Vậy nên, ta phải giải quyết cả 2 nguyên nhân trên.

200 bytes

Để giải quyết vấn đề này, chúng tôi tự hỏi: liệu có thể tạo ra ấn tượng thị giác của ảnh chỉ với 200 bytes.

Tại sao lại là 200 bytes?

Để loại bỏ request thứ 2, chúng ta cần đính kèm cả ảnh cover nháp trong request đầu tiên.

Điều này có nghĩa là ảnh cũng là 1 phần bên trong response của request đầu tiên.

Nhưng GraphQL không được thiết kế để xử lý Full-size image.

Nếu chúng ta có thể nén ảnh Cover xuống mức dưới 200 bytes, thì nó có thể được transfer thông qua GraphQL response.

Ưu điểm của giải pháp này là, nếu thành công, ta sẽ giải quyết gọn cả 2 nguyên nhân bên trên chỉ trong 1 request duy nhất.

Chúng tôi ước tính rằng, điều này sẽ cho phép app hiển thị ảnh preview trong lần render đầu tiên, giảm tổng thời gian chờ để hiển thị Profile và Page Header đáng kể.

Cuối cùng, chúng tôi vẫn muốn download và hiển thị ảnh full-size từ CDN, nhưng tiến trình này chạy ngầm nên vẫn đảm bảo rằng user sẽ có ấn tượng không tồi, thoải mái hơn.

Thử thách bây giờ là làm thế nào để nén 1 bức ảnh xuống dưới 200 bytes