Tóm tắt SỰ KIỆN TRỰC TIẾP web.dev

Bản tóm tắt các tin tức và thông tin cập nhật quan trọng được công bố trong sự kiện cộng đồng trực tuyến kéo dài 3 ngày, cùng với lời nhắc về các sự kiện sắp tới theo khu vực.

Chúng tôi vừa kết thúc sự kiện kéo dài ba ngày, web.dev LIVE, nơi một số thành viên trong cộng đồng web đã cùng nhau thảo luận trực tuyến về tình hình phát triển web. Mỗi ngày, chúng tôi bắt đầu sự kiện theo một múi giờ khác nhau của khu vực. Các nhân viên của Google đã chia sẻ một loạt thông tin cập nhật, tin tức và mẹo nhằm cung cấp cho nhà phát triển các công cụ và hướng dẫn để duy trì một trang web ổn định, mạnh mẽ và dễ tiếp cận.

Nếu bạn bỏ lỡ một phần của sự kiện phát trực tiếp, thì tất cả các phiên đều được ghi lại và bạn có thể xem trên YouTube. Chúng tôi cũng sắp tổ chức các sự kiện khu vực trên toàn thế giới. Các sự kiện này do Google Developer Groups tổ chức và sẽ cung cấp các phiên chuyên sâu về các chủ đề liên quan đến những nội dung chúng tôi đã đề cập trong web.dev LIVE.

Hãy cùng tìm hiểu một số tin tức và thông tin cập nhật được chia sẻ trong 3 ngày diễn ra sự kiện.

Các chỉ số quan trọng về trang web

Nhóm Chrome đã công bố sáng kiến Web Vitals để cung cấp hướng dẫn, chỉ số và công cụ thống nhất nhằm giúp nhà phát triển mang lại trải nghiệm tuyệt vời 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 và sẽ lấy các chỉ số Core Web Vitals làm nền tảng.

Ba trụ cột của Các chỉ số quan trọng về trang web năm 2020 là tốc độ tải, khả năng tương tác và độ ổn định về hình ảnh của nội dung trang. Các chỉ số sau đây sẽ ghi lại những yếu tố này:

Hình minh hoạ Core Web Vitals.

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 chính của trang web và cách sử dụng Chrome DevTools để khám phá các giá trị quan trọng của trang web. Chúng tôi cũng chia sẻ nhiều bài nói chuyệ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 trình của Ngày 1.

tooling.report

Việc phát triển cho một nền tảng rộng lớn như web có thể gặp nhiều khó khăn. Công cụ xây dựng thường là trọng 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 nhà phát triển web và sản phẩm.

Tất cả chúng ta đều đã 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 web, chúng tôi đã xây dựng 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, quyết định xem có nên di chuyển từ công cụ này sang công cụ khác hay không, hoặc 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à toàn bộ mã nguồn của bạn.

Chúng tôi đã thiết kế một bộ kiểm thử để xác định công cụ xây dựng nào cho phép bạn làm theo các phương pháp hay nhất về 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 rằng chúng tôi sử dụng công cụ của họ một cách chính xác và trình bày công cụ một cách công bằng.

Ảnh chụp màn hình giao diện người dùng của tooling.report.

Bản phát hành đầu tiên của tooling.report bao gồm webpack phiên bản 4, Rollup phiên bản 2, Parcel phiên bản 2 và Browserify với Gulp, có vẻ như là những 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 với tính linh hoạt trong việc thêm nhiều công cụ xây dựng và kiểm thử 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 được kiểm thử, vui lòng đề xuất phương pháp đó trong một vấn đề trên GitHub. Nếu bạn muốn viết một bài kiểm thử hoặc thêm một công cụ mới mà chúng tôi không đưa vào nhóm ban đầu, thì chúng tôi rất mong bạn đóng góp!

Trong thời gian chờ đợi, bạn có thể đọc thêm về phương pháp xây dựng tooling.report và xem phiên của chúng tôi trên web.dev LIVE.

