Hiệu suất web là một khía cạnh quan trọng trong quá trình phát triển web. Tập trung vào tốc độ tải trang cũng như mức độ phản hồi của trang với hoạt động đầu vào của người dùng. Khi tối ưu hoá trang web cho hiệu suất, bạn đang mang lại cho người dùng trải nghiệm tốt hơn. Trải nghiệm người dùng tốt hơn sẽ giúp bạn đạt được các mục tiêu đã đề ra cho trang web của mình.
Hiệu suất web có vẻ như là một chủ đề ngách, nhưng thực tế, đây là chủ đề rộng và khá chuyên sâu. Do chiều sâu của một lĩnh vực chủ đề, điều quan trọng là một khoá học về hiệu suất web vừa dễ tiếp cận vừa giàu thông tin. Bản phát hành đầu tiên của khoá học này tập trung vào những nguyên tắc cơ bản về hiệu suất web mà những người mới bắt đầu nên tìm hiểu thêm.
Mỗi mô-đun trong chuỗi nội dung này hướng đến việc cung cấp một bộ bản minh hoạ bổ sung nội dung của từng mô-đun và minh hoạ các khái niệm chính về hiệu suất (khi khả thi). Vì khoá học này chỉ là chương trình cung cấp đầu tiên nên chúng tôi hiện dự định phát hành các học phần bổ sung trong những tháng tới.
Sau đây là nội dung của khoá học đầu tiên về Học hỏi hiệu suất:
Tại sao tốc độ lại quan trọng
Để có thể bắt đầu tìm hiểu hiệu suất học tập, trước tiên, bạn phải hiểu vai trò của chỉ số này đối với trải nghiệm người dùng và cách chỉ số này có thể mang lại kết quả tốt hơn cho người dùng. Khoá học này bắt đầu bằng phần giới thiệu ngắn gọn về những chủ đề này, cung cấp bối cảnh quan trọng giải thích tầm quan trọng của việc tìm hiểu về hiệu suất.
Những điểm cần cân nhắc chung về hiệu suất của HTML
Mỗi trang web đều bắt đầu bằng một yêu cầu về tài liệu HTML. Yêu cầu đó đóng vai trò quan trọng đối với tốc độ tải của trang web. Mô-đun này đề cập đến các khái niệm quan trọng như lưu HTML vào bộ nhớ đệm, chặn trình phân tích cú pháp, chặn hiển thị và nhiều tính năng khác. Vì vậy, bạn có thể đảm bảo thực hiện yêu cầu đầu tiên cho HTML của trang web một cách thuận tiện.
Tìm hiểu lộ trình quan trọng
Đường dẫn hiển thị quan trọng là một khái niệm về hiệu suất web liên quan đến tốc độ hiển thị ban đầu của một trang trong trình duyệt. Mô-đun này đi sâu vào lý thuyết về đường dẫn hiển thị quan trọng, bao gồm các khái niệm như các tài nguyên chặn hiển thị và chặn trình phân tích cú pháp, cũng như vai trò quan trọng của các tài nguyên này đối với tốc độ xuất hiện của một trang trong trình duyệt.
Tối ưu hoá quá trình tải tài nguyên
Khi một trang tải, nhiều tài nguyên sẽ được tham chiếu trong HTML để cung cấp cho một trang giao diện và bố cục thông qua CSS, cũng như khả năng tương tác của trang đó thông qua JavaScript. Trong học phần này, chúng tôi trình bày một số khái niệm quan trọng liên quan đến các tài nguyên này và tác động của chúng đối với thời gian tải của một trang.
Hỗ trợ trình duyệt bằng các gợi ý về tài nguyên
Gợi ý về tài nguyên là một tập hợp các tính năng có sẵn trong HTML có thể hỗ trợ trình duyệt tải tài nguyên sớm hơn và thậm chí có thể có mức độ ưu tiên tài nguyên cao hơn. Trong mô-đun này, chúng tôi đã đề cập đến một số gợi ý về tài nguyên có thể giúp trang của bạn tải nhanh hơn nữa.
Hiệu suất của hình ảnh
Hình ảnh đại diện cho một phần lớn dữ liệu được chuyển trên nhiều trang web hiện nay. Mô-đun này trình bày cách tối ưu hoá hình ảnh cũng như phân phát hình ảnh một cách hiệu quả để bạn giảm thiểu số byte lãng phí, bất kể thiết bị của người dùng là gì.
Hiệu suất video
Video là một loại nội dung nghe nhìn được dùng thường xuyên trên các trang web. Tuy nhiên, việc biết cách phân phát quảng cáo một cách hiệu quả là một khía cạnh về hiệu suất mà bạn không nên bỏ qua. Mô-đun này đề cập đến một số kỹ thuật chính để nhúng video sao cho trang web của bạn luôn hoạt động nhanh, cũng như các yếu tố cần cân nhắc liên quan về hiệu suất khi sử dụng những video này.
Tối ưu hoá phông chữ trên web
Phông chữ trên web là một tài nguyên thường được sử dụng trên web và cũng chính là tài nguyên đó, vì chúng bổ sung vào thiết kế của trang web theo cách mà các tài nguyên khác không làm được. Mặc dù vậy, phông chữ trên web vẫn ảnh hưởng đến hiệu suất. Trong học phần này, bạn sẽ tìm hiểu một số điểm cần cân nhắc về hiệu suất và kỹ thuật liên quan đến phông chữ trên web.
JavaScript phân tách mã
Một số tài nguyên không quan trọng đối với lượt tải ban đầu của một trang web. JavaScript là một trong những tài nguyên như vậy có thể được trì hoãn cho đến thời điểm cần thiết thông qua một kỹ thuật được gọi là phân tách mã. Nhờ vậy, bạn có thể cải thiện hiệu suất bằng cách giảm băng thông và mức tranh chấp CPU. Đây là một yếu tố quan trọng cần cân nhắc để cải thiện cả tốc độ tải trang ban đầu và khả năng phản hồi của dữ liệu đầu vào trong quá trình khởi động.
Tải từng phần hình ảnh và các phần tử <iframe>
Hình ảnh và các phần tử <iframe> có thể tiêu tốn đáng kể băng thông và thời gian xử lý của CPU. Tuy nhiên, không phải tất cả hình ảnh và các phần tử <iframe> đều cần được tải trong lần tải trang đầu tiên và có thể bị trì hoãn đến một thời điểm sau đó mà người dùng dễ nhìn thấy những hình ảnh đó nhất. Kỹ thuật này được gọi là tải từng phần. Trong mô-đun này, hình ảnh và phần tử <iframe> tải từng phần được giải thích để bạn có thể làm cho các trang tải nhanh hơn và chỉ tiêu tốn băng thông và thời gian xử lý khi cần.
Tìm nạp trước, kết xuất trước và lưu trước trình chạy dịch vụ
Mặc dù phần lớn hiệu suất tập trung vào những việc bạn có thể làm để tối ưu hoá và loại bỏ tài nguyên không cần thiết, nhưng việc đề xuất rằng một số tài nguyên nên được tải trước khi cần thiết. Tuy nhiên, trong một số trường hợp, bạn có thể tải trước một số tài nguyên nhất định. Trong mô-đun này, bạn sẽ tìm hiểu khía cạnh này của hiệu suất, vì quá trình tìm nạp trước, kết xuất trước và lưu trước của trình chạy dịch vụ sẽ được thảo luận.
Tổng quan về trình thực thi web
Đa số nội dung người dùng nhìn thấy trong trình duyệt đều xảy ra trên một luồng duy nhất được gọi là luồng chính. Tuy nhiên, có những cơ hội mà bạn có thể bắt đầu các luồng mới để thực hiện các công việc tính toán tiêu tốn tài nguyên nhằm đảm bảo luồng chính có thể đáp ứng các tác vụ quan trọng mà người dùng nhìn thấy. API thực hiện việc này được gọi là API Web Worker. Trong mô-đun này, chúng tôi đã đề cập đến thông tin cơ bản về API.
Trường hợp sử dụng cụ thể về trình thực thi web
Giờ đây, khi bạn đã có kiến thức cơ bản về trình thực thi web cũng như khả năng và hạn chế của trình thực thi này, đã đến lúc tìm hiểu về trường hợp sử dụng cụ thể cho trình thực thi web. Trong bản minh hoạ này, một trình chạy web được dùng để tìm nạp tệp JPEG, trích xuất siêu dữ liệu của tệp đó rồi gửi lại vào luồng chính để người dùng có thể xem tệp đó trong trình duyệt.
Bạn đã sẵn sàng bắt đầu tìm hiểu hiệu suất của trang web chưa? Hãy bắt đầu bằng cách đọc bài viết Tại sao tốc độ lại quan trọng trước tiên.