Với lịch sử xuất bản hơn 140 năm, Nikkei là một trong những doanh nghiệp truyền thông uy tín nhất ở Nhật Bản. Ngoài tờ báo in, họ còn có hơn 450 triệu lượt truy cập mỗi tháng vào các tài sản kỹ thuật số của mình. Để mang lại trải nghiệm người dùng tốt hơn và thúc đẩy hoạt động kinh doanh trên web, Nikkei đã ra mắt thành công một Ứng dụng web tiến bộ (PWA) – https://r.nikkei.com – vào tháng 11 năm 2017. Giờ đây, họ đang nhận được kết quả đáng kinh ngạc từ nền tảng mới.
Tăng hiệu suất - Chỉ số tốc độ tăng gấp 2 lần - Thời gian tương tác nhanh hơn 14 giây - Tải nhanh hơn 75% nhờ tìm nạp trước
Tác động đến hoạt động kinh doanh - Lưu lượng truy cập tự nhiên tăng gấp 2,3 lần - Số lượt chuyển đổi (lượt đăng ký) tăng thêm 58% - Số người dùng hoạt động hằng ngày tăng thêm 49% - Số lượt xem trang trong mỗi phiên tăng gấp 2 lần
Tải nghiên cứu điển hình ở định dạng PDF xuống
Tổng quan về doanh nghiệp
Thách thức
Nikkei nhận thấy lưu lượng truy cập từ thiết bị di động vào trang web cũ của họ tăng nhanh chóng khi điện thoại thông minh trở thành điểm truy cập chính vào web đối với nhiều người dùng. Tuy nhiên, khi sử dụng Lighthouse, một công cụ kiểm tra quét trang web và đưa ra các đề xuất về cách cải thiện trên nhiều danh mục, họ nhận thấy trang web của mình chưa được tối ưu hoá hoàn toàn cho thiết bị di động ở nhiều khía cạnh và tải rất chậm.
Trang web của họ mất khoảng 20 giây để trở nên tương tác nhất quán và trung bình 10 giây cho Chỉ số tốc độ. Nhận thấy rằng 53% người dùng thiết bị di động sẽ rời bỏ một trải nghiệm nếu trải nghiệm đó mất hơn 3 giây để tải, Nikkei muốn giảm thời gian tải để mang lại trải nghiệm tốt hơn và đẩy nhanh hoạt động kinh doanh trên web.
Giá trị của tốc độ là không thể tranh cãi, đặc biệt là đối với tin tức tài chính. Chúng tôi đã đưa tốc độ vào một trong những chỉ số cốt lõi và khách hàng của chúng tôi đánh giá cao sự thay đổi này.
Taihei Shigemori, Nhà quản lý chiến lược kỹ thuật số
Kết quả
Nikkei đã đạt được mức tăng hiệu suất ấn tượng. Điểm Lighthouse của họ tăng vọt từ 23 lên 82. Thời gian tương tác của họ đã cải thiện thêm 14 giây. Lưu lượng truy cập tự nhiên, tốc độ, tỷ lệ chuyển đổi và số người dùng hoạt động hằng ngày cũng tăng lên.
PWA là một ứng dụng nhiều trang (MPA) giúp giảm độ phức tạp của giao diện người dùng, được xây dựng bằng Vanilla JavaScript. 5 kỹ sư giao diện người dùng cốt lõi đã làm việc trong một năm để đạt được hiệu suất này.
Các kỹ sư giao diện người dùng của Nikkei đã chứng minh rằng trải nghiệm người dùng tuyệt vời sẽ mang lại hiệu suất kinh doanh tốt. Chúng tôi cam kết tiếp tục hành trình nâng chất lượng của web lên một tầm cao mới.
Hiroyuki Higashi. Giám đốc sản phẩm, Nikkei
Giải pháp
Nikkei đã tạo và ra mắt một Ứng dụng web tiến bộ, sử dụng thiết kế thích ứng, JavaScript thuần và cấu trúc nhiều trang, họ tập trung vào việc xây dựng trải nghiệm người dùng thú vị. Bằng cách thêm một trình chạy dịch vụ, họ có thể mang đến hiệu suất ổn định, bất kể mạng có như thế nào. Điều này cũng đảm bảo rằng các bài viết hàng đầu luôn có sẵn và được tải gần như ngay lập tức vì chúng được lưu trữ bằng Bộ nhớ đệm. Họ đã thêm một tệp kê khai ứng dụng web và cùng với trình chạy dịch vụ, điều này cho phép người dùng cài đặt PWA để dễ dàng truy cập. Để đảm bảo hiệu suất hoàn toàn nằm trong tầm kiểm soát của họ, họ đã tối ưu hoá JavaScript của bên thứ ba.
Các phương pháp hay nhất
- Cải thiện tốc độ tải và khả năng tương tác bằng cách sử dụng các API web hiện đại, phương pháp nén và tối ưu hoá mã.
- Từng bước cải thiện trải nghiệm người dùng bằng cách thêm các tính năng của PWA, chẳng hạn như hỗ trợ khi không có mạng và Thêm vào màn hình chính.
- Xây dựng ngân sách hiệu suất trong chiến lược hiệu suất.
Tìm hiểu chuyên sâu về kỹ thuật
Tốc độ có ý nghĩa quan trọng
Tốc độ quan trọng hơn bao giờ hết. Khi điện thoại thông minh trở thành thiết bị duyệt web chính của nhiều người dùng, Nikkei nhận thấy lưu lượng truy cập trên thiết bị di động tăng nhanh trên dịch vụ của họ. Nhưng khi sử dụng Lighthouse, họ nhận ra rằng trang web cũ của mình chưa được tối ưu hoá hoàn toàn cho thiết bị di động, với Chỉ số tốc độ trung bình là 10 giây, tốc độ tải ban đầu rất chậm và gói JavaScript lớn. Đã đến lúc Nikkei xây dựng lại trang web của mình và áp dụng các phương pháp hay nhất về hiệu suất trên web. Sau đây là kết quả và các điểm tối ưu hoá hiệu suất chính trong PWA mới.
Tận dụng các API web và phương pháp hay nhất để tăng tốc độ tải
Tải trước các yêu cầu về khoá
Bạn cần ưu tiên tải đường dẫn quan trọng. Khi sử dụng tính năng Đẩy từ máy chủ HTTP/2, họ có thể ưu tiên các gói JavaScript và CSS quan trọng mà họ biết người dùng sẽ cần.
Tránh nhiều chuyến đi khứ hồi tốn kém đến bất kỳ điểm xuất phát nào
Trang web cần tải tài nguyên của bên thứ ba để theo dõi, quảng cáo và nhiều trường hợp sử dụng khác. Họ đã sử dụng <link rel=preconnect> để giải quyết trước quá trình bắt tay và thương lượng DNS/TCP/SSL cho 3 nguồn gốc chính này của bên thứ ba.
Tìm nạp trước trang tiếp theo một cách linh động
Khi chắc chắn rằng người dùng sẽ chuyển đến một trang nhất định, họ không chỉ đợi thao tác chuyển hướng xảy ra. Nikkei tự động thêm <link rel=prefetch> vào <head> và tìm nạp trước trang tiếp theo trước khi người dùng thực sự nhấp vào đường liên kết. Điều này cho phép điều hướng trang tức thì.
CSS đường dẫn quan trọng nội dòng
Giảm CSS chặn hiển thị là một trong những phương pháp hay nhất để tăng tốc độ tải. Trang web này chèn tất cả CSS quan trọng bằng 0 biểu định kiểu chặn hiển thị. Việc tối ưu hoá này đã giảm thời gian hiển thị nội dung có ý nghĩa đầu tiên hơn 1 giây.
Tối ưu hoá các gói JavaScript
Trong trải nghiệm trước đây, các gói JavaScript của Nikkei có kích thước quá lớn, tổng cộng lên đến hơn 300 KB. Thông qua việc viết lại thành JavaScript thuần tuý và các hoạt động tối ưu hoá gói hiện đại, chẳng hạn như phân đoạn dựa trên tuyến đường và loại bỏ mã không dùng đến, họ đã có thể giảm bớt dung lượng này. Họ đã giảm kích thước gói JavaScript xuống 60 KB (giảm 80%) bằng RollUp.
Các phương pháp hay nhất khác được triển khai
- Nén: Gzip/Brotli tất cả các tài nguyên có thể nén bằng CDN Fastly
- Lưu vào bộ nhớ đệm: Bật tính năng lưu vào bộ nhớ đệm HTTP, lưu vào bộ nhớ đệm phía rìa
- Tối ưu hoá hình ảnh: Sử dụng imgix để tối ưu hoá và phát hiện định dạng hình ảnh
- Tải từng phần các tài nguyên không quan trọng: Sử dụng API đối tượng tiếp nhận sự kiện về giao điểm để tải các mảnh dưới màn hình đầu tiên
- Có chiến lược tải phông chữ trên web: Ưu tiên sử dụng phông chữ hệ thống
- Tối ưu hoá hiển thị nội dung có ý nghĩa đầu tiên: Kết xuất nội dung phía máy chủ
- Áp dụng ngân sách hiệu suất: Giảm thời gian truyền và phân tích cú pháp/biên dịch JavaScript
Tối ưu hoá JavaScript của bên thứ ba
Mặc dù không dễ dàng tối ưu hoá JavaScript của bên thứ ba so với tập lệnh của riêng bạn, nhưng Nikkei đã thu nhỏ và gói tất cả tập lệnh liên quan đến quảng cáo. Các tập lệnh này hiện được phân phát từ mạng phân phối nội dung (CDN) của riêng Nikkei. Các thẻ liên quan đến quảng cáo thường cung cấp một đoạn mã để khởi tạo và tải các tập lệnh bắt buộc khác, thường chặn quá trình kết xuất trang và cũng yêu cầu thêm thời gian khứ hồi của mạng cho mỗi tập lệnh được tải xuống. Nikkei đã áp dụng phương pháp sau và cải thiện thời gian khởi tạo thêm 100 mili giây, đồng thời giảm kích thước JS thêm 30%:
- Gói tất cả các tập lệnh bắt buộc bằng trình đóng gói JS (ví dụ: Webpack)
- Tải không đồng bộ tập lệnh đi kèm để tập lệnh đó không chặn quá trình hiển thị trang
- Đính kèm biểu ngữ quảng cáo đã tính vào DOM bóng (so với iframe)
- Tải quảng cáo dần dần khi người dùng cuộn bằng Intersection Observer API
Từng bước cải thiện trang web
Ngoài những hoạt động tối ưu hoá cơ bản này, Nikkei còn tận dụng Tệp kê khai ứng dụng web và trình chạy dịch vụ để giúp trang web của họ có thể cài đặt và thậm chí hoạt động khi không có mạng. Bằng cách sử dụng chiến lược cache-first trong trình chạy dịch vụ, tất cả tài nguyên cốt lõi và bài viết hàng đầu đều được lưu trữ trong Bộ nhớ đệm và được dùng lại ngay cả trong các tình huống bất ngờ như mạng không ổn định hoặc không có mạng, mang lại hiệu suất nhất quán và tối ưu.
Hack the Nikkei
Một công ty nhật báo truyền thống với lịch sử hơn 140 năm đã đẩy nhanh quá trình số hoá thành công nhờ sức mạnh của web và PWA. Các kỹ sư giao diện người dùng của Nikkei đã chứng minh rằng trải nghiệm người dùng tuyệt vời sẽ mang lại hiệu suất kinh doanh mạnh mẽ. Công ty sẽ tiếp tục hành trình nâng cao chất lượng cho web.