Chrome Dev Insider: Mở rộng hiệu suất nhờ hệ sinh thái khung

Paul Kinlan

Tôi là Paul Kinlan, trưởng nhóm quan hệ nhà phát triển cho Chrome. Một phần công việc của tôi là làm việc với một nhóm những người ủng hộ web nhiệt huyết, có nhiệm vụ đưa quan điểm của các nhà phát triển trong thế giới thực đến các nhóm kỹ thuật và sản phẩm của chúng tôi, với chỉ số kim chỉ nam để cải thiện sự 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 cần theo dõi và cải thiện, vì vậy, chúng tôi không ngừng cải thiện cách tạo ra tác động trong khi vẫn tập trung vào nhu cầu của nhà phát triển. Một nguyên tắc định hướng mà chúng tôi thấy hữu ích là: "đáp ứng vị trí của nhà phát triển". Một nghiên cứu gần đây của Stack Overflow cho thấy rằng 75% nhà phát triển báo cáo rằng họ sử dụng các khung hoặc một mô hình trừu tượng. Vì vậy, chúng tôi đang tự hỏi làm cách nào để hỗ trợ tốt nhất cho những nhà phát triển đã đưa ra quyết định hoặc không có quyền kiểm soát nhóm công nghệ của họ? Làm cách nào để chúng ta tăng năng suất làm việc mà không tốn thêm chi phí?

Một nhóm nhỏ tại Chrome đang xây dựng dự án có tên 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 bên thứ ba của nền tảng web, chẳng hạn như các khung và thư viện. Mục tiêu của họ là giúp trực tiếp cải thiện hiệu suất dựa trên những dữ liệu trừu tượng này, thay vì làm gánh nặng cho khách hàng, tức là nhà phát triển web.

Trong ấn bản 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 Project Aurora để tìm hiểu thêm về cách họ tiếp cận dự án này cũng như những điều sắp tới.

Tin sốt dẻo: Làm việc với các khung làm việc của bên thứ ba

Hãy bắt đầu với nguồn gốc của dự án này. Bạn cảm thấy thế nào về việc này?

Addy: Aurora bắt đầu với một ý tưởng đơn giản: gặp gỡ các nhà phát triển đúng lúc và giúp họ đạt được những mục tiêu cần thiết. Ví dụ: hỗ trợ nhóm công nghệ phổ biến mà họ đã chọn để cải thiện hiệu suất. Hiện nay, nhiều nhà phát triển ứng dụng đang xây dựng ứng dụng bằng cách sử dụng React, Vue hoặc Angular – hoặc meta-framework* như Next.js và Nuxt – (và tất nhiên là nhiều ứng dụng khác... Svelte, Lit, Preact, Astro. Danh sách này tiếp tục!). Thay vì kỳ vọng các nhà phát triển này trở thành chuyên gia chuyên sâu (chẳng hạn như về hiệu suất), chúng tôi có thể đảm bảo họ sẽ đạt được thành công bằng cách mặc định áp dụng nhiều phương pháp hay nhất vào những nhóm này. Theo cách đó, các trang web có chất lượng tốt hơn chỉ là tác dụng phụ của việc chỉ xây dựng cho web.

Aurora chọn một số khung và siêu khung được sử dụng rộng rãi để hợp tác. Sau đó, chúng tôi ghi lại kiến thức của mình (chẳng hạn như cách xây dựng một thành phần hình ảnh phù hợp), để những người khác có thể nhanh chóng nắm bắt 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 của 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ể đạt được (trong một số trường hợp) thông qua khung. Chúng tôi hy vọng điều này sẽ giúp chúng tôi đạt được mục tiêu xây dựng môi trường web chất lượng cao hơn cho tất cả mọi người.

Kara: Để mở rộng thêm, mục tiêu của chúng tôi là 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. Công bố các phương pháp hay nhất về hiệu suất là chưa đủ, bởi vì các phương pháp này thường thay đổi và các công ty sẽ khó theo dõi. Họ có những ưu tiên kinh doanh riêng và nhiều khả năng sẽ cao hơn hiệu suất.

Vì vậy, suy nghĩ của chúng tôi là nếu các nhà phát triển có thời gian hạn chế về hiệu suất, hãy giúp họ xây dựng một ứng dụng hiệu suất dễ dàng hơn (và nhanh hơn). Nếu chúng tôi hợp tác với các khung web phổ biến, chúng tôi sẽ ở tầng trừu tượng phù hợp để cải thiện trải nghiệm nhà phát triển thông qua các thành phần cấp cao hơn, cảnh báo về tính tuân thủ, v.v. Bất cứ ai sử dụng những công cụ phổ biến đó đều được hưởng những lợi ích này. Và về mặt lý thuyết, nếu lời khuyên được đề xuất thay đổi, chúng tôi có thể nâng cấp 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 cập nhật thông tin mới nhất.

