Categories Tối ưu thêm

Xem xét “điểm tương tác” trên trang khi tăng tốc Website

xem xét điểm tương tác trên trang

#1. Điểm tương tác trên trang (website) là gì?

  • Điểm tương tác trên trang (page interaction page) là khoảnh khắc người dùng có thể tương tác với chức năng cốt lõi (core functionality) của một trang web.
  • Khả năng tương tác (interaction) nghĩa là thấy nội dung  có khả năng tương tác với nó (click vào nút bấm, thực hiện một lựa chọn, điều hướng, vân vân).
  • Điểm tương tác trên trang là khoảnh khắc có tính khái niệm hơn là sự kiện tải trang có tính kỹ thuật (technical pageload event).

Mục đích thực sự, xét cho cùng của toàn bộ mục tiêu (entire point) làm cho trang web nhanh hơn là để nó có thể giúp người dùng tương tác được nhanh hơn.


#2. Hãy thử đặt phòng khách sạn

Một ví dụ tốt là chúng ta hãy vào trang đặt phòng khách sạn, nơi bạn có thể thấy mọi thứ trên trang, nhưng vị trí để bạn thực sự thao tác hành động đặt phòng sẽ không khả dụng trong khoảng vài giây sau khi trang tải xong.

Nếu toàn bộ lý do mà một người sử dụng trang là để đặt phòng khách sạn, thế thì trang có thể tốt trong việc “tải về” và “hiển thị” nhưng nó lại có thể không sử dụng được các chức năng mà người đó mong muốn sử dụng trên trang.

Trong trường hợp như vậy, thực sự là không có sự phân biệt giữa việc tải trang và việc trang có thể được sử dụng.

Trang có thể tải trong vòng hai giây, nhưng nếu người sử dụng trang để đặt phòng khách sạn không thể đặt phòng cho đến hết giây thứ bảy, thì dường như là không chính xác nếu tuyên bố rằng trang tải xong trong vòng hai giây.


#3. Tầm quan trọng của “điểm tương tác trên trang”

  • Nó nhấn mạnh rằng trải nghiệm mà người dùng có với một trang web là mục tiêu cốt lõi của việc tối ưu hóa tốc độ tải trang.
  • Sẽ là phương thức hữu ích và có ý nghĩa hơn khi so sánh hai kịch bản dựa trên trải nghiệm người dùng hơn là các sự kiện tải trang mang tính kỹ thuật.
  • Ý thức được rằng chức năng cốt lõi của trang là chỉ số cơ bản nhất – sẽ là tiêu chí giúp quyết định xem điều gì là tốt nhất cho trang.

#4. Làm thế nào để tối ưu hóa cho điểm tương tác trên trang

  1. Xác định rõ chức năng cốt lõi của trang là gì?
  2. Xác định rõ có thể loại bỏ đoạn mã nào khỏi tuyến hiển thị quan trọng mà không ảnh hưởng đến chức năng cốt lõi của trang.
  3. Trì hoãn (lazy load) mọi thứ không cần thiết với chức năng cốt lõi.

#5. Thực hiện quyết định dựa vào điểm tương tác trên trang

Xử lý JavaScript là một trong nhiệm vụ cơ bản và nền tảng nhất để tăng tốc độ website.

Cách thức mà JavaScript nên được xử lý hoàn toàn phụ thuộc vào chức năng cốt lõi của trang, tuy nhiên các thực hành tốt nhất hiện không thừa nhận điều đó.

Sử dụng điểm tương tác trên trang có nghĩa là trước hết chúng ta xác định rõ chức năng cốt lõi của trang rồi sau đó mới đưa ra các quyết định.

Bên dưới chúng ta sẽ xem xét quyết định cho việc sử dụng JavaScript.


#6. Javascript

Cách JavaScript nên được sử dụng là rất khác biệt, nó phụ thuộc vào mục đích JavaScript được sử dụng trên trang là gì.

