Tổng quan

Một website nhanh được đo đạc dựa trên rất nhiều chỉ tiêu và yếu tố. Việc tăng tốc độ cho website sẽ cải thiện được khả năng xuất hiện của website trên các công cụ search, từ đó tỉ lệ lượt truy cập vào website sẽ tăng đáng kể. Vậy nên một website nhanh hơn sẽ được đánh giá cao hơn, và tất nhiên sẽ làm tăng cả trải nghiệm của người dùng nữa.

Một designer sẽ làm tất cả những gì có thể để có thể làm một website nhanh hơn, bao gồm việc thiêt lập CDN (Content Delivery Network), tải trước các tài nguyên (prefetching resources), nén ảnh, tận dụng cache của browser và rất nhiều các phương pháp tối ưu hóa backend khác. Tuy nhiên, có phương pháp giúp chúng ta tạo cho website "cảm giác" nhanh hơn. ngay cả khi website đó đã đang load với tốc rất nhanh. Phương pháp đó được gọi là cải thiện hiệu suất trực quan (Improving perceived performance).

Hiệu suất trực quan cho ta thấy khả năng render nhanh, trước nội dung mà người dùng có thể thấy được ngay hay được gọi là above-the-fold content. Đây chính là nội dung đi vào mắt người dùng đầu tiên, trong khi nội dung phía dưới hay gọi là below-the-fold content đang được load.

Khi tối ưu hoá một website để có được một hiệu suất trực quan tốt hơn, bạn vẫn sẽ thu được các kết quả giống như một website nhanh thực sự có thể đạt được. Bao gồm việc khách truy cập sẽ ở lại site lâu hơn, tăng cường tỉ lệ luân chuyển và trải nghiệm người dùng tốt hơn, tuy nhiên sự tăng cường trong các chỉ số đo khác còn lớn hơn. Hãy cùng đến với thủ thuật đầu tiên để triển khai khi gặp những người dùng thiếu kiên nhẫn. Nhiều thủ thuật dưới đây được dựa trên tâm lý học của con người và cách người dùng can thiệp hay đánh giá nội dung.

Thời gian rảnh và Thời gian bận

Thời gian bận là khoảng thời gian mà bạn thục sự đang làm gì đó, trong khi thời gian bận nghĩa là lúc bạn đang chờ để làm gì đó. Ví dụ khi bạn chờ ở khu lấy hành lý ở sân bay để lấy hành lý, đó sẽ là cảm giác rất dài và đôi khi cảm thấy như là tra tấn vậy. Tuy nhiên sự khác nhau của việc chờ để lấy hành lý và việc chờ một website load, đó là bạn buộc phải chờ để lấy hành lý của mình trong khi đó khách truy cập website của bạn có thể và sẽ chọn thử một website khác.

Đúng vậy, người dùng rất dễ mất kiên nhận. Nghiên cứu của Kissmetric cho thấy, cứ mỗi 1s delay sẽ làm giảm 7% tỉ lệ bạn muốn người dùng thực hiện một hành động trên website theo ý bạn - conversion rate.

Skeleton Screen - Khung màn hình

Progress bars và loading spinners rất có ích trong việc cho người dùng biết rằng có gì đó đang diễn ra, dữ liệu đang được tải hay một thao tác đang được xử lý, nhưng chỉ với một phạm vi nhỏ (như là khi một file đang được tải lên). Với một phạm vi lớn hơn, khi toàn bộ màn hình đang được load thì spinner dường như không có tác dụng gì ngoài việc trở thành một nhắc nhở kì quặc rằng bạn đang khiến người dùng phải chờ đợi, và bởi vì dù sao các trình duyệt cũng đã có các spinner ở trên tab để biết rằng dữ liệu đang được load, vậy nên nó khá là vô dụng.

Một cách hiệu quả để tạo cho website cảm giác nhanh hơn, đó là sử dụng skeleton screen. Skeleton screen từ từ và liên tục lấp đầy trang web với các nội dung - điều này giúp người dùng thấy rằng đang có gì đó thực sự diễn ra, và cho người dùng một cái gì đó để tập trung vào.

Luke Wroblewski, một Product Designer ở Google đã thực hiện một khảo sát để so sánh sự hài lòng của người dùng giữa việc có và không có loading spinner. Ngay sau khi thêm spinner, đội của anh đã nhận được lời phàn nàn về việc phiên bản ứng dụng có spinner mất nhiều gian để load hơn phiên bản không có spinner sử dụng kĩ thuật skeleton screen. Trên thực tế, cả hai phiên bản đều mất một lượng thời gian load như nhau, nhưng thời gian load trực quan là nhiều hơn khi không có nội dung gì được hiển thị ra ngay lập tức.

Vì các nội dung mới được hiển thị ra trên màn hình từng chút một, nó tạo ra cảm giác đây là một quá trình liên tục, và người dùng có một đoạn nội dung nào đó để xem trong khi phần còn lại đang được render ra hay đang được tải về.

Các nội dung cần thiết cần được ưu tiên khi load

