Responsive Web Design: 6 mẹo để cải thiện hiệu năng và trải nghiệm người dùng

Responsive Web design (RWD): giải pháp phát triển và thiết kế trang web nhằm đem lại trải nghiệm web đồng nhất cho người dùng qua các thiết bị có kích cỡ màn hình khác biệt.

Người dùng mong đợi trải nghiệm lướt web là đồng nhất cho dù họ sử dụng loại thiết bị nào đi nữa. Vậy nên, nếu một người Người dùng có thể sử dụng bất cứ thiết bị nào để truy cập vào website với yêu cầu chất lượng website trên mỗi thiết bị đều tốt. Nếu website của bạn không được tối ưu đối với thiết bị của họ, họ sẽ chỉ vào trang web của bạn một lần và không bao giờ quay lại.

Khuyến nghị của Google

Google đã đưa ra một số kiến nghị và công cụ giúp cải thiện hiệu năng website trên smartphone. Hãy tìm hiểu những khuyến nghị của Google để có thể nâng cao thứ hạng trong kết quả tìm kiếm cũng như ghi điểm trong mắt người dùng.

Nghiên cứu chỉ ra rằng nếu chậm trễ hơn một giây có thể làm gián đoạn suy nghĩ của người dùng và ảnh hưởng xấu đến trải nghiệm của họ.

Các giai đoạn trong quá trình hiển thị một trang web trên điện thoại di động

Các giai đoạn trong quá trình hiển thị một trang web trên điện thoại di động

Above-the-fold là phần của trang web hiển thị trên màn hình, người dùng có thể nhìn thấy mà không phải cuộn xuống. Google khuyến cáo rằng trang web của bạn nên ưu tiên tải phần nội dung này trước, phần còn lại của trang web sẽ tải sau đó.

Google khuyên rằng thời gian đáp ứng của server nên thấp hơn 200ms, còn lại 200ms là để tải phần above-the-fold.

Google cũng khuyên nên:

  • Giảm thiểu các redirects
  • Giảm các roundtrips khi tải lần đầu
  • Tránh js và css ở above-the-fold
  • Tối ưu quá trình xử lý các file js và thời gian tải

Nhưng có một vấn đề khác ở đây...

Các trang web đang lớn dần lên về kích cỡ

Kích cỡ trung bình của 1 trang web hiện nay khoảng 1532kB và nó đang lớn dần lên. Kích cỡ các trang lớn dẫn đến hiệu năng giảm và chi phí băng thông sẽ lớn hơn.

Kích cỡ các trang web tăng sẽ ảnh hưởng đến người thường xuyên sử dụng điện thoại di động. Họ thường dùng điện thoại để tìm kiếm thông tin bởi nó nhanh chóng và dễ dàng, nhưng với sự tăng lên về kích cỡ của trang web, họ sẽ mất một khoảng thời gian khá lâu để tải trang web đó trên di động, đặc biệt là khi sử dụng 3G

Mới đây, Guy Podjarny đã thực hiện một số thử nghiệm trên các trang web sử dụng RWD (Responsive Web design). Ông phát hiện ra rằng hầu hết các trang web RWD tải toàn bộ nội dung của trang trên những màn hình có độ phân giải khác nhau, mặc cho thực tế là có các sự khác biệt trong nội dung và kích thước của hình ảnh hiển thị trên các kích thước màn hình khác nhau.

Kích cỡ trang web (tính bằng đơn vị byte) với từng độ phân giải màn hình (năm 2013)

Kích cỡ trang web (tính bằng đơn vị byte) với từng độ phân giải màn hình (năm 2013)

Vậy làm cách nào để bạn có một trang web tối ưu đối với tất cả các thiết bị cả về hiệu năng và trải nghiệm người dùng? Hãy cùng tìm hiểu.

1. Xác định performance budget

Performance budget: là một nhóm các giới hạn được xác định trước ảnh hưởng trực tiếp đến hiệu năng trang web (như kích cỡ trang web tính bằng kilobytes, tốc độ tải trang....). Những giới hạn này không thể bị vượt qua trong quá trình thiết kế và phát triển trang web.

Nếu việc thêm một thành phần mới làm vượt quá các giới hạn này, bạn cần phải tối ưu hóa các tính năng hiện có hoặc loại bỏ bớt tính năng, hoặc không thêm tính năng mới.

2. Tối ưu hình ảnh trong thiết kế web tùy ứng (RWD)

Kích cỡ trung bình của các thành phần trên trang web

Kích cỡ trung bình của các thành phần trên trang web

Vấn đề lớn nhất đối với sự lớn lên về kích cỡ và việc tải chậm của các trang web chính là ảnh. Đặc biệt với sự gia tăng về số lượng thiết bị sử dụng công nghệ Retina, mọi người đều muốn hình ảnh có độ phân giải cao hơn trên trang web của mình.

Để làm việc này, bạn có thể sử dụng dịch vụ Adaptive Images. Nó là một đoạn script PHP để xác định kích thước màn hình, sau đó tự động thay đổi kích thước, bộ nhớ đệm và phục vụ với hình ảnh được thu nhỏ. Bạn có thể tùy chỉnh các thiết lập về chất lượng hình ảnh và bộ nhớ đệm cho trình duyệt.

3. Sử dụng tính năng nén

