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 báo in, họ còn có hơn 450 triệu lượt truy cập vào các tài sản kỹ thuật số mỗi tháng. Để mang lại trải nghiệm người dùng tốt hơn và đẩy nhanh 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 những 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ốt hơn 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 doanh nghiệp – 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 58% – Số người dùng hoạt động hằng ngày tăng 49% – Số lượt xem trang trên mỗi phiên tăng gấp 2 lần
Tải nghiên cứu điển hì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 đến trang web cũ của họ tăng lên nhanh chóng khi điện thoại thông minh trở thành điểm truy cập chính vào web của 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 đề 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á đầy đủ cho thiết bị di động trên 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 để tương tác một cách nhất quán và trung bình mất 10 giây theo Chỉ số tốc độ. Biết rằng 53% người dùng thiết bị di động sẽ từ bỏ một trải nghiệm nếu mất hơn 3 giây để tải, Nikkei muốn giảm thời gian tải nhằm cung cấp trải nghiệm tốt hơn và đẩy nhanh doanh nghiệp của họ trên web.
Không thể phủ nhận giá trị của tốc độ, đặc biệt là đối với tin tức tài chính. Chúng tôi đã đặt tốc độ làm một trong những chỉ số cốt lõi và khách hàng của chúng tôi rất hài lòng với 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 số Lighthouse của họ tăng mạnh từ 23 lên 82. Thời gian tương tác đo lường thời gian của họ tăng 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 đều tăng.
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 tạo bằng Vanilla JavaScript. Năm 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ư phụ trách 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 mang lại hiệu suất kinh doanh tốt. Chúng tôi đã dành toàn bộ tâm huyết vào việc tiếp tục hành trình đưa chất lượng web lên một tầm cao mới.
Hiroyuki Higashi. Nhà quản lý 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 dạng Vanilla và cấu trúc nhiều trang. Họ tập trung vào việc tạo ra trải nghiệm thú vị cho người dùng. Bằng cách thêm trình chạy dịch vụ, họ có thể cung cấp hiệu suất dự đoán được, bất kể mạng. Đ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à 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 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, 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, tính năng nén và các phương pháp 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ợ ngoại tuyến và Thêm vào Màn hình chính.
- Xây dựng ngân sách hiệu suất vào 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 từ thiết bị di động qua dịch vụ của họ tăng nhanh. Nhưng khi sử dụng Lighthouse, họ nhận ra rằng trang web cũ của họ 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, thời gian tải ban đầu rất chậm và một gói JavaScript lớn. Đã đến lúc Nikkei xây dựng lại trang web và áp dụng các phương pháp hay nhất về hiệu suất web. Dưới đâ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à các phương pháp hay nhất để tăng tốc độ tải
Tải trước các yêu cầu chính
Bạn cần ưu tiên tải đường dẫn quan trọng. Khi sử dụng tính năng Đẩy máy chủ HTTP/2, các trình duyệt 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 và về tốn kém đến bất kỳ nguồn gốc 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> để phân giải trước và thương lượng DNS/TCP/SSL cho các nguồn gốc chính của bên thứ ba này.
Tự động tải trước trang tiếp theo
Khi đã chắc chắn rằng người dùng sẽ điều hướng đến một trang nhất định, họ không chỉ chờ thao tác xuất hiện. Nikkei sẽ 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 cùng dòng
Giảm CSS chặn kết xuất là một trong những phương pháp hay nhất để tăng tốc độ tải. Trang web này khớp với tất cả các CSS quan trọng bằng 0 biểu định kiểu chặn hiển thị. Quá trình tối ưu hoá này làm giảm thời gian hiển thị ý nghĩa đầu tiên hơn 1 giây.
Tối ưu hoá gói JavaScript
Trong kinh nghiệm trước đây, các gói JavaScript của Nikkei đã được mở rộng, tổng cộng hơn 300KB. Thông qua việc viết lại JavaScript nguyên gốc và các tính nă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ể cắt giảm tình trạng tăng kích thước này. Họ đã giảm kích thước gói JavaScript xuống 80%, còn 60 KB nhờ RollUp.
Các phương pháp hay nhất khác đã triển khai
- Nén: Gzip/Brotli tất 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 cạnh
- 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 trình quan sát giao nhau để 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ữ web: ưu tiên sử dụng phông chữ hệ thống
- Tối ưu hoá lượt vẽ nội dung có ý nghĩa đầu tiên: hiển thị nội dung phía máy chủ
- Sử dụng ngân sách hiệu suất: Duy trì việc truyền JavaScript và phân tích cú pháp/biên dịch trong thời gian thấp
Tối ưu hoá JavaScript của bên thứ ba
Mặc dù không dễ tối ưu hoá JavaScript của bên thứ ba so với các tập lệnh của riêng bạn, nhưng Nikkei đã rút gọn và kết hợp thành công tất cả các tập lệnh liên quan đến quảng cáo, vốn hiện được phân phát từ mạng phân phối nội dung (CDN) của riêng họ. 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. Các tập lệnh này thường chặn quá trình kết xuất trang và cũng yêu cầu thêm thời gian xử lý 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 chạy 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 tập lệnh đi kèm theo phương thức không đồng bộ để 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 toán vào Shadow DOM (so với iframe)
- Tải dần quảng cáo khi người dùng cuộn bằng API Intersection Observer API
Cải thiện trang web một cách liên tục
Ngoài những hoạt động tối ưu hoá cơ bản này, Nikkei đã 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 ưu tiên bộ nhớ đệm trong worker 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à sử dụng lại ngay cả trong các tình huống dự phòng như mạng không ổn định hoặc không có kết nối mạng, mang lại hiệu suất nhất quán và được tối ưu hoá.
Hack the Nikkei
Một công ty báo chí truyền thống có lịch sử hơn 140 năm đã đẩy nhanh quá trình số hoá thông qua sức mạnh của web và PWA. Các kỹ sư phụ trách 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 mang lại hiệu suất kinh doanh mạnh mẽ. Công ty sẽ tiếp tục hành trình mang đến một cấp độ chất lượng mới cho web.