Cách Target.com sử dụng Baseline để hiện đại hoá các tính năng

Xuất bản: Ngày 21 tháng 11 năm 2025

Trước đây, việc hỗ trợ trình duyệt trên Target.com chủ yếu dựa trên việc hỗ trợ tất cả người dùng mua hàng trên Target.com. Chính sách này thay đổi tại các điểm đưa ra quyết định quan trọng, chẳng hạn như ngừng hỗ trợ hoàn toàn Internet Explorer hoặc nhắm đến một phiên bản tối thiểu nhất định của trình duyệt để có quyền truy cập vào một tính năng có giá trị cao. Việc này diễn ra vài năm một lần khi cần thiết.

Nếu không có chính sách tiến bộ về những trình duyệt và tính năng cần nhắm đến, Target.com chỉ cho phép các tính năng hiện đại trong cơ sở mã bằng cách sử dụng các giải pháp mạnh tay như polyfill và chuyển đổi sang các phiên bản JavaScript rất cũ. Khi WebDX Community Group ra mắt Baseline, các bên liên quan tại Target.com nhận thấy đây là thời điểm thích hợp để cân nhắc việc tìm ra mục tiêu hỗ trợ tối thiểu phù hợp hơn.

Với Baseline, Target hiện có thể tự tin biết được những tính năng có trong các trình duyệt được hỗ trợ và có thể xác định những tính năng gần đây hơn đã có sẵn với tính năng cải tiến tăng dần và các polyfill làm phương án dự phòng có thể.

Vấn đề

Hàng chục kỹ sư đóng góp mã cho Target.com vào bất kỳ ngày nào. Trong các quy trình đánh giá mã, bạn thường chỉ ra những tính năng không hoạt động với các phiên bản trình duyệt được Target.com hỗ trợ bằng cách sử dụng Can I use làm tài nguyên. Khi các kỹ sư liên tục nhận được bình luận yêu cầu thay đổi mã để ưu tiên các tính năng cũ thay vì các tính năng hiện đại, kết quả là họ sẽ tránh dùng các tính năng mới trên web. Sau đó, Target sẽ quay lại sử dụng các kỹ thuật "cũ" nhưng vẫn hoạt động, tuy nhiên, cơ hội sử dụng các tính năng hiện đại sẽ bị trì hoãn đến một thời điểm khác. Việc sử dụng các tính năng web hiện đại thường mang lại trải nghiệm tốt hơn cho nhà phát triển, đồng thời có thể mang lại trải nghiệm tốt hơn cho người dùng bằng cách phân phối ít mã hơn.

Cách tiếp cận dựa trên dữ liệu để hỗ trợ trình duyệt

Target.com có một cấu hình webpack xác định các phiên bản trình duyệt tối thiểu được hỗ trợ. Trước đây, rất khó để biện minh cho việc tăng các phiên bản trình duyệt tối thiểu được hỗ trợ này. Kể từ đầu năm 2025, các quy tắc này là:

  • Phiên bản hiện tại và 2 phiên bản trước của Chrome, Edge và Firefox.
  • Safari 11 trở lên.

Safari được xử lý cẩn thận hơn do Target nhận được lưu lượng truy cập và doanh số bán hàng lớn từ Safari trên iOS. Ban đầu, chúng tôi đã đưa ra quyết định sáng suốt là đặt Safari 11 làm phiên bản tối thiểu để phát triển. Quyết định này đã giúp Target.com tập trung vào các tính năng trên web có sẵn từ năm 2017 trở về trước.

Trong bước đầu tiên của hành trình tích hợp Baseline vào quy trình phát triển của Target, họ đã sử dụng phương pháp dựa trên dữ liệu. Thông qua nghiên cứu, Target nhận thấy các phiên bản Safari từ 11 đến 14 có rất ít tác động đến hoạt động kinh doanh, cụ thể là 0,0001% doanh số bán hàng theo nhu cầu trên Target.com. Nhận thấy điều này, Target nhận ra rằng việc loại bỏ quá trình chuyển đổi mã nguồn và polyfill cho các phiên bản trình duyệt lỗi thời này sẽ mang lại những cơ hội đáng kể để cải thiện hiệu suất trang web.

Nghiên cứu bổ sung cho thấy Safari 15.4 là phiên bản Safari đầu tiên mang lại ít nhất 0, 5% doanh số bán hàng theo nhu cầu và mỗi phiên bản phụ của Safari 15 sau đó đều có tác động tương tự. Bất cứ khi nào Target chạy thử nghiệm A/B, việc thay đổi 0, 5% doanh số bán hàng theo nhu cầu là rất có giá trị và dẫn đến kết luận rằng phiên bản tối thiểu được hỗ trợ của Safari phải nằm trong khoảng phiên bản 15.

