- Một trang bài viết trên website của New York Times tạo ra 422 yêu cầu mạng và truyền 49MB dữ liệu, khiến ngay cả việc đọc một bài báo đơn giản cũng đòi hỏi tài nguyên quá mức
- Trong quá trình tải trang, hàng chục yêu cầu đấu giá quảng cáo và các script theo dõi được chạy đồng thời, tạo ra cấu trúc tiêu tốn CPU và pin của trình duyệt
- Kiểu thiết kế UX thù địch này tiếp tục xuất hiện dưới dạng banner cookie, popup đăng ký, video tự phát và quảng cáo chiếm màn hình, cản trở trải nghiệm đọc của người dùng
- Mô hình kinh doanh tập trung vào “thời gian lưu lại” và “tỷ lệ hiển thị” để tối đa hóa doanh thu quảng cáo đang hy sinh trải nghiệm độc giả, và ngay cả kỹ sư cũng bị trói buộc trong cấu trúc này
- Bài viết đưa ra ví dụ về các trang tin nhẹ, tập trung vào văn bản (text.npr.org, v.v.) và nhấn mạnh việc khôi phục một trải nghiệm web đơn giản, tôn trọng người dùng, nơi độc giả và doanh nghiệp có thể cùng tồn tại
Thực tế của trang web 49MB
- Khi truy cập website New York Times, phát sinh 422 yêu cầu và 49MB dữ liệu, mất 2 phút để trang ổn định
- Con số này còn lớn hơn dung lượng toàn bộ Windows 95 (28 đĩa mềm), tương đương 10–12 bài nhạc MP3
- Chỉ để đọc vài đoạn văn bản, người dùng gần như phải tải xuống cả một album nhạc
- Dù hiệu năng phần cứng đã tăng vọt so với trước đây, các framework web xoay quanh quảng cáo và theo dõi đã triệt tiêu phần tiến bộ đó
Tải CPU và cấu trúc theo dõi
- Các trang tin chạy hệ thống đấu giá quảng cáo lập trình ngay trong trình duyệt
- Các yêu cầu đấu giá bất đồng bộ tới Rubicon Project, Amazon Ad Systems và những nơi khác xảy ra đồng thời
- Trình duyệt phải tải, phân tích và biên dịch vài MB JavaScript, dẫn đến tải lớn trên luồng chính
- Người dùng yêu cầu văn bản, nhưng trình duyệt lại xử lý trước 5MB script theo dõi, rồi sau đó mới chèn quảng cáo
- Đồng thời, beacon theo dõi hành vi (yêu cầu POST) và chuyển hướng pixel vô hình (doubleclick.net, casalemedia) hoạt động để nhận diện chéo giữa các website
- Quá trình này gây ra nóng máy và hao pin trên di động, trong khi người dùng vô tình bị cuốn vào thị trường giao dịch dữ liệu tần suất cao
UX thù địch và chi phí tương tác
- Khi vào trang, banner cookie GDPR, modal đăng ký bản tin và popup xin quyền thông báo xuất hiện liên tiếp
- Người dùng phải click và cuộn nhiều lần trước khi tiếp cận được nội dung
- Điều này vi phạm “chi phí tương tác (Interaction Cost)” của NNgroup và nguyên tắc “thiết kế tối giản”
- Trong trường hợp của Economic Times, người dùng phải đóng ba modal và vượt qua banner trên cùng thì mới vào được phần nội dung chính
- Theo tiêu chuẩn Core Web Vitals của Google, các interstitial xâm nhập như vậy cũng được nêu rõ là yếu tố bị trừ điểm SEO
Bố cục không ổn định và chèn quảng cáo
- Khi độc giả đang đọc đoạn văn, nếu đấu giá quảng cáo hoàn tất thì quảng cáo iframe sẽ được chèn vào, đẩy văn bản lệch 250 pixel
- Điều này được đo bằng CLS (Cumulative Layout Shift) và liên quan trực tiếp đến việc tăng tỷ lệ rời trang
- Google chính thức trừ điểm cho vấn đề này, nhưng lại tồn tại nghịch lý là chính sản phẩm quảng cáo của họ gây ra cùng một vấn đề
- Video tự phát vẫn tiếp tục chạy và ghim ở cuối màn hình ngay cả sau khi cuộn, còn nút đóng thì nhỏ và vùng bấm hẹp
- Đây được xem là ví dụ vi phạm định luật Fitts
Lãng phí không gian trong môi trường di động
- Trong viewport di động trung bình 800px, logo, thanh chia sẻ và UI của trình duyệt chiếm một phần đáng kể
- Theo trang của Guardian, nội dung thực tế chỉ hiển thị 11%
- Tỷ lệ 89% quảng cáo·modal so với 11% nội dung làm tăng mệt mỏi thị giác và tần suất cuộn của người dùng
- Cũng tồn tại chiến lược đặt nút “X” gần vùng có thể click của quảng cáo để dụ người dùng bấm nhầm, gọi là “fat-finger tax”
- Một số trang tin Ấn Độ như Jagran cản trở việc đọc bài bằng modal yêu cầu cài app và popup đăng ký
Đề xuất cải thiện
- Cấu trúc buộc người dùng thực hiện 3–4 thao tác đóng trước khi hiển thị nội dung đang lãng phí tài nguyên nhận thức của họ
- Cần điều chỉnh để popup chỉ xuất hiện sau 60 giây lưu lại hoặc sau khi cuộn 50%
- Có thể gộp đồng ý cookie và đăng ký bản tin vào một khu vực không chặn ở cuối trang
- Nên dành sẵn slot quảng cáo bằng container có chiều cao cố định để ngăn dịch chuyển bố cục
- Ví dụ:
min-height: 250px; background: var(--skeleton-loader);
- Nếu quảng cáo tải thất bại, có thể dùng
ResizeObserver để chỉ thu gọn ở vùng không nhìn thấy
Sự tồn tại của các trang tin nhẹ
- text.npr.org, lite.cnn.com, cbc.ca/lite cung cấp phiên bản nhẹ không theo dõi, không modal
- Việc tiêu thụ tin tức qua RSS feed vẫn còn rất phổ biến
- Những ví dụ này cho thấy nhu cầu về trải nghiệm web đơn giản và lấy nội dung làm trung tâm vẫn còn rất lớn
Kết luận: sự chú ý của độc giả là một tài nguyên
- Giao diện tin tức hiện nay được thiết kế theo cấu trúc coi độc giả là đối tượng để giữ chân, nhằm tối đa hóa hiển thị quảng cáo
- Tuy nhiên, khả năng sinh lời và khả năng tiếp cận hoàn toàn có thể cùng tồn tại, và các kỹ sư cũng đang bất mãn với cấu trúc này
- Căn nguyên của vấn đề là động lực kinh doanh ngắn hạn xoay quanh CPM
- Một hệ thống đã hình thành trong đó sự chú ý của độc giả bị đối xử như tài nguyên có thể khai thác, và
dùng RSS, đóng tab, tăng tỷ lệ rời trang được nêu như những hành vi phản kháng mạnh mẽ nhất
1 bình luận
Ý kiến trên Hacker News
Khi có ticket báo server chậm, kiểm tra thì phát hiện mọi video trên trang đều đang được preload trước một phần
Chỉ là văn phòng được nối trực tiếp với trung tâm dữ liệu bằng cáp quang nên mới còn chịu nổi
Tôi nghĩ không nên cho các lập trình viên web tốc độ mạng vượt quá 128kbit. Cao hơn mức đó là mọi thứ đều thành thảm họa
Dùng cùng tính năng giới hạn CPU thì rất phù hợp để kiểm tra hiệu năng website trong môi trường cấu hình thấp
Nếu dùng server phát triển chậm, sẽ tự nhiên rèn được thói quen cắt giảm tài nguyên không cần thiết
Nó hoạt động tốt cả trong môi trường cực chậm như Gopher, Gemini, hay Bitlbee dựa trên IRC
Các lập trình viên ứng dụng Electron cũng nên kiểm thử trên PC 2GB RAM, Celeron đời cũ thì mới có thể gọi là ứng dụng hoàn thiện thật sự
Nhưng nếu xét theo dung lượng truyền tải, thì trong tổng 44.47MB có tới 36.3MB là video phục vụ nội dung báo chí
Tức là vấn đề không hẳn là quảng cáo quá mức, mà là cấu trúc nội dung quá thiên về video
Ép người dùng tải xuống 36MB trước cả khi họ bấm vào là điều rất khó chấp nhận
Tôi chẳng đọc nữa vì quảng cáo và đống JavaScript, thay vào đó chỉ sao chép tiêu đề rồi đọc ở nơi khác
Về cơ bản tôi duyệt web trong trạng thái tắt JavaScript và gần như không xem quảng cáo
Tắt JS thì trang nhanh hơn rất nhiều, lại còn giảm nguy cơ rò rỉ dữ liệu cá nhân
Tôi không cho rằng cách đó là phi đạo đức. Chính các website đã hành xử thiếu công bằng trước
Thậm chí với họ, có lẽ tốt hơn là những người này đừng ghé thăm nữa
Chỉ cần nội dung hiển thị và hoạt động là họ thấy đủ
NYT nhắm đến nhóm “đa số không quan tâm kỹ thuật” này
Vấn đề cốt lõi của ngành báo là mô hình kinh tế dựa vào quảng cáo đã sụp đổ
Trước đây, độc giả chỉ trả chi phí in ấn, còn lại được bù bằng quảng cáo
Nhưng giờ Facebook Marketplace, Craigslist và các nền tảng khác đã lấy hết phần quảng cáo đó
Cuối cùng tin tức trở thành một sản phẩm ngách, còn việc bán dữ liệu độc giả chỉ là cú vùng vẫy cuối cùng
Vì hạn mức mỗi tháng chỉ là 250MB, giờ nghĩ lại thật khó tin
Một website như HN, nơi từng dòng JS đều được xử lý cẩn trọng, ngược lại khiến người ta thấy như món quà từ trời
Cần phải làm cho web bớt phình to đi
Kiểu UX này rõ ràng chẳng thể kiếm tiền bền vững, vậy mà họ vẫn cứ lặp lại
Ngày xưa Win95 còn bị gọi là “cồng kềnh”, vậy mà giờ một trang web còn lớn hơn thế nhiều
Vấn đề không chỉ là quảng cáo, mà là sự lãng phí tài nguyên và tính gây xao nhãng
Hễ bật JS lên mà màn hình bắt đầu nhốn nháo là tôi thoát ngay
Thật khó hiểu vài xu kiếm được bằng cách làm người dùng bực bội có đáng hay không
Có vẻ đa số mọi người chỉ thờ ơ chấp nhận điều đó
Tôi là một lập trình viên cuối tuổi 30, thuộc thế hệ “internet tự do”, nên gần như không có chút kiên nhẫn nào với quảng cáo
Tôi nhớ kiểu giao diện dòng lệnh như terminal Amadeus ngày trước
Tôi vẫn nghĩ xem phải làm thế nào để web có thể quay lại lấy người dùng làm trung tâm
Lỗi nhãn trường, placeholder bị cắt, date picker hiện bằng tiếng Trung,
rồi sau khi chọn ghế lại báo “không thể chọn”, UX đã sụp đổ hoàn toàn
Chỉ với các form HTML đơn giản cũng có thể làm ra website đủ dùng
Lạm dụng JS là kết quả của việc bị nhồi sọ
Tôi dùng Hagezi ultimate list để chặn gần như mọi quảng cáo, rồi tinh chỉnh thêm bằng uBlock trên máy tính để bàn
Tôi cũng tự chặn các domain font của Google và Adobe để cải thiện tốc độ và quyền riêng tư
Về bản chất, để một chương trình chưa được người dùng xác minh chạy trên máy của tôi là một thiết kế sai lầm
Nếu website hỏng khi tắt JS thì đó là do các lập trình viên thiết kế sai
Nếu HTML và mã thực thi được tách riêng, thế giới đã tốt đẹp hơn nhiều
Chỉ cần render ở phía server rồi gửi kết quả xuống là đủ
Một trang 49MB thực chất chỉ là sự phản ánh của thứ tự ưu tiên
Giờ internet tốc độ cao đã phổ biến, nên phần lớn người dùng không cảm thấy đó là vấn đề
Tôi dùng uBlock Origin chế độ hard mode để chặn hoàn toàn các tài nguyên như vậy