Cách đảm bảo rằng chức năng cốt lõi của trang web luôn hoạt động, dễ truy cập, bảo mật, dễ sử dụng, dễ tìm và nhanh chóng.
Trang này cung cấp hướng dẫn để giúp đảm bảo trang web của bạn luôn hoạt động, dễ truy cập, an toàn và dễ sử dụng cho mọi người.
Hướng dẫn trên trang này được tổng hợp từ nhiều nhóm chức năng trong Google. Các nhóm này đang chuyển trọng tâm ngắn hạn sang hỗ trợ những trang web giúp mọi người giữ an toàn trong tình hình dịch COVID-19. Những nhân viên này của Google nhận thấy rằng các trang web đang phải đối mặt với nhu cầu tăng cao chưa từng thấy từ những người tìm kiếm thông tin quan trọng, trong đó có nhiều người hiếm khi hoặc chưa từng sử dụng web trước đây. Việc đảm bảo các trang web luôn hoạt động và mọi người đều có thể truy cập trong thời gian này có thể là một thách thức.
Hướng dẫn
Phạm vi cung cấp, độ tin cậy, khả năng phục hồi và độ ổn định
Nếu trang web của bạn đang gặp phải tình trạng lưu lượng truy cập tăng đột biến và bị lỗi, hoặc bạn muốn ngăn chặn tình trạng này, thì hướng dẫn dưới đây có thể giúp bạn nhanh chóng khắc phục hoặc phát hiện vấn đề trước khi chúng trở thành vấn đề nghiêm trọng.
- Đọc bài viết Khắc phục sự cố máy chủ quá tải để tìm hiểu cách phát hiện, giảm thiểu và ngăn chặn các vấn đề về lưu lượng truy cập tăng đột biến.
- Xoá hình ảnh, video, tập lệnh và phông chữ không cần thiết. Hãy đảm bảo mỗi trang chỉ tập trung vào việc cung cấp chức năng mà người dùng trang web của bạn thực sự cần.
- Việc tối ưu hoá hình ảnh có thể giảm đáng kể mức sử dụng băng thông của máy chủ vì hình ảnh là nguồn gây phình to số một trên web.
- Chuyển càng nhiều nội dung tĩnh sang CDN càng tốt. Thông tin chi tiết khác từ các nhà cung cấp phổ biến: AWS, Azure, Cloudflare, Google Cloud, Firebase.
- Kiểm tra xem CDN của bạn có biện pháp tối ưu hoá nào dễ bật hay không, chẳng hạn như nén hình ảnh linh hoạt, nén văn bản hoặc tự động rút gọn tài nguyên JS và CSS.
- Việc tối ưu hoá bộ nhớ đệm HTTP có thể giảm đáng kể nhu cầu đối với máy chủ của bạn mà chỉ cần thay đổi mã ở mức tối thiểu. Hãy xem bài viết Bộ nhớ đệm HTTP: tuyến phòng thủ đầu tiên của bạn để biết thông tin tổng quan, cũng như bài viết Lưu vào bộ nhớ đệm HTTP và Các phương pháp hay nhất về lưu vào bộ nhớ đệm để biết các đề xuất cụ thể. Tính năng kiểm tra Phân phát thành phần tĩnh bằng chính sách lưu vào bộ nhớ đệm hiệu quả trong Lighthouse có thể giúp bạn nhanh chóng phát hiện những tài nguyên không được lưu vào bộ nhớ đệm. Xin lưu ý rằng các loại tài nguyên khác nhau sẽ có yêu cầu về độ mới khác nhau, do đó sẽ cần các chiến lược lưu vào bộ nhớ đệm khác nhau.
- Trình chạy dịch vụ là một cách khác để giảm đáng kể nhu cầu đối với máy chủ của bạn, nhưng có thể đòi hỏi đầu tư đáng kể về mặt kỹ thuật. Các trình chạy dịch vụ cũng cho phép trang web của bạn hoạt động ngoại tuyến, giúp bạn hiển thị giờ mở cửa, số điện thoại và các thông tin khác cho người dùng cũ mà không cần kết nối mạng. Workbox là phương pháp nên dùng để thêm trình chạy dịch vụ vào trang web vì phương pháp này tự động hoá nhiều mã nguyên mẫu, giúp bạn dễ dàng làm theo các phương pháp hay nhất và ngăn chặn các lỗi nhỏ thường gặp khi sử dụng trực tiếp API
ServiceWorkercấp thấp. - Nếu trang web của bạn có mức sử dụng tăng đáng kể, hãy kiểm tra xem bạn có biện pháp bảo vệ thích hợp để chống lại các cuộc tấn công DDoS hay không, vì trang web của bạn hiện có thể là một mục tiêu hấp dẫn hơn. Thông tin chi tiết khác của các nhà cung cấp phổ biến: AWS, Azure, Cloudflare, Google Cloud.
Hãy xem phần Độ tin cậy của mạng để biết thêm hướng dẫn.
Hỗ trợ tiếp cận
Việc chú trọng đến khả năng hỗ trợ tiếp cận trở nên quan trọng hơn bao giờ hết vì có thể ngày càng nhiều người có nhu cầu đa dạng đang truy cập vào trang web của bạn. Hãy làm theo các nguyên tắc bên dưới để đảm bảo mọi người đều có thể sử dụng chức năng cốt lõi của trang web.
- Hỗ trợ tiếp cận là nỗ lực của cả nhóm và mọi người đều có vai trò riêng. Hãy bắt đầu bằng cách xem lại hướng dẫn về Khả năng hỗ trợ tiếp cận cho các nhóm của Google cũng như hướng dẫn cho nhóm của Dịch vụ kỹ thuật số Hoa Kỳ. Những hướng dẫn này giải thích những việc mà mỗi thành viên trong nhóm (nhà quản lý sản phẩm, kỹ sư, nhà thiết kế, QA, v.v.) có thể đóng góp.
- Thực hiện Đánh giá khả năng hỗ trợ tiếp cận để xác định những điểm đang hoạt động tốt và những điểm cần cải thiện. Tiện ích trình duyệt WAVE có thể giúp hướng dẫn bạn thực hiện quy trình kiểm tra khả năng hỗ trợ tiếp cận theo cách thủ công cho trang web của bạn.
- Đọc Hướng dẫn về hỗ trợ tiếp cận để hiểu rõ hơn về các chủ đề cụ thể như thao tác bằng bàn phím và hỗ trợ trình đọc màn hình.
- Chạy quy trình kiểm tra Lighthouse để phát hiện các vấn đề thường gặp về hỗ trợ tiếp cận. Báo cáo này cũng cung cấp danh sách các bước kiểm tra thủ công mà bạn có thể thực hiện để cải thiện khả năng hoạt động của trang web. Xin lưu ý rằng điểm Hỗ trợ tiếp cận là 100 không đảm bảo rằng trang web của bạn có thể truy cập được. Có nhiều vấn đề quan trọng mà Lighthouse không thể kiểm tra theo cách tự động, vì vậy, bạn vẫn cần phải xem xét theo cách thủ công. Các công cụ kiểm tra tự động khác bao gồm WAVE API và tiện ích AXE.
- Hoàn thành khoá học Bắt đầu xây dựng ứng dụng web dễ tiếp cận ngay hôm nay trên egghead.io hoặc xem khoá học về Khả năng hỗ trợ tiếp cận trên web trên Udacity.
- Xem danh sách phát A11ycast để biết thêm các mẹo nhanh về các chủ đề hỗ trợ tiếp cận cụ thể.
Danh tính, bảo mật và quyền riêng tư
Bạn có thể muốn đi đường tắt để nhanh chóng đưa ra các bản sửa lỗi quan trọng, nhưng hãy luôn cẩn thận để không tạo ra lỗ hổng bảo mật khi làm như vậy. Mọi người cần truy cập vào nội dung về các chủ đề cực kỳ riêng tư. Các trang web cần phải bảo vệ dữ liệu nhạy cảm này của người dùng bằng mọi giá và thuyết phục mọi người rằng thông tin nhận dạng cá nhân (PII) của họ được an toàn.
- Tìm hiểu lý do tất cả trang web đều cần được bảo vệ bằng HTTPS, chứ không chỉ những trang web xử lý dữ liệu nhạy cảm có thể nhận dạng cá nhân (PII).
- Chuyển sang một nhà cung cấp dịch vụ lưu trữ sử dụng HTTPS theo mặc định hoặc sử dụng Let's Encrypt hoặc các dịch vụ tương tự để bật HTTPS trên máy chủ của bạn.
- Xem bài viết Giải thích về cookie SameSite để tìm hiểu cách sử dụng cookie an toàn hơn. Xin lưu ý rằng việc thực thi gắn nhãn cookie SameSite đã tạm thời bị huỷ bỏ.
Hãy xem phần An toàn và bảo mật để biết thêm hướng dẫn.
Khả năng hữu dụng, giao diện người dùng và trải nghiệm người dùng
Mọi người ngày càng phụ thuộc nhiều hơn vào web để đáp ứng các nhu cầu cơ bản. Nhiều người trong số này không thường xuyên sử dụng web. Bạn nên kiểm tra khả năng hữu dụng của chức năng cốt lõi trên trang web và đảm bảo chức năng đó đơn giản và dễ sử dụng nhất có thể.
- Cân nhắc việc thêm một biểu ngữ nổi bật (có thể xoá bằng nút X) vào đầu trang web để thông báo rõ ràng về các nội dung cập nhật của dịch vụ. Sử dụng lời kêu gọi hành động trong biểu ngữ để hướng mọi người đến các tài nguyên cụ thể hơn. Cân nhắc sử dụng màu sắc và phông chữ riêng biệt, nổi bật so với phần còn lại của nội dung trang. Hãy viết một cách thấu hiểu, tập trung vào nhu cầu của mọi người và minh bạch về loại dịch vụ mà họ có thể mong đợi.
- Tìm cơ hội để giảm thiểu các hoạt động tương tác thực tế trong hành trình quan trọng của người dùng (CUJ) và đề xuất những thay đổi đó cho nhóm phụ trách sản phẩm. Ví dụ: nếu dịch vụ giao hàng của bạn thường yêu cầu chữ ký, hãy xem liệu có cách nào để giải quyết vấn đề đó hay không.
- Kiểm tra kỹ để đảm bảo CUJ của bạn đơn giản và trực quan nhất có thể, đồng thời đề xuất các thay đổi cho nhóm phụ trách sản phẩm nếu bạn thấy có cơ hội cải thiện.
- Xem lại các nguyên tắc thiết kế phù hợp cho thiết bị di động và thử nghiệm CUJ trên nhiều thiết bị di động để đảm bảo không có vấn đề nào nghiêm trọng. Những người không thường xuyên sử dụng web và đột nhiên nhận thấy mình phải dựa vào web nhiều hơn có thể đang truy cập vào trang web của bạn từ thiết bị di động.
- Cải tiến trang web của bạn để sử dụng mẫu thiết kế đáp ứng nhiều nhất có thể.
- Đảm bảo biểu mẫu của bạn hiệu quả và được thiết kế tốt.
SEO
Mọi người đang tìm kiếm thông tin quan trọng liên quan đến sức khoẻ và việc làm. Bạn cần đảm bảo rằng tất cả các công cụ tìm kiếm đều có thể tìm thấy trang web của bạn. Tính năng kiểm tra SEO của Lighthouse có thể giúp bạn phát hiện các vấn đề cơ bản. Theo dõi blog chính thức của các công cụ tìm kiếm để biết hướng dẫn và thông tin cập nhật mới nhất: Google, Bing, Baidu, DuckDuckGo, Yandex. Bài đăng gần đây liên quan đến COVID-19:
- Cách thay đổi hoạt động trực tuyến mà vẫn giảm thiểu tác động đến sự hiện diện của bạn trên Google Tìm kiếm
- Thuộc tính mới cho các sự kiện trực tuyến, bị hoãn và bị huỷ
- Bing áp dụng mã đánh dấu schema.org cho các thông báo đặc biệt về COVID-19
- Thêm dữ liệu có cấu trúc vào thông báo liên quan đến COVID-19
- Giúp các tổ chức y tế phổ biến rộng rãi thông tin về COVID-19
- Các phương pháp chung hay nhất cho Tìm kiếm đối với trang web về sức khoẻ và trang web của chính phủ
Hãy xem phần Có thể khám phá để biết thêm hướng dẫn.
Hiệu suất
Một số ISP (ví dụ như ở Ấn Độ) đang chứng kiến mức tăng mạnh về mức sử dụng Internet tại nhà và không có cơ sở hạ tầng để đáp ứng nhu cầu ngày càng tăng. Trong những trường hợp như vậy, tốc độ trang web của bạn có thể bị chậm lại mà không phải do lỗi của bạn. Tối ưu hoá hiệu suất tải có thể là một cách để bù đắp cho tình trạng băng thông bị giảm. Nói cách khác, bằng cách giảm số byte cần gửi qua mạng để tải trang, bạn có thể bù đắp tác động của việc giảm băng thông đối với hiệu suất.
- Hình ảnh là nguyên nhân số một gây ra tình trạng phình to trên web. Bạn có thể giảm đáng kể mức sử dụng băng thông của trang web bằng cách tối ưu hoá hình ảnh. Squoosh là một công cụ nén hình ảnh nguồn mở đơn giản có thể giúp bạn nhanh chóng nén hình ảnh.
- Chạy WebPageTest hoặc Lighthouse để khám phá các cơ hội cải thiện hiệu suất hàng đầu.
- Bật tính năng nén văn bản để giảm kích thước mạng của tài nguyên văn bản. Đây thường là một cách dễ dàng để cải thiện hiệu suất mà không cần đầu tư nhiều về mặt kỹ thuật.
- Đọc bài viết Cải thiện tốc độ trang web bằng cách phối hợp giữa các bộ phận để tìm hiểu cách cộng tác và nhận được sự đồng ý của các bộ phận khác.
- Sử dụng tính năng tải từng phần được chuẩn hoá cho hình ảnh để giảm thiểu yêu cầu về hình ảnh mà người dùng có thể không bao giờ thực sự nhìn thấy. Khả năng tương thích của trình duyệt không phải là 100% nhưng tính năng này có thể được coi là một cải tiến tăng dần. Nói cách khác, nếu một trình duyệt nhất định không hỗ trợ tính năng tải từng phần được chuẩn hoá, thì hình ảnh sẽ tải như bình thường.
- Kiểm tra xem trang web của bạn có tập lệnh thử nghiệm A/B hoặc tập lệnh cá nhân hoá nào có thể được tải không đồng bộ hơn hay không, hoặc có chức năng không quan trọng nào trong tập lệnh có thể bị tắt hay không. Thông thường, bạn không thể tải hoàn toàn không đồng bộ các tập lệnh thử nghiệm A/B và cá nhân hoá vì các tập lệnh này cần chạy trước khi nội dung trang tải. Tuy nhiên, bạn có thể tải một số phần của tập lệnh theo cách không đồng bộ hơn. Hãy xem bài viết Đường dẫn hiển thị quan trọng để hiểu rõ sự đánh đổi cơ bản giữa tập lệnh đồng bộ (còn gọi là tập lệnh chặn hiển thị) nói chung và thời gian tải trang, sau đó quyết định xem bạn có cần ưu tiên tập lệnh chặn hiển thị hơn thời gian tải trang hay không, hoặc ngược lại.
- Mã của bên thứ ba chiếm khoảng một nửa trong số tất cả các yêu cầu đối với hầu hết các trang web. Hãy cân nhắc việc tối ưu hoá hoặc tạm thời xoá hoặc vô hiệu hoá mã của bên thứ ba không cần thiết cho việc vận hành trang web của bạn.
- Nếu các bản phát hành tính năng không được ưu tiên, thì đây có thể là thời điểm hoàn hảo để dọn dẹp. Xoá thẻ khỏi trình quản lý thẻ, dọn dẹp CSS và JS thừa, đồng thời xoá các tính năng hoặc mã không còn được dùng nữa. Thẻ Mức độ phù hợp trong Chrome DevTools và lớp
Coveragetrong Puppeteer có thể giúp bạn phát hiện mã không dùng đến.
Hãy xem phần Thời gian tải nhanh để biết thêm hướng dẫn.