Houssein: Tôi gia nhập Google với vai trò là Chuyên gia hỗ trợ nhà phát triển trước khi chuyển sang vai trò kỹ thuật phần mềm vài năm sau đó. Phần lớn công việc trước đây của tôi liên quan đến việc hướng dẫn nhà phát triển web nhiều cách khác nhau để tạo ra trải nghiệm người dùng tuyệt vời. Nhiều biến thể của cùng một hướng dẫn được đưa ra nhiều lần để cảnh báo cho nhà phát triển về những vấn đề phổ biến 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 ta có thể đi theo một hướng mà chúng ta không bao giờ phải yêu cầu các nhà phát triển phải làm gì, nhờ chuỗi công cụ của họ đảm nhận mọi việc cho họ không?

Nếu tôi hiểu đúng thì bạn là một đội ngũ gồm 6 kỹ sư. Tôi cá là bạn không thể xử lý mọi khung hoặc thư viện có thể có. Vậy làm cách nào để chọn người hợp tác? Và họ là ai?

Addy: Web theo nhiều cách giống như miền Tây hoang dã. 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 vào hiệu suất tốt hoặc kém. Một trong những cách tốt nhất để thúc đẩy hiệu suất là đảm bảo những lớp đó cảm thấy thoải mái khi bị thuyết phục và bổ sung thêm ý kiến cho chúng.

Ví dụ: các khung web (Next.js, Nuxt.js và Angular) cố gắng kết hợp nhiều ý kiến và mặc định hơn so với một giải pháp cuộn thủ công. Đây là một lý do chúng tôi rất thích hợp tác với các dịch vụ này! Các mô hình này có các chế độ mặc định mạnh hơn về cách tải hình ảnh, phông chữ và tập lệnh để Các chỉ số quan trọng về trang web hiệu quả hơn.

Đây cũng là một cách hiệu quả để xác nhận xem các phương pháp hay nhất hiện đại hoạt động ra sao hoặc có thể cần xem xét lại, đồng thời giúp cung cấp thông tin cho toàn bộ hệ sinh thái về cách tiếp cận để giải quyết các vấn đề về tối ưu hoá.

Kara: Thực tế, chúng tôi cũng phải xem xét mức độ phổ biến. Nếu muốn tạo ra tác động lớn nhất có thể đến môi trường web, thì chúng ta nên làm việc với các khung và thư viện hiện có một cộng đồng nhà phát triển đông đảo. Chúng tôi có thể tiếp cận thêm nhiều nhà phát triển và nhiều ứng dụng hơn nữa. Tuy nhiên, bạn không thể chỉ dựa vào mức độ phổ biến. Cuối cùng, vấn đề cần đáp ứng là điểm giao thoa giữa mức độ phổ biến, mức độ uy tín của một thư viện và bộ tính năng hiện có mà chúng tôi có thể sử dụng.

Ví dụ: nếu chỉ xem xét mức độ phổ biến, thì React, Vue và Angular là "ba yếu tố lớn" cần cân nhắc. Nhưng chúng tôi làm việc với Next.js, Nuxt và Angular nhiều nhất. Nguyên nhân là do các thư viện khung hiển thị như React và Vue chủ yếu tập trung vào việc kết xuất đồ hoạ, vì vậy, không thể trực tiếp xây dựng tất cả tính năng mà chúng ta muốn vào trong các thư viện đó. Vì vậy, chúng tôi hợp tác chặt chẽ hơn với các khung meta định hướng được xây dựng dựa trên các nền tảng đó: 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. Chúng cũng có máy chủ tích hợp, vì vậy chúng ta có thể bao gồm các tính năng tối ưu hoá phía máy chủ.

Bạn có thể nhận thấy Angular có trong danh sách các mối quan hệ đối tác sâu sắc, nhưng đó không phải là một siêu khung. Angular là một trường hợp đặc biệt vì nó khá phổ biến nhưng không có một khung meta bổ sung theo cách mà React và Vue làm. 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ọ khi 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, trong đó chúng tôi phần nào đồng bộ hoá thường xuyên về thiết kế nhưng không tích cực đóng góp mã.

