Giới thiệu
Một ứng dụng web nhanh là một ứng dụng web thành công. Với tư cách là nhà phát triển, công việc của bạn chưa thể hoàn thành cho đến khi bạn tối ưu hoá cả hiệu suất thực tế lẫn hiệu suất cảm nhận được 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 được mức giảm 1% doanh số cho mỗi 100 mili giây độ trễ trang web, còn Google đo lường mức giảm 20% lưu lượng truy cập cho mỗi 0,5 giây độ trễ (trích dẫn). Đó là những số liệu thực có ý nghĩa thực tế đối với doanh nghiệp và ứng dụng web của bạn.
Tốc độ web là một yếu tố rất quan trọng nên Google thậm chí còn nỗ lực hết mình để tăng tốc độ của trang 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ó 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, trong đó có hai cuốn sách hay (Trang web hiệu suất cao và Trang web cả nhanh hơn). Các kỹ thuật trên máy chủ (triển khai các tiêu đề kiểm soát bộ nhớ đệm chính xác) 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 đầu cuối để tối ưu hoá hiệu suất. Với rất nhiều mẹo và thủ thuật, đôi khi thật khó để đánh giá cách tất cả chúng ánh xạ đến thực tế 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à cung cấp các đề xuất tùy chỉnh để nâng cao hiệu suất và giảm độ trễ. Bài viết này sẽ đề cập đến Bảng điều khiển, tương tự như phạm vi của công cụ YSlow rất phổ biến và 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 sự hài lòng của người dùng.
Lưu ý: 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 họa cách Nhóm kiểm tra có thể đề xuất các cải tiến về hiệu suất của ứng dụng web, chúng tôi sẽ chuyển công cụ này cho www.html5rocks.com riêng của mình. Chúng tôi sẽ sử dụng Bảng điều khiển kiểm tra để giúp trang web của mình nhanh hơn nữa.
Khởi động Công cụ cho nhà phát triển dễ dàng như sử dụng biểu tượng Chrome (phía trên bên phải của cửa sổ Chrome) và chọn Công cụ > 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 Công cụ cho nhà phát triển, 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 điều khiển 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 phân tích của ứng dụng web của bạn. Việc chạy tất cả phương pháp phỏng đoán có thể chậm, đặc biệt là đối với ứng dụng web lớn như Gmail, do đó, công cụ này sẽ bị tắt theo mặc định.
Hãy cùng tìm hiểu kỹ hơn bằng cách nhấp vào nút Run (Chạy). Nút này sẽ tải lại ứng dụng web sau khi bật phương pháp phỏng đoán hiệu suất. Sau khi trang tải lại, bạn sẽ thấy một danh sách đề xuất tương tự như ảnh chụp màn hình bên dưới.
Bạn sẽ nhận thấy rằng Bảng điều khiển kiểm tra sẽ phân loại các đề xuất theo mức độ nghiêm trọng, trong đó 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ã này bằng màu giúp bạn sắp xếp thứ tự ưu tiên cho các đề xuất, tập trung vào mục quan trọng nhất (và lợi ích lớn nhất) trước tiên.
Số trong ngoặc đơn (theo đề xuất) là số trường hợp mà Công cụ kiểm tra đã phát hiện. Ví dụ: có 12 trường hợp "Tận dụng bộ nhớ đệm của trình duyệt". Điều này cho 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ó nhiều chiến lược nổi tiếng và được thử nghiệm 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 đến tất cả những việc đó trong bài viết này, nhưng bạn có thể dễ dàng tìm thêm thông tin và chi tiết. Các tài nguyên hữu ích để tìm hiểu thêm về các chi tiết cụ thể của tính năng tối ưu hoá ứng dụng web gồm có Hướng dẫn cùng tăng tốc độ của trang web và Độ trễ của khả năng mở rộng cao ở mọi nơi và tốn kém chi phí bán hàng.
Bảng điều khiển kiểm tra 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 Hội đồng kiểm tra, để cải thiện việc sử dụng mạng, chúng ta nên:
- tận dụng bộ nhớ đệm của trình duyệt
- tận dụng bộ nhớ đệm 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 có 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 kiểu và tập lệnh
- xóa các quy tắc CSS không dùng đến
Hãy tìm hiểu một trong những chiến lược mà chúng ta có thể tập trung để cải thiện hiệu suất của htmlrock.com.
Tận dụng bộ nhớ đệm của trình duyệt
Ví dụ: trước tiên, hãy tìm hiểu kỹ đề xuất tận dụng 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 đây:
- Các tài nguyên sau đây bị thiếu thời gian hết hạn của bộ nhớ đệm. Các tài nguyên không chỉ định ngày hết hạn có thể không được lưu vào bộ nhớ đệm bởi các trình duyệt.
- Các tài nguyên có thể lưu trong bộ nhớ đệm sau đây có thời gian cập nhật ngắn.
- Rõ ràng là không thể lưu các tài nguyên sau vào bộ nhớ đệm. Cân nhắc việc lưu các tệp đó 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, từ đó giúp nhà phát triển giảm chi phí băng thông và người dùng có thể phản hồi nhanh hơn. Thật không may, công cụ này không cho bạn biết chính xác việc bạn cần làm. Vì vậy, chúng tôi cần tìm hiểu kỹ các đề xuất và sử dụng kiến thức của mình về cách tối ưu hoá hiệu suất của ứng dụng web để áp dụng các đề xuất này.
Chức năng lưu vào bộ nhớ đệm
Không cần đi sâu vào bộ nhớ đệm của HTTP, chắc chắn chúng ta có thể tìm hiểu một số kiến thức cơ bản. Giao thức HTTP bao gồm hướng dẫn lưu vào bộ nhớ đệm, cho phép máy chủ và ứng dụng khách giảm lượng dữ liệu cần phải truyền qua đường truyền. Ví dụ: máy chủ có thể yêu cầu ứng dụng lưu tài nguyên cục bộ trong một khoảng thời gian nhất định, do đó loại bỏ nhu cầu yêu cầu lại tài nguyên. Ứng dụng 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. Tốt nhất là nếu một tài nguyên ở dạng tĩnh, thì máy chủ nên yêu cầu ứng dụng lưu trữ tài nguyên cục bộ 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 đường truyền bằng cách lưu trữ tài nguyên cục bộ trên ứng dụng".
Khắc phục tài nguyên không thể lưu vào bộ nhớ đệm
Hãy cùng xem xét kỹ nội dung đề xuất và tìm hiểu cách kết nối Đề xuất kiểm tra với các công cụ khác trong Công cụ cho nhà phát triển. Cụ thể, hãy xem cách khắc phục "các tài nguyên sau đây rõ ràng là không thể lưu vào bộ nhớ đệm".
Do 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.html5rock.com/. Bạn chỉ cần nhấp vào tài nguyên đó để xem yêu cầu ban đầu cũng như tiêu đề và thông tin chi tiết của phản hồi.
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 bổ sung. 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ách "không lưu vào bộ nhớ đệm trang chủ của html5rock.com". Để 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ồi, máy chủ đã gửi tiêu đề "Cache-Control: no-cache" đến máy khách. Như bạn có thể tưởng tượng, điều này sẽ cho ứng dụng biết phải luôn yêu cầu tài nguyên và không lưu tài nguyên vào bộ nhớ đệm cục bộ. Cụ thể, thông số kỹ thuật HTTP cho "no-cache" như sau:
"Nếu lệnh 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 chặn việc lưu vào bộ nhớ đệm ngay cả bằng những bộ nhớ đệm đã được định cấu hình để trả về phản hồi cũ cho các yêu cầu của máy khách."
Đây chính là lý do Ban kiểm tra khuyến nghị bật chức năng lưu vào bộ nhớ đệm vì nếu không thì máy chủ và ứng dụng sẽ gửi thông tin có thể dư thừa.
Chúng tôi đã xác nhận được nguyên nhân gốc rễ của đề xuất Kiểm tra. Làm cách nào để khắc phục vấn đề này? 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 bao gồm tiêu đề Hết hạn và Kiểm soát bộ nhớ đệm: riêng tư 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.
Đề xuất chỉ có vậy, đề xuất
Hãy nhớ rằng Ban kiểm tra đề xuất cách cải thiện dựa trên phương pháp phỏng đoán chung. Chiến lược này áp dụng các phương pháp hay nhất mà bạn học được qua nhiều năm cho ứng dụng web cụ thể của mình. Trong hầu hết các trường hợp, những đề xuất này đều có sẵn và nên được áp dụng.
Tuy nhiên, có một vài trường hợp mà đề xuất có thể đúng nhưng không thực sự dẫn đến bất kỳ cải thiện nào. Ví dụ: nếu trang của bạn chỉ có một hình ảnh lớn, thì Nhóm kiểm tra đề xuất bạ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 phải tải xuống và kiểm tra hình ảnh). Mặc dù nhìn chung, đây là lời khuyên hữu ích, nhưng sẽ không có tác dụng gì nếu hình ảnh là thành phần 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õ chúng. Và đừng quên đo lường hiệu suất trước và sau khi thay đổi để đảm bảo thực sự có sự 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 chỉ cho bạn 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. Tối ưu hoá hiệu suất của ứng dụng không chỉ là việc nên làm cho người dùng, mà còn là việc cần làm vì lợi nhuận của doanh nghiệp.