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 đáng tin cậy nhất tại Nhật Bản. Cùng với báo in, họ có hơn 450 triệu lượt truy cập hằng tháng vào các tài sản kỹ thuật số. Để cung cấp trải nghiệm tốt hơn cho người dùng và đẩy nhanh tốc độ phát triển kinh doanh trên web, Nikkei đã ra mắt thành công Ứng dụng web tiến bộ (PWA) – https://r.nikkei.com – vào tháng 11 năm 2017. Giờ đây, họ đang thấy những kết quả tuyệt vời từ nền tảng mới.
Mức 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% với tính năng tìm nạp trước
Tác động đến hoạt động kinh doanh – Lưu lượng tự nhiên tăng 2,3 lần – Số lượt chuyển đổi (gói thuê bao) tăng 58% – Số người dùng hoạt động hằng ngày tăng 49% – Số lượt xem trang mỗi phiên tăng gấp 2 lần
Tải nghiên cứu điển hình dưới dạng PDF xuống
Tổng quan về doanh nghiệp
Khó khăn
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 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 có chức năng 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 họ chưa được tối ưu hoá hoàn toàn cho thiết bị di động ở nhiều khu vực và tải rất chậm.
Trang web của họ đã mất khoảng 20 giây để có tính tương tác nhất quán và đạt trung bình 10 giây trên Chỉ số tốc độ. Khi biết rằng 53% người dùng thiết bị di động sẽ bỏ ngang 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 của họ để cung cấp trải nghiệm tốt hơn và tăng tốc cho hoạt động kinh doanh trên web.
Giá trị của tốc độ là không thể chối cãi, đặ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 đánh giá cao sự thay đổi này.
Taihei Shigemori, Nhà quản lý bộ phận 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 từ 23 lên 82. Khả năng đo lường thời gian tương tác của họ đã cải thiện thêm 14 giây. Lưu lượng 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 đơn giản hoá giao diện người dùng, được xây dựng bằng JavaScript Vanilla. 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ư phụ trách mảng mặt trước của Nikkei đã chứng minh rằng trải nghiệm người dùng tốt sẽ mang lại hiệu quả kinh doanh tốt. Chúng tôi hoàn toàn đầu tư vào việc tiếp tục hành trình nâng tầm chất lượng web mới.
Hiroyuki Higashi. Nhà quản lý sản phẩm, Nikkei
Giải pháp
Nikkei đã tạo và ra mắt Ứng dụng web tiến bộ, sử dụng thiết kế đáp ứng, JavaScript Vani và cấu trúc nhiều trang, họ tập trung vào việc xây dựng trải nghiệm thú vị cho người dùng. Bằng cách thêm một trình chạy dịch vụ, trình chạy dịch vụ có thể cung cấp hiệu suất có thể dự đoán, bất kể mạng 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à tải gần như ngay lập tức vì các bài viết đó được lưu trữ bằng Bộ nhớ đệm. Họ đã thêm một tệp kê khai ứng dụng web và tệp kê khai này cùng với trình chạy dịch vụ của họ cho phép người dùng cài đặt PWA để họ có thể dễ dàng truy cập. Và để đả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à tính tương tác bằng cách sử dụng các phương pháp tối ưu hoá mã, nén và API web hiện đại.
- Cải thiện dầ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 thành 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 chóng 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 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 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 của họ và điều chỉnh 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 tính năng 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
Việc ưu tiên tải đường dẫn quan trọng là rất quan trọng. Bằng cách sử dụng công nghệ đẩy của 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 đến.
Tránh nhiều chuyến đi khứ hồi tốn kém đến bất kỳ điểm khởi hành nào
Trang web cần tải tài nguyên 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 giao thức bắt tay và thương lượng DNS/TCP/SSL cho các nguồn gốc chính này của bên thứ ba.
Tự động tìm nạp trước trang tiếp theo
Khi họ tự tin rằng người dùng sẽ chuyển đến một trang nhất định, họ sẽ không chỉ đợi đến khi thao tác điều 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. Thao tác 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ải tốc độ. Trang web cùng dòng tất cả CSS quan trọng với 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ị đầu tiên có ý nghĩa hơn 1 giây.
Tối ưu hoá gói JavaScript
Trong trải nghiệm trước đây, các gói JavaScript của Nikkei bị quá tải, tổng cộng là hơn 300 KB. Thông qua việc viết lại thành JavaScript vanilla và tối ưu hoá phương pháp tối ưu hoá gói hiện đại, chẳng hạn như phân đoạn dựa trên tuyến và rung cây, họ đã có thể giảm bớt tình trạng phình này. Họ đã giảm 80% kích thước gói JavaScript, giảm kích thước gói xuống còn 60 KB bằng RollUp.
Đã triển khai các phương pháp hay nhất khác
- Nén: Gzip/Brotli tất cả các tài nguyên có thể nén được sử dụng Fastly CDN
- Lưu vào bộ nhớ đệm: Bật tính năng lưu vào bộ nhớ đệm của 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 nút giao để 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á nội dung hiển thị có ý nghĩa đầu tiên: Hiển thị phía máy chủ nội dung
- Sử dụng ngân sách hiệu suất: Đảm bảo thời gian truyền và phân tích cú pháp/biên dịch JavaScript ở mức thấp
Tối ưu hoá JavaScript của bên thứ ba
Mặc dù việc tối ưu hoá JavaScript của bên thứ ba không hề dễ dàng so với các tập lệnh của riêng bạn, nhưng Nikkei đã rút gọn và nhóm lại thành công tất cả các tập lệnh liên quan đến quảng cáo, 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ã để bắt đầu và tải các tập lệnh bắt buộc khác. Các thẻ này thường chặn hiển thị trang và cũng yêu cầu thêm thời gian quay vòng mạng cho mỗi tập lệnh được tải xuống. Nikkei đã áp dụng phương pháp sau đây và cải thiện thời gian khởi chạy thêm 100 mili giây, đồng thời giảm 30% kích thước JS:
- Nhóm tất cả các tập lệnh được yêu cầu bằng trình gói JS (ví dụ: Webpack)
- Không đồng bộ tải tập lệnh đã nhóm để tập lệnh này 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 dần quảng cáo khi người dùng cuộn bằng Intersection Observer API
Nâng cao dần trang web
Ngoài những phương pháp 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ụ để trang web của họ có thể cài đặt và thậm chí hoạt động cả khi không có kết nối mạng. Bằng cách sử dụng chiến lược ưu tiên bộ nhớ đệm 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 đượ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 ngoại tuyến, mang lại hiệu suất nhất quán và được tối ưu hoá.
Truy cập vào chỉ số Nikkei
Một công ty báo chí hằng ngày truyền thống có hơn 140 năm đã tăng tốc thành công quá trình số hoá nhờ sức mạnh của web và PWA. Các kỹ sư cấp cao 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 quả kinh doanh cao. Công ty này sẽ tiếp tục hành trình nâng cao chất lượng cho web.