Vậy trong thực tế, chiến lược này trông như thế nào? Vui lòng cho biết phương pháp của bạn để giải quyết vấn đề này.

Kara: Trên thực tế, chúng tôi có một số khung để cộng tác chặt chẽ. Chúng tôi sẽ dành thời gian để phân tích tài nguyên của ứng dụng bằng khung đó và xác định các vấn đề phổ biến về hiệu suất. Sau đó, chúng tôi 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 đó.

Điều thực sự quan trọng đối với chúng tôi là xác thực rằng tác động đến hiệu suất đúng như 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 để kiểm thử hiệu suất trong môi trường thực tế. Nếu kết quả đáng khích lệ, chúng tôi sẽ giúp tính năng này hoạt động ở chế độ "ổn định" và có thể đặt tính năng này làm chế độ mặc định.

Tất cả những việc này không thể dễ dàng như bạn nói. Vui lòng cho biết một số thách thức và bài học mà bạn đã trải qua cho đến thời điểm này.

Houssein: Một điều quan trọng mà chúng tôi cố gắng làm hết sức có thể là đóng góp cho các kho lưu trữ nguồn mở phổ biến có nhiều mức độ ưu tiên cạnh tranh. Vì chúng tôi là một nhóm của Google, không nhất thiết 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 để phù hợp với quy trình đề xuất và vận chuyển các tính năng mới thông thường mà không ảnh hưởng đến bất kỳ ai. Chúng tôi rất may mắn khi được làm việc với các nhà bảo trì tiếp nhận trong hệ sinh thái Next.js, Nuxt và Angular. Chúng tôi rất biết ơn vì họ đã sẵn lòng lắng nghe các 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 hợp tác, sứ mệnh tổng thể của chúng tôi là như nhau; làm thế nào để nhà phát triển có thể vừa cải thiện trải nghiệm người dùng vừa có thể 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 rõ và tôn trọng rằng có hàng trăm, thậm chí là hàng nghìn người đóng góp cho cộng đồng và những người duy trì khung, mỗi bên đang cộng tác với nhau trong các dự án khác nhau.

Kara: Ngoài ra, do 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 quy trình này sẽ mất nhiều thời gian hơn một chút. Chúng tôi đang ở trong một lãnh thổ chưa được khám phá, vì vậy, đôi khi chúng tôi sẽ thử nghiệm với giải pháp tối ưu hoá không hoạt động và chúng tôi không kết thúc việc tạo tính năng theo kế hoạch. Ngay cả khi một tính năng đã ra mắt, thì một vài bước bổ sung đó để xem xét hiệu suất sẽ tốn thời gian và kéo dài tiến trình.

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 không dễ dàng. Như đã đề cập trước đó, họ là những doanh nghiệp và có những ưu tiên riêng. Vì vậy, họ có thể gặp khó khăn trong việc tham gia các sáng kiến mới nếu không phù hợp với các dự án hiện tại (phải được ưu tiên). Ngoài ra, các công ty quan tâm nhất đến việc trợ giúp thường dành thời gian đầu tư vào hiệu suất, nên 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ừ phần lớn cộng đồng không thể đầu tư vào hiệu suất, nhưng họ í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 những phương pháp 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 vấn đề lớn nhất về hiệu suất thường là do phản mẫu trong mã xử lý ứng dụng chứ không phải chính khung. Ví dụ: vận chuyển hình ảnh 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 những nội dung khác thay đổi trên trang. Đây là tất cả 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ố biện pháp tối ưu hoá mặc định giúp xử lý hiệu quả những vấn đề này với trải nghiệm gọn gàng dành cho nhà phát triển, phù hợp với bộ công cụ khung của họ không?

Với suy nghĩ này, chúng tôi đã chuyể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 ở:

Bạn có thể chia sẻ một số kết quả tích cực mà công việc của mình đạt được với một vài nhân vật trong số đó không?

Houssein: Nhiều trang web đã có được hiệu suất cải thiện nhờ những tính năng tối ưu hoá mà chúng tôi đưa ra. Một trong những ví dụ yêu thích của tôi 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. Hiện còn nhiều giai đoạn thử nghiệm và kiểm thử khác. Chúng tôi sẽ tiếp tục chia sẻ những bài học và thành công của giai đoạn tại đây.

Vâng, 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 mà những khung hoặc thư viện khác mà bạn hiện không chủ động sử dụng cũng được hưởng lợi không?

