Giới thiệu
Ứng dụng web nhanh là ứng dụng web thành công. Công việc của bạn với tư cách là nhà phát triển chưa hoàn tất cho đến khi bạn tối ưu hoá cả hiệu suất thực tế và hiệu suất được cảm nhận của ứng dụng. Đây không chỉ là việc cần làm để đảm bảo người dùng có trải nghiệm tuyệt vời, mà còn có những lý do kinh doanh rất thực tế và quan trọng để tối ưu hoá. Amazon đo lường thấy doanh số giảm 1% cho mỗi 100 mili giây độ trễ của trang web và Google đo lường thấy lưu lượng truy cập giảm 20% cho mỗi 0, 5 giây độ trễ (thông tin tham khảo). Đó là những con số thực tế có ý nghĩa thực tế đối với doanh nghiệp và ứng dụng web của bạn.
Tốc độ web rất quan trọng, Google thậm chí còn dành toàn bộ nỗ lực để tăng tốc độ web. Nếu bạn cần thêm một lý do khác để tối ưu hoá hiệu suất của ứng dụng, thì Google đã thông báo rằng tốc độ trang đã được thêm vào thuật toán xếp hạng của họ.
Có nhiều phương pháp hay nhất đã được xuất bản để tối ưu hoá hiệu suất của ứng dụng web, bao gồm cả hai cuốn sách hay (Trang web hiệu suất cao và Trang web nhanh hơn nữa). Các kỹ thuật trên máy chủ (triển khai đúng tiêu đề kiểm soát bộ nhớ đệm) và trên máy khách (cung cấp thuộc tính chiều rộng và chiều cao của hình ảnh) được kết hợp thành một chiến lược toàn diện để tối ưu hoá hiệu suất. Với rất nhiều mẹo và thủ thuật, đôi khi bạn khó có thể đánh giá cách tất cả các mẹo và thủ thuật đó liên quan đến cuộc sống thực và ứng dụng web thực của bạn.
May mắn thay, Công cụ của Chrome cho nhà phát triển (có trong mọi phiên bản của Chrome) cung cấp một công cụ tuyệt vời để kiểm tra ứng dụng web của bạn và đưa ra các đề xuất tuỳ chỉnh nhằm nâng cao hiệu suất và giảm độ trễ. Bài viết này sẽ trình bày về Bảng điều khiển kiểm tra, có phạm vi tương tự như công cụ YSlow rất phổ biến, cũng như cách bạn có thể sử dụng công cụ này để tăng tốc trang web, giảm độ trễ và tăng mức độ hài lòng của người dùng.
Xin lưu ý rằng công cụ Bảng điều khiển kiểm tra hiện chỉ có trong Chrome, nhưng chúng tôi dự kiến các trình duyệt WebKit khác sẽ tích hợp công cụ này.
Bắt đầu
Để minh hoạ cách Bảng điều khiển kiểm tra có thể đề xuất các biện pháp cải thiện hiệu suất của ứng dụng web, chúng ta sẽ hướng công cụ này đến www.html5rocks.com của riêng mình. Chúng ta sẽ sử dụng Bảng điều khiển kiểm tra để giúp trang web của mình hoạt động nhanh hơn nữa.
Bạn có thể khởi động DevTools một cách dễ dàng bằng cách sử dụng biểu tượng Chrome (ở trên cùng bên phải cửa sổ Chrome) rồi chọn Tools (Công cụ) > Developer Tools (Công cụ cho nhà phát triển).

Để biết thêm thông tin về cách bắt đầu sử dụng DevTools, vui lòng đọc tài liệu chính thức.
Bảng điều khiển Kiểm tra nằm trong bảng nút công cụ chính. Bạn sẽ nhận thấy rằng sau khi được chọn, Bảng điều khiển kiểm tra chưa chạy qua quy trình phân tích ứng dụng web của bạn. Việc chạy tất cả các phương pháp phỏng đoán có thể diễn ra chậm, đặc biệt là đối với một ứng dụng web lớn như GMail, vì vậy, công cụ này bị tắt theo mặc định.

Hãy tìm hiểu sâu hơn bằng cách nhấp vào nút Chạy. Thao tác này sẽ tải lại ứng dụng web khi bật tính năng phỏng đoán hiệu suất. Sau khi trang tải lại, bạn sẽ thấy danh sách các đề xuất tương tự như ảnh chụp màn hình bên dưới.

