Làm cách nào để tải nội dung nhanh hơn cho thiết bị di động trên trang web thiết kế đáp ứng?

Vì vậy, tôi có một trang web thiết kế đáp ứng. Các nghiên cứu nói rằng đối với các thiết bị di động, chúng ta cần hiển thị ít nội dung hơn (đồ họa và những thứ tương tự) và chúng ta cần làm cho các trang web tải nhanh hơn cho điện thoại di động.

Nếu tôi đặt một số thành phần trang trong css để hiển thị: không có cho thiết bị di động, nó sẽ không hiển thị các khối này, nhưng điều đó không có nghĩa là nội dung trong các khối này sẽ không mất thời gian để tải xuống. Vì vậy, cuối cùng chúng tôi trốn nhưng vẫn phục vụ.

Trên trang web phản hồi, làm cách nào để ẩn các khối phần tử trang và không phân phát nội dung của chúng cho người dùng di động để tăng tốc thời gian tải trang?

Nếu một khối nội dung bị ẩn bằng CSS, trình duyệt vẫn cần tải xuống HTML bên trong phần tử đó. Tất cả các trình duyệt ngoại trừ Opera cũng tải xuống hình ảnh. (Trên thực tế, vì Opera đã chuyển sang Webkit nên có khả năng tải xuống các hình ảnh ẩn ngay bây giờ.)

Một trong những cách tốt nhất để giảm tải trong trình duyệt di động là sử dụng hình nền trong CSS (ví dụ: các họa tiết) nếu có thể, sau đó sử dụng thiết kế đáp ứng đầu tiên trên thiết bị di động. Điều này có nghĩa là làm cho CSS tiêu chuẩn hoạt động cho điện thoại di động, sau đó sử dụng truy vấn phương tiện để nhắm mục tiêu màn hình lớn hơn thay vì ngược lại. Đặt các hình ảnh nhỏ hơn trong CSS tiêu chuẩn, sau đó chuyển sang các hình ảnh lớn hơn trong các truy vấn phương tiện màn hình lớn.

Truy vấn phương tiện hoạt động trong tất cả các trình duyệt hiện đại bao gồm IE9 +. IE8 trở xuống có ít hơn 6% chia sẻ trên toàn cầu, vì vậy, cho thấy những người dùng đó trang web di động không phải là vấn đề lớn theo quan điểm của tôi.

Nếu hỗ trợ IE cũ là quan trọng trong tình huống của bạn, bạn vẫn có thể sử dụng truy vấn phương tiện chỉ cho hình ảnh. Ví dụ: thiết kế trang web máy tính để bàn như bình thường nhưng với hình ảnh độ phân giải thấp hơn sẽ tải nhanh hơn trên thiết bị di động. Sau đó, sử dụng một truy vấn phương tiện cho bố cục di động đáp ứng và một truy vấn phương tiện khác nhắm mục tiêu màn hình lớn hơn để trao đổi hình ảnh cho phiên bản tốt hơn.

Tối ưu hóa cho thiết bị di động gần giống như máy tính để bàn vì bạn dễ dàng nhắm đến việc phục vụ ít nhất có thể trong kích thước nhỏ nhất có thể. Do điện thoại di động có độ phân giải màn hình thấp hơn, không cần phải có hình ảnh độ phân giải màn hình và bạn có thể xem hình ảnh thích ứng, điều đó có nghĩa là nó sẽ phục vụ hình ảnh có độ phân giải khác tùy thuộc vào thiết bị bạn đang sử dụng. Điều này có thể được thực hiện bằng cách sử dụng một cdn hỗ trợ các hình ảnh thích ứng , Hình ảnh thích ứng JS hoặc một khung như Zurb Foundation hỗ trợ điều này.

Đối với mọi thứ khác, tôi khuyên bạn nên kiểm tra các ý tưởng để tăng tốc độ tải trang cũng như nhiều câu hỏi khác liên quan đến tốc độ trên Pro Webmaster.

Tôi phát hiện duyệt web trên thiết bị di động bằng PHP phía máy chủ và cung cấp CSS, hình ảnh và mẫu ui cho thiết bị theo chiều ngang & dọc ...