Quyền riêng tư và bảo mật trên web

Chrome tin 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 môi trường web hoạt động hiệu quả cho mọi người.

Vào năm 2019, Chrome đã đề xuất một bản cập nhật cho tiêu chuẩn cookie để hạn chế cookie đối với bối cảnh bên thứ nhất theo mặc định và yêu cầu cookie cho bối cảnh bên thứ ba phải được đánh dấu rõ ràng như vậy. Cụ thể, điều này cung cấp một tuyến phòng thủ 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 huỷ bỏ những thay đổi này do COVID-19, nhưng thật đáng buồn là trong thời kỳ khủng hoảng khi mọi người dễ bị tổn thương nhất, bạn cũng thấy những kiểu tấn công này gia tăng. Vì vậy, trong bản phát hành Chrome 84 Ổn định (giữa tháng 7 năm 2020), các thay đổi sẽ bắt đầu được triển khai lại trên tất cả các 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 web.dev LIVE để tìm hiểu thêm.

Hơn nữa, dưới sự bảo trợ của Hộp cát về quyền riêng tư, Chrome đang giới thiệu một số đề xuất tiêu chuẩn nhằm hỗ trợ các trường hợp sử dụng giúp mọi người kiếm sống bằng nền tảng web, nhưng 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 tìm kiếm ý kiến phản hồi về các đề xuất này và đang tham gia vào các diễn đàn mở của W3C để thảo luận về các đề xuất cũng như những đề xuất do các bên khác gửi. 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 xem xét vấn đề bảo mật của người dùng, Spectre là một lỗ hổng bảo mật, nghĩa là mã độc hại 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 đó có nguồn gốc khác. Một trong những biện pháp giảm thiểu của trình duyệt cho vấn đề 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. Xem phiên web.dev LIVE về Chính sách mới về trình mở và trình nhúng khác nguồn gốc (COOP và COEP) để tìm hiểu thêm.

Xây dựng một trang web có nhiều chức năng mạnh mẽ

Chrome muốn bạn có thể tự do tạo ra các ứng dụng web chất lượng cao nhất, giúp bạn tiếp cận 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 về các tính năng (Dự án Fugu), Chrome đang tập trung vào 3 đ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 đã nỗ lực hết mình để cung cấp cho nhà phát triển web và người dùng quyền kiểm soát tố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 tính năng khác. Mặc dù web rất phổ biến, nhưng một số doanh nghiệp vẫn cần có ứng dụng trong cửa hàng. Để hỗ trợ, Chrome đã ra mắt Bubblewrap, một thư viện và CLI giúp bạn dễ dàng đưa PWA của mình vào Cửa hàng Play. Trên thực tế, PWABuilder.com hiện sử dụng Bubblewrap. Chỉ với vài cú nhấp chuột, 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 cứ nội dung nào bằng cách gọi dịch vụ chia sẻ ở cấp hệ thống bằng Web Share API (API Chia sẻ trên web) hoặc khả năng nhận nội dung khi được chia sẻ từ một ứng dụng cần cài đặt khác. Bạn có thể cập nhật thông tin cho người dùng hoặc thông báo cho họ một cách tinh tế về hoạt động mới bằng huy hiệu ứng dụng. Ngoài ra, giờ đây người dù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, tính năng này sẽ có trong Chrome 84 (giữa tháng 7 năm 2020).

Và cuối cùng, Chrome đang nỗ lực phát triển các tính năng mới cho phép các tình huống mới mà trước đây không thể thực hiện được, 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 cục bộ để người dùng có thể sử dụng các phông chữ đó trong thiết kế của họ.

Trong sự kiện web.dev LIVE, chúng tôi đã nói về nhiều tính năng và chức năng khác có thể giúp bạn mang lại trải nghiệm tương tự, với cùng chức năng, như các ứng dụng dành riêng cho nền tảng. Xem tất cả các phiên tại web.dev/live trong lịch trình Ngày 2.