Bạn sẽ thấy rằng Bảng điều khiển kiểm tra phân loại các đề xuất theo mức độ nghiêm trọng, trong đó các đề xuất nghiêm trọng nhất được đánh dấu bằng dấu chấm màu đỏ và các đề xuất có mức độ nghiêm trọng trung bình được đánh dấu bằng dấu chấm màu vàng. Mã màu này giúp bạn ưu tiên các đề xuất, tập trung vào những đề xuất quan trọng nhất (và mang lại lợi ích lớn nhất) trước tiên.
Số trong ngoặc đơn, theo sau đề xuất, là số lượng thực thể mà Công cụ kiểm tra phát hiện được. Ví dụ: có 12 thực thể của "Tận dụng tính năng lưu vào bộ nhớ đệm của trình duyệt". Điều này giúp bạn biết tần suất có thể áp dụng đề xuất.
Chiến lược tốc độ
Như đã đề cập trước đó, có rất nhiều chiến lược nổi tiếng và được kiểm thử kỹ lưỡng để tối ưu hoá hiệu suất của ứng dụng web. Chúng tôi sẽ không đề cập chi tiết tất cả các tính năng này trong bài viết này, nhưng bạn có thể dễ dàng tìm thấy thêm thông tin và chi tiết. Sau đây là một số tài nguyên hữu ích để tìm hiểu thêm về thông tin cụ thể về việc tối ưu hoá ứng dụng web: Hướng dẫn về cách tăng tốc độ web và Độ trễ của khả năng mở rộng quy mô cao có ở mọi nơi và khiến bạn mất doanh số.
Bảng điều khiển Kiểm tra phân nhóm các đề xuất thành hai danh mục là Mức sử dụng mạng và Hiệu suất trang web.
Theo Bảng điều khiển kiểm tra, để cải thiện Mức sử dụng mạng, chúng ta nên:
- tận dụng tính năng lưu vào bộ nhớ đệm của trình duyệt
- tận dụng tính năng lưu vào bộ nhớ đệm của proxy
- giảm thiểu kích thước cookie
- phân phát nội dung tĩnh từ một miền không sử dụng cookie
- chỉ định kích thước hình ảnh
Để cải thiện hiệu suất của Trang web, chúng ta nên:
- tối ưu hoá thứ tự của các kiểu và tập lệnh
- xoá các quy tắc CSS không dùng đến
Hãy xem xét một trong những chiến lược mà chúng ta có thể tập trung vào để cải thiện hiệu suất của htmlrocks.com.
Tận dụng tính năng lưu vào bộ nhớ đệm của trình duyệt
Ví dụ: trước tiên, hãy tìm hiểu đề xuất về việc tận dụng tính năng lưu vào bộ nhớ đệm của trình duyệt. Cụ thể, điều này có nghĩa là gì? Khi mở tuỳ chọn này trong giao diện người dùng, chúng ta sẽ thấy các thông tin chi tiết sau:

- Các tài nguyên sau đây bị thiếu thời gian hết hạn bộ nhớ đệm. Các tài nguyên không chỉ định thời gian hết hạn có thể không được trình duyệt lưu vào bộ nhớ đệm.
- Các tài nguyên sau đây có thể lưu vào bộ nhớ đệm có thời gian làm mới ngắn.
- Các tài nguyên sau đây rõ ràng là không thể lưu vào bộ nhớ đệm. Cân nhắc lưu các tệp này vào bộ nhớ đệm nếu có thể.
Lưu tài nguyên vào bộ nhớ đệm là một cách tuyệt vời để cải thiện mức sử dụng mạng, giúp nhà phát triển giảm chi phí băng thông và người dùng có thời gian phản hồi nhanh hơn. Rất tiếc, công cụ này không cho bạn biết chính xác những việc cần làm. Vì vậy, chúng ta cần tìm hiểu một chút về các đề xuất và sử dụng kiến thức của mình về việc tối ưu hoá hiệu suất ứng dụng web để áp dụng các đề xuất này.
Lưu vào bộ nhớ đệm
Không cần đi sâu vào việc lưu vào bộ nhớ đệm HTTP, chúng ta chắc chắn có thể đề cập đến một số kiến thức cơ bản. Giao thức HTTP bao gồm các hướng dẫn lưu vào bộ nhớ đệm, cho phép máy chủ và máy khách giảm lượng dữ liệu cần truyền qua mạng. Ví dụ: máy chủ có thể yêu cầu ứng dụng lưu tài nguyên trên máy trong một khoảng thời gian nhất định, nhờ đó không cần phải yêu cầu tài nguyên đó lần nữa. Ứng dụng khách cũng có thể hỏi xem tài nguyên của máy chủ có mới hơn tài nguyên được lưu trữ cục bộ hay không. Lý tưởng nhất là nếu một tài nguyên là tĩnh, thì máy chủ phải yêu cầu ứng dụng lưu trữ tài nguyên đó trên máy và tránh yêu cầu máy chủ cung cấp tài nguyên đó trong tương lai. Như bạn có thể tưởng tượng, có rất nhiều thông tin chi tiết về việc lưu vào bộ nhớ đệm HTTP, nhưng chủ đề chung là "giảm lượng dữ liệu được gửi qua mạng bằng cách lưu trữ tài nguyên cục bộ trên máy khách".
Khắc phục các tài nguyên không lưu vào bộ nhớ đệm
Hãy xem xét một đề xuất một cách chuyên sâu và tìm hiểu cách kết nối đề xuất của tính năng Kiểm tra với các công cụ khác trong DevTools. Cụ thể, hãy xem cách khắc phục lỗi "các tài nguyên sau đây rõ ràng là không thể lưu vào bộ nhớ đệm".
Vì việc lưu vào bộ nhớ đệm được thực hiện thông qua giao thức HTTP, nên chúng ta cần xem xét yêu cầu và phản hồi HTTP cho tài nguyên http://www.html5rocks.com/. Bạn chỉ cần nhấp vào tài nguyên để xem các tiêu đề và thông tin chi tiết về yêu cầu và phản hồi ban đầu.