Một xu hướng thú vị mà chúng tôi nhận thấy trong nghiên cứu này là tốc độ chuyển đổi sang trình duyệt Safari mới. Tính đến tháng 9 năm 2024, Safari 15 chỉ đóng góp 0,94% doanh số bán hàng theo nhu cầu trên Target.com. Đến tháng 1 năm 2025, con số này là 0,67% doanh số bán hàng theo nhu cầu, đến tháng 5 năm 2025, con số này giảm xuống còn 0,45% và đến tháng 11 năm 2025, con số này là 0,32%. Target nhận thấy rằng nếu xác định được ngưỡng tiền thực tế theo tỷ lệ phần trăm doanh số bán hàng trên toàn trang web, thì việc hỗ trợ các trình duyệt này có thể kết thúc một cách tự động và phiên bản chính tiếp theo trên Safari 16 có thể đạt được vào cuối năm.

Việc ngừng hỗ trợ không có nghĩa là các trình duyệt không được hỗ trợ sẽ bị chặn. Những người đang sử dụng các trình duyệt này vẫn có thể tìm được cách mua hàng, nhưng trong một số trường hợp, họ cũng có thể gặp phải trải nghiệm kém hơn. Tiếp tục sử dụng phương pháp dựa trên dữ liệu, sau khi thực hiện các thay đổi, các nhà phân tích báo cáo rằng không có tác động đáng kể nào đến các chỉ số kinh doanh. Target cũng đang xem xét một biểu ngữ xuất hiện trên các phiên bản trình duyệt không được hỗ trợ, cảnh báo về trải nghiệm bị giảm sút.

Chọn mục tiêu cơ sở cho Target.com

Các kỹ sư web của Target đã thành lập một nhóm công tác Baseline để kết hợp những nỗ lực này nhằm sử dụng các tính năng hiện đại và mục tiêu thay đổi của những trình duyệt cần hỗ trợ để giúp thúc đẩy chính sách. Bằng cách sử dụng công cụ của Baseline, họ đã xem xét bộ trình duyệt tối thiểu của mỗi năm. Mục tiêu gần nhất với chính sách mới của Target là Baseline 2022:

{
  "chrome": "108",
  "edge": "108",
  "firefox": "108",
  "ios": "16",
  "safari": "16"
}

Để đạt được Đường cơ sở đó, Target sẽ cần điều chỉnh chính sách trình duyệt của mình thành tối thiểu là Safari 16 thay vì phiên bản hiện tại là 15.4. Điều này sẽ làm giảm trải nghiệm của chưa đến 0,5% người mua sắm chuyển đổi. Mặc dù vậy, tỷ lệ này đang giảm dần, vì vậy, Target hy vọng sẽ cập nhật chính sách chính thức của mình để gắn liền với Baseline 2022 (Đường cơ sở năm 2022) vào cuối năm 2025. Điều này giúp các nhà phát triển của Target.com có thể thay đổi mục tiêu để chậm hơn khoảng 3 năm so với Đường cơ sở được xuất bản hằng năm.

Nhìn chung, các gói webpack cho Target.com có kích thước nhỏ hơn do ít chuyển đổi mã và thêm polyfill. Target tin rằng mục tiêu này sẽ thay đổi theo thời gian và hy vọng rằng vào thời điểm này năm sau, Baseline 2023 có thể được áp dụng, bao gồm nhiều tính năng tuyệt vời như container queries, bộ chọn :has, thuộc tính inert và nhiều tính năng khác.

Xem xét các bộ tính năng mới hơn của Baseline

Nhóm công tác Target Baseline không dừng lại ở Baseline 2022. Nhìn vào các tính năng của Baseline 2023, nhiều tính năng chỉ ở ngưỡng có thể hỗ trợ mà không cần bản sao lưu như polyfill. Mỗi tính năng trong Giá trị cơ sở 2023 mà Target quan tâm đều yêu cầu họ phải:

  1. Nêu rõ chức năng của tính năng.
  2. Tài liệu về cách sử dụng có thể cải thiện Target.com, bao gồm cả việc cải thiện trải nghiệm của nhà phát triển.
  3. Tìm một trường hợp kiểm thử phù hợp để triển khai tính năng này trong cơ sở mã của Target.com.
  4. Nếu cần, hãy ghi lại những giải pháp dự phòng cần sử dụng, bao gồm cả giải pháp nâng cao từng bước hoặc các giải pháp khác được cung cấp thông qua tính năng phát hiện.
  5. Cuối cùng, khi nào thì việc sử dụng tính năng này được phê duyệt? Tôi có thể sử dụng thẻ này ngay bây giờ không? Hay nên chờ một ngưỡng nào đó trong tương lai?

Một ví dụ về thuộc tính này là inert. Phiên bản tối thiểu để sử dụng inert trong Safari là 15.5, tức là Target.com sắp có thể sử dụng tính năng này! Target.com có nhiều cách triển khai cửa sổ phương thức, trong đó thuộc tính này sẽ mang lại lợi ích so với giải pháp JavaScript hiện tại. Việc kỹ sư viết báo cáo về tính năng này giúp chia sẻ kiến thức và chuẩn bị cho lần nới lỏng chính sách trình duyệt tiếp theo. Điều này giúp chứng minh rằng việc ngừng hỗ trợ một phiên bản trình duyệt mang lại ít giá trị kinh doanh có thể mở khoá các tính năng giá trị. Tính năng này có thể được thiết kế, xem xét và triển khai theo một cờ tính năng, đồng thời sẵn sàng trong trường hợp có thể sử dụng.

