Bài viết
Tối ưu hoá các thao tác dài
Bạn đã được yêu cầu 'không chặn chuỗi chính' và 'chia nhỏ công việc dài hạn của bạn', nhưng việc này có nghĩa là gì?
Thiết lập phương thức thanh toán
Giao dịch thanh toán bằng Thanh toán trên web bắt đầu bằng việc phát hiện ra ứng dụng thanh toán của bạn. Hãy tìm hiểu cách thiết lập phương thức thanh toán và chuẩn bị ứng dụng thanh toán để người bán và khách hàng có thể thanh toán.
Tải trước mô-đun
Tính năng tải trước mô-đun cung cấp cách tải trước các mô-đun JavaScript theo cách khai báo.
Đo lường tính năng tự động điền của trình duyệt trên biểu mẫu
Để tối ưu hoá trải nghiệm người dùng, bạn cần hiểu cách người dùng tương tác với biểu mẫu của bạn. Tính năng tự động điền của trình duyệt đóng vai trò quan trọng trong quy trình này. Tìm hiểu cách thu thập và phân tích dữ liệu về cách người dùng sử dụng tính năng tự động điền trong biểu mẫu của bạn.
Phần 1: AI phía máy khách để chống lại nội dung độc hại trên mạng
"Bảo vệ người dùng và tạo ra một môi trường trực tuyến an toàn hơn bằng tính năng phát hiện nội dung độc hại. Trong phần một, chúng tôi chia sẻ bối cảnh mà bạn cần triển khai AI để giảm thiểu nội dung độc hại ngay từ nguồn: bàn phím của người dùng".
Phần 2: Xây dựng tính năng phát hiện nội dung độc hại bằng AI ở phía máy khách
Tính năng phát hiện nội dung độc hại giúp bảo vệ người dùng và tạo ra một môi trường trực tuyến an toàn hơn. Trong phần hai, chúng ta sẽ tìm hiểu cách xây dựng một công cụ AI phía máy khách để phát hiện và giảm thiểu nội dung độc hại ngay từ nguồn.
Tổng thời gian chặn (TBT)
Bài đăng này mô tả chỉ số Tổng thời gian chặn (TBT) và giải thích cách đo lường chỉ số này
Những cách hiệu quả nhất để cải thiện Chỉ số quan trọng chính của trang web
Tập hợp các phương pháp hay nhất mà Chrome xác định là cơ hội lớn nhất để tối ưu hoá hiệu suất trang web và cải thiện Chỉ số quan trọng chính của trang web
Bắt đầu đo lường Các chỉ số quan trọng về trang web
Tìm hiểu cách đo lường Các chỉ số quan trọng về trang web của trang web trong cả môi trường thực tế và phòng thí nghiệm.
Tối ưu hoá thời gian hiển thị nội dung lớn nhất
Hướng dẫn từng bước về cách phân tích LCP và xác định các khía cạnh chính cần cải thiện.
Web Vitals
Các chỉ số cần thiết để có một trang web hoạt động tốt
Thuộc tính CSS content-visibility hiện là Baseline (Cơ sở) Mới có
Thuộc tính CSS content-visibility hiện có sẵn trong Baseline New.
So sánh khả năng của LLM với tính năng tóm tắt
Đánh giá kết quả của nhiều mô hình và câu lệnh bằng LLM (mô hình ngôn ngữ lớn) làm kỹ thuật đánh giá. Thay vì dựa vào đánh giá của con người, việc xác thực mô hình sẽ được uỷ quyền cho một mô hình ngôn ngữ lớn khác.
Cách xác định ngưỡng của các chỉ số trong Core Web Vitals
Nghiên cứu và phương pháp áp dụng cho ngưỡng Các chỉ số quan trọng về trang web
Quy trình làm việc của Các chỉ số quan trọng về trang web thông qua các công cụ của Google
Trước tầm quan trọng ngày càng lớn của Chỉ số quan trọng chính của trang web, chủ sở hữu và nhà phát triển trang web ngày càng tập trung vào hiệu suất và trải nghiệm người dùng quan trọng. Google cung cấp nhiều công cụ để giúp đánh giá, tối ưu hoá và theo dõi các trang, nhưng người dùng thường bị nhầm lẫn giữa các nguồn dữ liệu và cách sử dụng các nguồn dữ liệu đó một cách hiệu quả. Hướng dẫn này đề xuất quy trình làm việc kết hợp nhiều công cụ, đồng thời làm rõ vị trí cũng như ý nghĩa của các công cụ đó trong quá trình phát triển.
Chẩn đoán thủ công các tương tác chậm trong phòng thí nghiệm
Bạn đã xem xét dữ liệu trường của mình và hoá ra rằng bạn có một số hoạt động tương tác chậm. Bước tiếp theo là tìm hiểu thêm về cách kiểm tra thủ công những hoạt động tương tác đó và xác định nguyên nhân đằng sau chúng.
Đường cơ sở
Bài viết này giải thích câu chuyện về nguồn gốc của Baseline, sự tham gia của Google và quyền sở hữu của Nhóm cộng đồng WebDX.
Bộ nhớ đệm cho thao tác tiến/lùi
Tìm hiểu cách tối ưu hoá các trang của bạn để tải tức thì khi sử dụng nút tiến và lùi của trình duyệt.
Tính năng lồng CSS được cải thiện nhờ CSSNestedDeclarations
Tính năng lồng CSS ngày càng tốt hơn!
First Input Delay (FID)
Bài đăng này giới thiệu chỉ số Thời gian phản hồi lần tương tác đầu tiên (FID) và giải thích cách đo chỉ số này
Hiệu suất gỡ lỗi trong trường
Tìm hiểu cách phân bổ dữ liệu hiệu suất bằng thông tin gỡ lỗi để giúp bạn xác định và khắc phục các vấn đề về người dùng thực thông qua số liệu phân tích
Cải thiện hiệu suất và trải nghiệm người dùng cho AI phía máy khách
Khám phá các lợi ích của AI phía máy khách, bao gồm độ trễ thấp, giảm chi phí phía máy chủ, không yêu cầu khoá API, tăng quyền riêng tư của người dùng và quyền truy cập ngoại tuyến.
Liên kết các chỉ số quan trọng về trang web và doanh thu từ quảng cáo bằng các công cụ của Google
Tìm hiểu cách bạn có thể dùng các công cụ của Google để xác định mối liên hệ giữa Chỉ số quan trọng chính của trang web với doanh thu từ quảng cáo.
Đo điểm chuẩn hiệu suất của @property CSS
@property ảnh hưởng như thế nào đến hiệu suất của CSS?
Đã đến lúc tải từng phần các iframe ngoài màn hình!
Bài đăng này đề cập đến thuộc tính tải và cách sử dụng thuộc tính để kiểm soát việc tải iframe.
Bộ nhớ dành cho web
Có nhiều tuỳ chọn khác nhau để lưu dữ liệu trong trình duyệt. Nền tảng nào phù hợp nhất với nhu cầu của bạn?
Giao thức đẩy web
Hướng dẫn tương tác từng bước hướng dẫn bạn cách xây dựng máy chủ quản lý gói thuê bao thông báo đẩy và gửi yêu cầu giao thức đẩy web đến dịch vụ đẩy.
Xây dựng nhiều Ứng dụng web tiến bộ trên cùng một miền
Khám phá những cách được đề xuất và không được đề xuất để xây dựng nhiều PWA sử dụng lại cùng một miền cùng với các ưu điểm và nhược điểm của chúng.
Cần tiêu chí gì để có thể cài đặt ứng dụng?
Tiêu chí về khả năng cài đặt Ứng dụng web tiến bộ.
Cách Chrome xử lý bản cập nhật cho tệp kê khai ứng dụng web
Những việc cần làm để thay đổi biểu tượng, lối tắt, màu sắc và các siêu dữ liệu khác trong tệp kê khai ứng dụng web cho PWA của bạn.
Điều gì tạo nên ứng dụng web tiến bộ hiệu quả?
Điều gì tạo nên một Ứng dụng web tiến bộ chất lượng cao hoặc tuyệt vời?
Thêm tệp kê khai ứng dụng web
Tệp kê khai ứng dụng web là một tệp JSON đơn giản để cho trình duyệt biết ứng dụng web của bạn nên hoạt động như thế nào.
Giảm thiểu tập lệnh trên nhiều trang web (XSS) bằng một Chính sách bảo mật nội dung (CSP) nghiêm ngặt
Tìm hiểu cách triển khai CSP dựa trên các tập lệnh nonces hoặc hàm băm như một biện pháp phòng vệ chuyên sâu trước tập lệnh trên nhiều trang web.
Truy cập vào thiết bị phần cứng trên web
Bài viết này giúp các nhà phát triển web chọn API phần cứng phù hợp dựa trên một thiết bị cụ thể.
Cho phép sử dụng lại khoá truy cập trên các trang web có Yêu cầu nguồn có liên quan
Tìm hiểu cách sử dụng Yêu cầu nguồn gốc có liên quan để cho phép sử dụng lại khoá truy cập trên các trang web.
Tải từng phần hình ảnh ở cấp trình duyệt dành cho web
Bài đăng này đề cập đến thuộc tính đang tải và cách sử dụng thuộc tính này để kiểm soát việc tải hình ảnh.
Chọn định dạng hình ảnh phù hợp
Bước đầu tiên để cung cấp hình ảnh được tối ưu hoá trên trang web là chọn định dạng hình ảnh phù hợp. Bài đăng này sẽ giúp bạn đưa ra lựa chọn đúng đắn.
Chỉ số tuỳ chỉnh
Chỉ số tùy chỉnh cho phép bạn đo lường và tối ưu hóa các khía cạnh của trải nghiệm dành riêng cho trang web của bạn.
Đo lường và gỡ lỗi hiệu suất bằng Google Analytics 4 và BigQuery
Tìm hiểu cách gửi dữ liệu Các chỉ số quan trọng về trang web đến tài sản Google Analytics 4 và xuất dữ liệu để phân tích trong BigQuery và Looker Studio.
Các phương pháp hay nhất về quyền trên web
Hướng dẫn này trình bày các phương pháp hay nhất mà các trang web nên làm theo khi yêu cầu người dùng cấp quyền truy cập vào các tính năng nhạy cảm (chẳng hạn như máy ảnh, micrô và thông tin vị trí) để giảm thiểu những lời nhắc không cần thiết và việc chặn quyền truy cập.
Các phương pháp hay nhất cho thông báo về cookie
Tìm hiểu cách thông báo về cookie ảnh hưởng đến hiệu suất, hoạt động đo lường hiệu suất và trải nghiệm người dùng.
Tuỳ chỉnh thông báo về nội dung nghe nhìn và bộ điều khiển chế độ phát bằng Media Session API
Nhà phát triển web có thể tuỳ chỉnh thông báo về nội dung nghe nhìn và phản hồi các sự kiện liên quan đến nội dung nghe nhìn, chẳng hạn như tìm kiếm hoặc theo dõi sự thay đổi bằng Media Session API.
Tìm các hoạt động tương tác chậm trong trường
Trước khi có thể tái tạo các tương tác chậm trong phòng thí nghiệm để tối ưu hoá sự tương tác của trang web với thời gian hiển thị tiếp theo, bạn sẽ cần dựa vào dữ liệu thực tế để tìm các tương tác đó. Hãy tìm hiểu cách làm việc đó trong hướng dẫn này.
Sử dụng chỉ mục thẻ
Sử dụng thuộc tính tabindex để đặt rõ vị trí thẻ của phần tử.
Thời gian cho byte đầu tiên (TTFB)
Bài đăng này giới thiệu chỉ số Thời gian cho byte đầu tiên (TTFB) và giải thích cách đo lường chỉ số này.
Kỹ thuật câu lệnh thực tế cho các LLM nhỏ hơn
Tìm hiểu cách điều chỉnh câu lệnh để đạt được kết quả mong muốn trên các LLM, mô hình và quy mô mô hình khác nhau.
Tối ưu hoá thời gian cho byte đầu tiên
Tìm hiểu cách tối ưu hoá cho chỉ số Thời gian cho byte đầu tiên.
Tương tác với thời gian hiển thị tiếp theo (INP)
Bài đăng này giới thiệu chỉ số Hoạt động tương tác với thời gian hiển thị tiếp theo (INP) và giải thích cách hoạt động, cách đo lường chỉ số này, đồng thời đưa ra đề xuất về cách cải thiện chỉ số.
Các màu phụ thuộc CSS color-lược đồ với Light-dark()
mô tả: Xác định màu phản ứng với lược đồ màu đã sử dụng bằng hàm sáng-tối().
Các mẫu hiệu suất WebAssembly cho ứng dụng web
Trong hướng dẫn này, nhắm đến các nhà phát triển web muốn hưởng lợi từ WebAssembly, bạn sẽ tìm hiểu cách sử dụng Wasm để thuê ngoài các tác vụ cần nhiều CPU với sự trợ giúp của ví dụ đang chạy.
Bố cục lưới dạng ảnh động CSS
Trong Lưới CSS, thuộc tính "grid-template-columns" (cột-mẫu-lưới) và `grid-template-rows` cho phép bạn xác định tên dòng và theo dõi kích thước của các cột và hàng trong lưới tương ứng. Việc hỗ trợ nội suy cho các thuộc tính này cho phép bố cục lưới chuyển đổi suôn sẻ giữa các trạng thái, thay vì chụp nhanh ở điểm nửa của ảnh động hoặc quá trình chuyển đổi.
Chơi trò chơi khủng long trên Chrome bằng tay điều khiển trò chơi
Tìm hiểu cách điều khiển trò chơi trên web bằng Gamepad API.
Thuộc tính inert
Thuộc tính tĩnh là một thuộc tính HTML toàn cục giúp đơn giản hoá cách xoá và khôi phục các sự kiện nhập của người dùng cho một phần tử, bao gồm cả các sự kiện lấy tiêu điểm và sự kiện từ công nghệ hỗ trợ.
Đạo đức và trí tuệ nhân tạo
Có rất nhiều yếu tố cần xem xét về mặt đạo đức khi sử dụng các công cụ AI và tạo nội dung mới.
Nâng cấp tính năng tìm kiếm trên trang web: Đưa ra câu trả lời theo ngữ cảnh bằng AI tạo sinh
Có rất nhiều yếu tố cần xem xét về mặt đạo đức khi sử dụng các công cụ AI và tạo nội dung mới.
Xin giới thiệu Nhóm Web.dev AI
Gặp gỡ các tác giả công nghệ và đội ngũ quan hệ nhà phát triển.
Trí tuệ nhân tạo là gì?
Từ viết tắt AI thường được sử dụng thay thế cho nhau để đại diện cho nhiều loại công nghệ trong lĩnh vực AI.
Xác định trình cung cấp khoá truy cập bằng AAGUID
Các bên tin cậy có thể xác định nguồn gốc của khoá truy cập bằng cách kiểm tra AAGUID. Tìm hiểu cách hoạt động.
Biên dịch và tối ưu hoá Wasm bằng Binaryen
Sử dụng ví dụ về một ngôn ngữ đồ chơi tổng hợp có tên là ExampleScript, hãy tìm hiểu cách viết và tối ưu hoá các mô-đun WebAssembly trong JavaScript bằng API Binaryen.js.
Thành phần web <model-viewer>
Thành phần web <model-viewer> cho phép bạn sử dụng các mô hình 3D trên một trang web theo cách khai báo.
Ghi âm và quay video ở định dạng HTML5
Tính năng quay video/âm thanh đã là công cụ "thần thánh" trong quá trình phát triển web trong một thời gian dài. Trong nhiều năm, chúng ta phải dựa vào các trình bổ trợ trình duyệt ( Flash hoặc Silverlight ) để hoàn thành công việc. Thôi nào! HTML5
Tìm hiểu chuyên sâu về userVerify
Tìm hiểu cách sử dụng tính năng "userVerify" trong WebAuthn
Tại sao dữ liệu CrUX lại khác với dữ liệu CLS (Đạo luật về quyền riêng tư của người tiêu dùng)?
Tìm hiểu lý do khiến dữ liệu đều có thể cho thấy các chỉ số quan trọng về trang web từ CrUX.
Hỗ trợ tiếp cận dành cho nhà phát triển web
Điều quan trọng là phải xây dựng các trang web dành cho tất cả mọi người và ai cũng có thể truy cập được. Chúng tôi có thể tối ưu hóa ít nhất 6 lĩnh vực khuyết tật chính: thị giác, thính giác, khả năng vận động, nhận thức, lời nói và thần kinh.
Largest Contentful Paint (LCP)
Bài đăng này giới thiệu chỉ số Thời gian hiển thị nội dung lớn nhất (LCP) và giải thích cách đo chỉ số này
Tải JavaScript của bên thứ ba
Tập lệnh của bên thứ ba cung cấp nhiều tính năng hữu ích, giúp trang web trở nên linh động hơn. Tìm hiểu cách tối ưu hoá việc tải tập lệnh của bên thứ ba để giảm tác động của các tập lệnh đó đến hiệu suất.
Ngăn tạo khoá truy cập mới nếu đã có khoá truy cập
Tìm hiểu cách ngăn việc tạo khoá truy cập mới nếu đã có khoá truy cập trong trình quản lý mật khẩu của người dùng.
Làm việc với IndexedDB
Hướng dẫn về các khái niệm cơ bản của IndexedDB.
5 đoạn mã CSS mà mọi nhà phát triển giao diện người dùng cần biết trong năm 2024
CSS phù hợp, mạnh mẽ và ổn định mà bạn có thể sử dụng ngay hôm nay.
Một URL gồm những phần nào?
Sự khác biệt giữa máy chủ lưu trữ, trang web và nguồn gốc là gì? eTLD+1 là gì? Bài viết này giải thích điều này.
Tìm hiểu chuyên sâu về thông tin xác thực có thể phát hiện
Tìm hiểu xem thông tin đăng nhập có thể tìm thấy là gì và cách xây dựng trải nghiệm người dùng phù hợp với trường hợp sử dụng của bạn.
Hiệu suất hiển thị
Người dùng sẽ nhận thấy nếu các trang web và ứng dụng không chạy tốt, vì vậy, việc tối ưu hoá hiệu suất hiển thị là rất quan trọng!
ResizeObserver: giống như document.onresize cho các phần tử
"ResizeObserver" sẽ thông báo cho bạn khi hình chữ nhật trong nội dung của một phần tử thay đổi kích thước để bạn có thể phản ứng phù hợp.
Tối ưu hoá việc mã hoá và kích thước chuyển của thành phần dựa trên văn bản
Bên cạnh việc loại bỏ các lượt tải xuống tài nguyên không cần thiết, điều tốt nhất bạn có thể làm để cải thiện tốc độ tải trang là giảm thiểu kích thước tải xuống tổng thể bằng cách tối ưu hóa và nén các tài nguyên còn lại.
OffscreenCanvas – tăng tốc các hoạt động canvas của bạn bằng một trình thực thi web
Tài liệu này giải thích cách bạn có thể sử dụng API OffscreenCanvas để cải thiện hiệu suất khi kết xuất hình ảnh đồ hoạ trong ứng dụng web.
First Contentful Paint (FCP)
Bài đăng này giới thiệu về chỉ số Hiển thị nội dung đầu tiên (FCP) và giải thích cách đo chỉ số này
Mạng phân phối nội dung (CDN)
Bài viết này cung cấp thông tin tổng quan toàn diện về mạng phân phối nội dung (CDN). Ngoài ra, tài liệu này còn giải thích cách chọn, định cấu hình và tối ưu hoá chế độ thiết lập CDN.
Điều gì tạo nên trải nghiệm đăng xuất tốt?
Hướng dẫn thiết thực cho nhà phát triển về những việc cần làm khi người dùng đăng xuất khỏi trang web.
Thời điểm tương tác (TTI)
Bài đăng này giới thiệu chỉ số Thời gian tương tác (TTI) và giải thích cách đo lường chỉ số này
Tối ưu hoá việc tải tài nguyên nhờ API ưu tiên tìm nạp
API ưu tiên tìm nạp cho biết mức độ ưu tiên tương đối của các tài nguyên so với trình duyệt. Bộ công cụ này có thể giúp quá trình tải tối ưu và cải thiện Các chỉ số quan trọng về trang web.
Các lớp giả lập :user- valid và :user-invalid
Giới thiệu về lớp giả :user- valid và :user-invalid và cách sử dụng các lớp này để cải thiện trải nghiệm người dùng khi xác thực dữ liệu đầu vào.
Tối ưu hoá Các chỉ số quan trọng về trang web cho những người ra quyết định kinh doanh
Tìm hiểu cách những người ra quyết định kinh doanh và không phải nhà phát triển có thể cải thiện Các chỉ số quan trọng về trang web.
Các sắc thái của chuỗi mã hoá base64 trong JavaScript
Hiểu và tránh các vấn đề thường gặp khi áp dụng phương thức mã hoá và giải mã base64 cho các chuỗi.
Lưới con CSS
Lưới con cho phép chia sẻ lưới, cho phép các lưới lồng nhau căn chỉnh với các đối tượng cấp trên và đồng cấp.
Tải quảng cáo hiệu quả mà không ảnh hưởng đến tốc độ trang
Trong thế giới kỹ thuật số ngày nay, quảng cáo trực tuyến là một phần quan trọng của web miễn phí mà tất cả chúng ta đều thích. Tuy nhiên, các quảng cáo được triển khai không tốt có thể dẫn đến trải nghiệm duyệt web chậm hơn, làm người dùng khó chịu và mức độ tương tác giảm đi. Tìm hiểu cách tải quảng cáo hiệu quả mà không ảnh hưởng đến tốc độ trang, đảm bảo trải nghiệm người dùng liền mạch và tối đa hoá cơ hội doanh thu cho chủ sở hữu trang web.
4 loại phạm vi phổ biến của mã
Tìm hiểu về mức độ phù hợp của mã và khám phá 4 cách phổ biến để đo lường mức độ phù hợp của mã.
Để thử nghiệm hay không thử nghiệm, từ góc độ kỹ thuật
Xác định những yếu tố bạn cần thử nghiệm và những yếu tố bạn có thể loại trừ.
Xác định các trường hợp kiểm thử và mức độ ưu tiên
Xác định nội dung cần kiểm thử, xác định các trường hợp kiểm thử và sắp xếp mức độ ưu tiên.
Các chỉ số hiệu suất tập trung vào người dùng
Các chỉ số hiệu suất tập trung vào người dùng là một công cụ quan trọng giúp bạn hiểu và cải thiện trải nghiệm trên trang web theo hướng có lợi cho người dùng thực.
Tải trước hình ảnh thích ứng
Tìm hiểu về các khả năng mới và thú vị để tải trước hình ảnh thích ứng để đảm bảo trải nghiệm người dùng tuyệt vời.
Điều chỉnh kiểu chữ theo sở thích của người dùng bằng CSS
Một phương pháp điều chỉnh phông chữ theo sở thích của người dùng để họ có thể thoải mái tối đa khi đọc nội dung của bạn.
Kim tự tháp hay Cua? Tìm chiến lược thử nghiệm phù hợp
Khám phá cách kết hợp các loại thử nghiệm thành một chiến lược hợp lý phù hợp với dự án của bạn.
3 loại hình tự động thử nghiệm phổ biến
Hãy bắt đầu từ những thông tin cơ bản! Khám phá hai chế độ kiểm thử chung và ba loại kiểm thử tự động phổ biến.
Loại bỏ hoạt động tải xuống không cần thiết
Bạn nên kiểm tra tài nguyên của mình định kỳ để đảm bảo rằng mỗi tài nguyên đều đang giúp mang lại trải nghiệm tốt hơn cho người dùng.
WebAssembly là gì và đến từ đâu?
Giới thiệu về WebAssembly (đôi khi viết tắt là wasm), định dạng mã nhị phân di động và định dạng văn bản tương ứng cho các chương trình thực thi cũng như giao diện phần mềm để tạo điều kiện tương tác giữa các chương trình đó và môi trường lưu trữ.
Biên dịch mkbitmap thành WebAssembly
Chương trình mkbitmap C đọc hình ảnh và áp dụng một hoặc nhiều thao tác sau cho hình ảnh đó, theo thứ tự sau: đảo ngược, lọc thông cao, chia tỷ lệ và ngưỡng. Bạn có thể bật hoặc tắt từng thao tác riêng lẻ. Bài viết này hướng dẫn cách biên dịch mkbitmap thành WebAssembly.
Hệ thống tệp riêng tư gốc
Chuẩn hệ thống tệp giới thiệu một hệ thống tệp riêng tư gốc (OPFS) dưới dạng một điểm cuối bộ nhớ riêng tư đối với nguồn gốc của trang và không hiển thị với người dùng. Hệ thống này cung cấp quyền truy cập không bắt buộc vào một loại tệp đặc biệt
Lưu trữ an toàn dữ liệu người dùng trong các ứng dụng web hiện đại
Cách hiển thị nội dung do người dùng kiểm soát một cách an toàn trên các ứng dụng web.
Triển khai AVIF cho nhiều trang web thích ứng hơn
Tổng quan về cách AVIF được áp dụng trong hệ sinh thái và những lợi ích về hiệu suất và chất lượng mà nhà phát triển có thể mong đợi từ AVIF đối với ảnh tĩnh và ảnh động.
Tối ưu hoá tương tác cho thời gian hiển thị tiếp theo
Tìm hiểu cách tối ưu hoá khả năng tương tác của trang web với thời gian hiển thị tiếp theo.
Các tính năng cơ bản bạn có thể dùng ngay hôm nay
Tìm hiểu về một số tính năng trong Baseline.
Hiển thị HTML và tính tương tác phía máy khách
Hiển thị HTML bằng JavaScript khác với hiển thị HTML do máy chủ gửi và có thể ảnh hưởng đến hiệu suất. Tìm hiểu sự khác biệt trong hướng dẫn này và những việc bạn có thể làm để duy trì hiệu suất hiển thị của trang web – đặc biệt là khi liên quan đến hoạt động tương tác.
Đánh giá tập lệnh và các tác vụ dài
Khi tải tập lệnh, trình duyệt sẽ cần thời gian để đánh giá tập lệnh trước khi thực thi, điều này có thể khiến các tác vụ mất nhiều thời gian. Tìm hiểu cách hoạt động của việc đánh giá tập lệnh và những việc bạn có thể làm để tập lệnh không gây ra các tác vụ dài trong quá trình tải trang.
Tối ưu hoá độ trễ khi nhập
Độ trễ của dữ liệu đầu vào có thể đóng góp đáng kể vào tổng độ trễ tương tác và ảnh hưởng tiêu cực đến INP của trang. Trong hướng dẫn này, bạn sẽ tìm hiểu về độ trễ đầu vào và cách giảm độ trễ đầu vào để tương tác nhanh hơn.
Kích thước DOM lớn ảnh hưởng đến khả năng tương tác và việc bạn có thể làm
Kích thước DOM lớn có thể là một yếu tố trong việc tương tác có nhanh hay không. Tìm hiểu thêm về mối quan hệ giữa kích thước DOM và INP, cũng như những việc bạn có thể làm để giảm kích thước DOM và những cách khác để hạn chế hoạt động hiển thị khi trang của bạn có nhiều phần tử DOM.
Sử dụng tiện ích Các chỉ số quan trọng về trang web để khắc phục vấn đề về Các chỉ số quan trọng về trang web
Giờ đây, tiện ích Các chỉ số quan trọng về trang web sẽ hiển thị thêm nhiều thông tin gỡ lỗi để giúp bạn xác định nguyên nhân gốc rễ của các vấn đề liên quan đến Các chỉ số quan trọng về trang web.
Tối ưu hoá điểm số tổng hợp về mức thay đổi bố cục
Điểm số tổng hợp về mức thay đổi bố cục (CLS) là một chỉ số đo lường tần suất người dùng gặp phải những thay đổi đột ngột về nội dung trên trang. Trong hướng dẫn này, chúng tôi sẽ đề cập đến việc tối ưu hoá những nguyên nhân phổ biến gây ra CLS (Điểm số tổng hợp về mức thay đổi bố cục), chẳng hạn như hình ảnh và iframe không có kích thước hoặc nội dung động.
Cumulative Layout Shift (CLS)
Bài đăng này giới thiệu chỉ số Điểm số tổng hợp về mức thay đổi bố cục (CLS) và giải thích cách đo lường chỉ số này.
Xây dựng trải nghiệm WordPress trong trình duyệt với WordPress Playground và WebAssembly
WordPress hoàn chỉnh được hỗ trợ bởi PHP chạy chỉ trong trình duyệt với WebAssembly
Chức năng mới dành cho nhà phát triển — WebAssembly cung cấp cho bạn
Giới thiệu các công cụ hiện có trên web nhờ WebAssembly.
Bản đồ nguồn là gì?
Cải thiện trải nghiệm gỡ lỗi web bằng bản đồ nguồn.
PWA trong cửa hàng ứng dụng
Bạn có thể gửi Ứng dụng web tiến bộ đến các cửa hàng ứng dụng như Cửa hàng Play của Android hoặc Cửa hàng Microsoft, v.v.
6 đoạn mã CSS mà mọi nhà phát triển giao diện người dùng nên biết vào năm 2023
CSS phù hợp, mạnh mẽ và ổn định mà bạn có thể sử dụng ngay hôm nay.
Hàm lượng giác trong CSS
Tính sin, cos, tang và các kết quả khác trong CSS.
Thực hiện hiệu quả các thao tác trên mỗi khung hình video trên video bằng requestVideoFrameCallback()
Phương thức requestVideoFrameCallback() cho phép tác giả web đăng ký lệnh gọi lại chạy trong các bước kết xuất khi khung video mới được gửi đến trình tổng hợp.
Cộng đồng GDE nổi bật: Lars Knudsen
Một trong loạt bài phỏng vấn với các thành viên của chương trình Chuyên gia phát triển của Google (GDE).
Các mẫu mới cho ứng dụng đa phương tiện
Bài đăng trên blog này thông báo về một bộ sưu tập mẫu mới cho ứng dụng đa phương tiện.
Mẹo CSS nhanh chóng! Văn bản chuyển màu động
Hãy tạo hiệu ứng văn bản chuyển màu động đó bằng các thuộc tính tuỳ chỉnh có phạm vi và background-clip Chuyển đến CodePen và tạo một bút mới. Tạo mã đánh dấu cho văn bản. Hãy sử dụng tiêu đề có từ "Speedy" (Nhanh): Sau đó, hãy tạo background-color
Đang xây dựng Chrometober!
Cách cuốn sách cuộn trên Chrometober trở nên sống động để chia sẻ các mẹo và thủ thuật thú vị cũng như đáng sợ.
Xây dựng thành phần chú giải công cụ
Tổng quan cơ bản về cách tạo phần tử tuỳ chỉnh cho chú giải công cụ có khả năng thích ứng màu và dễ tiếp cận.
Tạo khoá truy cập cho hoạt động đăng nhập không cần mật khẩu
Khoá truy cập giúp tài khoản người dùng của trang web an toàn, đơn giản, dễ sử dụng hơn và không cần mật khẩu. Bài viết này thảo luận cách cho phép người dùng tạo khoá truy cập cho trang web của bạn.
Đăng nhập bằng khoá truy cập thông qua tính năng tự động điền biểu mẫu
Khoá truy cập giúp tài khoản người dùng của trang web an toàn, đơn giản, dễ sử dụng hơn và không cần mật khẩu. Bài viết này thảo luận cách thiết kế tính năng đăng nhập không mật khẩu bằng khoá truy cập trong khi vẫn hỗ trợ người dùng hiện có mật khẩu.
Xây dựng thành phần nút hành động nổi (FAB)
Tổng quan cơ bản về cách tạo các thành phần FAB thích ứng màu, thích ứng và dễ tiếp cận.
Các phương pháp hay nhất về phông chữ
Tìm hiểu cách tối ưu hoá phông chữ trên web cho Các chỉ số quan trọng về trang web.
Kiểm thử độ tương phản màu trong thiết kế web
Tổng quan về ba công cụ và kỹ thuật để thử nghiệm và xác minh độ tương phản màu có thể tiếp cận của thiết kế của bạn.
Cộng đồng GDE nổi bật: Alba Silvente Fuentes
Một trong loạt bài phỏng vấn với các thành viên của chương trình Chuyên gia phát triển của Google (GDE).
Mẹo CSS nhanh chóng! Trình tải ảnh động
Hãy tạo một trình tải CSS động bằng các thuộc tính tuỳ chỉnh có phạm vi và hàm animation-timing-function Chuyển đến CodePen và tạo một bút mới. Tạo mã đánh dấu cho trình tải của chúng ta. Lưu ý cách sử dụng thuộc tính tuỳ chỉnh cùng dòng: Bạn cũng có
Xây dựng bảng điều hướng chính cho trang web
Hướng dẫn này mô tả cách tạo một thành phần điều hướng chính dễ tiếp cận trên trang web. Bạn sẽ tìm hiểu về HTML ngữ nghĩa, khả năng hỗ trợ tiếp cận và lý do việc sử dụng các thuộc tính của Ứng dụng Internet phong phú dễ dùng (ARIA) đôi khi có thể gây hại nhiều hơn là có lợi.
Có phải là :method không?
Bộ chọn giả CSS tiện dụng này cung cấp cho bạn cách để chọn các phần tử ở chế độ phương thức.
Tạo ảo ảnh lưới cong
Khám phá thú vị về cách tạo lại ảo ảnh thị giác bằng CSS.
Các phương pháp hay nhất dành cho thẻ và trình quản lý thẻ
Tối ưu hoá thẻ và trình quản lý thẻ cho Core Web Vitals.
Kiểu danh sách mẫu quảng cáo
Xem xét một số cách hữu ích và sáng tạo để tạo kiểu cho danh sách.
Cách Nordhealth sử dụng Thuộc tính tuỳ chỉnh trong Thành phần web
Lợi ích của việc sử dụng Thuộc tính tuỳ chỉnh trong hệ thống thiết kế và thư viện thành phần.
Kiểm soát chặt chẽ các phép biến đổi CSS bằng các thuộc tính biến đổi riêng lẻ
Tìm hiểu cách bạn có thể sử dụng từng thuộc tính CSS dịch, xoay và điều chỉnh tỷ lệ để tiếp cận các biến đổi theo cách trực quan.
Ảnh động đường viền CSS
Xem xét một số cách để tạo ảnh động đường viền trong CSS
Cách BBC triển khai HSTS để cải thiện hiệu suất và khả năng bảo mật.
BBC đang ra mắt HSTS cho trang web của họ để cải thiện hiệu suất và độ bảo mật. Tìm hiểu ý nghĩa của việc này và cách HSTS có thể giúp bạn.
Tại sao dữ liệu thực tế và phòng thí nghiệm có thể khác nhau (và cần làm gì với chúng)
Tìm hiểu lý do khiến các công cụ theo dõi chỉ số Các chỉ số quan trọng về trang web có thể báo cáo số liệu khác nhau và cách diễn giải những điểm khác biệt đó.
Tình huống đôi bên cùng có lợi
GDE Enrique Fernandez Guerra chia sẻ về việc tìm nguồn mở cho tổ chức phi chính phủ HelpDev của mình.
Kết thúc Internet Explorer
Ý nghĩa của việc chấm dứt hỗ trợ Internet Explorer đối với khách hàng và nhà phát triển tại Maersk.com.
Tạm biệt HTML5Rocks
HTML5Rocks lâu nay rất vui khi được biết bạn.
Công thức làm bánh quy của bên thứ nhất
Tìm hiểu cách đặt cookie của bên thứ nhất để đảm bảo tính bảo mật, khả năng tương thích trên nhiều trình duyệt và giảm thiểu nguy cơ bị hỏng sau khi loại bỏ cookie của bên thứ ba.
Đồng bộ hoá âm thanh và video phát trên web
Web Audio API giúp bạn có thể thực hiện đồng bộ hoá AV một cách chính xác.
Sử dụng hiệu ứng chuyển màu dạng hình nón để tạo đường viền thú vị
Bạn có thể sử dụng hiệu ứng chuyển màu hình nón để tạo một số hiệu ứng thú vị, chẳng hạn như ví dụ về đường viền đẹp mắt này. CodePen này do Adam Argyle tạo ra, ban đầu được chia sẻ qua thông báo này trên Twitter, cho thấy cách sử dụng hiệu ứng
Sự khác biệt giữa thư viện và khung JavaScript
Tìm hiểu sự khác biệt giữa khung và thư viện trong môi trường JavaScript phía máy khách.
Triển khai khả năng xử lý lỗi khi sử dụng Fetch API
Phát hiện lỗi khi làm việc với API Tìm nạp.
Chọn một thư viện hoặc khung JavaScript
Tìm hiểu các quyết định về việc sử dụng thư viện hoặc khung JavaScript.
Hướng dẫn dành cho nhà phát triển giao diện người dùng về thiết bị đầu cuối
Tài nguyên này có thể giúp bạn nhanh chóng làm quen với thiết bị đầu cuối.
API cho phông chữ web đẹp và nhanh
Thông tin cập nhật về Google Fonts CSS API — cách hoạt động, cách sử dụng và cách hiệu quả để phân phối phông chữ trên web của bạn.
GOV.UK bỏ jQuery khỏi giao diện người dùng của họ.
GOV.UK đã bỏ phần phụ thuộc jQuery khỏi giao diện người dùng. Bạn sẽ không bao giờ đoán được điều gì đã xảy ra. (Có.)
Tạo thành phần nút
Tổng quan cơ bản về cách tạo các thành phần thích ứng màu, thích ứng và dễ tiếp cận.
Không chống lại trình duyệt tải trước trình quét
Tìm hiểu trình duyệt tải trước trình quét là gì, trình duyệt này giúp cải thiện hiệu suất như thế nào và cách để bạn có thể tránh xa trình duyệt này.
Các phương pháp hay nhất để đo lường Các chỉ số quan trọng về trang web tại hiện trường
Cách đo lường Các chỉ số quan trọng về trang web bằng công cụ phân tích bạn đang dùng
Thu hẹp khoảng cách
Giúp việc xây dựng cho web trở nên dễ dàng hơn.
Tìm được sự can đảm và nguồn cảm hứng trong cộng đồng nhà phát triển
Các chuyên gia phát triển web của Google về cách các chương trình cố vấn giúp họ trở thành nhà lãnh đạo.
Phông chữ có thể thay đổi trong đời thực
Chia sẻ hướng dẫn thực tế về các phông chữ có thể thay đổi, kèm theo nhiều ví dụ.
Nhanh chóng tạo các hiệu ứng chuyển màu CSS đẹp mắt bằng CSS Gradient Creator
Công cụ này của Josh W Comeau giúp việc tạo các hiệu ứng chuyển màu đẹp mắt trở nên cực kỳ đơn giản.
Tìm hiểu sâu những vấn đề mà nhà phát triển web hàng đầu chưa hài lòng
Bộ sưu tập thông tin chi tiết về các vấn đề hàng đầu, được thu thập từ một vài cuộc trò chuyện với nhà phát triển web.
Làm cho hình ảnh trang web của bạn trở nên hoàn hảo bằng images.tooling.report
Hãy kiểm tra trạng thái của công cụ hình ảnh.
Phạm vi biến toàn cục và biến cục bộ
Tìm hiểu về phạm vi và cách phạm vi hoạt động trong JavaScript.
Xây dựng thành phần hộp thoại
Tổng quan cơ bản về cách tạo các cửa sổ nhỏ và siêu dữ liệu thích ứng màu sắc, thích ứng và dễ truy cập thông qua phần tử ``.
Gỡ lỗi phát nội dung đa phương tiện trên web
Tìm hiểu cách gỡ lỗi các lỗi phát nội dung nghe nhìn trên web.
Bài đăng nổi bật của cộng đồng GDE: Nishu Goel
Một trong loạt bài phỏng vấn với các thành viên của chương trình Chuyên gia phát triển của Google (GDE).
Ảnh hưởng của việc tải từng phần quá nhiều đến hiệu suất
Việc tải thường xuyên hình ảnh trong khung nhìn ban đầu và tải từng phần những hình ảnh còn lại có thể giúp cải thiện Các chỉ số quan trọng về trang web trong khi vẫn tải ít byte hơn.
Xây dựng thành phần thanh tải
Tổng quan cơ bản về cách tạo thanh tải màu thích ứng và dễ truy cập bằng phần tử `".
Lưu thông tin xác thực từ Biểu mẫu
Giữ cho biểu mẫu đăng ký và đăng nhập của bạn càng đơn giản càng tốt. Lưu thông tin xác thực từ biểu mẫu đăng nhập để người dùng không phải đăng nhập lại khi quay lại. Cách lưu trữ thông tin xác thực của người dùng từ biểu mẫu: Trước khi tiếp tục,
Chrome và Firefox sắp đạt đến phiên bản lớn 100
Những thay đổi đối với chuỗi tác nhân người dùng, các chiến lược mà Chrome và Firefox đang thực hiện để giảm thiểu tác động và cách bạn có thể trợ giúp.
Tạo biểu tượng trang web thích ứng
Tổng quan cơ bản về cách tạo biểu tượng trang web thích ứng.
Vẽ lên canvas trong Emscripten
Tìm hiểu cách kết xuất đồ hoạ 2D cho canvas trên web từ WebAssembly bằng Emscripten.
Cải thiện tính bảo mật và quyền riêng tư bằng cách cập nhật Bộ nhớ đệm HTTP
Việc quên hoặc sử dụng tiêu đề Kiểm soát bộ nhớ đệm sai mục đích có thể ảnh hưởng tiêu cực đến tính bảo mật của trang web và quyền riêng tư của người dùng. Nhận đề xuất cho các trang web có giá trị cao.
Các phần tử HTML bổ sung
Các chỉ số cần thiết để có một trang web hoạt động tốt
Chuyển các ứng dụng USB sang web. Phần 2: gPhoto2
Tìm hiểu cách chuyển gPhoto2 sang WebAssembly để điều khiển máy ảnh bên ngoài qua USB từ ứng dụng web.
Ghi nhật ký lỗi mạng (NEL)
Sử dụng tính năng Ghi nhật ký lỗi mạng (NEL) để thu thập lỗi mạng phía máy khách.
Phát hiện tính năng WebAssembly
Tìm hiểu cách sử dụng các tính năng mới nhất của WebAssembly trong khi vẫn hỗ trợ người dùng trên tất cả trình duyệt.
Chuyển các ứng dụng USB sang web. Phần 1: libusb
Tìm hiểu cách chuyển mã tương tác với thiết bị bên ngoài sang web bằng API WebAssembly và Fugu.
Xây dựng thành phần chuyển đổi giao diện
Tổng quan cơ bản về cách tạo thành phần chuyển đổi giao diện thích ứng và dễ tiếp cận.
Nhúng đoạn mã JavaScript trong C++ bằng Emscripten
Tìm hiểu cách nhúng mã JavaScript vào thư viện WebAssembly của bạn để giao tiếp với thế giới bên ngoài.
PWA trên Oculus Nhiệm vụ 2
Oculus Quest 2 là tai nghe thực tế ảo (VR) do Oculus, một bộ phận của Meta tạo ra. Các nhà phát triển hiện có thể xây dựng và phân phối Ứng dụng web tiến bộ 2D và 3D (PWA) tận dụng tính năng đa nhiệm của Oculus Quest 2. Bài viết này mô tả trải nghiệm và cách xây dựng, cài đặt không qua cửa hàng ứng dụng và kiểm thử PWA của bạn trên Oculus Quest 2.
Tầng thiết kế công trình
Xem nhanh quy trình và các công cụ dùng để xây dựng trải nghiệm theo phong cách lịch ngày lễ của Designcember.
Máy tính Designcember
Một nỗ lực giả định nhằm tạo lại một máy tính năng lượng mặt trời trên web nhờ sử dụng cảm biến ánh sáng xung quanh và tính năng lớp phủ kiểm soát cửa sổ.
Sao chép sâu trong JavaScript bằng cấu trúcClone
Trong thời gian dài nhất, bạn phải sử dụng các giải pháp và thư viện để tạo một bản sao sâu của giá trị JavaScript. Nền tảng này hiện đi kèm với `structuredClone()`, một hàm tích hợp sẵn để sao chép sâu.
Tạo thành phần thông báo ngắn
Tổng quan cơ bản về cách tạo một thành phần thông báo ngắn thích ứng và dễ truy cập.
Quỹ giao diện người dùng
Công bố quỹ giao diện người dùng của Chrome, được thiết kế để tài trợ cho những người làm việc về các công cụ thiết kế, CSS và HTML.
Xây dựng thành phần trình đơn trò chơi 3D
Tổng quan cơ bản về cách tạo trình đơn trò chơi 3D có tính thích ứng, thích ứng và dễ truy cập.
Mọi thông tin được công bố tại Hội nghị Nhà phát triển Chrome 2021
Bản tóm tắt tất cả thông báo quan trọng của Hội nghị Nhà phát triển Chrome năm 2021, kèm theo các đường liên kết mà bạn cần để tìm hiểu thêm.
Có gì mới trong PageSpeed Insights
Tìm hiểu thông tin mới nhất trong PageSpeed Insights để giúp bạn đo lường và tối ưu hoá trang cũng như chất lượng trang web hiệu quả hơn.
Hướng tới chỉ số độ mượt của ảnh động
Tìm hiểu về việc đo lường ảnh động, cách xem xét khung ảnh động và độ mượt tổng thể của trang.
Luồng người dùng bằng Lighthouse
Hãy dùng thử Lighthouse API mới để đo lường hiệu suất và các phương pháp hay nhất trong suốt luồng người dùng.
Hành trình đến với web của Photoshop
Trong ba năm qua, Chrome đã nỗ lực để hỗ trợ các ứng dụng web muốn vượt qua những giới hạn của những gì có thể trong trình duyệt. Một trong những ứng dụng web như vậy là Photoshop. Ý tưởng chạy phần mềm phức tạp như Photoshop trực tiếp trong trình duyệt sẽ thật khó tưởng tượng chỉ mới vài năm trước. Tuy nhiên, bằng cách sử dụng nhiều công nghệ web mới, Adobe hiện đã đưa phiên bản thử nghiệm công khai của Photoshop lên web.
Xây dựng thành phần chọn nhiều mục
Tổng quan cơ bản về cách tạo một thành phần thích ứng, thích ứng và dễ tiếp cận, có nhiều lựa chọn để sắp xếp và lọc trải nghiệm người dùng.
Cách đánh giá hiệu suất tải trong trường bằng Thời gian điều hướng và Thời gian tài nguyên
Tìm hiểu kiến thức cơ bản về việc sử dụng API Navigation và Resource Timing API để đánh giá hiệu suất tải tại trường.
Thao tác DOM an toàn bằng Sanitizer API
Sanitizer API mới hướng đến việc xây dựng một bộ xử lý mạnh mẽ để chèn các chuỗi tuỳ ý vào trang một cách an toàn. Bài viết này giới thiệu về API này cũng như giải thích cách sử dụng API này.
Các phương pháp hay nhất để sử dụng nội dung nhúng của bên thứ ba
Tài liệu này thảo luận về các phương pháp hay nhất về hiệu suất mà bạn có thể sử dụng khi tải nội dung nhúng của bên thứ ba, kỹ thuật tải hiệu quả và công cụ Layout Shift Terminator giúp giảm sự thay đổi bố cục đối với những nội dung nhúng phổ biến.
Ảnh hưởng của cấu trúc SPA đến Các chỉ số quan trọng về trang web
Câu trả lời cho các câu hỏi thường gặp về SPA, Các chỉ số quan trọng về trang web và kế hoạch của Google nhằm giải quyết các hạn chế hiện tại về việc đo lường.
Tìm hiểu chuyên sâu về sự kiện JavaScript
preventDefault và stopPropagation: trường hợp sử dụng và chức năng chính xác của từng phương thức. Việc xử lý sự kiện JavaScript thường rất đơn giản. Điều này đặc biệt đúng khi xử lý cấu trúc HTML đơn giản (tương đối phẳng). Tuy nhiên, mọi thứ sẽ
Nhóm các tài nguyên không phải JavaScript
Tìm hiểu cách nhập và gói các loại tài sản khác nhau từ JavaScript theo cách hoạt động cả trong trình duyệt và trình gói.
Xây dựng thành phần nút phân tách
Thông tin tổng quan cơ bản về cách tạo thành phần nút phân tách hỗ trợ tiếp cận.
Sử dụng Tập lệnh mô-đun CSS để nhập biểu định kiểu
Tìm hiểu cách sử dụng tập lệnh mô-đun CSS để nhập biểu định kiểu CSS bằng cú pháp giống như các mô-đun JavaScript.
Màu nhấn CSS
Đưa màu thương hiệu của bạn vào thông tin đầu vào của biểu mẫu HTML tích hợp sẵn bằng một dòng mã.
Xây dựng thành phần chuyển đổi
Tổng quan cơ bản về cách tạo thành phần chuyển đổi thích ứng và dễ tiếp cận.
Lựa chọn ưu tiên về nội dung đa phương tiện của người dùng có tiêu đề gợi ý của ứng dụng
Một nhóm tiêu đề gợi ý của ứng dụng cho phép các trang web thu thập lựa chọn ưu tiên về nội dung nghe nhìn của người dùng (không bắt buộc) tại thời điểm yêu cầu, cho phép máy chủ nội tuyến CSS phù hợp vì lý do hiệu suất. Truy vấn nội dung đa phương
Xây dựng thành phần breadcrumb (tập hợp liên kết phân cấp)
Thông tin tổng quan cơ bản về cách tạo thành phần breadcrumb (tập hợp liên kết phân cấp) thích ứng và dễ truy cập để người dùng di chuyển trên trang web của bạn.
Sử dụng luồng WebAssembly từ C, C++ và Rust
Tìm hiểu cách đưa các ứng dụng đa luồng viết bằng ngôn ngữ khác vào WebAssembly.
PWA có phát trực tuyến ngoại tuyến
Việc xây dựng PWA bằng tính năng phát trực tiếp khi không có mạng có nhiều thách thức. Trong bài viết này, bạn sẽ tìm hiểu về các API và kỹ thuật mang lại cho người dùng trải nghiệm nội dung nghe nhìn ngoại tuyến chất lượng cao.
Mã hoá nội dung nghe nhìn
Tìm hiểu các khái niệm về quản lý quyền kỹ thuật số và các lệnh cần thiết để chuyển từ tệp mov thô sang tệp phương tiện đã mã hóa đóng gói cho MPEG-DASH hoặc HLS bằng cách sử dụng cả phương thức mã hóa Clear Key hoặc Widevine.
Khung nội dung truyền thông
Khung nội dung đa phương tiện có cả dạng nguồn mở và dạng độc quyền, và cốt lõi là một bộ API hỗ trợ phát âm thanh và/hoặc video cho nhiều định dạng vùng chứa và giao thức truyền dữ liệu.
Thông tin cơ bản về phát trực tuyến nội dung nghe nhìn
Phát nội dung đa phương tiện là phương pháp liên tục phân phối nội dung đa phương tiện từ máy chủ, nơi nội dung được chia thành các phần dữ liệu riêng lẻ có thể kết hợp lại với nhau trong khi phát theo thứ tự cụ thể thông qua một yêu cầu phạm vi sử dụng các giao thức như DASH và HLS.
Tìm hiểu thông tin về dữ liệu trường trong bản cập nhật tiện ích Các chỉ số quan trọng về trang web
Giờ đây, tiện ích Các chỉ số quan trọng về trang web sẽ cho bạn biết mối liên hệ giữa trải nghiệm tại địa phương với trải nghiệm người dùng thực tế trong lĩnh vực này.
Xây dựng bảng phối màu
Tổng quan cơ bản về cách thiết lập bảng phối màu động và có thể định cấu hình
Điều chỉnh kích thước CSS cho @font-face
Khi phông chữ web tải, giờ đây bạn có thể điều chỉnh tỷ lệ để chuẩn hoá kích thước phông chữ của tài liệu và ngăn việc thay đổi bố cục khi chuyển đổi giữa các phông chữ
Sử dụng AVIF để nén hình ảnh trên trang web
Việc phân phát hình ảnh ở kích thước máy tính tới thiết bị di động có thể sử dụng nhiều dữ liệu hơn gấp 2-4 lần so với mức cần thiết. Thay vì sử dụng hình ảnh "một kích thước phù hợp cho tất cả", hãy phân phát nhiều kích thước hình ảnh cho các thiết bị khác nhau.
CSS cho Các chỉ số quan trọng về trang web
Bài viết này trình bày các kỹ thuật liên quan đến CSS để tối ưu hoá Các chỉ số quan trọng về trang web.
Phát triển điểm số tổng hợp về mức thay đổi bố cục trong công cụ web
Kể từ hôm nay, chúng tôi đã triển khai thay đổi đối với CLS trên một số nền tảng công cụ web của Chrome, bao gồm Lighthouse, PageSpeed Insights và Báo cáo trải nghiệm người dùng Chrome.
Bộ chọn lớp giả hàm mới của CSS :is() và :where()
Những phần bổ sung có vẻ nhỏ này cho cú pháp bộ chọn CSS nhưng sẽ có tác động lớn.
Hiện đã có chương trình đào tạo mới về Ứng dụng web tiến bộ
Hiện đã có một chương trình đào tạo mới, gồm 6 phần về Ứng dụng web tiến bộ, hoàn thiện với một loạt lớp học lập trình mới để hướng dẫn bạn cách xây dựng các PWA đáng tin cậy, có thể cài đặt và có khả năng đáp ứng.
Mô hình đáp ứng mới: Thiết kế web trong thế giới dựa trên thành phần
Các tính năng đa phương tiện dựa trên lựa chọn ưu tiên của người dùng, truy vấn vùng chứa và truy vấn đa phương tiện cho các loại màn hình mới, chẳng hạn như màn hình có thể gập lại, sẽ cho phép chúng ta sử dụng trong một kỷ nguyên mới của thiết kế web thích ứng.
Di chuyển sang nội dung gợi ý của ứng dụng tác nhân người dùng
Các chiến lược để di chuyển trang web của bạn từ việc dựa vào chuỗi tác nhân người dùng sang tính năng Gợi ý ứng dụng tác nhân người dùng mới.
Tài liệu tham khảo nhanh về tiêu đề bảo mật
Bài viết này liệt kê các tiêu đề bảo mật quan trọng nhất mà bạn có thể sử dụng để bảo vệ trang web của mình. Hãy sử dụng tài liệu này để tìm hiểu các tính năng bảo mật dựa trên nền tảng web, tìm hiểu cách triển khai các tính năng này trên trang web của bạn và để tham khảo khi bạn cần nhắc nhở.
Exalidraw và Fugu: Cải thiện hành trình cốt lõi của người dùng
Nội dung của Thomas Steiner trong bài nói chuyện tại Google I/O 2021 của Thomas Steiner có tiêu đề Exalidraw và Fugu: Cải thiện hành trình cốt lõi của người dùng
Mô-đun ES trong trình chạy dịch vụ
Trình chạy dịch vụ có thể sử dụng tính năng nhập tĩnh của các mô-đun ES để đưa vào thêm mã, như một giải pháp thay thế cho importScripts().
Xây dựng thành phần của trình cuộn nội dung nghe nhìn
Tổng quan cơ bản về cách tạo chế độ xem cuộn ngang thích ứng cho TV, điện thoại, máy tính, v.v.
Tối ưu hoá Các chỉ số quan trọng về trang web bằng Lighthouse
Hôm nay, chúng ta sẽ tìm hiểu các tính năng công cụ mới trong Lighthouse, PageSpeed và Công cụ cho nhà phát triển để giúp xác định cách trang web của bạn có thể cải thiện trên Các chỉ số quan trọng về trang web.
Sử dụng API web không đồng bộ từ WebAssembly
Tìm hiểu cách gọi các API web không đồng bộ khi biên dịch các ngôn ngữ đồng bộ theo cách truyền thống thành WebAssembly.
Tuỳ chỉnh lớp phủ điều khiển cửa sổ của thanh tiêu đề PWA của bạn
Với tính năng Lớp phủ kiểm soát cửa sổ, nhà phát triển có thể tuỳ chỉnh thanh tiêu đề của các PWA đã cài đặt để PWA của họ trông giống như ứng dụng hơn.
Luôn kiểm soát các tập lệnh của bên thứ ba
Tập lệnh của bên thứ ba hoặc "thẻ" có thể là một nguồn gây ra các vấn đề về hiệu suất trên trang web của bạn, do đó là mục tiêu để tối ưu hoá. Tuy nhiên, trước khi bắt đầu tối ưu hoá những thẻ mà bạn đã thêm, hãy đảm bảo rằng bạn không tối ưu hoá những thẻ mà bạn thậm chí không cần. Bài viết này hướng dẫn bạn cách đánh giá các yêu cầu cho thẻ mới, cũng như quản lý và xem xét các yêu cầu hiện có.
Phá bỏ rào cản bằng cách sử dụng DataTransfer API
Đối tượng DataTransfer chứa dữ liệu đang được kéo trong thao tác kéo và thả. Tệp này có thể chứa một hoặc nhiều mục dữ liệu, mỗi mục thuộc một hoặc nhiều loại dữ liệu. Bài viết này giải thích những việc bạn có thể làm với DataTransfer API.
Điền biểu mẫu OTP trong iframe nhiều nguồn gốc bằng API WebOTP
API WebOTP hiện có thể nhận OTP từ bên trong iframe.
Tạo ảnh động chia tách văn bản
Tổng quan cơ bản về cách tạo ảnh động phân tách chữ cái và từ.
Phát triển chỉ số CLS (Điểm số tổng hợp về mức thay đổi bố cục)
Kế hoạch cải thiện chỉ số CLS để công bằng hơn đối với các trang tồn tại trong thời gian dài.
Sự hài lòng của nhà phát triển web
Sự hài lòng của nhà phát triển web là một dự án của Google nhằm thu thập thông tin về nhu cầu của nhà phát triển web. Mục tiêu là một nền tảng web đáng tin cậy, dễ dự đoán và tương tác hơn, cho phép nhà phát triển đầu tư và tin tưởng nền tảng đó, đồng thời áp dụng và sử dụng các tính năng mới để phát triển nền tảng và hoạt động kinh doanh.
Xây dựng thành phần Cài đặt
Tổng quan cơ bản về cách tạo thành phần cài đặt của thanh trượt và hộp đánh dấu.
Gỡ lỗi thay đổi bố cục
Tìm hiểu cách xác định và khắc phục sự thay đổi về bố cục.
JavaScript: Ý nghĩa của từ này là gì?
Việc tìm ra giá trị của "this" có thể khá khó khăn trong JavaScript, sau đây là cách thực hiện...
Áp dụng nguyên tắc lập trình ứng dụng nhỏ cho một dự án mẫu
Chương này là một dự án mẫu tiếp cận phương pháp "lập trình phương thức cho một ứng dụng nhỏ".
Lập trình theo cách của ứng dụng nhỏ
Chương này giới thiệu cách lập trình cho ứng dụng nhỏ.
H5 và QuickApp là gì?
Chương này cung cấp thông tin cơ bản về các ứng dụng H5 và QuickApp, cả hai đều khác với các ứng dụng nhỏ.
Kết thúc suy nghĩ về các ứng dụng nhỏ của một nhà phát triển web
Chương này kết thúc bộ sưu tập các ứng dụng nhỏ bằng quan điểm rằng: suy nghĩ sáng tạo cũng như lấy thông tin đầu vào và cảm hứng từ bên ngoài bong bóng của chính mình chắc chắn sẽ giúp ích khi xây dựng một tương lai tốt đẹp hơn trên web.
Thành phần của ứng dụng nhỏ
Chương này cung cấp thông tin chi tiết về các thành phần mà tất cả nền tảng ứng dụng nhỏ đều cung cấp.
Dự án nguồn mở của ứng dụng nhỏ
Chương này giới thiệu một số dự án nguồn mở ứng dụng nhỏ thú vị.
Đánh dấu, định kiểu, viết tập lệnh và cập nhật ứng dụng nhỏ
Chương này xem xét các tuỳ chọn đánh dấu, định kiểu, viết tập lệnh và cập nhật của nhiều nền tảng ứng dụng nhỏ.
Cấu trúc, vòng đời và gói dự án
Chương này trình bày cấu trúc dự án, vòng đời và cách gói các ứng dụng nhỏ.
Luồng — Hướng dẫn chính thức
API luồng cho phép JavaScript truy cập vào các luồng dữ liệu nhận được qua mạng theo phương thức lập trình và xử lý chúng như mong muốn.
Xây dựng thành phần Thẻ
Tổng quan cơ bản về cách tạo thành phần thẻ tương tự như thành phần trong ứng dụng iOS và Android.
Hướng dẫn bật tính năng tách biệt nhiều nguồn gốc
Tính năng tách biệt nhiều nguồn gốc cho phép trang web sử dụng các tính năng mạnh mẽ như SharedArrayBuffer. Bài viết này giải thích cách bật tính năng tách biệt nhiều nguồn gốc trên trang web của bạn.
Yêu cầu tách biệt hiệu suất bằng tiêu đề Origin-Agent-Cluster
Tiêu đề Origin-Agent-Cluster cắt quyền truy cập đồng bộ vào các nguồn gốc khác trên cùng một miền và gợi ý cho trình duyệt để cung cấp tài nguyên dành riêng cho nguồn gốc của bạn.
Thuộc tính tỷ lệ khung hình CSS
Việc duy trì tỷ lệ khung hình trong hình ảnh và phần tử giờ đây sẽ dễ dàng đạt được hơn nhờ thuộc tính CSS có tỷ lệ khung hình mới.
Các phương pháp hay nhất cho băng chuyền
Tìm hiểu cách tối ưu hoá băng chuyền để tăng hiệu suất và khả năng hữu dụng.
WebRTC hiện là chuẩn W3C và IETF
Tổng quan ngắn gọn về lịch sử, cấu trúc, trường hợp sử dụng và tương lai của WebRTC.
Dùng HTTPS cho hoạt động phát triển cục bộ
Trong hầu hết các trường hợp, http://localhost hoạt động giống như HTTPS cho mục đích phát triển. Tuy nhiên, có một số trường hợp đặc biệt, chẳng hạn như tên máy chủ tuỳ chỉnh hoặc sử dụng cookie bảo mật trên các trình duyệt, trong đó bạn cần thiết
Khi nào nên sử dụng HTTPS cho hoạt động phát triển cục bộ
Hầu như mọi lúc, bạn nên sử dụng http://localhost để phát triển cục bộ, ngoại trừ trong một số trường hợp đặc biệt. Bài đăng này giải thích thời điểm bạn cần chạy trang web phát triển cục bộ bằng HTTPS. Ngoài ra, hãy xem: Cách sử dụng HTTPS để phát
Muốn có ý kiến phản hồi: Đường đến chỉ số thay đổi bố cục tốt hơn cho các trang tồn tại lâu dài
Hãy tìm hiểu về các kế hoạch của chúng tôi để cải thiện chỉ số Điểm số tổng hợp về mức thay đổi bố cục và gửi ý kiến phản hồi cho chúng tôi.
Xây dựng thành phần điều hướng bên
Tổng quan cơ bản về cách tạo trang trình bày thích ứng cho trang trình bày bên ngoài
Lớp học lập trình: Xây dựng thành phần Sidenav
Tìm hiểu cách tạo thành phần bố cục điều hướng bên cạnh trang trình bày thích ứng.
Căn giữa trong CSS
Hãy làm theo 5 kỹ thuật căn giữa khi chúng trải qua một loạt thử nghiệm để xem kỹ thuật nào dễ dàng thay đổi nhất.
Lớp học lập trình: Căn giữa trong CSS
Tìm hiểu 5 kỹ thuật căn giữa bằng CSS.
Yêu bộ nhớ đệm của bạn ❤️
Hiệu suất tải lần đầu rất quan trọng, nhưng không phải là tất cả. Người dùng tải trang web của bạn lần thứ hai sẽ sử dụng bộ nhớ đệm để có quyền truy cập vào nội dung của bạn. Vì vậy, điều quan trọng là đảm bảo trang web cũng hoạt động tốt, cả về tốc độ và độ chính xác.
Phát hành, gửi và cài đặt JavaScript hiện đại cho các ứng dụng nhanh hơn
JavaScript hiện đại cải thiện kích thước và hiệu suất so với ES5 được chuyển mã, đồng thời được hỗ trợ trong 95% trình duyệt web. Việc bật đầu ra JavaScript hiện đại sẽ mang lại những lợi ích này cho ứng dụng của bạn, nhưng tác động bị hạn chế bởi các phần phụ thuộc đã được sao chép sang ES5. Hướng dẫn này minh họa cách phát hành các gói hiện đại lên npm cũng như cách cài đặt và gói JavaScript hiện đại một cách tối ưu.
Công việc vẽ trên nhiều trình duyệt và Houdini.how
Tìm hiểu cách triển khai Houdini Paint API trên nhiều trình duyệt và khám phá thế giới các công việc Houdini với Houdini.how.
Các phương pháp hay nhất về biểu mẫu đăng ký
Giúp người dùng của bạn đăng ký, đăng nhập và quản lý chi tiết tài khoản của họ một cách đơn giản nhất.
Lớp học lập trình về các phương pháp hay nhất về hình thức thanh toán
Tìm hiểu các phương pháp hay nhất về phương thức thanh toán.
Lớp học lập trình về các phương pháp hay nhất về biểu mẫu đăng ký
Sử dụng các tính năng của trình duyệt nhiều nền tảng để xây dựng một biểu mẫu đăng ký đơn giản, an toàn, dễ truy cập và dễ sử dụng.
Lớp học lập trình về các phương pháp hay nhất về biểu mẫu địa chỉ
Tìm hiểu các phương pháp hay nhất cho biểu mẫu địa chỉ.
Các phương pháp hay nhất về biểu mẫu thanh toán và biểu mẫu địa chỉ
Tối đa hoá lượt chuyển đổi bằng cách giúp người dùng hoàn tất địa chỉ và phương thức thanh toán một cách nhanh chóng và dễ dàng nhất có thể.
Các phương pháp hay nhất về biểu mẫu OTP qua tin nhắn SMS
Yêu cầu người dùng cung cấp OTP (mật khẩu một lần) qua SMS là một cách phổ biến để xác nhận số điện thoại của người dùng. Bài đăng này cung cấp cho bạn các phương pháp hay nhất để tạo biểu mẫu OTP qua tin nhắn SMS với trải nghiệm người dùng tuyệt vời.
Tự động kiểm tra bằng AutoWebPerf
Một công cụ mô-đun mới cho phép tự động thu thập dữ liệu hiệu suất từ nhiều nguồn.
Tổng quan về trình thực thi
Cách trình chạy web và trình chạy dịch vụ có thể cải thiện hiệu suất của trang web và thời điểm sử dụng trình chạy web so với trình chạy dịch vụ.
Phát thông báo cập nhật đến các trang bằng trình chạy dịch vụ
Cách trình chạy dịch vụ có thể chủ động giao tiếp với trang để thông báo về một số sự kiện nhất định.
Hướng dẫn lưu vào bộ nhớ đệm bắt buộc
Cách thông báo cho cửa sổ và trình chạy dịch vụ về việc thực hiện các tác vụ liên quan đến hiệu suất, lưu vào bộ nhớ đệm và thực hiện thao tác ngoại tuyến.
Giao tiếp hai chiều với nhân viên dịch vụ
Cách thiết lập kênh liên lạc hai chiều giữa trang và trình chạy dịch vụ.
Tắt tính năng tăng tốc chuột để mang lại trải nghiệm chơi trò chơi FPS tốt hơn
Giờ đây, các ứng dụng web có thể tắt tính năng tăng tốc chuột khi thu thập các sự kiện con trỏ.
Xây dựng thành phần Stories
Tổng quan cơ bản về cách xây dựng trải nghiệm tương tự như Instagram Stories trên web.
Lớp học lập trình: Xây dựng thành phần Stories
Tìm hiểu cách xây dựng trải nghiệm tương tự như Instagram Stories trên web.
Cùng trang web có lược đồ
Định nghĩa "same-site" đang phát triển để bao gồm cả lược đồ URL, vì vậy, các đường liên kết giữa phiên bản HTTP và HTTPS của một trang web giờ đây sẽ được tính là các yêu cầu trên nhiều trang web. Hãy nâng cấp lên HTTPS theo mặc định để tránh gặp sự cố khi có thể hoặc đọc tiếp để biết thông tin chi tiết về các giá trị cần có cho thuộc tính SameSite.
Tải từng phần ở cấp trình duyệt dành cho Hệ thống quản lý nội dung (CMS)
Bài đăng này hướng dẫn cách sử dụng thuộc tính tải trong hệ thống quản lý nội dung.
Lớp học lập trình: Xây dựng máy chủ thông báo đẩy
Hướng dẫn tương tác từng bước hướng dẫn bạn cách xây dựng máy chủ quản lý gói thuê bao thông báo đẩy và gửi yêu cầu giao thức đẩy web đến dịch vụ đẩy.
Lớp học lập trình: Xây dựng ứng dụng thông báo đẩy
Hướng dẫn tương tác từng bước cho bạn biết cách tạo ứng dụng đăng ký người dùng nhận thông báo đẩy, hiển thị thông báo đẩy dưới dạng thông báo và huỷ đăng ký nhận thông báo đẩy cho người dùng.
Tổng quan về thông báo đẩy
Tổng quan về thông báo đẩy là gì, lý do bạn có thể sử dụng chúng và cách chúng hoạt động.
Đo lường mức sử dụng khi không có mạng
Cách theo dõi hoạt động sử dụng trang web khi không có mạng để bạn có thể lý giải vì sao trang web của bạn cần có trải nghiệm ngoại tuyến tốt hơn.
Ví dụ về ảnh động CSS hiệu suất cao
Cho thấy cách các kỹ thuật hiệu suất cao có thể tạo ra các ảnh động phức tạp và đẹp mắt.
Cơ chế trao đổi có chữ ký (họ)
AppCompat là một cơ chế phân phối giúp bạn có thể xác thực nguồn gốc của một tài nguyên một cách độc lập với cách tài nguyên đó được phân phối.
CSS min(), max() và clamp()
Tối thiểu, tối đa và kẹp cung cấp các tính năng CSS mạnh mẽ, cho phép tạo kiểu phản hồi nhanh hơn mà không bị giữ lại mã. Bài đăng này đề cập đến cách kiểm soát kích thước phần tử, duy trì khoảng cách phù hợp và triển khai kiểu chữ linh hoạt bằng các hàm toán học CSS được hỗ trợ tốt này.
Cải tiến bố cục logic với cách viết tắt tương đối về luồng
Cách viết tắt thuộc tính logic mới và các thuộc tính phần lồng ghép mới dành cho Chromium.
Cách tạo ảnh động CSS hiệu suất cao
Để cải thiện hiệu suất của ảnh động CSS, hãy sử dụng các thuộc tính CSS biến đổi và độ mờ nhiều nhất có thể và tránh bất kỳ nội dung nào kích hoạt bố cục hoặc vẽ.
Xử lý yêu cầu về phạm vi trong trình chạy dịch vụ
Đảm bảo trình chạy dịch vụ của bạn biết việc cần làm khi phản hồi một phần được yêu cầu.
Tại sao một số ảnh động bị chậm?
Tạo ảnh động hiệu quả là yếu tố cốt lõi của trải nghiệm web tuyệt vời. Bài đăng này giải thích lý do một số loại ảnh động lại hoạt động hiệu quả hơn các loại khác.
Kiểm soát tính năng kéo, nghiêng và thu phóng của máy ảnh
Các tính năng kéo, nghiêng và thu phóng trên máy ảnh cuối cùng có thể điều khiển được trên web.
Bản dùng thử theo nguyên gốc của bên thứ ba là gì?
Bản dùng thử theo nguyên gốc là một cách để kiểm tra một tính năng mới hoặc tính năng thử nghiệm của nền tảng web. Bản dùng thử theo nguyên gốc của bên thứ ba giúp các nhà cung cấp nội dung được nhúng có thể dùng thử tính năng mới trên nhiều trang
Rò rỉ bộ nhớ cửa sổ tách biệt
Cửa sổ tách biệt là một loại rò rỉ bộ nhớ phổ biến, đặc biệt khó tìm thấy và khắc phục.
Tạo trang dự phòng ngoại tuyến
Tìm hiểu cách tạo trải nghiệm ngoại tuyến đơn giản cho ứng dụng của bạn.
Áp dụng hiệu ứng cho hình ảnh bằng thuộc tính mask-image của CSS
Tạo mặt nạ CSS cho phép bạn sử dụng hình ảnh làm lớp mặt nạ. Điều này có nghĩa là bạn có thể sử dụng hình ảnh, SVG hoặc gradient làm mặt nạ, để tạo các hiệu ứng thú vị mà không cần trình chỉnh sửa hình ảnh.
Tạo các hình ảnh thú vị với thuộc tính clip-path của CSS
Việc sử dụng tính năng cắt trong CSS có thể giúp chúng ta loại bỏ được mọi thành phần trong thiết kế giống như một chiếc hộp. Bạn có thể tạo đường dẫn đoạn video bằng cách sử dụng nhiều hình dạng cơ bản hoặc SVG. Sau đó, cắt bỏ các phần của thành phần bạn không muốn hiển thị.
Dấu đầu dòng tuỳ chỉnh với CSS ::points
Sử dụng CSS để tuỳ chỉnh màu sắc, kích thước hoặc loại số hay dấu đầu dòng trong các phần tử `` hoặc ``.
Giúp người dùng dễ dàng thay đổi mật khẩu bằng cách thêm một URL phổ biến để đổi mật khẩu
Bằng cách chuyển hướng các yêu cầu đến /.well-known/change-password thành URL thay đổi mật khẩu, bạn có thể cho phép người dùng cập nhật mật khẩu của mình dễ dàng hơn trước.
Sắp xếp các giao dịch thanh toán với nhân viên dịch vụ
Sau khi bạn đăng ký ứng dụng thanh toán dựa trên nền tảng web, ứng dụng đó sẽ sẵn sàng chấp nhận yêu cầu thanh toán từ người bán. Bài viết này hướng dẫn bạn cách sắp xếp một giao dịch thanh toán qua một trình chạy dịch vụ trong thời gian chạy.
Xử lý thông tin thanh toán không bắt buộc bằng trình chạy dịch vụ
Sau khi bạn đăng ký ứng dụng thanh toán dựa trên nền tảng web, ứng dụng đó sẽ sẵn sàng chấp nhận yêu cầu thanh toán từ người bán. Bài viết này hướng dẫn bạn cách sắp xếp một giao dịch thanh toán qua một trình chạy dịch vụ trong thời gian chạy.
ARIA: chất độc hay thuốc giải độc?
Việc nói dối với trình đọc màn hình sẽ chữa trị khả năng tiếp cận như thế nào khi nó không được thâm nhập vào nó!
Khắc phục lỗi rò rỉ bộ nhớ trong WebAssembly bằng Emscripten
Tìm hiểu cách sử dụng WebAssembly để đưa các thư viện (được viết bằng ngôn ngữ khác) lên Web theo cách an toàn và đặc trưng.
content-Visibility: thuộc tính CSS mới giúp tăng hiệu suất hiển thị
Thuộc tính chế độ hiển thị nội dung CSS giúp mang lại lợi ích về hiệu suất kết xuất nội dung web bằng cách bỏ qua việc kết xuất nội dung ngoài màn hình. Bài viết này hướng dẫn bạn cách sử dụng thuộc tính CSS mới này để rút ngắn thời gian tải ban đầu bằng từ khoá tự động. Bạn cũng sẽ tìm hiểu về Thông số kỹ thuật về vùng chứa CSS và các giá trị khác cho chế độ hiển thị nội dung giúp bạn kiểm soát tốt hơn cách nội dung hiển thị trong trình duyệt.
Bỏ chặn quyền truy cập vào bảng nhớ tạm
API Bảng nhớ tạm không đồng bộ đơn giản hoá việc sao chép và dán nội dung mà vẫn phù hợp với các quyền.
Các phương pháp hay nhất về Giới thiệu và Chính sách giới thiệu
Hãy xem xét việc thiết lập chính sách liên kết giới thiệu `strict-origin-when-cross-origin`. Chính sách này vẫn giữ được phần lớn tính hữu ích của đường liên kết giới thiệu, đồng thời giảm thiểu nguy cơ rò rỉ dữ liệu từ nhiều nguồn gốc.
Web trên Android
Tìm hiểu cách sử dụng các thành phần khác nhau để hiển thị nội dung web trong các ứng dụng Android.
Xây dựng PWA tại Google, phần 1
Những nội dung mà nhóm Bản tin tìm hiểu về trình chạy dịch vụ trong quá trình phát triển một ứng dụng web tiến bộ (PWA).
Theo dõi hiệu suất với Lighthouse CI
Tìm hiểu cách thiết lập Lighthouse CI và tích hợp tính năng này vào quy trình làm việc của nhà phát triển.
Thiết kế trải nghiệm người dùng cho khoá truy cập trên Tài khoản Google
Mang lại khả năng bảo mật tốt hơn và trải nghiệm tốt hơn cho người dùng cho Tài khoản Google.
@property: cung cấp siêu năng lực cho các biến CSS
Tìm hiểu cách triển khai thuộc tính tuỳ chỉnh CSS bằng tính năng nhập ngữ nghĩa, giá trị dự phòng, v.v. trực tiếp trong tệp CSS.
Đăng ký ứng dụng thanh toán dựa trên nền tảng web
Tìm hiểu cách đăng ký ứng dụng thanh toán dựa trên nền tảng web cho trình duyệt của khách hàng. Bạn cũng sẽ tìm hiểu cách gỡ lỗi.
Liên quan đến tốc độ trang web và chỉ số kinh doanh
Tận dụng thử nghiệm A/B để đánh giá tác động của tốc độ trang web đối với các chỉ số kinh doanh của bạn.
Lưu vào bộ nhớ đệm của trình chạy dịch vụ và lưu HTTP vào bộ nhớ đệm
Ưu và nhược điểm của việc sử dụng logic hết hạn nhất quán hoặc khác nhau trên bộ nhớ đệm của trình chạy dịch vụ và các lớp bộ nhớ đệm HTTP.
Tổng quan về ứng dụng thanh toán dựa trên web
Tìm hiểu cách điều chỉnh ứng dụng thanh toán dựa trên nền tảng web để hoạt động với Thanh toán trên web và cung cấp trải nghiệm người dùng tốt hơn cho khách hàng.
Cung cấp thông tin vận chuyển và thông tin liên hệ qua ứng dụng thanh toán của Android
Tìm hiểu cách sửa đổi ứng dụng thanh toán trên Android để cung cấp địa chỉ giao hàng đã chọn của người dùng cũng như thông tin liên hệ khi người bán yêu cầu thông qua Payment Request API.
Xử lý yêu cầu chỉ đường
Yêu cầu di chuyển là những yêu cầu về HTML được thực hiện bất cứ khi nào bạn nhập một URL mới vào thanh điều hướng hoặc nhấp vào một đường liên kết trên một trang. Đây là nơi trình chạy dịch vụ tác động lớn nhất đến hiệu suất: bằng cách sử dụng trình chạy dịch vụ để phản hồi mà không cần chờ mạng, bạn có thể đảm bảo rằng các hoạt động điều hướng có tốc độ nhanh và khả năng thích ứng cao.
Sử dụng Báo cáo trải nghiệm người dùng trên Chrome để xem xét hiệu suất trong thực tế
Báo cáo trải nghiệm người dùng trên Chrome (tên gọi chính thức là CrUX) là một tập dữ liệu công khai gồm dữ liệu về trải nghiệm thực tế của người dùng trên hàng triệu trang web. Không giống như dữ liệu phòng thí nghiệm, dữ liệu CrUX thực sự đến từ những người dùng đã chọn sử dụng trong thực tế.
10 bố cục hiện đại trong một dòng CSS
Bài đăng này nêu bật một số dòng CSS mạnh mẽ thực hiện một số công việc khó khăn và giúp bạn tạo bố cục hiện đại mạnh mẽ.
Kết xuất pixel hoàn hảo bằng devicePixelContentBox
Kể từ Chrome 84, ResizeObserver sẽ hỗ trợ một phép đo hộp mới có tên là device-pixel-content-box, để đo kích thước của phần tử tính bằng pixel vật lý. Điều này rất quan trọng trong việc kết xuất đồ hoạ hoàn hảo theo cách pixel, đặc biệt là trong bối cảnh màn hình có mật độ điểm ảnh cao.
Tóm tắt SỰ KIỆN TRỰC TIẾP web.dev
Nội dung tóm tắt các tin tức và 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 trong khu vực.
Cải thiện dần Ứng dụng web tiến bộ của bạn
Tìm hiểu cách cải tiến dần Ứng dụng web tiến bộ của bạn để ứng dụng vẫn hữu ích trên mọi trình duyệt hiện đại nhưng mang lại trải nghiệm nâng cao trên các trình duyệt hỗ trợ các tính năng web mới như truy cập hệ thống tệp, truy cập vào bảng nhớ tạm của hệ thống, truy xuất danh bạ, đồng bộ hoá định kỳ ở chế độ nền, khoá chế độ thức màn hình, các tính năng chia sẻ web và nhiều tính năng khác.
Sử dụng các tính năng của trình duyệt trên nhiều nền tảng để tạo biểu mẫu đăng nhập
Sử dụng các tính năng của trình duyệt nhiều nền tảng để xây dựng một biểu mẫu đăng nhập đơn giản, an toàn, dễ truy cập và dễ sử dụng.
Các phương pháp hay nhất về biểu mẫu đăng nhập
Sử dụng các tính năng của trình duyệt trên nhiều nền tảng để xây dựng các biểu mẫu đăng nhập an toàn, dễ truy cập và dễ sử dụng.
Các công cụ dành cho nhà phát triển web để gỡ lỗi các vấn đề về JavaScript trong Google Tìm kiếm
Cách khắc phục vấn đề về SEO trên từng trang hoặc toàn bộ trang web.
Xây dựng trải nghiệm tìm kiếm linh hoạt với Workbox
Cách triển khai trải nghiệm tìm kiếm linh hoạt bằng Workbox, sử dụng tính năng Đồng bộ hoá dưới nền (Background Sync) và Push API (API Đẩy).
Thêm nội dung nghe nhìn vào trang web
Nhúng tệp nội dung nghe nhìn vào trang web bằng thẻ và.
Liên kết đậm ở nơi chưa có ai từng liên kết: Mảnh văn bản
Mảnh văn bản cho phép bạn chỉ định một đoạn mã văn bản trong mảnh URL. Khi điều hướng đến một URL có đoạn văn bản như vậy, trình duyệt có thể nhấn mạnh và/hoặc thu hút sự chú ý của người dùng.
Cách báo cáo lỗi trình duyệt chính xác
Thông báo cho các nhà cung cấp trình duyệt về các vấn đề bạn tìm thấy trong trình duyệt của họ, trên một thiết bị hoặc nền tảng cụ thể là một phần không thể thiếu để cải thiện nền tảng web!
Làm cho PWA của bạn giống như một ứng dụng hơn
Tìm hiểu cách làm cho Ứng dụng web tiến bộ của bạn giống như một ứng dụng "thực tế" bằng cách hiểu cách triển khai các mẫu ứng dụng dành riêng cho nền tảng bằng công nghệ web.
Đo lường hiệu suất bằng mô hình RAIL
Mô hình RAIL cho phép nhà thiết kế và nhà phát triển nhắm mục tiêu đáng tin cậy cho công việc tối ưu hoá hiệu suất có tác động lớn nhất đến trải nghiệm người dùng. Tìm hiểu các mục tiêu và nguyên tắc mà mô hình RAIL đặt ra và những công cụ bạn có thể sử dụng để đạt được các mục tiêu và nguyên tắc đó.
Tăng tốc độ điều hướng trong React bằng Quicklink
Đường liên kết nhanh là một thư viện cho phép tìm nạp trước các đường liên kết trong khung nhìn trong thời gian không hoạt động để tìm nạp trước các đường liên kết trong khung nhìn.
Bảo vệ tài nguyên của bạn khỏi các cuộc tấn công web bằng công cụ Tìm nạp siêu dữ liệu
Siêu dữ liệu tìm nạp là một tính năng mới của nền tảng web được thiết kế để cho phép máy chủ tự bảo vệ khỏi các cuộc tấn công nhiều nguồn gốc.
Sắp xếp lại nội dung
Khi tạo bố cục bằng CSS, bạn cần chú ý để không tạo ra trải nghiệm ngắt kết nối cho những người dùng đang di chuyển bằng bàn phím.
Các điểm cải tiến về API Ảnh động web trong Chromium 84
Việc sắp xếp các ảnh động trên web sẽ dễ dàng hơn nhiều.
Hướng dẫn dành cho nhà phát triển ứng dụng thanh toán trên Android
Tìm hiểu cách điều chỉnh ứng dụng thanh toán Android để hoạt động với Thanh toán trên web và cung cấp trải nghiệm người dùng tốt hơn cho khách hàng.
Vòng đời của một giao dịch thanh toán
Tìm hiểu cách người bán tích hợp ứng dụng thanh toán, cách giao dịch thanh toán hoạt động với API yêu cầu thanh toán và những gì có thể thực hiện trong Thanh toán trên web.
Hỗ trợ ứng dụng thanh toán bằng dịch vụ Thanh toán trên web
Mục đích của Thanh toán trên web là cung cấp trải nghiệm thanh toán suôn sẻ trên web. Tìm hiểu cách hoạt động, lợi ích của ứng dụng và sẵn sàng tích hợp ứng dụng thanh toán của bạn với Thanh toán trên web.
Thêm nhiều tuỳ chọn phông chữ có thể thay đổi cho phông chữ giao diện người dùng hệ thống của macOS trong Chromium 83
Chromium 80 đã có hồi quy độ đậm phông chữ hệ thống trên giao diện người dùng macOS. Lý do lỗi và tính năng siêu phân giải mới hỗ trợ sau độ phân giải rất đáng để chờ đợi trong Chromium 83.
Cách Ứng dụng web tiến bộ có thể thúc đẩy thành công của doanh nghiệp
Xây dựng trường hợp kinh doanh vững chắc cho PWA của bạn. Tìm hiểu thời điểm bạn nên đầu tư và cách bạn có thể đo lường mức độ thành công của khoản đầu tư đó.
Nhanh chóng hoàn thành công việc bằng lối tắt ứng dụng
Lối tắt ứng dụng cho phép truy cập nhanh vào một số thao tác phổ biến mà người dùng cần thường xuyên thực hiện.
Chuẩn bị xoá AppCache
Thông tin chi tiết về kế hoạch của Chrome và các trình duyệt khác về việc xoá AppCache.
Bộ nhớ liên tục
Bộ nhớ liên tục có thể giúp bảo vệ những dữ liệu quan trọng không bị loại bỏ và giảm nguy cơ mất dữ liệu.
Cách xác định chiến lược cài đặt
Các phương pháp hay nhất để kết hợp nhiều dịch vụ lắp đặt nhằm tăng tỷ lệ lắp đặt, đồng thời tránh sự cạnh tranh và tình trạng tự tước đoạt doanh thu của nền tảng.
Cách CommonJS tăng quy mô nhóm
Các mô-đun CommonJS rất linh động, điều này ngăn các trình tối ưu hoá và gói JavaScript thực hiện các hoạt động tối ưu hoá nâng cao đối với chúng.
Tại sao bạn cần tính năng "tách biệt nhiều nguồn gốc" để có được các tính năng mạnh mẽ
Một số API web làm tăng nguy cơ bị tấn công kênh phụ như Spectre. Để giảm thiểu rủi ro đó, các trình duyệt cung cấp một môi trường tách biệt dựa trên lựa chọn tham gia được gọi là tách biệt nhiều nguồn gốc. Tìm hiểu lý do bạn cần tách biệt nhiều nguồn gốc để sử dụng các tính năng mạnh mẽ như "SharedArrayBuffer", "performance.measureUserAgentspecificMemory()" và bộ tính giờ có độ phân giải cao với độ chính xác cao hơn.
Lập hồ sơ ứng dụng âm thanh web trong Chrome
Tìm hiểu cách định cấu hình hiệu suất của các ứng dụng Âm thanh web trong Chrome bằng "about://tracing" và tiện ích **WebAudio** trong Công cụ của Chrome cho nhà phát triển.
Cải thiện hiệu suất tải trang Next.js và Gatsby với tính năng phân đoạn chi tiết
Tìm hiểu cách cả Next.js và Gatsby đã cải thiện kết quả bản dựng nhằm giảm thiểu mã trùng lặp và cải thiện hiệu suất tải trang
"cùng trang web" và "cùng nguồn gốc"
"same-site" và "cùng nguồn gốc" thường được trích dẫn nhưng các thuật ngữ thường bị hiểu nhầm. Trang này giải thích khái niệm và sự khác biệt của hai tính năng này.
Đảm bảo trang web "tách biệt nhiều nguồn gốc" bằng COOP và COEP
Một số API web làm tăng nguy cơ bị tấn công kênh phụ như Spectre. Để giảm thiểu rủi ro đó, các trình duyệt cung cấp một môi trường tách biệt dựa trên lựa chọn tham gia được gọi là tách biệt nhiều nguồn gốc. Sử dụng COOP và COEP để thiết lập một môi trường như vậy và bật các tính năng mạnh mẽ như "SharedArrayBuffer", "performance.measureUserAgentAgentMemory()" hoặc bộ tính giờ có độ phân giải cao với độ chính xác cao hơn.
Theo dõi tổng mức sử dụng bộ nhớ trên trang web của bạn bằng measureUserAgentspecificMemory()
Tìm hiểu cách đo lường mức sử dụng bộ nhớ của trang web trong phiên bản chính thức để phát hiện hiện tượng hồi quy.
blog kỹ thuật web.dev #1: Cách chúng tôi xây dựng trang web và sử dụng Thành phần web
Trong bài đăng đầu tiên này từ nhóm kỹ thuật web.dev, hãy tìm hiểu về cách chúng tôi xây dựng trang web, bao gồm cả việc chúng tôi sử dụng Eleventy và Web Components.
Cải thiện kiểu mặc định của chế độ tối bằng thuộc tính CSS phối màu và thẻ meta tương ứng
Thuộc tính CSS của lược đồ màu và thẻ meta tương ứng cho phép nhà phát triển sử dụng biểu định kiểu tác nhân người dùng cho trang của họ theo giá trị mặc định theo giao diện cụ thể, chẳng hạn như các tuỳ chọn điều khiển biểu mẫu, thanh cuộn cũng như màu hệ thống CSS. Đồng thời, tính năng này ngăn trình duyệt tự áp dụng bất kỳ phép biến đổi nào.
Đảm bảo trang web của bạn truy cập được và mọi người đều dùng được trong thời gian dịch COVID-19 bùng phát
Cách đảm bảo rằng chức năng cốt lõi của trang web luôn có sẵn, có thể truy cập, an toàn, có thể sử dụng, có thể khám phá và hoạt động nhanh chóng.
Khắc phục máy chủ quá tải
Cách xác định nút thắt cổ chai của một máy chủ, nhanh chóng sửa nút thắt này, cải thiện hiệu suất của máy chủ và ngăn chặn sự hồi quy.
Thiết kế đáp ứng dễ tiếp cận
Chúng tôi biết rằng thiết kế đáp ứng để cung cấp trải nghiệm nhiều thiết bị tốt nhất là một ý tưởng hay, nhưng thiết kế đáp ứng cũng mang lại lợi ích về khả năng tiếp cận.
Hỗ trợ tiếp cận bằng màu sắc và độ tương phản
Tìm hiểu cách làm cho các trang của bạn dễ truy cập hơn bằng cách cải thiện việc sử dụng màu sắc và độ tương phản.
Mục tiêu nhấn có thể truy cập được
Điều quan trọng là các phần tử tương tác phải có đủ không gian xung quanh khi được sử dụng trên thiết bị di động hoặc thiết bị màn hình cảm ứng. Việc này sẽ hữu ích cho tất cả mọi người, đặc biệt là những người bị suy giảm chức năng vận động.
Ngăn chặn lỗ hổng tập lệnh trên nhiều trang web dựa trên DOM với Loại đáng tin cậy
Giới thiệu Loại đáng tin cậy: API của trình duyệt để ngăn tập lệnh chéo trang web dựa trên DOM trong các ứng dụng web hiện đại.
Sử dụng PWA trong ứng dụng Android
Cách mở Ứng dụng web tiến bộ trong ứng dụng Android.
Ngăn việc dịch bố cục và nhấp nháy văn bản không hiển thị (FOIT) bằng cách tải trước phông chữ không bắt buộc
Bằng cách tối ưu hoá chu kỳ kết xuất, Chrome 83 loại bỏ việc thay đổi bố cục khi tải trước phông chữ không bắt buộc. Kết hợp với hiển thị phông chữ: tuỳ chọn là cách hiệu quả nhất để đảm bảo hiển thị phông chữ tuỳ chỉnh không có hiện tượng giật.
Cách dùng nginx để thiết lập cơ chế Trao đổi HTTP đã ký (APNS)
Cách tạo chứng chỉ TLS bằng tiện ích AppCompat, cài đặt các công cụ để tạo tệp PWA và định cấu hình nginx để phân phát các tệp bật.
Cách dùng nginx dùng nginx để phân phối cơ chế Trao đổi HTTP đã ký
Cách lấy và phân phát các tệp AppCompat bằng nginx cũng như những thách thức trong việc tìm nạp trước tài nguyên phụ.
Tối ưu hoá hình nền CSS bằng truy vấn nội dung nghe nhìn
Sử dụng các truy vấn nội dung đa phương tiện để gửi hình ảnh chỉ ở kích thước cần thiết, một kỹ thuật thường được gọi là hình ảnh thích ứng.
Khắc phục tốc độ trang web liên chức năng
Cách các phòng ban khác có thể giúp dự án tối ưu hoá tốc độ trang web của bạn thành công lớn hơn.
Cuộn chụp nhanh sau khi thay đổi bố cục
Kể từ Chrome 81, trình cuộn vẫn bị kẹp khi bố cục trang thay đổi. Nói cách khác, bạn không cần phải thêm trình nghe sự kiện để buộc chụp lại.
Cách thiết lập cơ chế trao đổi có chữ ký bằng Web Packager
Tìm hiểu cách phân phát cơ chế trao đổi có chữ ký (họ) bằng Web Packager.
Cách cung cấp trải nghiệm cài đặt trong ứng dụng của riêng bạn
Sử dụng sự kiện beforeinstallPrompt để cung cấp trải nghiệm cài đặt trong ứng dụng liền mạch, tuỳ chỉnh cho người dùng.
Thực tế tăng cường: Có thể bạn đã biết đến tính năng này
Nếu bạn đã sử dụng WebXR Device API, bạn sẽ rất vui khi biết có rất ít điều mới cần tìm hiểu. Bước vào một phiên WebXR gần như không thay đổi. Việc chạy vòng lặp khung hình ảnh cũng tương tự như vậy. Sự khác biệt nằm ở cấu hình cho phép hiển thị nội dung phù hợp với thực tế tăng cường.
Định vị đối tượng ảo trong chế độ xem thực tế
WebXR Hit Test API là một tính năng nâng cao cho tính năng thực tế tăng cường của web, cho phép bạn đặt các đối tượng ảo trong chế độ xem thế giới thực.
Thực tế ảo xuất hiện trên web, phần II
Thực tế ảo đã có mặt trên web trong Chrome 79. Dựa trên WebXR Device API, bản phát hành này là nền tảng cho cả thực tế tăng cường và thực tế ảo. Bài viết này là bài viết thứ hai trong một chuỗi bài viết tập trung vào vòng lặp khung hình, một phần của phiên XR trong đó hình ảnh được giới thiệu cho người xem. Các trình duyệt khác sẽ sớm hỗ trợ WebXR Device API, bao gồm Firefox Reality, Oculus Browser, Edge và trình duyệt Helio của Magic Leap, cùng những trình duyệt khác.
Phát triển hệ sinh thái khung web
Tìm hiểu cách Chrome đang đầu tư nỗ lực vào một số công cụ nguồn mở nhằm thúc đẩy hệ sinh thái JavaScript
Ứng dụng web tiến bộ là gì?
Giới thiệu về Ứng dụng web tiến bộ (PWA) và 3 thành phần chính giúp phân biệt chúng với các ứng dụng web khác.
Tích hợp PWA vào giao diện người dùng chia sẻ tích hợp sẵn bằng Workbox
Cách đăng ký các tuyến trong Workbox để Ứng dụng web tiến bộ của bạn xuất hiện trong giao diện người dùng chia sẻ ở cấp hệ thống, cùng với các ứng dụng dành riêng cho nền tảng.
Hỗ trợ biểu tượng thích ứng trong PWA có biểu tượng có thể chỉnh sửa
Biểu tượng có thể chỉnh sửa là một định dạng cung cấp cho bạn nhiều quyền kiểm soát hơn và cho phép Ứng dụng web tiến bộ của bạn sử dụng biểu tượng thích ứng. Một biểu tượng có thể chỉnh sửa có thể trông đẹp mắt trên tất cả các thiết bị Android.
Cải thiện tính năng loại bỏ trang trong XMLHttpRequest() đồng bộ
Một trang hoặc ứng dụng thường có số liệu phân tích hoặc dữ liệu khác chưa được gửi tại thời điểm người dùng đóng trang. Các trang web sử dụng lệnh gọi đồng bộ tới XMLHttpRequest() để giữ trang hoặc ứng dụng ở trạng thái mở cho đến khi dữ liệu của trang được chuyển đến máy chủ. Điều này ảnh hưởng xấu đến trải nghiệm người dùng và bỏ qua các cách tốt hơn để tiết kiệm dữ liệu. Chrome 80 triển khai một thay đổi gần đây về thông số kỹ thuật để giải quyết vấn đề này.
Tạo luồng web bằng trình chạy mô-đun
Trình chạy mô-đun giúp bạn dễ dàng bỏ chặn luồng chính bằng cách di chuyển mã tốn kém sang luồng trong nền trong khi vẫn giữ được các lợi ích về hiệu suất và hiệu quả làm việc của các mô-đun JavaScript tiêu chuẩn.
Tải thích ứng: cải thiện hiệu suất web trên các thiết bị chậm
Tìm hiểu về mẫu tải thích ứng, cách triển khai cũng như cách Facebook, Tinder, eBay và các công ty khác sử dụng tính năng tải thích ứng trong quá trình sản xuất.
Sự phát triển của công cụ tốc độ: những điểm nổi bật trong Hội nghị Nhà phát triển Chrome năm 2019
Đọc về những bước phát triển mới nhất trong công cụ tốc độ, bao gồm các chỉ số hiệu suất mới, nội dung cập nhật đối với PageSpeed Insights và Báo cáo trải nghiệm người dùng Chrome (CrUX) và thông tin chi tiết từ phân tích Niên lịch web về hệ sinh thái web.
Sử dụng web worker để chạy JavaScript ngoài luồng chính của trình duyệt
Luồng chính của trình duyệt đang làm việc quá sức. Bằng cách sử dụng trình chạy web để chuyển mã khỏi chuỗi chính, bạn có thể cải thiện đáng kể độ tin cậy và trải nghiệm người dùng của ứng dụng.
Phản hồi từ khảo sát tối ưu hóa hình ảnh mùa hè năm 2019
Nhận xét của những người trả lời khảo sát về các kỹ thuật tối ưu hoá hình ảnh khác nhau.
Xây dựng máy chủ thông báo đẩy
Trong lớp học lập trình này, hãy tìm hiểu cách xây dựng máy chủ thông báo đẩy.
Cách AMP có thể đảm bảo độ nhanh trong ứng dụng Next.js của bạn
Tìm hiểu về các lợi ích và sự đánh đổi của việc hỗ trợ AMP trong ứng dụng Next.js của bạn AMP là khung thành phần web đảm bảo tốc độ tải trang nhanh. Next.js có hỗ trợ tích hợp cho AMP. Trước tiên, hướng dẫn này mô tả ngắn gọn cách AMP đảm bảo tốc độ
Tích hợp với giao diện người dùng chia sẻ của hệ điều hành bằng API Chia sẻ web
Với API Chia sẻ web, các ứng dụng web có thể sử dụng khả năng chia sẻ do hệ thống cung cấp như các ứng dụng dành riêng cho nền tảng. API Chia sẻ web giúp các ứng dụng web chia sẻ đường liên kết, văn bản và tệp với các ứng dụng khác được cài đặt trên thiết bị giống như các ứng dụng dành riêng cho nền tảng.
Tìm nạp trước tuyến đường trong Next.js
Cách Next.js tăng tốc điều hướng bằng tính năng tải trước tuyến đường và cách tuỳ chỉnh tính năng này. Trong bài đăng này, bạn sẽ tìm hiểu cách hoạt động của tính năng định tuyến trong Next.js, cách tối ưu hoá tính năng này để tăng tốc độ và cách tuỳ
Hiệu suất làm mặc định với Next.js
Next.js xử lý nhiều hoạt động tối ưu hoá trong ứng dụng React để bạn không phải Next.js là một khung React có sẵn một số tính năng tối ưu hoá hiệu suất. Ý tưởng chính đằng sau khung này là đảm bảo các ứng dụng khởi động và duy trì hiệu suất tốt nhất
Tách mã bằng tính năng nhập động trong Next.js
Cách tăng tốc ứng dụng Next.js bằng cách phân tách mã và chiến lược tải thông minh. Bài đăng này giải thích các loại phân tách mã và cách sử dụng tính năng nhập động để tăng tốc ứng dụng Next.js. Theo mặc định, Next.js sẽ chia JavaScript của bạn
Thực tế ảo xuất hiện trên web
Thực tế ảo đã có mặt trên web trong Chrome 79. Dựa trên API WebXR Devicer, bản phát hành này là nền tảng cho cả thực tế tăng cường và thực tế ảo. Bài viết này là bài viết đầu tiên trong chuỗi bài viết, khám phá các khái niệm cơ bản và mô tả cách tham gia một phiên XR. Các trình duyệt khác sẽ sớm hỗ trợ WebXR Device API, bao gồm Firefox Reality, Oculus Browser, Edge và trình duyệt Helio của Magic Leap, cùng những trình duyệt khác.
Công thức bánh quy SameSite
Giờ đây, các trang web có thể đánh dấu rõ ràng cookie của mình để sử dụng trên nhiều trang web. Hãy tìm hiểu cách đánh dấu cookie của bạn để đảm bảo rằng cookie của bên thứ nhất và bên thứ ba tiếp tục hoạt động sau khi thay đổi này được triển khai.
Tìm hiểu về cookie
Tìm hiểu về cách cookie hoạt động cũng như cookie của bên thứ nhất và bên thứ ba.
Quảng cáo nhanh rất quan trọng
Tìm hiểu giá trị của quảng cáo nhanh và suy nghĩ về tốc độ quảng cáo.
Sử dụng thông báo đẩy để thu hút và thu hút lại người dùng
Sử dụng thông báo đẩy để thu hút người dùng bằng các nội dung cập nhật kịp thời và có mục tiêu.
Làm quen với API Thông báo
Trong lớp học lập trình này, hãy tìm hiểu cách yêu cầu người dùng cấp quyền và gửi thông báo.
Sử dụng Service Worker để quản lý thông báo
Trong lớp học lập trình này, hãy tìm hiểu cách quản lý thông báo bằng trình chạy dịch vụ.
Khắc phục tình trạng bố cục không ổn định
Hướng dẫn từng bước về việc sử dụng WebPageTest để xác định và khắc phục các vấn đề về tính ổn định của bố cục.
Các kỹ thuật giúp ứng dụng web tải nhanh, ngay cả trên điện thoại phổ thông
Điện thoại phổ thông đang trỗi dậy và phổ biến, đặc biệt là ở những thị trường mới nổi, nơi 2G đã trở thành tiêu chuẩn của chúng ta. Dưới đây là những điều chúng tôi rút ra được từ việc tạo PROXX, một bản sao Minesweeper dành cho thiết bị di động, tải nhanh trên điện thoại phổ thông có kết nối 2G.
Thuộc tính tuỳ chỉnh thông minh hơn nhờ API mới của Houdini
Mặc dù hữu ích nhưng biến CSS lại khó sử dụng vì chúng có thể nhận bất kỳ giá trị nào và bị ghi đè, đồng thời bạn không thể sử dụng hiệu ứng chuyển đổi với chúng. API Thuộc tính và giá trị CSS cấp 1 khắc phục những vấn đề này.
2 cách tìm nạp trước: <link> thẻ và tiêu đề HTTP
Tìm hiểu cách tăng tốc độ tìm đường trong tương lai bằng cách tìm nạp trước tài nguyên.
Tìm nạp trước tài nguyên để tăng tốc độ di chuyển trong tương lai
Tìm hiểu về cách tìm nạp trước gợi ý về tài nguyên rel=fetch và cách sử dụng tính năng này.
Nội dung hỗn hợp là gì?
Nội dung hỗn hợp xuất hiện khi HTML ban đầu được tải qua kết nối HTTPS an toàn, nhưng các tài nguyên khác được tải qua kết nối HTTP không an toàn.
Khắc phục nội dung hỗn hợp
Tìm hiểu cách khắc phục lỗi nội dung hỗn hợp trên trang web để bảo vệ người dùng và đảm bảo rằng tất cả nội dung của bạn đều tải.
Vượt ra khỏi hình ảnh bằng video cơ bản cho web
Nghiên cứu cho thấy video trên web dẫn đến mức độ tương tác và doanh số cao hơn. Ngay cả khi bạn chưa thêm video vào trang web của mình, bạn chỉ cần chờ một thời gian để thực hiện việc này.
Thêm biểu tượng cảm ứng của Apple vào Ứng dụng web tiến bộ
Phần minh hoạ tương tác về cách chỉ định biểu tượng nào sẽ xuất hiện trên màn hình chính của iOS.
Sẵn sàng phát trên web
Nền tảng web hiện đang rất phát triển để phát triển trò chơi. Yếu tố then chốt để xây dựng một trò chơi web hiện đại là áp dụng những phương pháp hay nhất về thiết kế và hoạt động kiếm tiền của trò chơi. Bài đăng này cung cấp hướng dẫn đạt được mục tiêu này.
Ứng dụng web tiến bộ trên các trang web nhiều nguồn gốc
Kiến trúc nhiều nguồn gốc đặt ra nhiều thách thức khi xây dựng PWA. Khám phá cách sử dụng tốt và không tốt của nhiều nguồn gốc cũng như một số giải pháp để tạo PWA trên các trang web nhiều nguồn gốc.
Giảm kích thước phông chữ trên web
Bài đăng này giải thích cách giảm kích thước của WebFonts bạn sử dụng trên trang web để kiểu chữ đẹp không đồng nghĩa với việc trang web chậm.
Tối ưu hoá việc tải và hiển thị WebFont
Bài đăng này giải thích cách tải WebFonts để ngăn việc thay đổi bố cục và trang trống khi WebFonts không hoạt động khi trang tải.
Tạo Ứng dụng web tiến bộ bằng CLI Angular
Tìm hiểu cách tạo các ứng dụng Angular luỹ tiến có thể cài đặt.
Xác định JavaScript chậm của bên thứ ba
Tìm hiểu cách sử dụng Lighthouse và Công cụ của Chrome cho nhà phát triển để xác định các tài nguyên bên thứ ba chậm.
Tải JavaScript của bên thứ ba một cách hiệu quả
Tìm hiểu cách cải thiện thời gian tải và trải nghiệm người dùng bằng cách tránh các sai lầm phổ biến khi sử dụng tập lệnh của bên thứ ba.
Sử dụng CDN hình ảnh để tối ưu hoá hình ảnh
Hãy cân nhắc sử dụng CDN hình ảnh để tối ưu hoá hình ảnh của trang web và giảm chi phí dữ liệu cho người dùng.
Hiệu suất JavaScript của bên thứ ba
Bài đăng này mô tả các loại JavaScript bên thứ ba phổ biến và các vấn đề về hiệu suất mà chúng có thể gây ra. Bài viết này cũng cung cấp hướng dẫn chung về cách tối ưu hoá tập lệnh của bên thứ ba.
Các chức năng kiểm soát biểu mẫu hiệu quả hơn
Các tính năng mới trên nền tảng web giúp dễ dàng tạo các phần tử tuỳ chỉnh hoạt động như các chế độ kiểm soát biểu mẫu tích hợp sẵn.
Tối ưu hoá JavaScript của bên thứ ba
Tìm hiểu các kỹ thuật tối ưu hoá tài nguyên chậm của bên thứ ba với sự trợ giúp của Lighthouse.
Thiết lập kết nối mạng sớm để cải thiện tốc độ trang nhận thấy được
Tìm hiểu về các gợi ý về tài nguyên rel=preconnect và rel=dns-prefetch cũng như cách sử dụng chúng.
Tạo nền kiểu hệ điều hành bằng bộ lọc phông nền
Tìm hiểu cách thêm hiệu ứng nền như làm mờ và độ trong suốt vào các thành phần giao diện người dùng trên web bằng cách sử dụng thuộc tính bộ lọc phông nền CSS.
Giữ cho mọi thứ luôn mới bằng tính năng cũ trong khi xác thực lại
lỗi thời trong khi xác thực lại giúp nhà phát triển cân bằng ngay lập tức – tải nội dung được lưu vào bộ nhớ đệm ngay lập tức – và độ mới mẻ – đảm bảo việc cập nhật nội dung đã lưu vào bộ nhớ đệm sẽ được dùng trong tương lai.
Trực quan hoá các danh sách lớn bằng Angular CDK
Tìm hiểu cách làm cho danh sách lớn phản hồi nhanh hơn bằng cách triển khai chức năng cuộn ảo với Bộ công cụ dành cho nhà phát triển thành phần Angular.
Tối ưu hoá khả năng phát hiện thay đổi của Angular
Tìm hiểu cách tối ưu hoá tính năng phát hiện thay đổi của ứng dụng Angular để giúp ứng dụng phản hồi nhanh hơn.
Các chiến lược tải trước tuyến trong Angular
Tìm hiểu cách sử dụng các chiến lược tải trước của Angular để có được ứng dụng nhanh hơn.
Điều chỉnh video cho việc phân phát hình ảnh dựa trên chất lượng mạng
Tìm hiểu cách sử dụng Network Information API để điều chỉnh nội dung của bạn dựa trên chất lượng mạng.
Duyệt web nhanh hơn nhờ tính năng tìm nạp trước có tính dự đoán
Tính năng phân tách mã cho phép bạn tăng tốc độ ứng dụng nhưng có thể làm chậm quá trình điều hướng tiếp theo. Tìm nạp trước theo dự đoán là một cách hiệu quả để sử dụng tính năng phân tích dữ liệu để tìm nạp trước một cách thông minh những gì người dùng có thể sẽ sử dụng tiếp theo, nhờ đó tối ưu hoá mức sử dụng mạng.
Kiểm tra khả năng hỗ trợ tiếp cận của ứng dụng Angular bằng codelyzer
Tìm hiểu cách làm cho ứng dụng Angular có thể truy cập được bằng trình mã hoá.
Ngân sách hiệu suất sử dụng CLI Angular
Tìm hiểu cách sử dụng ngân sách hiệu suất ngay trong CLI Angular!
Chuẩn bị trước bằng trình chạy dịch vụ Angular
Tìm hiểu cách sử dụng trình chạy dịch vụ Angular để lưu trước các tài sản tĩnh trong ứng dụng vào bộ nhớ đệm.
Preferreds-color-scheme: Xin chào bóng tối, bạn cũ của tôi
Nhiều thiết bị hiện hỗ trợ chế độ tối trên toàn hệ điều hành hoặc trải nghiệm giao diện tối. Bài đăng này giải thích cách hỗ trợ chế độ tối trên các trang web, liệt kê các phương pháp hay nhất, đồng thời giới thiệu một phần tử tuỳ chỉnh có tên chế độ tối cho phép các nhà phát triển web đưa ra cho người dùng một cách để ghi đè lựa chọn ưu tiên về cấp hệ điều hành trên các trang web cụ thể.
Phân tách mã cấp tuyến trong Angular
Tìm hiểu cách thu nhỏ gói ứng dụng ban đầu bằng tính năng phân tách mã cấp tuyến.
Bắt đầu: tối ưu hoá ứng dụng Angular
Tìm hiểu cách giúp ứng dụng Angular hoạt động nhanh hơn, đáng tin cậy hơn, dễ tìm kiếm, dễ cài đặt và dễ tiếp cận!
Các mẹo hàng đầu về hiệu suất web
Sử dụng srcset để tự động chọn kích thước hình ảnh phù hợp.
Thành phần web: thành phần bí mật giúp tăng cường sức mạnh cho web
Bài đăng này tóm tắt nội dung trao đổi về tình hình của các thành phần web trong năm 2019, do Kevin Schaaf của Dự án Polymer và Caridy Patiño của Salesforce đưa ra.
Sử dụng Lighthouse cho ngân sách hiệu suất
Lighthouse hiện đã hỗ trợ ngân sách hiệu suất. Bạn có thể thiết lập tính năng này, LightWallet, trong vòng 5 phút và cung cấp nguồn cấp dữ liệu về kích thước cũng như số lượng tài nguyên trang.
Nội dung cập nhật đối với API thanh toán trên web
Kể từ khi ra mắt API yêu cầu thanh toán trong Chrome 53 và API Trình xử lý thanh toán trong Chrome 68, đã có khá nhiều thay đổi đối với thông số kỹ thuật tương ứng. Bài đăng này tóm tắt các nội dung cập nhật đó và sẽ tiếp tục tích luỹ những thay đổi API đó.
Giá trị của tốc độ
Trình bày doanh thu từ việc cải thiện trang web, đồng thời loại trừ các yếu tố bên ngoài, chẳng hạn như chiến dịch tiếp thị.
Cài đặt thanh địa chỉ cho Ứng dụng web tiến bộ trên máy tính
Ứng dụng web tiến bộ dễ cài đặt nhờ một nút cài đặt mới trên thanh địa chỉ của Chrome.
Hiệu suất có thể cải thiện chuyển đổi bằng cách nào?
Tìm hiểu tác động của hiệu suất trang web đến các phần khác nhau của phễu thương mại điện tử
Làm cách nào để thông báo cho người dùng rằng PWA của tôi có thể cài đặt?
Cách quảng bá việc cài đặt Ứng dụng web tiến bộ và các phương pháp hay nhất.
Các mẫu quảng cáo việc cài đặt PWA
Cách quảng bá việc cài đặt Ứng dụng web tiến bộ và các phương pháp hay nhất.
Tư duy của nhân viên dịch vụ
Làm việc với trình chạy dịch vụ là điều mới và xa lạ đối với nhiều nhà phát triển web. Bài đăng này cung cấp một số mẹo giúp bạn tập trung vào những thông tin này.
Chính sách hình ảnh về thời gian tải nhanh và nhiều lợi ích khác
Hình ảnh chiếm một lượng không gian trực quan đáng kể và chiếm phần lớn dung lượng byte được tải xuống trên một trang web. Áp dụng các chính sách mới về tính năng để xác định hình ảnh quá kích thước.
Trích xuất và cùng dòng CSS quan trọng bằng các thẻ Quan trọng
Tìm hiểu cách dùng Critical để trích xuất và cùng dòng CSS quan trọng, cũng như cải thiện thời gian kết xuất.
Tác vụ JavaScript dài có làm chậm Thời gian tương tác của bạn không?
Tìm hiểu cách chẩn đoán hoạt động tương tác tốn kém, ngăn chặn công việc của người dùng.
Trích xuất CSS quan trọng
Tìm hiểu cách cải thiện số lần hiển thị bằng kỹ thuật CSS quan trọng và cách chọn công cụ tốt nhất cho dự án của bạn.
Tốc độ trên quy mô lớn: hiệu suất web mới có gì?
Tại Google I/O năm 2019, chúng tôi đã giới thiệu ba sáng kiến mới về Hiệu suất web mà chúng tôi hy vọng sẽ mang đến trải nghiệm người dùng tốt hơn cho mọi người.
Giới thiệu PROXX
PROXX là một trò chơi kiểu quét mìn được tạo dưới dạng PWA. Tính năng này hoạt động trên nhiều loại thiết bị và cải thiện dần hình ảnh hiển thị trên thiết bị.
Tìm kiếm trực quan với Bộ công cụ Nhận thức web
Chẳng phải sẽ tốt hơn nếu người dùng có thể tìm kiếm trang web của bạn bằng máy ảnh của họ phải không?
Đã giải thích cookie SameSite
Tìm hiểu cách đánh dấu cookie để bên thứ nhất và bên thứ ba sử dụng bằng thuộc tính SameSite. Bạn có thể tăng cường tính bảo mật cho trang web của mình bằng cách sử dụng các giá trị Lax và Strict của SameSite để cải thiện khả năng bảo vệ chống lại các cuộc tấn công CSRF. Việc chỉ định thuộc tínhNone mới cho phép bạn đánh dấu rõ ràng cookie của mình để sử dụng trên nhiều trang web.
Phân phát thích ứng dựa trên chất lượng mạng
Sử dụng Network Information API để điều chỉnh các tài sản được phân phối cho người dùng dựa trên chất lượng kết nối của họ.
Thực hành với Cổng: điều hướng liền mạch trên web
API Cổng mới được đề xuất giúp giao diện người dùng của bạn đơn giản trong khi cho phép điều hướng liền mạch với các hiệu ứng chuyển đổi tuỳ chỉnh. Trong bài viết này, hãy thực hành trải nghiệm thực tế về việc sử dụng Cổng vào để cải thiện trải nghiệm người dùng trên trang web của bạn.
Giảm thiểu và nén tải trọng mạng bằng brotli
Trong lớp học lập trình này, hãy tìm hiểu cách nén Brotli có thể giảm thêm tỷ lệ nén và kích thước tổng thể của ứng dụng.
web.dev tại I/O 2019
Đối với Google I/O 2019, các thành viên trong nhóm web.dev đã gửi một số bản cập nhật bao gồm thiết kế mới, nhiều tài liệu Lighthouse hơn và một blog hoàn toàn mới.
Tốc độ là gì?
Tốc độ rất quan trọng, nhưng chính xác thì chúng tôi nói thế này có nghĩa là gì? Việc có một trang web tải nhanh có nghĩa là gì?
Làm thế nào để luôn hoạt động nhanh?
Những thương hiệu tối ưu hoá tốc độ thường sẽ nhanh chóng bị thu hẹp lại. Trong bài đăng này, chúng ta sẽ tìm hiểu cách đảm bảo bạn có trải nghiệm nhanh chóng.
Làm thế nào để đo tốc độ?
Hiệu suất trong thực tế rất biến đổi do sự khác biệt về thiết bị của người dùng, kết nối mạng và các yếu tố khác. Trong bài đăng này, chúng ta sẽ khám phá những công cụ có thể giúp bạn thu thập dữ liệu trong phòng thí nghiệm hoặc dữ liệu tại hiện trường để đánh giá hiệu suất của trang.
Kiểm tra khả năng hỗ trợ tiếp cận bằng react-axe và eslint-plugin-jsx-a11y
React-axe là một thư viện kiểm tra ứng dụng React và ghi lại mọi vấn đề về hỗ trợ tiếp cận vào bảng điều khiển dành cho Công cụ của Chrome cho nhà phát triển. eslint-plugin-jsx-a11y là một trình bổ trợ ESLint xác định và thực thi một số quy tắc hỗ trợ tiếp cận trực tiếp trong JSX. Việc sử dụng kết hợp các mã này có thể mang đến một phương pháp kiểm tra toàn diện để tìm và khắc phục mọi vấn đề về khả năng hỗ trợ tiếp cận trong ứng dụng của bạn.
Thêm tệp kê khai ứng dụng web bằng tính năng Tạo ứng dụng React
Theo mặc định, tính năng Tạo ứng dụng React sẽ có một tệp kê khai ứng dụng web. Việc sửa đổi tệp này sẽ cho phép bạn thay đổi cách ứng dụng hiển thị khi được cài đặt trên thiết bị của người dùng.
Các tuyến đường kết xuất trước có React-snap
React-snap là một thư viện của bên thứ ba kết xuất trước các trang trên trang web của bạn thành các tệp HTML tĩnh. Việc này có thể cải thiện thời gian hiển thị lần hiển thị đầu tiên trong ứng dụng của bạn.
Trực quan hoá danh sách lớn bằng cửa sổ phản ứng
React-window là một thư viện cho phép kết xuất các danh sách lớn một cách hiệu quả.
Phân chia mã bằng React.lazy và Suspense
Phương thức React.lazy giúp bạn dễ dàng phân tách mã ứng dụng React ở cấp thành phần bằng cách sử dụng tính năng nhập động. Hãy sử dụng kết hợp với Suspense (Hồi hộp) để cho người dùng thấy những trạng thái tải phù hợp.
Dự đoán trước trong Tạo ứng dụng phản ứng bằng Workbox
Workbox được tích hợp vào Create React App (Tạo ứng dụng React) có cấu hình mặc định giúp lưu trước tất cả nội dung tĩnh trong ứng dụng qua mỗi bản dựng.
Bắt đầu: tối ưu hoá ứng dụng React
React là một thư viện nguồn mở giúp bạn xây dựng giao diện người dùng dễ dàng hơn. Lộ trình học tập này sẽ đề cập đến nhiều API và công cụ trong hệ sinh thái mà bạn nên cân nhắc sử dụng để cải thiện hiệu suất và khả năng hữu dụng của ứng dụng.
Lớp học lập trình: Tải trước các thành phần quan trọng để cải thiện tốc độ tải
Trong lớp học lập trình này, hãy tìm hiểu cách cải thiện hiệu suất của một trang bằng cách tải trước và tìm nạp trước tài nguyên.
ưu tiên-chuyển động giảm: Đôi khi ít chuyển động lại nhiều hơn
Truy vấn phương tiện ưu tiên giảm chuyển động phát hiện xem người dùng có yêu cầu hệ thống giảm thiểu số lượng ảnh động hoặc chuyển động mà hệ thống sử dụng hay không. Lựa chọn này dành cho những người dùng yêu cầu hoặc muốn sử dụng ảnh động thu nhỏ; ví dụ: những người bị rối loạn tiền đình thường muốn hạn chế ảnh động ở mức tối thiểu.
Trì hoãn CSS không quan trọng
Tìm hiểu cách trì hoãn CSS không quan trọng với mục tiêu tối ưu hoá Đường dẫn hiển thị quan trọng và cải thiện Nội dung đầu tiên (FCP).
Lòng tin tốt, quan sát tốt hơn: Intersection Observer phiên bản 2
Trình quan sát giao lộ phiên bản 2 thêm khả năng không chỉ quan sát các giao lộ, mà còn phát hiện xem phần tử giao nhau có hiển thị tại thời điểm giao nhau hay không.
Thông tin cơ bản về thiết kế web đáp ứng
Tạo các trang web đáp ứng nhu cầu và khả năng của thiết bị mà người dùng sử dụng để xem trang web.
Biểu định kiểu có thể tạo
Biểu định kiểu có thể tạo mang đến một cách thức liền mạch để tạo và phân phối các kiểu cho tài liệu hoặc gốc bóng đổ mà không phải lo lắng về FOUC.
Kết xuất trên web
Đề xuất triển khai logic và kết xuất trong ứng dụng.
Kết hợp ngân sách hiệu suất vào quy trình xây dựng
Cách tốt nhất để theo dõi ngân sách hiệu suất là tự động hóa ngân sách. Hãy tìm hiểu cách chọn một công cụ phù hợp nhất với nhu cầu và chế độ thiết lập hiện tại của bạn.
Sử dụng kích thước gói với Travis CI
Xác định ngân sách hiệu suất bằng cách thiết lập ở mức tối thiểu và thực thi ngân sách này trong quy trình phát triển bằng cách sử dụng kích thước gói với Travis CI.
Đặt ngân sách hiệu suất bằng gói web
Tìm hiểu cách đặt ngân sách hiệu suất và kiểm soát kích thước gói bằng gói web.
Sử dụng Lighthouse Bot để đặt ngân sách hiệu suất
Bạn đã nỗ lực để tăng tốc độ nhanh chóng, giờ hãy đảm bảo rằng bạn luôn vận hành nhanh chóng bằng cách tự động hoá quy trình kiểm tra hiệu suất trong Travis CI bằng Lighthouse Bot.
Emscripten và npm
Bạn tích hợp WebAssembly vào chế độ thiết lập này bằng cách nào? Trong bài viết này, chúng ta sẽ giải quyết vấn đề này với C/C++ và Emscripten làm ví dụ.
Ứng dụng của bạn đã được cài đặt chưa? getInstalledBasicApps() cho bạn biết!
API getInstalledLinksApps() là API nền tảng web cho phép bạn kiểm tra xem ứng dụng dành cho iOS/Android/máy tính hoặc PWA của bạn đã được cài đặt trên thiết bị của người dùng hay chưa.
Phân phát mã hiện đại cho các trình duyệt hiện đại để tải trang nhanh hơn
Trong lớp học lập trình này, hãy tìm hiểu cách cải thiện hiệu suất của một ứng dụng bằng cách giảm thiểu lượng mã được dịch mã.
Thích ứng với người dùng bằng Gợi ý của khách hàng
Gợi ý ứng dụng là một tập hợp các tiêu đề của yêu cầu HTTP mà chúng ta có thể sử dụng để thay đổi cách phân phối tài nguyên trang dựa trên các đặc điểm về kết nối mạng và thiết bị của người dùng. Trong bài viết này, bạn sẽ tìm hiểu tất cả về gợi ý của ứng dụng khách, cách chúng hoạt động và một vài ý tưởng về cách bạn có thể sử dụng gợi ý cho ứng dụng khách để khiến trang web của bạn nhanh hơn cho người dùng.
Nguyên tắc cơ bản về quyền truy cập bằng bàn phím
Nhiều người dùng dựa vào bàn phím để thao tác trong ứng dụng, từ những người dùng bị suy giảm chức năng vận động tạm thời và vĩnh viễn cho đến những người dùng phím tắt để tăng hiệu quả và hiệu quả làm việc. Việc có một chiến lược điều hướng bằng bàn phím hiệu quả cho ứng dụng sẽ tạo ra trải nghiệm tốt hơn cho mọi người.
Các lựa chọn thay thế nhãn và văn bản
Để trình đọc màn hình trình bày giao diện người dùng bằng giọng nói cho người dùng, các phần tử có ý nghĩa phải có nhãn hoặc văn bản thay thế phù hợp. Nhãn hoặc văn bản thay thế đặt cho một phần tử có tên thành phần hỗ trợ tiếp cận. Đây là một trong các thuộc tính chính để thể hiện ngữ nghĩa của phần tử trong cây hỗ trợ tiếp cận.
Sử dụng HTML có ngữ nghĩa để dễ dàng thao tác trên bàn phím
Nếu sử dụng đúng các phần tử HTML ngữ nghĩa, bạn có thể đáp ứng hầu hết hoặc tất cả nhu cầu truy cập bàn phím của mình. Điều đó có nghĩa là bạn sẽ không phải tốn thời gian với các chỉ mục thẻ và làm cho người dùng hài lòng hơn!
Ngữ nghĩa và trình đọc màn hình
Có bao giờ bạn dừng lại để tự hỏi công nghệ hỗ trợ, chẳng hạn như trình đọc màn hình, biết những thông báo gì cho người dùng hay không? Câu trả lời là những công nghệ này dựa vào việc nhà phát triển đánh dấu các trang của họ bằng HTML ngữ nghĩa. Nhưng ngữ nghĩa là gì và trình đọc màn hình sử dụng chúng như thế nào?
Hỗ trợ tiếp cận là gì?
Trang web có thể truy cập là trang web có nội dung có thể truy cập được bất kể khiếm khuyết nào của người dùng, đồng thời chức năng của trang web cũng có thể được nhiều người dùng nhất có thể vận hành.
Tiêu đề và mốc
Bằng cách sử dụng các phần tử chính xác cho tiêu đề và mốc, bạn có thể cải thiện đáng kể trải nghiệm điều hướng cho những người dùng công nghệ kết hợp.
Kiểm soát tiêu điểm bằng chỉ mục thẻ
Các phần tử HTML chuẩn được tích hợp sẵn tính năng hỗ trợ tiếp cận về bàn phím. Khi xây dựng các thành phần tương tác tuỳ chỉnh, hãy sử dụng lập chỉ mục thẻ để đảm bảo rằng các thành phần đó có thể truy cập được bằng bàn phím.
Tiêu điểm kiểu
Chỉ báo lấy nét (thường được biểu thị bằng "vòng lấy nét") xác định phần tử hiện được lấy tiêu điểm. Đối với những người dùng không thể sử dụng chuột, chỉ báo này cực kỳ quan trọng vì nó đóng vai trò như một điểm thay thế cho con trỏ chuột.
Hộp làm việc: bộ công cụ trình chạy dịch vụ cấp cao
Workbox là một bộ công cụ trình chạy dịch vụ cấp cao được xây dựng dựa trên Service Worker và API Bộ nhớ Bộ nhớ đệm. Công cụ này cung cấp một bộ thư viện sẵn sàng phát hành để thêm tính năng hỗ trợ ngoại tuyến cho các ứng dụng web.
Các cuộc tấn công bảo mật là gì?
Ứng dụng không an toàn có thể khiến người dùng và hệ thống gặp nhiều loại thiệt hại. Khi một bên độc hại sử dụng lỗ hổng bảo mật hoặc thiếu tính năng bảo mật làm lợi thế của họ để gây thiệt hại, đó được gọi là một cuộc tấn công. Chúng ta sẽ xem xét các loại tấn công khác nhau trong hướng dẫn này để bạn biết những điều cần tìm khi bảo mật ứng dụng của mình.
Giảm tải JavaScript bằng cách phân tách mã
Việc gửi các tải trọng JavaScript lớn sẽ ảnh hưởng đáng kể đến tốc độ trang web của bạn. Thay vì gửi toàn bộ JavaScript đến người dùng ngay khi trang đầu tiên của ứng dụng được tải, hãy chia gói thành nhiều phần và chỉ gửi những thông tin cần thiết ngay từ đầu.
Đảm bảo dễ cài đặt
Trong lớp học lập trình này, hãy tìm hiểu cách làm cho một trang web có thể cài đặt được bằng sự kiện beforeinstallPrompt.
Làm việc với trình chạy dịch vụ
Trong lớp học lập trình này, hãy tìm hiểu cách làm cho một ứng dụng trở nên đáng tin cậy bằng cách đăng ký một trình chạy dịch vụ.
Khám phá bảng điều khiển Mạng cho nhà phát triển
Trong lớp học lập trình này, hãy tìm hiểu cách gán lưu lượng truy cập mạng bằng cách sử dụng Công cụ cho nhà phát triển của Chrome.
Sử dụng hình ảnh WebP
Hình ảnh WebP nhỏ hơn so với hình ảnh JPEG và PNG, thường ở mức độ giảm 25–35% kích thước tệp. Điều này làm giảm kích thước trang và cải thiện hiệu suất.
Hướng nghệ thuật
Trong lớp học lập trình này, hãy tìm hiểu cách tải các hình ảnh hoàn toàn khác nhau dựa trên kích thước màn hình của thiết bị.
Dùng Imagemin để nén hình ảnh
Hình ảnh không nén làm đầy các trang của bạn bằng nhiều byte không cần thiết. Chạy Lighthouse để kiểm tra các cơ hội cải thiện tốc độ tải trang bằng cách nén hình ảnh.
Sử dụng bộ mô tả mật độ
Trong lớp học lập trình này, hãy tìm hiểu cách sử dụng trình mô tả mật độ và srcset để tải hình ảnh có mật độ pixel phù hợp cho thiết bị của người dùng.
Dùng Bộ nhớ đệm HTTP để ngăn các yêu cầu không cần thiết về mạng
Bộ nhớ đệm HTTP của trình duyệt là hàng phòng ngự đầu tiên chống lại các yêu cầu mạng không cần thiết.
Giảm tải JavaScript bằng cách phân tách mã
Trong lớp học lập trình này, hãy tìm hiểu cách cải thiện hiệu suất của một ứng dụng đơn giản thông qua quá trình phân tách mã.
Tải trước các nội dung quan trọng để cải thiện tốc độ tải
Ngay sau khi bạn mở một trang web bất kỳ, trình duyệt sẽ yêu cầu một tài liệu HTML từ máy chủ, phân tích cú pháp nội dung của tệp HTML và gửi các yêu cầu riêng cho bất kỳ tệp tham chiếu bên ngoài nào khác. Chuỗi yêu cầu quan trọng thể hiện thứ tự các tài nguyên mà trình duyệt ưu tiên và tìm nạp.
Áp dụng tính năng tải tức thì bằng mẫu PRPL
PRPL là từ viết tắt mô tả một mẫu được dùng để giúp trang web tải và trở nên tương tác nhanh hơn. Trong hướng dẫn này, hãy tìm hiểu cách từng kỹ thuật kết hợp với nhau nhưng vẫn có thể sử dụng độc lập để đạt được kết quả hiệu suất.
Khắc phục lỗi 404 lén lút
Trong lớp học lập trình này, hãy tìm hiểu cách theo dõi lỗi 404 lén lút có thể ngăn Google lập chỉ mục trang của bạn đúng cách.
Phân phát hình ảnh có kích thước chính xác
Tất cả chúng ta đều đã ở đó—bạn quên thu nhỏ hình ảnh trước khi thêm hình ảnh đó vào trang. Hình ảnh trông có vẻ ổn nhưng làm lãng phí dữ liệu của người dùng và làm giảm hiệu suất của trang.
Ngân sách hiệu suất đầu tiên của bạn
Đảm bảo trang web của bạn tải nhanh nhờ hướng dẫn từng bước để xác định ngưỡng cho những chỉ số hiệu suất có ý nghĩa đối với trang web.
Chính sách cùng nguồn gốc
Một trình duyệt có thể tải và hiển thị tài nguyên từ nhiều trang web. Nếu không có hạn chế về hoạt động tương tác giữa các tài nguyên đó và nếu một tập lệnh bị kẻ tấn công xâm phạm, thì tập lệnh đó có thể làm lộ mọi thông tin trên trình duyệt của người dùng.
Khám phá các cơ hội về hiệu suất với Lighthouse
Lighthouse là một công cụ giúp bạn đo lường và tìm cách cải thiện hiệu suất của trang. Lighthouse cung cấp cho bạn báo cáo về hiệu quả hoạt động của trang. Báo cáo cung cấp điểm số cho từng chỉ số và danh sách các cơ hội mà, nếu bạn triển khai chúng, sẽ làm cho trang tải nhanh hơn.
Hộp cát của trình duyệt
Để chống lại các cuộc tấn công, nhà phát triển cần giảm thiểu lỗ hổng và thêm tính năng bảo mật vào ứng dụng. Thật may, trình duyệt cung cấp nhiều tính năng bảo mật trên web, trong đó có ý tưởng về "hộp cát".
Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS)
Chính sách cùng nguồn gốc của trình duyệt chặn việc đọc tài nguyên từ một nguồn gốc khác vì mục đích bảo mật. Khi bạn bật CORS, máy chủ có thể thông báo cho trình duyệt biết rằng nó có thể sử dụng một nguồn gốc khác.
Thông tin cơ bản về ngân sách hiệu suất
Hiệu suất tốt hiếm khi là tác dụng phụ. Tìm hiểu về ngân sách hiệu suất và cách ngân sách này có thể giúp bạn đi đúng hướng để thành công.
Phân phát mã hiện đại cho các trình duyệt hiện đại để tải trang nhanh hơn
Tạo trang web hoạt động tốt trên tất cả các trình duyệt chính là nguyên lý cốt lõi của hệ sinh thái web mở. Tuy nhiên, điều này có nghĩa là bạn phải thực hiện thêm công việc để đảm bảo rằng tất cả mã bạn viết đều được hỗ trợ trong mỗi trình duyệt mà bạn định nhắm mục tiêu. Nếu muốn sử dụng các tính năng mới của ngôn ngữ JavaScript, bạn cần chuyển đổi các tính năng này thành các định dạng có khả năng tương thích ngược.