Thông tin chi tiết về PageSpeed của Google cho phép một người kiểm tra các vấn đề về tốc độ của trang web cho cả thiết bị máy tính để bàn và điện thoại thông minh.
Tôi có một số CSS truy vấn phương tiện cho điện thoại thông minh trên trang web của mình, nhưng tôi không chắc về kích thước màn hình điện thoại thông minh của PageSpeed. Có ai biết chiều rộng màn hình?
Câu trả lời:
Như đã nêu trong Câu hỏi thường gặp về PageSpeed Insights :
PageSpeed Insights có sử dụng thiết bị thật không?
Phân tích của PageSpeed Insights không sử dụng thiết bị thực. PageSpeed Insights tìm nạp một trang web với trình kết xuất webkit (cùng công cụ kết xuất cung cấp năng lượng cho Chrome và Safari) mô phỏng cả thiết bị di động và thiết bị máy tính để bàn.
Do đó, chiều rộng màn hình không phải là một yếu tố vì nó sẽ hiển thị tương ứng trong WebKit.
Miễn là bạn đang sử dụng chiều rộng màn hình chung, bạn sẽ ổn. Như đã nêu trong Blog trung tâm quản trị trang web của Google về Truy vấn thiết kế và phương tiện truyền thông :
Độ rộng khung nhìn mặc định cho trình duyệt Android mặc định là 800px và 980px cho iOS,
Vì vậy, đối với cả hai hệ điều hành mục tiêu, bạn có thể sử dụng 800pxcho điện thoại thông minh nằm ngang, máy tính bảng dọc và máy tính để bàn hẹp và 479pxcho điện thoại thông minh ở chế độ dọc. Một ví dụ từ blog là:
@media screen and (min-width:480px) and (max-width:800px) {
/* Target landscape smartphones, portrait tablets, narrow desktops
*/
}
@media screen and (max-width:479px) {
/* Target portrait smartphones */
}
Sau đây là danh sách độ rộng khung nhìn cho các thiết bị cụ thể mà bạn cần nhắm mục tiêu một: Kích thước khung nhìn
Ngoài ra, sử dụng các thao tác sau sẽ tự động đặt chế độ xem thành chiều rộng mặc định của thiết bị và cũng sẽ hoạt động trong PageSpeed Insights:
<meta name="viewport" content="width=device-width, initial-scale=1">
Tóm lại, nếu chiều rộng màn hình của bạn hiển thị tốt trong trình duyệt trên thiết bị di động, thì nó cũng sẽ hiển thị tốt trong PageSpeed Insights.
Nó rộng 320px.
Để tìm hiểu điều này, tôi đã chạy Thông tin chi tiết tốc độ trang (PSI) trên một trang với một loạt các truy vấn phương tiện đã thay đổi màu nền ở các điểm dừng khác nhau. Sau khi thu hẹp chiều rộng xuống trong phạm vi 20px, tôi đã thêm một truy vấn phương tiện cho mọi chiều rộng trong phạm vi 20px đó cho đến khi tôi tìm thấy chính xác chiều rộng mà PSI đang sử dụng.
Lý do điều này (được cho là) quan trọng là, đối với tôi, tôi đã cố gắng để trang web danh mục đầu tư của mình đạt điểm 100 PSI như một bài tập. Truy vấn phương tiện nhỏ nhất của tôi là max-width = "600px". Tôi đã sử dụng hình ảnh phản hồi với hình ảnh đầy đủ để đặt hình ảnh nhỏ nhất trong srcset thành hình ảnh lớn nhất sẽ xuất hiện ở điểm dừng nhỏ nhất của tôi (hình ảnh đệm 600px + 80px = hình ảnh rộng 520px) nhưng nhận được điểm PSI khủng khiếp. Thêm một hình ảnh nhỏ hơn, rộng 320px vào srcset đã cố định điểm số.
Lý do tôi nói có thể nói là, để sử dụng trong thế giới thực, trang của tôi đã được tối ưu hóa hoàn hảo mà không cần quan tâm đến chiều rộng khung nhìn của PSI. Nhưng mục tiêu của tôi là đặc biệt để có được điểm PSI cao do đó điều quan trọng là phải tìm ra con số này.
Kích thước khung nhìn chính xác của Trình kiểm tra thông tin chi tiết PageSpeed khác nhau .
Điều này có lẽ là để khuyến khích thiết kế web đáp ứng thực sự thay vì tối ưu hóa cho một số thiết bị nhất định.
Ngoài ra, nếu kích thước khung nhìn được cố định, mọi người có thể nhắm mục tiêu PageSpeed.
Bạn có thể kiểm tra Kích thước khung nhìn của tôi là gì? với PageSpeed và xem kích thước khung nhìn được sử dụng trong ảnh chụp màn hình.
Là statet trong các bình luận và câu trả lời khác, điều này sẽ dẫn đến kích thước khung nhìn khác nhau.
Tất nhiên, điều này không cho biết các Thuật toán ở phía sau có thực sự chỉ kiểm tra ở độ rộng khung nhìn 1.024 px hay không. Người ta sẽ cần phải thiết lập một thử nghiệm thích hợp, trong đó tải một cách quá lớn JPG @ 1.025 và kiểm tra xem PageSpeed có phàn nàn về điều đó không.
Tôi đã tạo một bài kiểm tra mà bạn có thể chạy để kiểm tra. Đối với tôi, nó là 412px cho thiết bị di động và 1350px cho máy tính để bàn:
Đây là bài kiểm tra: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.dompiler.com%2Fexperiment%2Fviewport- thong.html
Đây là mã HTML bạn có thể sử dụng nếu bạn muốn xây dựng bài kiểm tra của riêng mình:
<!doctype html>
<html>
<head>
<title>Viewport Width</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
body {
font-size: 100px;
}
</style>
</head>
<body>
<script>
document.querySelector("body").appendChild(
document.createTextNode(window.innerWidth.toString() + "px Wide"));
</script>
</body>
</html>
Tất cả những gì nó làm là thêm một số văn bản vào phần thân của trang dựa trên window.innerWidth(đó là chiều rộng khung nhìn).
Tôi tưởng tượng chiều rộng này thay đổi theo thời gian (và thậm chí có thể là động hoặc ngẫu nhiên), nhưng ít nhất điều này cung cấp cho bạn một cách để kiểm tra định kỳ.