Cách kiểm tra tốc độ website

Cách kiểm tra tốc độ website

Học cách kiểm tra tốc độ website của bạn không khó như bạn nghĩ. Hướng dẫn ngắn này sẽ cung cấp cho bạn những kiến ​​thức cơ bản và chỉ bạn đi đúng hướng.

Không có số liệu duy nhất

Điều đầu tiên cần hiểu là không có số liệu hoặc phép đo duy nhất nào cho “tốc độ”. Không có con số đơn giản nào mà bạn có thể sử dụng để đo tốc độ tải cho trang của mình.

Hãy nghĩ về những gì sẽ xảy ra khi bạn tải một website. Có rất nhiều giai đoạn khác nhau và nhiều bộ phận khác nhau có thể được đo lường. Nếu kết nối mạng chậm nhưng hình ảnh tải nhanh thì webite sẽ “nhanh” đến mức nào? Còn trường hợp ngược lại thì sao?

Ngay cả khi bạn cố gắng đơn giản hóa tất cả những điều này thành một cái gì đó như “thời gian đến khi nó được tải xong hoàn toàn”, vẫn rất khó để đưa ra một con số hữu ích.

Ví dụ: một trang mất nhiều thời gian hơn để “tải xong” có thể cung cấp phiên bản chức năng “nhẹ”’ trong khi toàn bộ trang vẫn đang được tải xuống ở đằng sau. Vậy thì trường hợp này là “nhanh hơn” hay “chậm hơn” so với một website tải nhanh hơn, nhưng lại không thể sử dụng được cho đến khi nó tải xong hoàn toàn?

Câu trả lời là “tuỳ”, và có nhiều cách khác nhau để chúng ta có thể nghĩ đến hoặc đo “tốc độ website”.

Hiểu rõ quá trình tải trang

Từ thời điểm bạn nhấp vào một liên kết (hoặc nhấn enter trong thanh URL của bạn), một quá trình tải trang bạn yêu cầu bắt đầu.

Quá trình đó bao gồm nhiều bước, nhưng chúng có thể được nhóm lại thành các giai đoạn rộng giống như sau:

Hình 1: “Dòng thời gian một giây - one second timeline” từ tài liệu tốc độ trang web của Google

Hình 1: “Dòng thời gian một giây – one second timeline” từ tài liệu tốc độ trang web của Google

Mặc dù tài liệu của Google có thể có một chút tham vọng về thời gian của các giai đoạn này, nhưng mô hình này rất hữu ích. Về cơ bản, quá trình này có thể được mô tả với ba giai đoạn tải.

1. Mạng

Trước hết, phần cứng của thiết bị của bạn cần được kết nối với Internet. Thông thường, cái này này liên quan đến việc di chuyển dữ liệu thông qua cáp quang xuyên Đại Tây Dương. Có nghĩa là bạn bị giới hạn bởi tốc độ ánh sáng và tốc độ xử lý thông tin của thiết bị.

Thật khó để đo lường hoặc tác động đến phần này của quá trình!

2. Server – Máy chủ

Tại đây, thiết bị của bạn yêu cầu server của bạn cung cấp một trang, sau đó server của bạn chuẩn bị và trả về phản hồi.

Phần này có thể có một chút thiên về kỹ thuật, vì nó tập trung vào hiệu suất của phần cứng server, databases (cơ sở dữ liệu) và scripts (tập lệnh). Bạn có thể sẽ cần sự trợ giúp từ hosting provider (nhà cung cấp dịch vụ lưu trữ) hoặc team kỹ thuật của mình.

Hình 2: Đo lường hiệu suất của server bằng công cụ NewRelic

Hình 2: Đo lường hiệu suất của server bằng công cụ NewRelic

Bạn có thể đo hiệu suất của máy chủ bằng các công cụ như NewRelic hoặc DataDog, các công cụ này giám sát cách website của bạn hoạt động và phản hồi từ “bên trong”.

Chúng sẽ cung cấp các biểu đồ và số liệu xung quanh những thứ như truy vấn database chậmscripts chậm. Khi đã được trang bị về thông tin này, bạn có thể hiểu rõ hơn nếu máy chủ hosting của bạn có lỗi và bạn có cần thực hiện thay đổi code cho theme/plugins/scripts của mình hay không.

Hình 3: Plugin Query Monitor cho WordPress

Hình 3: Plugin Query Monitor cho WordPress

WordPress cũng có một số plugin tuyệt vời để thực hiện loại phân tích này như Query Monitor. Nó cung cấp một số insight tuyệt vời về những phần nào có thể làm bạn chậm lại của WordPress – cho dù đó là theme, plugin, hay môi trường của bạn.

3. Trình duyệt

