Tóm tắt các tin tức và thông tin cập nhật chính được công bố trong sự kiện cộng đồng trực tuyến kéo dài 3 ngày của chúng tôi, cùng lời nhắc về các sự kiện sắp diễn ra ở khu vực.
Chúng tôi vừa kết thúc sự kiện kéo dài 3 ngày, web.dev LIVE, một số cộng đồng web đã cùng nhau trực tuyến để nói về tình trạng phát triển web. Chúng tôi bắt đầu mỗi ngày ở một múi giờ khu vực khác nhau và nhân viên của Google đã chia sẻ một loạt nội dung cập nhật, tin tức và mẹo trên tinh thần giúp các nhà phát triển cung cấp các công cụ và hướng dẫn để giữ cho web luôn ổn định, mạnh mẽ và dễ truy cập.
Nếu bạn đã bỏ lỡ một số phiên phát trực tiếp, thì tất cả các phiên đó đều được ghi lại và có sẵn để bạn xem trên YouTube. Chúng tôi cũng có các sự kiện sắp tới theo khu vực trên toàn thế giới do Nhóm nhà phát triển của Google tổ chức và sẽ cung cấp các phiên tìm hiểu chuyên sâu về các chủ đề liên quan đến nội dung chúng tôi đã đề cập trong sự kiện web.dev TRỰC TIẾP.
Hãy cùng tìm hiểu một số tin tức và nội dung cập nhật được chia sẻ trong ba ngày.
Các chỉ số quan trọng về trang web
Nhóm Chrome đã công bố sáng kiến Các chỉ số quan trọng về trang web nhằm cung cấp hướng dẫn, chỉ số và công cụ hợp nhất nhằm giúp nhà phát triển mang lại trải nghiệm chất lượng cao cho người dùng trên web. Nhóm Google Tìm kiếm cũng mới thông báo rằng họ sẽ đánh giá trải nghiệm trên trang làm tiêu chí xếp hạng, đồng thời lấy các chỉ số Chỉ số quan trọng chính của trang web làm nền tảng.
3 yếu tố chính trong Các chỉ số quan trọng về trang web năm 2020 là khả năng tải, tính tương tác và độ ổn định về hình ảnh của nội dung trang. Những thông tin này được thể hiện qua các chỉ số sau:
- Thời gian hiển thị nội dung lớn nhất đo lường tốc độ tải dự kiến và đánh dấu thời điểm trong tiến trình tải trang khi nội dung chính của trang có khả năng đã tải.
- Thời gian phản hồi lần đầu tiên đo lường khả năng phản hồi và định lượng trải nghiệm mà người dùng cảm thấy khi cố gắng tương tác lần đầu với một trang.
- Điểm số tổng hợp về mức thay đổi bố cục đo lường độ ổn định về hình ảnh và định lượng số lần chuyển động không mong muốn của nội dung trên trang.
Tại web.dev LIVE, chúng tôi đã chia sẻ các phương pháp hay nhất về cách tối ưu hoá cho Các chỉ số quan trọng của trang web và cách sử dụng Công cụ của Chrome cho nhà phát triển để khám phá các giá trị quan trọng của trang web. Chúng tôi cũng đã chia sẻ nhiều nội dung thảo luận khác liên quan đến hiệu suất mà bạn có thể tìm thấy tại web.dev/live trong lịch biểu của Ngày 1.
tooling.report
Phát triển cho một nền tảng rộng lớn như web có thể không dễ dàng. Các công cụ xây dựng thường là trung tâm của dự án phát triển web, đóng vai trò quan trọng trong việc xử lý vòng đời của sản phẩm và nhà phát triển của bạn.
Tất cả chúng ta đều từng thấy các tệp cấu hình bản dựng khó sử dụng, vì vậy, để giúp các nhà phát triển web và tác giả công cụ chinh phục sự phức tạp của môi trường web, chúng tôi đã tạo tooling.report. Đây là một trang web giúp bạn chọn công cụ xây dựng phù hợp cho dự án tiếp theo của mình, quyết định xem việc di chuyển từ công cụ này sang công cụ khác có đáng không hay tìm hiểu cách kết hợp các phương pháp hay nhất vào cấu hình công cụ và cơ sở mã của bạn.
Chúng tôi đã thiết kế một bộ kiểm thử để xác định xem công cụ xây dựng nào cho phép bạn tuân theo các phương pháp hay nhất để phát triển web. Chúng tôi đã làm việc với các tác giả công cụ xây dựng để đảm bảo chúng tôi sử dụng công cụ của họ đúng cách và thể hiện chúng một cách công bằng.
Bản phát hành ban đầu của tooling.report bao gồm webpack v4, Rollup v2, Parcel v2 và browserify with Gulp, có vẻ là các công cụ xây dựng phổ biến nhất hiện nay. Chúng tôi đã xây dựng tooling.report có thể linh hoạt bổ sung thêm công cụ xây dựng và thử nghiệm bổ sung với sự trợ giúp của cộng đồng.
Nếu chúng tôi thiếu một phương pháp hay nhất cần kiểm thử, vui lòng đề xuất phương pháp đó trong một vấn đề về GitHub. Nếu bạn muốn viết thử nghiệm hoặc thêm một công cụ mới mà chúng tôi không bao gồm trong tập hợp ban đầu, chúng tôi hoan nghênh bạn đóng góp!
Trong thời gian chờ đợi, bạn có thể đọc thêm về phương pháp tạo tooling.report của chúng tôi và xem phiên từ web.dev LIVE của chúng tôi.
Quyền riêng tư và bảo mật trên web
Chrome tin tưởng vào một môi trường web mở, tôn trọng quyền riêng tư của người dùng và duy trì các trường hợp sử dụng chính để giúp web hoạt động hiệu quả cho tất cả mọi người.
Năm 2019, Chrome đề xuất cập nhật tiêu chuẩn cookie để hạn chế cookie trong ngữ cảnh của bên thứ nhất theo mặc định và yêu cầu đánh dấu rõ ràng cookie cho ngữ cảnh của bên thứ ba. Cụ thể, điều này cung cấp một hàng phòng ngự chống lại các cuộc tấn công giả mạo Yêu cầu trên nhiều trang web. Đề xuất này hiện đang được Chrome, Firefox, Edge và các trình duyệt khác áp dụng.
Mặc dù Chrome đã quyết định tạm thời khôi phục những thay đổi này trong bối cảnh dịch COVID-19, nhưng rất tiếc là trong một cuộc khủng hoảng khi mọi người dễ bị tổn thương nhất, bạn cũng thấy các hình thức tấn công này gia tăng. Vì vậy, với bản phát hành Chrome 84 Ổn định (giữa tháng 7 năm 2020), những thay đổi này sẽ bắt đầu được triển khai trở lại trên mọi phiên bản Chrome từ 80 trở lên. Hãy xem hướng dẫn về cookie SameSite cũng như phiên TRỰC TIẾP web.dev để tìm hiểu thêm.
Hơn nữa, dưới biểu ngữ của Hộp cát về quyền riêng tư, Chrome sẽ đưa ra một số đề xuất tiêu chuẩn nhằm hỗ trợ các trường hợp sử dụng cho phép người dùng kiếm tiền bằng nền tảng web nhưng thực hiện theo cách tôn trọng quyền riêng tư của người dùng hơn. Chrome đang tích cực thu thập ý kiến phản hồi về các đề xuất này và đang tham gia các diễn đàn mở của W3C để thảo luận về các đề xuất cũng như đề xuất do các bên khác gửi. Hãy tìm hiểu thêm về sáng kiến này trong phiên Bảo mật và quyền riêng tư cho web mở.
Cuối cùng, khi nhìn vào bảo mật của người dùng, Spectre là một lỗ hổng bảo mật mà mã độc hại đang chạy trong một quy trình của trình duyệt có thể đọc mọi dữ liệu liên quan đến quy trình đó, ngay cả khi dữ liệu đến từ một nguồn gốc khác. Một trong những giải pháp giảm thiểu trình duyệt cho trường hợp này là tách biệt trang web, tức là đưa mỗi trang web vào một quy trình riêng. Hãy xem phiên TRỰC TIẾP web.dev về Các chính sách mới liên quan đến trình mở và trình nhúng trên nhiều nguồn gốc (COOP và COEP) để tìm hiểu thêm.
Xây dựng web với các chức năng mạnh mẽ
Chrome muốn bạn được thoải mái sáng tạo những ứng dụng web có chất lượng cao nhất, giúp bạn tiếp cận được nhiều người dùng nhất trên các thiết bị. Kết hợp khả năng cài đặt và độ tin cậy của PWA với dự án chức năng (Project Fugu), Chrome đang tập trung vào ba điều để thu hẹp khoảng cách giữa các ứng dụng dành riêng cho nền tảng và web, nhằm giúp bạn xây dựng và mang lại trải nghiệm tuyệt vời.
Trước tiên, các nhóm Chrome đang nỗ lực để mang lại cho nhà phát triển web và người dùng nhiều quyền kiểm soát hơn đối với trải nghiệm cài đặt, thêm chương trình khuyến mãi cài đặt vào thanh địa chỉ và nhiều lợi ích khác. Mặc dù web đã phổ biến, nhưng một số doanh nghiệp vẫn cần có ứng dụng của họ trên cửa hàng. Để giúp ích cho bạn, Chrome đã ra mắt Bubblewrap, một thư viện và CLI giúp việc tải PWA của bạn vào Cửa hàng Play là rất cần thiết. Trên thực tế, PWABuilder.com hiện sử dụng Bubblewrap. Chỉ cần vài lần nhấp chuột là bạn có thể tạo một tệp APK và tải PWA lên Cửa hàng Play, miễn là bạn đáp ứng các tiêu chí.
Thứ hai, Chrome đang cung cấp khả năng tích hợp chặt chẽ hơn với hệ điều hành, chẳng hạn như khả năng chia sẻ ảnh, bài hát hoặc bất kỳ nội dung nào bằng cách gọi dịch vụ chia sẻ ở cấp hệ thống với API Chia sẻ web, hoặc khả năng nhận nội dung khi được chia sẻ từ một ứng dụng đã cài đặt khác. Bạn có thể cập nhật cho người dùng hoặc thông báo cho họ về hoạt động mới bằng huy hiệu ứng dụng. Ngoài ra, giờ đây, người dùng cũng có thể dễ dàng bắt đầu một hành động nhanh chóng bằng cách sử dụng Lối tắt ứng dụng. Lối tắt này sẽ xuất hiện trong Chrome 84 (giữa tháng 7 năm 2020).
Sau cùng, Chrome đang nỗ lực phát triển các tính năng mới nhằm hỗ trợ những tình huống mới không thể làm trước đây, chẳng hạn như trình chỉnh sửa đọc và ghi vào tệp trên hệ thống tệp cục bộ của người dùng hoặc lấy danh sách phông chữ được cài đặt trên máy để người dùng có thể sử dụng trong thiết kế của họ.
Trong sự kiện web.dev LIVE, chúng tôi đã nói về nhiều khả năng và tính năng khác có thể cho phép bạn mang đến cho bạn trải nghiệm tương tự, với những chức năng tương tự như các ứng dụng dành riêng cho nền tảng. Hãy xem tất cả các phiên tại web.dev/live trong lịch biểu của Ngày 2.
Tính năng mới trong Công cụ của Chrome cho nhà phát triển và Lighthouse 6.0
Công cụ của Chrome cho nhà phát triển: thẻ Vấn đề mới, trình mô phỏng lỗi màu và hỗ trợ Các chỉ số quan trọng về trang web
Một trong những tính năng mạnh mẽ nhất của Công cụ của Chrome cho nhà phát triển là khả năng phát hiện các vấn đề trên trang web và thông báo cho nhà phát triển. Việc này cần thiết nhất khi chúng tôi chuyển sang giai đoạn tiếp theo của web ưu tiên quyền riêng tư. Để giảm sự lộn xộn và thông báo của thông báo trong Bảng điều khiển, Công cụ của Chrome cho nhà phát triển đã ra mắt thẻ Vấn đề, trong đó tập trung vào 3 loại vấn đề quan trọng cần bắt đầu: vấn đề về cookie, nội dung hỗn hợp và vấn đề về COEP. Hãy xem phiên TRỰC TIẾP web.dev về tìm và khắc phục vấn đề trên thẻ Vấn đề để bắt đầu.
Hơn nữa, với việc Các chỉ số quan trọng về trang web trở thành một trong những bộ chỉ số quan trọng nhất để nhà phát triển web theo dõi và đo lường, Công cụ cho nhà phát triển muốn đảm bảo nhà phát triển có thể dễ dàng theo dõi hiệu suất của họ dựa trên các ngưỡng này. Vì vậy, 3 chỉ số này hiện đã có trong bảng điều khiển Hiệu suất Công cụ của Chrome cho nhà phát triển.
Cuối cùng, khi số lượng nhà phát triển tập trung vào khả năng hỗ trợ tiếp cận ngày càng tăng, Công cụ cho nhà phát triển cũng giới thiệu một trình mô phỏng mù màu cho phép các nhà phát triển mô phỏng thị lực bị mờ và các dạng khiếm khuyết khác về thị giác. Bạn có thể tìm hiểu thêm về tính năng này và nhiều tính năng khác trong phiên Tính năng mới trong Công cụ cho nhà phát triển.
Lighthouse 6.0: Các chỉ số mới, dữ liệu đo lường trong phòng thí nghiệm Các chỉ số quan trọng về trang web, điểm số Hiệu suất mới cập nhật và các quy trình kiểm tra mới
Lighthouse là một công cụ nguồn mở tự động giúp nhà phát triển cải thiện hiệu suất trang web. Trong phiên bản mới nhất, nhóm Lighthouse đã tập trung vào việc cung cấp thông tin chi tiết dựa trên các chỉ số giúp bạn có được cái nhìn cân bằng về chất lượng trải nghiệm người dùng so với các phương diện quan trọng.
Để đảm bảo tính nhất quán, Lighthouse đã thêm tính năng hỗ trợ cho Các chỉ số quan trọng về trang web: LCP, TBT (đại diện cho FID vì Lighthouse là một công cụ phòng thí nghiệm và FID chỉ có thể đo lường được trong thực tế) và CLS. Lighthouse cũng xoá 3 chỉ số cũ: Thời gian hiển thị có ý nghĩa đầu tiên, Thời gian không hoạt động của CPU đầu tiên và FID tiềm năng tối đa. Quyết định xoá này là do những yếu tố như sự thay đổi chỉ số và các chỉ số mới hơn phản ánh chính xác hơn phần trải nghiệm người dùng mà Lighthouse đang cố gắng đo lường. Ngoài ra, Lighthouse cũng thực hiện một số điều chỉnh đối với mức độ ảnh hưởng của từng chỉ số vào điểm Hiệu suất tổng thể dựa trên phản hồi của người dùng.
Lighthouse cũng thêm một công cụ tính điểm để giúp bạn khám phá điểm số hiệu suất của mình bằng cách so sánh điểm số giữa phiên bản 5 và phiên bản 6. Khi bạn chạy quy trình kiểm tra bằng Lighthouse 6.0, báo cáo sẽ đi kèm một đường liên kết đến công cụ tính đã điền sẵn kết quả.
Cuối cùng, Lighthouse đã thêm nhiều quy trình kiểm tra mới, tập trung vào việc phân tích JavaScript và khả năng hỗ trợ tiếp cận.
Tìm hiểu thêm bằng cách xem phiên Tính năng mới về công cụ tăng tốc.
Tìm hiểu thêm
Cảm ơn mọi người trong cộng đồng đã tham gia cùng chúng tôi để thảo luận về những cơ hội và thách thức của nền tảng web.
Bài đăng này đã tóm tắt một số điểm nổi bật của sự kiện, nhưng còn rất nhiều điểm nổi bật khác. Đừng quên xem tất cả các phiên này và đăng ký nhận bản tin trên web.dev nếu bạn muốn nhận thêm nội dung trong hộp thư đến. Ngoài ra, hãy truy cập vào phần Sự kiện theo khu vực trên web.dev/live để tìm một sự kiện cộng đồng sắp tới theo múi giờ của bạn!