2013-08-20 15 views
112

Cho đến gần đây, trang web của tôi (www.heatexchangers.ca) đạt 98% trên Tốc độ trang của Google. Có một vài điều tôi không thể làm gì về chuỗi truy vấn từ phông chữ web. Tôi rất hài lòng với điều này vì điều này đại diện cho tất cả những gì tôi có thể làm.Nội dung "trong màn hình đầu tiên" trong Google Pagespeed là gì?

Gần đây Google đã bổ sung cái gì khác có ảnh hưởng đến số điểm tốc độ trang và bây giờ tôi chỉ nhận được 89% trên Speed ​​trang và nhận được đề nghị này:

  • Loại bỏ bên ngoài chặn hiển thị nào JavaScript và CSS trong trên-the-fold Nội dung.

Đề xuất sửa lỗi này có vẻ liên quan đến việc thu thập thông tin tất cả các tệp .css và .js của tôi và tách một số phần của chúng và thêm chúng vào html của tôi. Điều này gây ra cho tôi một số nhầm lẫn như tôi đã được ấn tượng, chúng tôi phải giữ càng nhiều JS và CSS ra khỏi HTML càng tốt.

gì chính xác là "màn hình đầu tiên" nội dung? Nếu nó là một vài phong cách như phông chữ, màu nền vv; sau đó tôi có thể thấy nó có thể không phải là một thỏa thuận quá lớn để bao gồm nội tuyến. Tôi đã không thể tìm thấy một danh sách chính xác điều này là gì.

+40

'Lần' là nơi cuối màn hình đang tải trang. Khi bạn truy cập trang web, bất kỳ nội dung nào bạn thấy ngay lập tức mà không cuộn là 'trong màn hình đầu tiên'. Bất cứ điều gì bạn phải di chuyển xuống để xem nó 'dưới màn hình đầu tiên'. – Coop

+18

Trên màn hình đầu tiên là thuật ngữ thường được sử dụng cho Báo chí, còn gọi là nội dung ở trên, nơi giấy được gấp theo chiều ngang. Thông thường cho thiết kế web này là 600px đầu tiên ~ hay như vậy (có thể gây tranh cãi tùy thuộc vào người bạn yêu cầu). Nó không đề cập đến các kiểu (phông chữ, hình nền, v.v.), nó đề cập đến nội dung và loại js có thể chặn hiển thị _in_ nội dung đó. Tôi nghi ngờ google đang đề xuất sử dụng kiểu nội tuyến, bạn có thực sự đăng các đề xuất bạn đã đưa ra không? –

Trả lời

98

Điều này là do gần đây Google đã thay đổi công cụ tốc độ trang để phản ánh tốt hơn một trang web ngày càng di động. Mạng dữ liệu di động có các đặc tính hiệu suất khác nhau so với mạng có dây hoặc wifi, vì vậy bạn cần phải làm những việc khác nhau để tối ưu hóa chúng.

Trong màn hình đầu tiên (ATF) đơn giản là giá trị của màn hình đầu tiên - bất kỳ thứ gì bạn không cần phải cuộn để xem. Rõ ràng, điều này thay đổi tùy theo thiết bị và hướng của nó, vì vậy bạn có thể cần phải khái quát và có thể tìm thấy một số tùy chọn phổ biến khả thi, có thể là một điện thoại thông minh nhắm mục tiêu, một cho máy tính bảng và một cho máy tính để bàn lớn hơn.

Đối với CSS họ đang nói đến, họ thực sự có ý định tất cả CSS cần thiết để tạo kiểu đầy đủ cho bất kỳ nội dung nào được hiển thị ATF. Để xác định thời gian tải nội dung ATF của bạn, họ sẽ chụp ảnh màn hình cuối cùng và so sánh trực quan với trang khi nó tải và khi nó đủ giống nhau, họ sẽ xem xét điểm mà nội dung ATF Nó đã nạp đầy.

Đây là một bài thuyết trình video từ Google về chủ đề này:

http://www.youtube.com/watch?v=YV1nKLWoARQ

Nhấn mạnh về việc sử dụng cái gì để làm trong giây đầu tiên. Lý do đằng sau việc đặt CSS cho nội dung ATF trực tiếp vào HTML phản ánh nghiên cứu của họ về hiệu suất dữ liệu di động cho thấy rằng nếu CSS không có ở đó, nó sẽ không được nạp đủ sớm để nằm trong giây đầu tiên.

Họ cũng cung cấp liên kết đến các công cụ có thể tự động hóa một số điều này. Tôi đã không thử họ và YMMV.

+0

Thực sự tốt đẹp khi bạn có một spa góc ... – Laurenswuyts

+0

@Joshua, tôi đã thực hiện một số điều cho "Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên" . Nhưng chỉ phản ánh trên điện thoại di động. Không có trong máy tính để bàn. cho url này https://www.winni.in/cake-delivery-in-bangalore –

2

thông tin chi tiết về trang của Google sẽ cho bạn biết rõ ràng có bao nhiêu% css giới thiệu nội dung trong màn hình đầu tiên đang được tải quá muộn và trang có thể đã được hiển thị trước đó. Hơn bạn có thể di chuyển các phần của css để đạt được kết quả xanh. tôi có thể làm điều đó cho bạn: goo.gl/GsRxNc

một liên kết từ Google mô tả 'ở trên nếp gấp' https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

+0

Bạn có thể làm rõ ý nghĩa của phần trăm không? Giả sử tốc độ PageSpeed ​​báo cáo rằng 55% nội dung trong màn hình đầu tiên có thể được hiển thị mà không cần đợi bảng định kiểu bên ngoài tải. Điều này có nghĩa là 45% nội dung trong màn hình đầu tiên được tạo kiểu với các quy tắc từ bảng định kiểu bên ngoài. Nhưng đó là [không phải là trường hợp] (https://stackoverflow.com/questions/45779900/what-do-percents-regarding-above-the-fold-content-mean). –

-2

Họ tham khảo để render chặn js như phân tích hoặc mã đó là lý do tại sao họ khuyên bạn nên đặt những theo dõi "nạp tôi trước khi mọi thứ khác "tập lệnh ở chân trang khi chúng sẽ được tải sau khi người dùng có trang web trên màn hình.