Tính năng mới trong Chrome DevTools và Lighthouse 6.0

Chrome DevTools: Thẻ Vấn đề mới, trình mô phỏng khiếm khuyết về màu sắc và hỗ trợ Web Vitals

Một trong những tính năng mạnh mẽ nhất của Chrome DevTools là khả năng phát hiện các vấn đề trên trang web và thu hút sự chú ý của nhà phát triển. Điều này đặc biệt quan trọng khi chúng ta bước vào giai đoạn tiếp theo của một môi trường web ưu tiên quyền riêng tư. Để giảm tình trạng mệt mỏi và lộn xộn trong Bảng điều khiển, Chrome DevTools đã ra mắt thẻ Vấn đề, tập trung vào 3 loại vấn đề nghiêm trọng để bắt đầu: vấn đề về cookie, nội dung hỗn hợp và vấn đề về COEP. Xem phiên web.dev LIVE về cách tìm và khắc phục vấn đề bằng thẻ Vấn đề để bắt đầu.

Ảnh chụp màn hình thẻ Vấn đề.

Hơn nữa, khi Core Web Vitals 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, DevTools muốn đảm bảo rằng nhà phát triển có thể dễ dàng theo dõi hiệu suất của họ so với các ngưỡng này. Vì vậy, ba chỉ số này hiện có trong bảng điều khiển Hiệu suất của Chrome DevTools.

Cuối cùng, khi ngày càng có nhiều nhà phát triển tập trung vào khả năng hỗ trợ tiếp cận, Công cụ cho nhà phát triển cũng ra mắt trình mô phỏng tình trạng suy giảm thị lực màu, cho phép nhà phát triển mô phỏng tình trạng mờ mắt và các loại suy giảm thị lực khá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.

Ảnh chụp màn hình trình mô phỏng khiếm khuyết thị giác.

Lighthouse 6.0: Các chỉ số mới, phép đo lường trong phòng thí nghiệm về Core Web Vitals, Điểm hiệu suất mới và các quy trình kiểm tra mới

Lighthouse là một công cụ tự động nguồn mở 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á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 đã bổ sung tính năng hỗ trợ cho Core Web Vitals: LCP, TBT (một proxy cho FID vì Lighthouse là một công cụ trong phòng thí nghiệm và FID chỉ có thể được đo lường trong thực tế) và CLS. Lighthouse cũng đã xoá ba chỉ số cũ: Lần hiển thị nội dung đầu tiên có ý nghĩa, Lần đầu tiên CPU rảnh và FID tiềm năng tối đa. Việc xoá này là do các yếu tố như khả năng biến thiên của chỉ số và các chỉ số mới hơn phản ánh tốt 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 điều chỉnh mức độ ảnh hưởng của từng chỉ số đến Điểm hiệu suất tổng thể dựa trên ý kiến phản hồi của người dùng.

Lighthouse cũng đã thêm một máy tính tính điểm để giúp bạn khám phá điểm 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à 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 với một đường liên kết đến công cụ tính toán có sẵn kết quả của bạn.

Cuối cùng, Lighthouse đã thêm một loạt bản kiểm tra mới, tập trung vào phân tích JavaScript và khả năng hỗ trợ tiếp cận.

Danh sách các quy trình kiểm tra mới.

Tìm hiểu thêm bằng cách xem phiên Tính năng mới trong công cụ tốc độ.

Tìm hiểu thêm

Cảm ơn tất cả mọi người trong cộng đồng đã tham gia cùng chúng tôi để thảo luận về các 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 vẫn còn nhiều điều thú vị khác. Hãy nhớ xem tất cả phiên và đăng ký nhận bản tin web.dev nếu bạn muốn nhận thêm nội dung ngay trong hộp thư đến của mình. Và 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 diễn ra theo múi giờ của bạn!