Giai đoạn này là nơi trang cần được xây dựng, bố cục, tô màu và hiển thị. Cách mà hình ảnh tải, trong đó JavaScript và CSS được xử lý, và mỗi thẻ HTML riêng lẻ trên trang của bạn ảnh hưởng đến tốc độ tải của mọi thứ.

Chúng tôi có thể giám sát một số điều này từ “bên ngoài” bằng các công cụ scan website và đo lường cách nó tải. Bạn nên sử dụng nhiều công cụ, vì mỗi công cụ đo lường mọi thứ theo các cách khác nhau, và khá là hữu ích cho các đánh giá khác nhau. Ví dụ:

  • WebPageTest là lựa chọn tuyệt vời để cung cấp chế độ xem “thác nước” của website và cách tất cả nội dung tải.
  • Google PageSpeed ​​Insights hơi đơn giản, nhưng nó cung cấp “số liệu người dùng thực” trên website của bạn, trực tiếp từ Google.
  • Lighthouse cho Chrome cung cấp một phân tích cực kỳ tinh vi về hiệu suất và hành vi của website, nhưng có thể khó để bạn tiêu hoá hết được!
  • Chrome Developer Console cho bạn biết chính xác những gì đang xảy ra khi website của bạn tải trong trình duyệt của bạn trên máy tính.
  • Speed report trong Google Search Console cho bạn biết các trang của bạn tải nhanh hay chậm trong một thời gian nhất định.
Hình 4: Kết quả WebPageTest cho trang yoast.com

Hình 4: Kết quả WebPageTest cho trang yoast.com

Những loại công cụ này rất tốt để phát hiện những thứ như hình ảnh nào cần được tối ưu hóa, nơi CSS hoặc JavaScript của bạn chậm hoặc nơi bạn đang chờ tải nội dung từ các miền khác.

Chỉ số chung

Có một vài số liệu phổ biến có ý nghĩa cho tất cả các website trong việc đo lường, và tối ưu hóa. Đó là:

  • Thời gian cho đến byte đầu tiên, là khoảng thời gian cho đến khi máy chủ phản hồi với một số thông tin. Ngay cả khi giao diện tương tác người dùng của bạn hoạt động nhanh, chỉ số này sẽ cản trở bạn. Có thể đo lường bằng Query Monitor hoặc NewRelic.
  • Thời gian cho đến khi bức vẽ content (có ý nghĩa) đầu tiên hiện ra, là thời gian mất bao lâu để content hình ảnh chính (ví dụ: hình ảnh anh hùng hoặc tiêu đề trang) xuất hiện trên màn hình. Đo lường với Lighthouse dành cho Chrome.
  • Thời gian cho đến khi tương tác, là khoảng thời gian để trải nghiệm hiển thị phản ứng với thông tin đầu vào (input) của bạn. Đo lường bằng Lighthouse dành cho Chrome.

Đây là những số liệu phức tạp hơn nhiều so với “thời gian tải” và có lẽ là quan trọng hơn khi lấy người dùng làm trọng tâm. Việc cải thiện các chỉ số này phải tương quan trực tiếp với sự hài lòng của người dùng, điều này cực kỳ quan trọng đối với SEO.

Hình 5: Báo cáo Lighthouse cho yoast.com hiển thị các chỉ số chính

Hình 5: Báo cáo Lighthouse cho yoast.com hiển thị các chỉ số chính

Bạn có thể đọc thêm về các chỉ số này trong Google’s documentation.

Kết luận

  1. Sử dụng công cụ “bên ngoài”, như WebPageTest để tạo sơ đồ thác nước về cách website tải.
  2. Xác định các nút thắt với serversback end. Tìm ra thời gian kết nối chậm, SSL chậm, và các tra cứu DNS chậm. Sử dụng plugin như Query Monitor hoặc dịch vụ như NewRelic để chẩn đoán những gì đang cản trở. Thực hiện thay đổi về server, phần cứng, phần mềm và script.
  3. Xác định các nút thắt với phần front end. Tìm kiếm thời gian tải chậm và thời gian xử lý hình ảnh chậm, scripts và stylesheets. Sử dụng công cụ như Google PageSpeed ​​Insights hoặc Lighthouse dành cho Chrome để có đề xuất về cách hợp lý hóa cách tải trang.
  4. Sử dụng Lighthouse dành cho Chrome để đo lường các chỉ số chính của bạn, như thời gian cho đến khi hình ảnh content có ý nghĩa đầu tiên xuất hiệnthời gian cho đến khi tương tác.
Về tác giả

Hoa Võ

Là một Digital Marketer, tôi rất vinh dự khi có thể đóng góp cho cộng đồng số những kiến thức mới và chất lượng nhất trong ngành. Hi vọng rằng những điều chia sẻ của tôi sẽ là hành trang hữu ích cho những bạn đang dấn thân vào lĩnh vực thú vị này.