Tôi là Paul Kinlan, người phụ trách mối quan hệ với nhà phát triển cho Chrome. Trong công việc của mình, tôi có cơ hội làm việc với một nhóm những người ủng hộ web đầy nhiệt huyết. Họ có nhiệm vụ đưa góc nhìn của các nhà phát triển thực tế đến với nhóm sản phẩm và kỹ thuật của chúng tôi, với chỉ số kim chỉ nam là cải thiện mức độ hài lòng của nhà phát triển.
Chúng tôi nhận thấy rằng "mức độ hài lòng" là một chỉ số đầy tham vọng và chủ quan để theo dõi và cải thiện. Vì vậy, chúng tôi liên tục lặp lại cách có thể tạo ra tác động trong khi tập trung vào nhu cầu của nhà phát triển. Một nguyên tắc chỉ đạo hữu ích mà chúng tôi nhận thấy là "gặp gỡ nhà phát triển ở nơi họ đang ở". Một nghiên cứu gần đây của Stack Overflow cho thấy 75% nhà phát triển báo cáo việc sử dụng khung hoặc một loại trừu tượng nào đó. Vì vậy, chúng tôi đã tự hỏi làm cách nào để phục vụ tốt nhất những nhà phát triển đã đưa ra quyết định hoặc không có quyền kiểm soát ngăn xếp công nghệ của họ? Làm cách nào để tăng năng suất mà không làm tăng thêm chi phí?
Một nhóm nhỏ tại Chrome đã và đang làm việc trên một dự án có tên là Aurora, với mục tiêu làm việc với các thành phần trừu tượng của nền tảng web của bên thứ ba, chẳng hạn như khung và thư viện. Mục tiêu của họ là giúp tăng hiệu suất trực tiếp cho các lớp trừu tượng này, thay vì để khách hàng (nhà phát triển web) gánh vác gánh nặng này.
Trong số thứ ba của Chrome Dev Insider, tôi đã trò chuyện với Addy Osmani, Kara Erickson và Houssein Djirdeh thuộc nhóm Dự án Aurora để tìm hiểu thêm về cách họ tiếp cận dự án này và những điều đang chờ đợi họ.
Thông tin nội bộ: Làm việc với các khung của bên thứ ba
Hãy bắt đầu với nguồn gốc của dự án này. Ý tưởng này bắt nguồn từ đâu?
Addy: Aurora bắt đầu từ một ý tưởng đơn giản: hãy gặp gỡ các nhà phát triển ở vị trí hiện tại và giúp họ đạt được mục tiêu. Ví dụ: giúp ngăn xếp công nghệ phổ biến mà họ đã chọn cải thiện hiệu suất. Ngày nay, nhiều nhà phát triển ứng dụng đang xây dựng bằng React, Vue hoặc Angular – hoặc các siêu khung* như Next.js và Nuxt – (và tất nhiên còn nhiều khung khác nữa… Svelte, Lit, Preact, Astro. Danh sách này còn dài!). Thay vì kỳ vọng các nhà phát triển này trở thành chuyên gia chuyên sâu (ví dụ: về hiệu suất), chúng ta có thể đảm bảo họ đạt được thành công bằng cách tích hợp nhiều phương pháp hay nhất theo mặc định vào các ngăn xếp này. Bằng cách đó, các trang web chất lượng cao hơn sẽ là hiệu ứng phụ của việc chỉ xây dựng cho web.
Aurora chọn một số khung và khung meta được sử dụng rộng rãi để hợp tác, chúng tôi ghi lại những điều đã học được (chẳng hạn như cách tạo một thành phần hình ảnh tốt) để những người khác có thể nhanh chóng làm theo và cố gắng mở rộng quy mô thông qua các khung và công cụ khác thông qua Quỹ khung Chrome. Mặc dù có thể cải thiện chất lượng trải nghiệm web thông qua trình duyệt, nhưng chúng tôi tin rằng mục tiêu này cũng có thể được thực hiện thông qua các khung (trong một số trường hợp). Chúng tôi hy vọng điều này sẽ giúp chúng tôi đạt được mục tiêu cung cấp một trang web chất lượng cao hơn cho tất cả mọi người.
Kara: Để mở rộng ý tưởng đó, chúng tôi muốn cải thiện hiệu suất trên web bằng cách cải thiện trải nghiệm của nhà phát triển. Việc công bố các phương pháp hay nhất về hiệu suất là chưa đủ, vì các phương pháp này thường thay đổi và các công ty khó có thể bắt kịp. Họ có những ưu tiên kinh doanh riêng có thể sẽ được đặt lên hàng đầu so với hiệu suất.
Vì vậy, chúng tôi cho rằng nếu nhà phát triển có thời gian hạn chế để dành cho hiệu suất, hãy giúp họ xây dựng ứng dụng hiệu suất cao một cách dễ dàng (và nhanh chóng) hơn. Nếu hợp tác với các khung web phổ biến, chúng tôi sẽ ở đúng lớp trừu tượng để cải thiện trải nghiệm của nhà phát triển thông qua các thành phần cấp cao hơn, cảnh báo về việc tuân thủ, v.v. Bất kỳ ai sử dụng các công cụ phổ biến đó đều có thể tận hưởng những lợi ích này. Và về lý thuyết, nếu lời khuyên đề xuất thay đổi, chúng ta có thể cập nhật các thành phần của mình và nhà phát triển không phải lo lắng về việc luôn cập nhật.
Houssein: Tôi gia nhập Google với vai trò là Nhà ủng hộ nhà phát triển trước khi chuyển sang vai trò kỹ sư phần mềm vài năm sau đó. Trước đây, tôi chủ yếu hướng dẫn các nhà phát triển web về nhiều cách để tạo ra trải nghiệm tuyệt vời cho người dùng. Chúng tôi đã cung cấp nhiều phiên bản của cùng một hướng dẫn để cảnh báo nhà phát triển về các vấn đề thường gặp có thể ảnh hưởng đến hiệu suất và khả năng hữu dụng của trang web. Khi bắt đầu nghĩ về dự án Aurora, chúng tôi tự hỏi: liệu chúng tôi có thể đi theo hướng mà không bao giờ phải nói cho nhà phát triển biết phải làm gì vì chuỗi công cụ của họ sẽ xử lý mọi thứ cho họ không?
Nếu tôi hiểu đúng thì nhóm của bạn có 6 kỹ sư phải không? Tôi cá là bạn không thể làm việc với mọi khung hoặc thư viện có thể có. Vậy làm cách nào để bạn chọn người hợp tác? Và họ là ai?
Addy: Web giống như miền Tây hoang dã ở nhiều khía cạnh. Bạn có thể chọn bất kỳ khung, trình đóng gói, thư viện và bên thứ ba nào mà bạn muốn. Điều này dẫn đến một số lớp phức tạp có thể góp phần mang lại hiệu suất tốt hoặc kém. Một trong những cách tốt nhất để cải thiện hiệu suất là tìm những lớp có thể thoải mái thể hiện quan điểm và thêm nhiều quan điểm khác vào đó.
Ví dụ: các khung web (Next.js, Nuxt.js và ở một mức độ nào đó là Angular) cố gắng đưa vào nhiều ý kiến và giá trị mặc định hơn so với giải pháp thủ công. Đây là một trong những lý do chúng tôi rất thích hợp tác với họ! Việc có các giá trị mặc định mạnh mẽ hơn về cách tải hình ảnh, phông chữ và tập lệnh để có Chỉ số quan trọng chính của trang web tốt hơn là điều hợp lý trong các mô hình này.
Đây cũng là một cách hay để xác nhận những phương pháp hay nhất hiện đại có hiệu quả hay cần phải suy nghĩ lại, đồng thời có thể giúp thông báo cho toàn bộ hệ sinh thái về cách giải quyết các vấn đề về tối ưu hoá.
Kara: Thực tế là chúng tôi cũng phải cân nhắc mức độ phổ biến. Nếu muốn có tác động lớn nhất có thể trên web, bạn nên làm việc với các khung và thư viện có cộng đồng nhà phát triển lớn hiện có. Nhờ đó, chúng tôi có thể tiếp cận nhiều nhà phát triển và ứng dụng hơn. Nhưng không chỉ là mức độ phổ biến. Cuối cùng, đó là sự giao thoa giữa mức độ phổ biến, mức độ chủ quan của thư viện và bộ tính năng hiện có mà chúng ta có thể sử dụng.
Ví dụ: nếu chỉ xem xét mức độ phổ biến, thì React, Vue và Angular là "bộ ba lớn" mà bạn nên cân nhắc. Tuy nhiên, chúng tôi làm việc nhiều nhất với Next.js, Nuxt và Angular. Lý do là các thư viện thành phần hiển thị như React và Vue chủ yếu tập trung vào việc kết xuất, vì vậy, không thể trực tiếp tích hợp tất cả các tính năng mà chúng ta muốn vào các thư viện này. Vì vậy, chúng tôi hợp tác chặt chẽ hơn với các siêu khung có định hướng được xây dựng dựa trên các khung đó: Next.js và Nuxt. Ở cấp độ trừu tượng này, chúng ta có thể tạo các thành phần tích hợp sẵn. Các ứng dụng này cũng có máy chủ tích hợp, vì vậy, chúng ta có thể đưa các tính năng tối ưu hoá phía máy chủ vào.
Bạn có thể nhận thấy rằng Angular có trong danh sách các mối quan hệ đối tác sâu đó, nhưng đây không phải là một siêu khung. Angular là một trường hợp đặc biệt vì khá phổ biến nhưng không có khung meta bổ sung như React và Vue. Vì vậy, chúng tôi làm việc trực tiếp với họ và đóng góp các tính năng thông qua CLI của họ nếu có thể.
Và điều đáng chú ý là chúng tôi có một số mối quan hệ đang diễn ra với các dự án khác như Gatsby, nơi chúng tôi đồng bộ hoá khá thường xuyên về thiết kế nhưng không tích cực đóng góp mã.
Vậy quy trình này sẽ diễn ra như thế nào trong thực tế? Bạn đã giải quyết vấn đề này bằng cách nào?
Kara: Trong thực tế, chúng tôi có một số khung mà chúng tôi cộng tác chặt chẽ. Chúng ta sẽ dành thời gian để phân tích tài nguyên cho các ứng dụng bằng khung đó và tìm ra những vấn đề thường gặp về hiệu suất. Sau đó, chúng tôi sẽ làm việc với nhóm khung để thiết kế các tính năng thử nghiệm nhằm giải quyết những vấn đề đó và đóng góp mã trực tiếp vào kho lưu trữ OSS để triển khai các tính năng đó.
Chúng tôi rất cần xác thực rằng tác động đến hiệu suất là như chúng tôi dự đoán. Vì vậy, chúng tôi cũng hợp tác với các công ty bên ngoài để tiến hành kiểm thử hiệu suất trong môi trường sản xuất. Nếu kết quả khả quan, chúng tôi sẽ giúp tính năng này đạt trạng thái "ổn định" và có thể đặt làm tính năng mặc định.
Tất cả những điều này không thể dễ dàng như bạn nghĩ. Tính đến thời điểm này, bạn đã gặp phải những thử thách hay bài học nào?
Houssein: Một điều quan trọng mà chúng tôi cố gắng hết sức để thực hiện là đóng góp cho các kho lưu trữ nguồn mở phổ biến có nhiều ưu tiên cạnh tranh. Việc chúng tôi là một nhóm của Google không có nghĩa là các tính năng của chúng tôi sẽ được ưu tiên. Vì vậy, chúng tôi cố gắng hết sức để điều chỉnh theo quy trình thông thường khi đề xuất và phát hành các tính năng mới mà không làm phiền ai. Chúng tôi rất may mắn khi được làm việc với các nhà bảo trì tích cực trong hệ sinh thái Next.js, Nuxt và Angular. Chúng tôi rất cảm ơn họ đã sẵn sàng lắng nghe những mối lo ngại của chúng tôi về hệ sinh thái web và sẵn sàng cộng tác với chúng tôi theo nhiều cách.
Với nhiều khung mà chúng tôi làm việc cùng, sứ mệnh tổng thể của chúng tôi đều giống nhau; làm cách nào để các nhà phát triển có thể cải thiện trải nghiệm người dùng ngay từ đầu, đồng thời tận hưởng trải nghiệm tuyệt vời dành cho nhà phát triển? Chúng tôi hiểu và tôn trọng việc có hàng trăm, nếu không muốn nói là hàng nghìn cộng tác viên và người duy trì khung, mỗi người làm việc trên các dự án khác nhau có liên quan đến nhau.
Kara: Ngoài ra, vì chúng tôi quan tâm đến việc xác thực tác động đến hiệu suất và hành động dựa trên dữ liệu, nên quá trình này sẽ mất thêm một chút thời gian. Chúng tôi đang ở một vùng đất chưa được khám phá, vì vậy, đôi khi chúng tôi sẽ thử nghiệm một phương pháp tối ưu hoá không hiệu quả và không xây dựng được tính năng theo kế hoạch. Ngay cả khi một tính năng hoạt động hiệu quả, thì bạn vẫn phải mất thời gian và kéo dài tiến trình để kiểm tra hiệu suất.
Việc tìm đối tác sản xuất để thử nghiệm các tính năng của chúng tôi cũng có thể là một thách thức. Như đã đề cập trước đó, họ là các doanh nghiệp và có những ưu tiên riêng. Vì vậy, họ có thể gặp khó khăn khi áp dụng các sáng kiến mới nếu những sáng kiến đó không phù hợp với các dự án hiện có mà họ phải ưu tiên. Ngoài ra, những công ty quan tâm nhất đến việc được hỗ trợ thường đã dành thời gian đầu tư vào hiệu suất, vì vậy, họ không thực sự là đối tượng mục tiêu của chúng tôi. Chúng tôi đang cố gắng thu thập ý kiến phản hồi từ một lượng lớn cộng đồng không thể đầu tư vào hiệu suất, nhưng họ lại ít có khả năng liên hệ với chúng tôi nhất.
Tiếp theo, bạn đang tập trung vào loại hoạt động tối ưu hoá nào?
Houssein: Sau khi phân tích hàng nghìn ứng dụng, chúng tôi nhận thấy rằng các vấn đề lớn nhất về hiệu suất thường là do các mẫu chống trong mã ứng dụng chứ không phải do chính khung. Ví dụ: gửi hình ảnh quá lớn không cần thiết, tải phông chữ tuỳ chỉnh quá muộn, tìm nạp quá nhiều yêu cầu của bên thứ ba chặn luồng chính và không xử lý cách nội dung không đồng bộ có thể khiến các nội dung khác thay đổi trên trang. Đây đều là những vấn đề có thể phát sinh bất kể bạn sử dụng công cụ nào. Vì vậy, chúng tôi đã nghĩ rằng liệu chúng ta có thể tích hợp một số tính năng tối ưu hoá mặc định để xử lý tốt các vấn đề này mà vẫn mang lại trải nghiệm gọn gàng cho nhà phát triển, phù hợp với công cụ khung của họ không?
Với suy nghĩ này, chúng tôi đã phát hành:
- Thành phần hình ảnh Next.js.
- Thành phần tập lệnh Next.js.
- Tự động nội tuyến phông chữ trong quy trình tạo bản dựng của Next.js.
- Chỉ thị hình ảnh Angular.
- Trình bổ trợ ESLint tuân thủ Next.js để cung cấp hướng dẫn hữu ích cho nhà phát triển.
Công việc của chúng tôi đã truyền cảm hứng cho các khung và công cụ khác để triển khai các phương pháp tối ưu hoá tương tự. Điều này bao gồm, nhưng không giới hạn ở:
- Mô-đun hình ảnh Nuxt
- Ghi đè chỉ số phông chữ Nuxt
- Thành phần tập lệnh Nuxt (đang trong quá trình phát triển)
- Thành phần Tập lệnh Gatsby
Bạn có thể chia sẻ một số kết quả tích cực của công việc của mình với một số người chơi này không?
Houssein: Nhiều trang web đã cải thiện hiệu suất nhờ các tính năng tối ưu hoá mà chúng tôi đã cung cấp. Một trong những ví dụ mà tôi yêu thích là Leboncoin, họ đã giảm LCP từ 2,4 giây xuống còn 1,7 giây sau khi chuyển sang thành phần hình ảnh Next.js. Còn nhiều tính năng khác đang trong giai đoạn thử nghiệm và kiểm thử. Chúng tôi sẽ tiếp tục chia sẻ những bài học và thành công từ các tính năng đó tại đây.
Ok, tôi hiểu rằng bạn tập trung vào những thư viện phổ biến nhất, nhưng có cách nào để các khung hoặc thư viện khác mà bạn không chủ động làm việc cũng được hưởng lợi không?
Addy: Bất kỳ khung nào cũng có thể sao chép nhiều tính năng tối ưu hoá hiệu suất mà Aurora cộng tác. Hãy xem xét những nỗ lực của chúng tôi trong việc phát triển thành phần Hình ảnh hoặc Tập lệnh, chẳng hạn như các thành phần này thường mã hoá một bộ phương pháp hay nhất hiện có. Chúng tôi cố gắng ghi lại "cách" tạo các thành phần như vậy và hình thức của các thành phần đó trong mỗi khung. Hy vọng đây là một khởi đầu tốt để sao chép ý tưởng.
Chúng tôi đã đạt được một số thành công khi áp dụng những bài học rút ra từ một hệ sinh thái (ví dụ: React và Next.js) cho các hệ sinh thái khác. Ví dụ: Chỉ thị hình ảnh Angular mới (dựa trên những gì chúng tôi học được khi xây dựng Thành phần hình ảnh Next.js) hoặc Gatsby triển khai phương pháp phân đoạn JavaScript chi tiết.
Đồng thời, chúng tôi hiểu rằng không phải khung nào cũng có đủ băng thông hoặc nguồn tài trợ để các cộng tác viên xây dựng các tính năng hiệu suất tương tự hoặc đầu tư vào các hoạt động tối ưu hoá khác mà họ cho là quan trọng đối với người dùng. Quỹ Khung web Chrome là một cách để chúng tôi tài trợ cho công việc cải thiện hiệu suất trong hệ sinh thái JavaScript, giúp các dự án trả tiền cho những người đóng góp và mở rộng quy mô công việc cải thiện hiệu suất trong hệ sinh thái.
Vậy, lộ trình sắp tới của nhóm bạn là gì?
Kara: Chúng tôi có rất nhiều dự án thú vị sắp ra mắt! Một số nội dung được đánh dấu:
- Giảm CLS liên quan đến phông chữ: Bạn thường thấy bố cục thay đổi khi một phông chữ web được tải và thay thế phông chữ dự phòng. Chúng tôi đang tìm hiểu cách sử dụng các chỉ số ghi đè phông chữ và thuộc tính "size-adjust" để giảm CLS liên quan đến phông chữ theo mặc định trong Next.js. Chúng tôi cũng đã tham khảo ý kiến của nhóm Nuxt về vấn đề này và dự định mở rộng ý tưởng này sang nhiều khung khác vào năm tới.
- Gỡ lỗi INP: Giờ đây, khi chỉ số Lượt tương tác đến lượt vẽ tiếp theo (INP) đã được phát hành, chúng tôi đang làm việc với các khung để điều tra nguyên nhân gốc rễ phổ biến nhất của các vấn đề về INP cho cộng đồng của họ và đề xuất các biện pháp khắc phục. Chúng tôi đã hợp tác chặt chẽ với Angular về vấn đề này và hy vọng sẽ sớm có kết quả để chia sẻ!
- Tối ưu hoá các tập lệnh phổ biến của bên thứ ba: Việc tải tập lệnh của bên thứ ba vào sai thời điểm có thể ảnh hưởng tiêu cực đáng kể đến hiệu suất. Vì có một số bên thứ ba rất phổ biến, nên chúng tôi đang xem xét xem có thể cung cấp một số trình bao bọc cho các bên thứ ba này hay không để đảm bảo rằng các trình bao bọc này được tải tối ưu bằng các khung và không chặn luồng chính. Chúng ta sẽ sử dụng thành phần tập lệnh Next.js mà chúng ta đã tạo làm điểm khởi đầu cho quá trình điều tra này.
Nhà phát triển có thể theo dõi tiến trình của chúng tôi trên trang web này.
Địa điểm thu hút truyền thông
Trước khi kết thúc, tôi muốn chia sẻ với bạn một số thông tin cập nhật thú vị về thế giới khung đang diễn ra trong Google.
Vào tháng 7, nhóm Chrome đã công bố vòng tài trợ mới nhất trị giá 500.000 USD cho Quỹ khung và công cụ. Quỹ này tập trung vào việc tài trợ các dự án nhằm cải thiện hiệu suất, trải nghiệm người dùng và trải nghiệm nhà phát triển trên web. Các khoản tài trợ trong tương lai sẽ xem xét các dự án mới, vì vậy, hãy nhớ gửi yêu cầu của bạn.
Và tất nhiên, còn có rất nhiều điều tuyệt vời đang diễn ra trong cộng đồng. Hệ sinh thái này đã chín muồi với các khung mới như Fresh của Deno và những trải nghiệm tuyệt vời như hướng dẫn làm quen của Svelte. Đây không chỉ là bản minh hoạ trong trình duyệt mà còn sử dụng API vùng chứa web để chạy Node.js gốc trong trình duyệt. Có quá nhiều nội dung hay!
Tôi thực sự vui mừng khi thấy hệ sinh thái này đang phát triển, thúc đẩy những gì có thể trong trình duyệt và giúp nhà phát triển xây dựng các sản phẩm phù hợp với mọi người. Đây là thời điểm thú vị để trở thành nhà phát triển web.
Hẹn gặp lại trong số tiếp theo của Creator Insider! Hwyl fawr!
Bạn cảm thấy thế nào về ấn bản này của The Chrome Dev Insider? Chia sẻ ý kiến phản hồi của bạn.