How to test your website on mobile? Làm thế nào để kiểm thử trang web của bạn trên thiết bị di động?

Tại sao bạn nên tối ưu hóa trang web di động của bạn

Vào cuối năm 2016, có khoảng hơn 3,2 tỷ người truy cập Internet và khoảng 2 tỷ trong số đó họ sử dụng thiết bị di động để truy cập. Theo dự báo phân tích, một số lượng người chỉ sử dụng thiết bị di động cho các hoạt động trên Internet, sẽ tăng khoảng 25% hàng năm trong 5 năm tới.

Do đó, điều quan trọng hàng đầu là phải chắc chắn một điều rằng trang web của bạn thân thiện với thiết bị di động.

Trước khi bắt đầu kiểm thử trang web của bạn trên thiết bị di động, bạn chỉ cần cố gắng trả lời một số câu hỏi phổ biến sau:

• Trang web tải nhanh như thế nào?
• Nội dung trang web có hấp dẫn hay không?
• Trang web có thu hút sự chú ý đến những điểm chính trong doanh nghiệp của bạn không?
• Liệu trang web có cung cấp trải nghiệm tốt cho người dùng?
• Là trang web dễ dàng sử dụng và thân thiện với người dùng?
• Liệu trang web của bạn có khơi gợi, hướng người dùng tới một trang địch khác không? (Ví dụ trang chủ của công ty hay cộng đồng)

Các yếu tố chính để nâng cao hiệu suất thiết bị di động

Thậm chí, nếu câu trả lời là "Có" đối với tất cả chúng, bạn cũng nên chú ý đến các yếu tố tiếp theo của tối ưu hóa hiệu suất di động như:

• Download speed - Tốc độ tải xuống: luôn được kết hợp giữa: độ trễ mạng, bộ nhớ thiết bị, CPU và kích thước bộ nhớ đệm. Tất cả chúng đều nhỏ hơn nhiều so với các máy tính để bàn, vì vậy cần rất nhiều thời gian hơn để tải trang web.
• Restrictive loading - Hạn chế tốc độ tải: Bạn phải đảm bảo người dùng không tải xuống bất cứ thứ gì làm ảnh hưởng đến tốc độ hoạt động của trang web.
• Responsive framework - Phản hồi khung hình: Tốc độ phản ứng của các chức năng, giao diện layout trong trang web.

Thời gian tải trang nhanh mang lại cho bạn một lợi thế cạnh tranh cực lớn với các trang khác. Các hành động sau đây ảnh hưởng trức tiếp đến thời gian tải:

• Giảm thiểu tối đa xử lý phúc tạp từ phía khách hàng.
• Giảm kích thước hình ảnh hiển thị.
• Giảm thiểu nội dung của trong từng trang.
• Giảm thiểu tối đa sử dụng liên kết m-dot (Liên kết m. dành riêng khi truy cập web di động).
• Chọn hosting tối ưu nhất.
• Giới hạn các yêu cầu HTTP.
• Cho phép nén trang (hiểu nôm na là nén trang web cho phép trang của bạn cung cấp một kích thước nhỏ nhất, điều đó dẫn tới tải trang nhanh hơn nhiều).

Hãy cân nhắc cả những bước khác nữa để chắc chắn rằng những tính năng cơ bản cho web di động của bạn hoạt động ổn định.

So sánh sự kết nối giữa máy tính để bàn và phiên bản di động của trang web.

Redirects testing - Kiểm tra chuyển hướng:

• Khách di động truy cập thì cần được chuyển hướng tới phiên bản di động của trang web.
• Khách máy tính truy cập thì cần được chuyển hướng tới phiên bản đầy đủ máy tính của trang web.
• Chuyển hướng trang cung cấp cho người dùng quyền truy cập vào các địa chỉ cụ thể, không chỉ là trang chủ.
• Người dùng di động có thể dễ dàng tìm thấy được tùy chọn xem phiên bản đầy đủ của trang web(thường được thiết kế ở dưới cùng của trang chủ).

Kiểm tra Vary-HTTP header:

Nếu trang web của bạn sử dụng server động, bạn nên cài đặt một Vary-HTTP header để báo với Google và các trình duyệt là bạn sử dụng những HTML khác nhau cho những người dùng khác nhau.

Kiểm tra thẻ rel=alternate/canonical.

Nếu trang web của bạn sử dụng những url riêng biệt cho từng phiên bản. Các trang trên máy tính để bàn nên được thiết lập với thẻ rel=”alternate” xen kẽ trỏ vào phiên bản di động của trang đó. Các trang di động phải được thiết lập với thẻ a rel=”canonical” trỏ vào phiên bản máy tính để bàn của trang đó.

Technical issue testing - Kiểm tra những sự cố về mặt kỹ thuật

Mobile XML sitemap:

• Tất cả các trang di động phải được gửi tới Google thông qua XML sitemap trong Google Webmaster Tools.
• Các trang di động nên được tách riêng biệt với các trang phiên bản máy tính.

Tốc độ tải trang trên thiết bị di động

Người dùng di động, đặc biệt, trong một số trường hợp có thể giới hạn thời gian sử dụng trong trang internet cụ thể là có thể trang web của bạn, do đố bạn cần phải cung cấp một tốc độ ổn định và nhanh chóng khi sử dụng nó.

Google page speed tool, WebPagetest là những công cụ hữu ích để tính toán và đo lường tốc độ trang web của bạn.

Lưu trữ và dữ diệu

• Chắc chắn rằng source code của trang web không dễ dàng bị can thiệp.
• Người dùng ít hoặc không bao giờ xóa cache, nên hãy chắc rằng không có gì bị hỏng khi sử dụng.

User Experience (UX) testing - Kiểm tra trải nghiệm người dùng

Xem trang web trên:

• Thiết bị thông minh: iPhone (iOS), Samsung Galaxy (Android), Nexus (another Android) và Windows Phone (Windows).
• Máy tính bảng: iPad (iOS), Samsung Galaxy Tab trong cửa sổ đa nhiệm (Android), Kindle Fire (Amazon) và Asus Transformer Book (Windows).

Bạn nên sử dụng công cụ như Google Analytics để xác định các loại thiết bị thường được khách truy cập của bạn sử dụng, từ đó tính toán được lượng khách hàng cho phát triển.

Kích thước liên kết: Khoảng cách giữa các liên kết nên ít nhất là 28x28 pixel để tất cả chúng có thể dễ dàng nhấp bằng ngón tay.

Flash: Hầu hết các trình duyệt di động đều không thể phát nội dung yêu cầu hỗ trợ Flash. Do đó, nếu bạn muốn trang web của mình thân thiện với thiết bị di động, đừng sử dụng Flash cho bất kỳ nội dung nào.

Tỉ lệ khung hình: cho phép các trình duyệt di động thay đổi kích thước trang để chúng phù hợp hoàn hảo với các thiết bị có kích thước khác nhau. Đó là lý do tại sao bạn cần phải thiết lập nó. Ví dụ như mở trang web trên thiết bị 4", 5" cũng phải phù hợp kích thước khi mở trên một máy tính bảng 9,7" hoặc 11".

Pop-ups - Có hai lý do để không sử dụng cửa sổ pop-up cho phiên bản di động của trang web bạn là:

• Pop-up làm chậm thời gian tải trang của bạn.
• Pop-up quá dễ để việc vô tình chạm vào những chức năng khác vì nó quá nhỏ. Do đó, nếu cần chỉ việc đưa người dùng tới một trang riêng biệt mà họ muốn.

Các yếu tố kết thúc: Các nhân tố quan trọng nhất của trang web phải ở trên cùng, nằm ở vị trí nhìn thẳng ngay vào mặt người dùng. Các vị trí các yếu tố khác nên có một ý nghĩa nhất định (ví dụ nút cuộn lên trên thì không nằm ở vị trí trên cùng, nút bình luận, báo cáo quản trị nên nằm dưới cùng bài viết...).

