Bài viết này mình liệt kê các lỗi phổ biến nhất mà hầu hết blog nào cũng đều có khi trang tải trên thiết bị di động làm cho trang không khả dụng hay thân thiện với di động.
Vấn đề đầu tiên mà bạn phải nắm chắc không được nhầm lẫn khi sử dụng blogspot làm trang web, đó là không thể thiết kế web đáp ứng hay thường gọi bằng reponsive với một URL duy nhất mà bắt buộc sử dụng URL riêng biệt cho các thiết bị máy tính và di động, điều này dẫn đến chuyển hướng 1 chiều từ URL không có tham số m=1 chuyển hướng sang URL với m=1 trên thiết bị di động.
Đầu tiên để kiểm tra trang có bị lỗi trên thiết bị di động không, bạn kiểm tra bằng công cụ Lighthouse được tính hợp sẵn vào trình duyệt chorme trên máy tính
 |
| Tích chọn Mobile khi kiểm tra trang trên thiết bị di động |
Đợi một lúc để công cụ kiểm tra trang đưa ra báo cáo tổng quát hiển thị các lỗi nếu có. Từ các lỗi này mà cần phải khắc phục ngay.
Trang tải chậm
Nguyên nhân khiến trang tải chậm là do cái gì trện máy tính trên di động cũng có mà đáng ra một số tính năng không đáp ứng, không hiển thị tốt hay không khả dụng trên di động mà chỉ đáp ứng trên máy tính.
Để hiểu rõ hơn vấn đề này qua kết nối mạng nếu trên máy tính bạn sử dụng kết nối mạng có dây hay không dây hầu như tất cả đều sử dụng mạng cáp quang cả nên bạn thấy trang tải nhanh. Nhưng trên di động lại khác, bạn có thể sử dụng mạng 3G, 4G kết nối chậm hơn so với cáp quang và tất nhiên trang sẽ tải chậm hơn.
Trang có kích thước càng lớn càng tải chậm do đó giải pháp khắc phục giảm tải kích thước trang bằng cách bỏ bớt những yếu tố không thật sự cần thiết trên di động để trang nhẹ hơn, tải nhanh hơn.
Đọc thêm: Các bài viết chuyên mục Page speed
Hình ảnh không phù hợp
Lỗi phổ biến thứ hai hình ảnh với kích thước lớn trên di động. Bạn có thể nhận thấy bằng mắt thường trên máy tính màn hình rộng ảnh cần kích thước lớn hiển thị nhưng trên di động màn hình nhỏ ảnh cũng kích thước đấy nhưng lại hiển thị nhỏ hơn làm cho lãng phí tài nguyên khiến trang không giảm kích thước làm cho trang tải chậm.
Hành động đề xuất nên đặt kích thước ảnh khác nhau trên máy tính và trên di động
Tham khảo thêm:
- Thiết lập kích thước ảnh khi tải trang phù hợp với kích thước màn hình
- Sử dụng định dạng ảnh WebP để giảm kích thước trang và cải thiện hiệu suất
- Thẻ dữ liệu hình ảnh trong tiện ích Bài đăng trên Blog version 2
Kích thước phông chữ nhỏ
Phông chữ và kích thước vì yếu tố này chiếm tỉ trọng SEO khá cao. Phông chữ đẹp hay không không quan trọng miễn là dễ đọc và đọc rõ là tốt rồi, nhưng kích thước phông chữ cũng rất quan trọng với trang web trên di động, kích thước phải đủ lớn để ai cũng có thể nhìn thấy rõ.
Đề xuất luôn đật các nút tăng kích thước phông chữ lớn hơn mặc định trên điện thoại
Đọc thêm: Cách khắc phục “Đảm bảo văn bản vẫn hiển thị trong khi tải phông chữ web” trong blogspot
Bố cục không reponsive
Lỗi này thường xảy ra với chiều ngang của trang rộng hơn màn hình của thiết bị làm cho màn hình không hiển thị hết nội dung. Mặc dù trang đã sử dụng thẻ meta viewport tuy nhiên một số element ví dụ như table, breadrumbs không sử dụng thuộc tính css overflow tạo thanh cuộn cho chiều ngang.
Hành động đề xuất thêm thuộc tính css overflow-x:auto; vào element, ví dụ
<div style="overflow-x: auto;">
<table></table>
</div>
Sử dụng URL chéo
URL chéo là các liên kết không liên quann các URL riêng biệt có cùng nội dung nhưng trên các thiết bị khác nhau ví dụ trên máy tính đặt URL cho thiết bị di động m=1 và ngược lại trên thiết bị di động đặt URL cho máy tính làm cho trang chuyển hướng sang di động thay vì truy cập trực tiếp từ di động. Một lỗi phổ biến là sử dụng các đường dẫn liên kết trỏ đến một trang không liên quan, chẳng hạn như trang trên thiết bị di động liên kết đến trang chủ của trang web trên máy tính.
Hành động đề xuất kiểm tra các đường liên kết của bạn để đảm bảo rằng chúng trỏ đến trang tương đương chính xác.
Đọc thêm: Thiết lập URL riêng biệt cho máy tính và thiết bị di động trong blogspot
Các mục tiêu nhấn quá gần
Các liên kết, button hay các thành phần khi nhấp vào có chuyển hướng đến trang khác hay tạo ra một hành động gì nếu các mục tiêu này cạnh nhau đảm bảo phải có khoảng cánh đáp ứng đẻ người dùng nhấp vào không bị thất bại. Các bạn tham khảo bài viết đề xuất Thiết kế các mục tiêu nhấn có kích thước và khoảng cách đáp ứng