Hãy nhìn vào hai trang dưới đây. Một trang không sử dụng JavaScript như là thành phần cốt lõi của trang, còn trang khác thì có.

chức năng cốt lõi javascript

Giờ chúng ta hãy nhìn chi tiết hơn vào mỗi trang này…


#7. Trang cho mục đích hiển thị bài viết

Nếu chức năng cốt lõi của trang là hiển thị bài viết cho mọi người và JavaScript của trang được sử dụng để hiển thị quảng cáo, nút bấm mạng xã hội, vân vân thế thì điều quan trọng cần phải hiểu là JavaScript không phải là chức năng cốt lõi của trang.

chức năng cốt lõi của bài viết
  • Điều này nghĩa là JavaScript nên được trì hoãn và hoàn toàn loại bỏ được khỏi tuyến hiển thị quan trọng.

Loại bỏ JavaScript khỏi tuyến hiển thị quan trọng trong trường hợp này cho phép người dùng đạt được điểm tương tác trên trang (người dùng nhìn thấy bài viết) nhanh nhất có thể.

Thay vào đó, nếu chúng ta sử dụng JavaScript async (không đồng bộ), thì chúng ta sẽ tạo thêm độ phức tạp, tăng thời gian tải xuống và thời gian này làm chậm người dùng đạt đến điểm tương tác của trang.


#8. Trang đặt phòng khách sạn

Nếu chức năng cốt lõi của trang là cho phép người dùng đặt phòng khách sạn bằng cách sử dụng widget/ứng dụng (app), mà chúng phụ thuộc vào JavaScript, thế thì điều quan trọng cần phải hiểu rằng JavaScript là thành phần quan trọng của chức năng cốt lõi trên trang.

chức năng cốt lõi trên trang
  • Điều này có nghĩa là JavaScript phải được tải xuống càng sớm càng tốt và JavaScript tải không đồng bộ trong tuyến hiển thị quan trọng (critical rendering path) là tuyệt đối cần thiết.

Trì hoãn tải JavaScript sẽ dẫn đến hậu quả trì hoãn điểm tương tác trên trang, ngăn người dùng không đặt phòng khách sạn được.

Trong trường hợp này, cách thức nhanh nhất để có được điểm tương tác trên trang là bao gồm JavaScript vào trong tuyến hiển thị quan trọng, vì nó cần thiết cho chức năng cốt lõi của trang.


#9. Trì hoãn (defer) và tải không đồng bộ (async)?

Sẽ là không khôn ngoan khi xem xét đề xuất sử dụng JavaScript mà trước đó không đánh giá điểm tương tác trên trang.

  • Nếu chức năng cốt lõi yêu cầu JavaScript, tải không đồng bộ là tốt nhất.
  • Nếu chức năng cốt lõi không yêu cầu JavaScript, thì JavaScript nên được đưa ra ngoài tuyến hiển thị quan trọng.

Toàn bộ mục đích của điểm tương tác trên trang là nhấn mạnh rằng việc tối ưu hóa tốc độ tải trang phải dựa trên chức năng cốt lõi của trang.

Mọi thứ phải dựa trên một câu hỏi: Làm thế nào để người dùng thực hiện được điều họ muốn làm theo cách nhanh nhất có thể?


#10. Tất cả mọi cân nhắc về tốc độ trang phải phụ thuộc vào điểm tương tác trên trang

Không sử dụng bất kỳ lời khuyến nghị nào về cải thiện tốc độ trang mà không xem xét đến chức năng cốt lõi của trang.

Mục tiêu trên hết là phải có được điểm tương tác trên trang nhanh nhất có thể (người dùng thực hiện được những điều họ muốn nhanh nhất có thể).

Xem thêm về async và defer JavaScript ở bài viết này.

(Dịch từ bài viết: Page interaction point – Tác giả: Patrick Sexton – Website: Varvy)

Back to Top