Điều hướng: Hãy chắc chắn rằng tất cả các trang chính và phụ của trang web di động có thể được truy cập bởi khách truy cập thông qua các menu điều hướng, liên kết cụ thể.

Nội dung:

• Mỗi trang phiên bản máy tính cần có một phiên bản tương đương cho phiên bản di động.
• Số lượng trang di động có thể nhiều hơn phiên bản máy tính vì tính đặc thù di động dễ điều hướng và di chuyển hơn phiên bản đầy đủ.
• Chắc chắn rằng trang web của bạn không gặp phải bất kỳ lỗi từ vựng hay ngữ pháp nào.
• Nếu trang web của bạn không chỉ dành cho khách truy cập một vùng, quốc gia nhất định, bạn nên cung cấp những bản kiểm thử tính nội địa hóa, nói cách khác là để kiểm tra các khía cạnh ngôn ngữ và văn hóa phù hợp cho một địa phương cụ thể.
• Những hình ảnh không cần thiết nên cân nhắc để loại bỏ, giúp tăng tốc độ tải trang.

Video

• Xác minh được video của bạn có thể phát và hoạt động ổn định.
• Sử dụng trình phát video HTML5, vì điện thoại có thể dễ dàng sử dụng nó để hiển thị và nó nhẹ.
• Chắc chắn rằng video của bạn có thể tương tác và phản hồi từ người dùng di động.

Công cụ tìm kiếm trên di động - Search engine results page, SERP

Xác minh địa chỉ URL di động của bạn thân thiện với người dùng khi tìm kiếm một từ khóa dài.

Google cắt bỏ các mô tả meta(Mô tả meta là một thuộc tính HTML cung cấp một bản tóm tắt ngắn gọn về một trang web. Các công cụ tìm kiếm như Google thường hiển thị mô tả meta trong kết quả tìm kiếm, nơi chúng có thể ảnh hưởng lớn đến tỷ lệ nhấp của người dùng) trên thiết bị di động chỉ còn khoảng 120 ký tự, do đó, bạn không nên vượt quá giới hạn này.

Mặc dù công cụ tìm kiếm Google cung cấp cho bạn khoảng 70 ký tự (512 pixel) trong tiêu đề trang của bạn, chiều rộng của màn hình buộc tiêu đề trang thành hai dòng. Đó là lý do tại sao bạn nên chắc chắn rằng tiêu đề trang của bạn hiển thị ổn trên cả 2 dòng.

Quá nhiều Plugin làm hỏng toàn bộ trải nghiệm cho trang web di động của bạn. Vì vậy, bạn nên xem lại các plugin bạn sử dụng và xóa những plugin thực sự không cần thiết.

10 mẹo để tối ưu hóa tối đa phiên bản di động cho trang web của bạn

• Đảm bảo khả năng tương thích của điện thoại thông minh và máy tính bảng.
• Xác nhận thời gian tải trung bình của trang.
• Làm cho việc điều hướng trang web đơn giản nhất có thể.
• Đảm bảo các nút chức năng trên trang, menu đủ lớn cho những người có ngón tay lớn.
• Không có những văn bản với kích thước hoặc số lượng lớn. Nên sử dụng các gạch đầu dòng và câu ngắn.
• Không sử dụng Flash.
• Không sử dụng cửa sổ pop-up.
• Đảm bảo hình ảnh trên trang có kích thước tối ưu nhất, không quá lớn làm chậm quá trình tải.
• Xác nhận số điện thoại trên trang web chỉ cần một cú nhấp là có thể được quay số.
• Đảm bảo trang web có thể truy cập vị trí của bạn thông qua GPS để hoạt động một số dịch vụ tiện ích(nếu có).

Khi xác định được những yếu tố đặc trưng của một trang web trên thiết bị di động, từ đó bạn có thể vạch ra được những lộ trình, kịch bản kiểm thử đầy đủ cho nó hoặc những lưu ý khi thực hiện kiểm thử trang web trên di động.

Nguồn: https://geteasyqa.com/qa/test-website-mobile/

https://www.seobility.net/en/wiki/Meta_Description

https://vinahost.vn/plugin-la-gi.html