Sau đó, bạn sẽ được chuyển đến bảng điều khiển Mạng, Tài nguyên hoặc Nguồn (tuỳ thuộc vào loại tài nguyên được nhấp vào) cùng với thông tin chi tiết hơn. Trong trường hợp này, chúng ta sẽ được chuyển đến bảng điều khiển Mạng.

Chúng tôi đang cố gắng xác nhận rằng máy chủ đã yêu cầu ứng dụng "không lưu trang chủ của html5rocks.com vào bộ nhớ đệm". Để thực hiện việc này, chúng ta nhấp vào tài nguyên để xem Tiêu đề phản hồi, vì đây là các tiêu đề và hướng dẫn do máy chủ gửi.

Cache-Control
.Chắc chắn rằng máy chủ đã gửi tiêu đề "Cache-Control: no-cache" đến ứng dụng. Như bạn có thể tưởng tượng, điều này sẽ yêu cầu ứng dụng luôn yêu cầu tài nguyên và không lưu vào bộ nhớ đệm cục bộ. Cụ thể, thông số kỹ thuật HTTP cho "no-cache" (không lưu vào bộ nhớ đệm) có nội dung như sau:
"Nếu chỉ thị no-cache không chỉ định tên trường, thì bộ nhớ đệm KHÔNG ĐƯỢC sử dụng phản hồi để đáp ứng yêu cầu tiếp theo nếu không xác thực lại thành công với máy chủ gốc. Điều này cho phép máy chủ gốc ngăn việc lưu vào bộ nhớ đệm ngay cả khi bộ nhớ đệm đã được định cấu hình để trả về các phản hồi cũ cho các yêu cầu của ứng dụng."
Đây chính là lý do mà Bảng điều khiển kiểm tra đề xuất bật tính năng lưu vào bộ nhớ đệm, nếu không, máy chủ và ứng dụng khách sẽ gửi thông tin có thể thừa.
Giờ đây, khi đã xác nhận được nguyên nhân chính của đề xuất trong quy trình Kiểm tra, chúng ta sẽ khắc phục vấn đề này như thế nào? Trong trường hợp này, giải pháp liên quan đến cấu hình hoặc mã phía máy chủ. Tuỳ thuộc vào cách thiết lập, bạn có thể bật tính năng lưu vào bộ nhớ đệm thông qua cấu hình của máy chủ web hoặc thông qua các cấu hình trong khung ứng dụng web. Cụ thể, bạn nên thêm tiêu đề Expires và Cache-Control: private với tham số max-age cho mọi tài nguyên mà bạn muốn lưu vào bộ nhớ đệm.
Nội dung đề xuất chỉ là nội dung đề xuất
Hãy nhớ rằng Bảng điều khiển kiểm tra đề xuất các điểm cải thiện dựa trên phương pháp phỏng đoán chung. Công cụ này áp dụng các phương pháp hay nhất, được học hỏi qua nhiều năm, cho ứng dụng web cụ thể của bạn. Trong hầu hết trường hợp, các đề xuất này đều chính xác và bạn nên lưu ý.
Tuy nhiên, trong một số trường hợp, đề xuất có thể chính xác nhưng thực sự không cải thiện được hiệu suất. Ví dụ: nếu trang của bạn chỉ có một hình ảnh lớn, thì bạn nên thêm các thuộc tính chiều rộng và chiều cao vào thẻ <img>
(để công cụ kết xuất biết kích thước hình ảnh mà không cần tải xuống và kiểm tra hình ảnh). Mặc dù đây thường là lời khuyên hay, nhưng sẽ không hữu ích nhiều nếu hình ảnh là phần tử duy nhất trên trang.
Hãy nhớ áp dụng các đề xuất này sau khi bạn hiểu rõ. Ngoài ra, đừng quên đo lường hiệu suất trước và sau khi thực hiện các thay đổi để đảm bảo hiệu suất thực sự được cải thiện.
Tóm tắt
Bảng điều khiển kiểm tra là một công cụ tuyệt vời và dễ sử dụng, giúp bạn nhanh chóng biết cách tối ưu hoá hiệu suất của ứng dụng web. Tốc độ là một thuộc tính quan trọng của ứng dụng web, vì nhiều công ty đã tìm thấy mối tương quan trực tiếp giữa hiệu suất và doanh thu hoặc hoạt động. Việc tối ưu hoá hiệu suất của ứng dụng không chỉ là điều phù hợp cho người dùng mà còn là điều phù hợp cho lợi nhuận của doanh nghiệp.