Case study: Pho Deli, landing page nhà hàng tải nhanh

Pho Deli là trang web giới thiệu cho một thương hiệu nhà hàng, và cả trang xoay quanh một việc duy nhất là giúp khách đặt bàn nhanh nhất có thể. Dưới đây là cách trang được dựng để vừa nhìn ngon mắt, vừa nhẹ, vừa dễ tìm trên Google.

Bài toán

Khách của một quán ăn thường mở web bằng điện thoại, lúc đang đói và ít kiên nhẫn, nên trang nào tải chậm hay rối mắt là họ thoát ngay. Vậy nên yêu cầu đặt ra khá rõ:

• Ảnh món ăn phải hấp dẫn, nhưng không được làm trang nặng và ì.
• Thực đơn dễ xem, bấm chuyển mục gọn gàng trên màn hình nhỏ.
• Nút đặt bàn, gọi điện luôn nằm trong tầm tay, không phải đi tìm.

Cách làm

Trang được dựng bằng React theo một mạch quen thuộc của landing page, là màn hình đầu nói rõ tên quán cùng nút đặt bàn, phía dưới mới tới thực đơn và câu chuyện thương hiệu. Toàn bộ ảnh được nén lại và chỉ tải khi khách cuộn tới, nên màn hình đầu hiện ra gần như tức thì.

• Làm cho điện thoại trước: thiết kế cho màn hình nhỏ trước rồi mới mở rộng lên máy tính, vì phần lớn khách xem trên điện thoại.
• Ảnh nhẹ mà vẫn nét: nén và dùng định dạng ảnh hiện đại để giữ độ ngon mắt mà không kéo tốc độ xuống.
• Một đích đến duy nhất: mọi phần trên trang đều hướng khách về việc đặt bàn.

Kết quả

Sản phẩm cuối là một trang nhẹ, hiển thị tốt trên mọi thiết bị và dẫn khách thẳng tới việc đặt bàn, đúng tinh thần đẹp thôi chưa đủ mà còn phải nhanh và dễ dùng.