Việc nén các tài nguyên bằng cách sử dụng gzip sẽ làm giảm kích cỡ của trang khi truyền qua mạng. Nó sẽ giúp việc tải trang nhanh hơn, việc sử dụng các nguồn tài nguyên máy chủ web cũng hiệu quả hơn, người dùng sẽ dễ dàng truy cập và sử dụng trang web của bạn.

Ngoài ra, bạn cũng nên giảm bớt dung lượng các file css, javascript bằng cách loại bỏ bất kỳ khoảng trắng, kí tự không cần thiết. Với dung lượng nhỏ hơn, các file này sẽ được tải về và phân tích nhanh hơn.

4. Loại bỏ những thành phần không cần thiết

Xác định được sự cần thiết của từng thành phần trang web, từ đó loại bỏ bớt các thành phần không thực sự hữu ích sẽ giúp cải thiện hiệu năng website của bạn.

Giả sử bạn muốn thử nghiệm một widget mới hiển thị Nhận xét của khách hàng trên trang web, nhưng thêm widget đó sẽ vượt quá performance budget của bạn. Trên trang web bạn có 3 khung đăng ký mail ở các vị trí khác nhau. Nếu phân tích chính xác, bạn có thể bỏ bớt khung đăng ký kém hiệu quả nhất, để thay vào đó là widget mới.

5. Chọn đúng giải pháp máy chủ

Có rất nhiều các gói dịch vụ máy chủ khác nhau cung cấp một loạt các tiện ích và cơ cấu giá phức tạp, từ một vài đô mỗi tháng (shared hosting - nhiều website cùng trên một máy chủ) đến vài trăm đô một tháng (Cloud server - server ảo được triển khai và phát triển trên nền tảng công nghệ điện toán đám mây).

Cần có thời gian để nghiên cứu các giải pháp hosting phù hợp, để có thể nhận được giá trị tốt nhất trên số vốn đầu tư cũng như đạt được hiệu năng mà người dùng mong muốn.

Có thể bắt đầu bằng cách xem xét hiệu năng của các đối thủ và trang web khác nhau để tìm được ai có tốc độ cao nhất. Khi đã nắm được trang web hoạt động tốt nhất, bạn có thể sử dụng whoishostingthis.com để tìm hiểu dịch vụ máy chủ mà họ đang sử dụng, cũng như đánh giá về dịch vụ khách hàng cũng như những sự cố có thể xảy ra.

Google xem xét tốc độ tải trang như là một yếu tố xếp hạng. Có một mối tương quan giữa “Time to first byte” và thứ hạng tìm kiếm (time to first byte là khoảng thời gian từ lúc trình duyệt gửi đi byte đầu tiên của request đến khi trình duyệt nhận được byte đầu tiên từ máy chủ).

Time To First Byte

Time To First Byte

Trang web với TTFB nhỏ hơn sẽ đáp ứng (khi có yêu cầu từ trình duyệt – client) nhanh hơn và có thứ tự tìm kiếm tốt hơn so với trang web có TTFB lớn.

6. Sử dụng mạng phân phối nội dung (CDN - Content Delivery Network) cho những nội dung tĩnh

Mạng phân phối nội dung (CDN) là một mạng lưới gồm rất nhiều máy chủ, các máy chủ này chứa những bản sao nội dung website của bạn và chúng dược đặt khắp nơi trên thế giới. Việc sử dụng CDN giúp cho người dùng truy cập nhanh vào dữ liệu máy chủ gần họ nhất thay vì phải truy cập vào dữ liệu máy chủ tại trung tâm dữ liệu. Ví dụ, CDN có máy chủ đặt tại London, Texas, và Trung Quốc, một người dùng tại Ấn Độ sẽ truy cập vào dữ liệu tại máy chủ đặt tại Trung Quốc trong khi người dùng tại Paris sẽ truy cập vào dữ liệu máy chủ đặt tại London.

Khi lựa chọn CDN, cần lưu ý đến hai thông số tốc độ và băng thông.

Để đạt được tốc độ tối đa, bạn cần chắc rằng nhà cung cấp dịch vụ CDN có máy chủ đặt ở gần với đa số người dùng mục tiêu của mình. Ví dụ nếu như đa số người dùng của bạn ở Anh quốc, thì nhà cung cấp dịch vụ CDN phải có máy chủ ở Anh, Pháp hoặc là Ireland.

Đối với băng thông, quan sát các thông số hàng tháng của máy chủ. Nếu bạn chỉ sử dụng 5GB băng thông mỗi tháng, thì không có lý do gì phải đăng ký gói lớn hơn quá nhiều. Bạn cần đăng ký gói băng thông cao hơn nhu cầu bình thường một chút để đảm bảo tăng trưởng.

Việc sử dụng CDN làm tăng tốc, cải thiện hiệu suất website rõ rệt. Hệ thống máy chủ CDN sẽ đảm nhiệm phần phục vụ các file tĩnh (js, css...) thay cho máy chủ của bạn từ đó giảm băng thông sử dụng máy chủ của bạn xuông. Máy chủ của bạn sẽ giảm bớt nguy cơ bị quá tải.

Khi bạn đã hoàn thành đầy đủ các bước theo khuyến cáo của Google, bạn nên kiểm tra thử trang web của mình với công cụ PageSpeed. Nó sẽ giúp bạn đánh giá được hiệu năng của trang web và đưa ra các đề xuất nhằm cải thiện hơn nữa tốc độ của trang web.

Nguồn: http://blog.crazyegg.com/2013/10/29/improve-performance-and-ux-in-responsive-web-design/