Addy: Nhiều công cụ tối ưu hoá hiệu suất mà Aurora phối hợp có thể được sao chép bằng bất kỳ khung nào. Hãy xem các thành phần Hình ảnh hoặc Tập lệnh của chúng tôi, chẳng hạn như chúng thường hệ thống hoá một tập hợp các phương pháp hay nhất hiện có. Chúng tôi cố gắng ghi lại "cách thức" tạo các thành phần như vậy và hình thức của chúng trong mỗi khung. Hy vọng đây là một khởi đầu tốt đẹp cho việc sao chép ý tưởng.

Chúng tôi đã đạt được một số thành công tốt trong việc áp dụng kiến thức từ một hệ sinh thái (ví dụ: React và Next.js) và áp dụng cho các hệ sinh thái khác. Ví dụ: Chỉ thị về hình ảnh góc cạnh mới (được xây dựng dựa trên kiến thức của chúng tôi về cách xây dựng Thành phần hình ảnh Next.js) hoặc Gatsby trình bày 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 khuôn khổ nào cũng có băng thông hoặc nguồn tài trợ để những người đóng góp xây dựng các tính năng tương tự về hiệu suất hoặc đầu tư vào những hoạt động tối ưu hoá khác mà họ tin là quan trọng đối với người dùng của mình. Quỹ Khung web Chrome là một cách để chúng tôi tài trợ cho công việc về hiệu suất trong hệ sinh thái JavaScript, nhằm tạo điều kiện cho các dự án trả tiền cho người đóng góp và giúp nâng cao hiệu suất trong hệ sinh thái.

Vậy nhóm của bạn trong lộ trình sắp tới có những gì?

Kara: Chúng tôi có rất nhiều dự án thú vị sắp tới! Một số nội dung được đánh dấu:

  • Giảm CLS (Mức thay đổi bố cục tích cực) liên quan đến phông chữ: Bạn thường thấy bố cục thay đổi khi phông chữ trên web được tải và thay thế phông chữ dự phòng. Chúng tôi đang nghiên cứu việc sử dụng tính năng ghi đè chỉ số phông chữ và thuộc tính "size-adjust" (điều chỉnh kích thước) để giảm CLS (Mức thay đổi bố cục tích luỹ) 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 sẽ mở rộng ý tưởng này cho nhiều khung hơn vào năm tới.
  • Gỡ lỗi INP: Giờ đây, chỉ số Lượt tương tác với Nội dung hiển thị 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 phổ biến nhất gây ra vấn đề về INP cho cộng đồng của họ và đề xuất cách khắc phục. Chúng tôi đã và đang hợp tác chặt chẽ với Angular trong lĩnh vực này và hy vọng sẽ sớm cung cấp một số kết quả để chia sẻ với bạn!
  • Tối ưu hoá các tập lệnh phổ biến của bên thứ ba: Việc tải các tập lệnh của bên thứ ba không đúng lúc 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 liệu có thể cung cấp một số trình bao bọc cho những vấn đề này hay không để đảm bảo chúng được tải một cách tối ưu bằng các khung và không chặn luồng chính. Chúng tôi đang sử dụng thành phần tập lệnh Next.js mà chúng tôi đã xây dựng làm điểm bắt đầu cho việc đ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 vài thông tin cập nhật thú vị từ thế giới các khung chương trình đang diễn ra trong Google.

Vào tháng 7, nhóm Chrome đã thông báo về vòng tài trợ mới nhất trị giá 500.000 USD cho Quỹ Frameworks và công cụ. Quỹ này tập trung vào các dự án tài trợ nhằm giúp cải thiện hiệu suất, trải nghiệm người dùng và trải nghiệm của nhà phát triển trên web. Chúng tôi sẽ xem xét các dự án mới trong tương lai, vì vậy, hãy nhớ gửi yêu cầu.

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 này. Hệ sinh thái này ngập tràn các khung mới như Fresh của Deno và trải nghiệm tuyệt vời như hướng dẫn cho người mới bắt đầu của Svelte không chỉ là bản minh hoạ trong trình duyệt mà còn sử dụng Web Container API để chạy Node.js nguyên gốc trong trình duyệt. Quá nhiều điều hay!

Tôi thực sự vui mừng khi thấy hệ sinh thái này cùng kết hợp, biến những điều có thể thành hiện thực trong trình duyệt và giúp các nhà phát triển xây dựng sản phẩm phù hợp với tất cả mọi người. Đây là thời điểm thú vị để trở thành nhà phát triển web.

Cho đến Insider tiếp theo, Hwyl fawr.

Bạn nghĩ sao về phiên bản lần này của The Chrome Dev Insider? Chia sẻ ý kiến phản hồi của bạn.