Ngoài ra, một kỹ sư khác sẽ làm theo quy trình tương tự để sử dụng container queries (hiện là Baseline và được cung cấp rộng rãi). Bạn có thể sử dụng truy vấn vùng chứa với một polyfill, nhưng polyfill này có các vấn đề đã biết về hiệu suất. Giải pháp mà Target đưa ra là chỉ sử dụng các truy vấn vùng chứa dưới dạng một tính năng nâng cao tăng dần cho đến khi các trình duyệt tối thiểu tăng lên để hỗ trợ đầy đủ tính năng này.

Quy trình này hoạt động hiệu quả đối với Target.com, vì khi đạt đến thời điểm phiên bản tối thiểu của tính năng được sử dụng đủ, thì không cần cải tiến tăng dần nữa và tính năng có thể được sử dụng. Trong một cuộc kiểm tra gần đây, chúng tôi nhận thấy Target.com đang vận chuyển quá nhiều polyfill không cần thiết. Việc triển khai Baseline vào ứng dụng của họ có thể giúp kiểm soát loại nợ kỹ thuật này.

Tương quan các khái niệm cơ bản với hiệu suất của trang web

Hiệu suất là yếu tố quan trọng đối với mọi trang web bán lẻ. Một quan điểm chung của các nhà phát triển làm việc trên Target.com là có quá nhiều JavaScript được gửi đi. Nếu 5% gói JavaScript được gửi đến người dùng bị loại bỏ, thì đó là một thành công lớn. Tuy nhiên, điều này cũng không cải thiện đáng kể Các chỉ số quan trọng về trang web trên Target.com. Mặc dù nếu Target đạt được mục tiêu này 10 lần, thì kích thước gói sẽ giảm 50% và điều đó sẽ đóng góp đáng kể vào các mục tiêu về hiệu suất của Target.

Khi nói đến cách tiếp cận của Target đối với Baseline, cách tiếp cận này đã cho phép các kỹ sư trên Target.com bắt đầu suy nghĩ về lượng JavaScript được dùng cho những việc như phương thức, nhu cầu hỗ trợ tiếp cận, cửa sổ bật lên, băng chuyền, bảng xếp tầng và các vấn đề thường gặp khác về trải nghiệm người dùng. Mỗi giải pháp này đều yêu cầu polyfill hoặc giải pháp JavaScript tuỳ chỉnh, góp phần làm tăng kích thước JavaScript của ứng dụng. Khi Target sử dụng Baseline, các mục tiêu trình duyệt sẽ phát triển theo thời gian và các chính sách bao gồm những tính năng mới hơn có thể được nới lỏng. Theo thời gian, Target dự kiến sẽ chuyển đổi ít mã hơn, điền ít tính năng hơn và thậm chí áp dụng các thành phần web khi có cơ hội. Bằng cách chú ý đến các polyfill và trình duyệt mục tiêu được cung cấp trong chuỗi công cụ dự án, kích thước gói JavaScript của Target.com đã giảm 10%. Đây là trước khi áp dụng bất kỳ tính năng mới nào. Điều này sẽ cải thiện qua từng năm và tương quan trực tiếp với những khoản đầu tư lớn mà Target đang thực hiện để cải thiện hiệu suất cho Target.com.

Cướp lại bóng

Việc có một mục tiêu Cơ sở và các báo cáo Cơ sở được tuyển chọn kỹ lưỡng về các tính năng web Mới ra mắt và Phổ biến đã trở thành một công cụ mạnh mẽ cho Target.com. Dưới đây là một số kết quả chính:

  • Mục tiêu trình duyệt đã chuyển từ việc hỗ trợ các trình duyệt được phát hành cách đây 8 năm sang 3 năm.
  • Mục tiêu cơ sở của Baseline 2022 sẽ đạt được vào cuối năm 2025.
  • Tổng kích thước gói JavaScript của Target.com đã giảm 10%.
  • Số lượng trình duyệt cũ chiếm dưới 1% hoạt động kinh doanh đang giảm với tốc độ khoảng 300% mỗi năm (từ 0,94% vào tháng 9 năm 2024 xuống 0,32% vào tháng 11 năm 2025).

Nhận thấy web đang phát triển nhanh hơn bao giờ hết, Target đã nhanh chóng áp dụng các tính năng. Việc sắp xếp các tính năng này giúp họ có thể lên kế hoạch và chuẩn bị trước cho thời điểm Target mở khoá từng tính năng, đồng thời giúp họ tin tưởng rằng các kỹ sư đóng góp cho một trang web bán lẻ lớn sẽ biết nên sử dụng tính năng nào và khi nào có thể sử dụng.