Khi bạn tập trung vào việc làm cho nội dung quan trọng nhất của trang web được load ra đầu tiên, thì người dùng sẽ có cái gì đó để khiến họ bận rộn, và sẽ không có chút vấn đề gì khi phần còn lại của trang web vẫn đang load. Nếu khi người dùng muốn đọc bài viết trên một trang blog mà các nội dung không cần thiết như quảng cáo, video nền v.v... lại hiển thị trước, thì sẽ rất dễ thấy tại sao các kịch bản như này sẽ gây ấn tượng về một website chậm, bởi vì có một sự khác nhau vô cùng lớn giữa việc đem đến cho người dùng một phần nội dung bất kì và việc đem đến phần nội dung mà người dùng muốn thấy.

Nhóm nghiên cứu của Nielsen Norman khẳng định rằng việc load các nội dung cần thiết đầu tiên và nhanh chóng sẽ làm tăng tỉ lệ thu hút được người dùng hơn. Người dùng dành ít nhất 20% thời gian của họ với việc xem những nội dung họ muốn được và được hiển thị ra ngay lập tức, trong khi nhưng người dùng bị 8 giây delay chỉ dành 1% với việc đó. Nếu các nội dung cần thiết bị cản trở do sự loading delay thì sự thú hút người dùng sẽ giảm đáng kể.

Các tính năng quan trọng nên xuất hiện đầu tiên

Hiệu năng trực quan xét cho cùng được dùng để giảm từ việc load tất cả nội dung cần thành việc các nội dung cần được ưu tiên thấy trước. Và đây là các yếu tố sau đây là sự cản trở lớn nhất:

• Animation với các transitions phức tạp
• Đoạn Javascript thêm một số các tính năng
• Các file media nặng ( Ảnh cỡ lớn và video, đặc biệt là khi chúng ở độ phân giải cao hay chưa được nén).
• Các hình ảnh trừu tượng mà dễ thực hiện được với SVG hay CSS.

Tuy không phải tất cả những yếu tố kể trên là hoàn toàn không tốt, nhưng nếu bạn không có một lý do hợp lý nào để thêm chúng vào thì tức là bạn không cần đến chúng, và đương nhiên trong trường hợp đó thì các yếu tố này gây ảnh hưởng xấu đến website của bạn.

Chèn các đoạn CSS quan trọng (Critical CSS)

Vậy là chúng ta đã được biết về các tính năng quan trọng nhưng có quá nhiều các tính năng như vậy lại không hề làm cho hiệu năng trực quan tốt hơn. Thực sư là độ ưu tiên nên được đặt cho CSS style dùng để hiển thị nội dung cần thiết.

Cho dù như vậy thì các file external CSS cần được tải về hoàn toàn trước khi trình duyệt web có thể bắt đầu áp dụng các style đó vào trang web, đó là lý do vì sao chúng ta nên đặt các style CSS trong cặp thẻ <style> ở trên thẻ <head> của file HTML. Bằng cách này, những style CSS quan trọng dùng để render ra nội dung cần thiết cho ngườii dùng nhìn thấy ngay, sẽ được load ra ngay lập tức. Chúng ta gọi những style này là các style CSS quan trọng (critical CSS).

Nó nên được thực hiện như sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--các style CSS quan trọng cần ưu tiên -->
    <style>
        html { /* styles here */ }
    </style>
    <!-- Các đoạn css có thể load sau-->
    <link rel="stylesheet" href="//cdn.example.com/stylesheet.css">
</head>
<body></body>
</html>

Kết luận: Tại sao hiệu năng trực quan lại quan trọng?

Website nhanh sẽ làm tăng cường tỉ lệ luân chuyển - bạn sẽ dễ dàng khiến người dùng thực hiện những hành đồng bạn muốn trên web hơn. Trên Internet, nơi mà nội dung dễ dàng được tìm kiếm và truy cập còn nguời dùng thì rất kĩ tính và thiếu kiên nhẫn thì một website chậm sẽ đồng nghĩa với việc lợi nhuận giảm. Tâm lý học là vô cùng quan trọng trong việc design một trang web, nên bất cứ hành động nào để có thể làm để tăng tốc độ nhìn thấy được từ trang web của bạn đều sẽ đóng góp phần làm tăng các chỉ số thực. Khi kết hợp các thủ thuật làm cho tốc độ của website thực sự load nhanh, bạn có thể làm cho website của bạn vô cùng ấn tượng và nổi bật.

Nếu tò mò về việc đo hiệu năng tổng quan cho trang web, Pingdom Tools sẽ cho bạn thấy website của bạn mất hết bao nhiêu thời gian để load, và gợi ý cho bạn một số điều chỉnh có thể làm để cải thiện tốc độ hoặc có thể sử dụng công cụ PageSpeed của Google. Cả hai công cụ đều đo lượng thời gian mất khi trình duyệt tải website của bạn từ những byte đầu tiên được trả về từ server. Và không ngạc nhiên khi điều này là vô cùng quan trọng cho SEO. Các công cụ cũng gợi ý cho bạn các hình ảnh có thể được nén hơn nữa, tài nguyên nào có thể được lấy từ CDN, và như được nói ở trên, các đoạn CSS quan trọng nào có thể được chèn vào trong thẻ <head> nữa.