Apa itu "konten terlipat" di Google Pagespeed?

132

Sampai baru-baru ini, situs saya (www.heatexchangers.ca) mencetak 98% pada Kecepatan Halaman Google. Ada beberapa hal yang tidak bisa saya lakukan seperti string kueri dari font web. Saya sangat senang dengan ini karena ini mewakili semua yang bisa saya lakukan.

Baru-baru ini Google menambahkan hal lain yang mempengaruhi skor kecepatan halaman dan saya sekarang hanya mendapatkan 89% pada Kecepatan Halaman dan mendapatkan saran ini:

Hilangkan JavaScript pemblokiran render eksternal dan CSS dalam konten di atas-lipat.

Saran untuk memperbaikinya tampaknya melibatkan troll melalui semua file .css dan .js saya dan memisahkan beberapa bagiannya dan menambahkannya sebaris dengan html saya. Ini menyebabkan saya sedikit kebingungan karena saya merasa kita harus menjaga JS dan CSS sebanyak mungkin dari HTML.

Apa sebenarnya konten "Above the Fold"? Jika itu beberapa gaya seperti font, warna latar belakang dll; maka saya bisa melihat itu mungkin tidak terlalu besar untuk memasukkan inline. Saya belum dapat menemukan daftar apa ini.

— Glipt
sumber

49

'Lipat' adalah tempat bagian bawah layar memuat halaman. Saat Anda mendarat di situs web, konten apa pun yang Anda segera lihat tanpa menggulir adalah 'di atas flip'. Apa pun yang Anda harus gulir ke bawah untuk melihatnya 'di bawah flip'.

— CaribouCode

21

Above the Fold adalah istilah yang biasanya digunakan untuk Koran, alias, konten di atas di mana kertas dilipat secara horizontal. Biasanya untuk desain web ini adalah 600px ~ pertama atau lebih (dapat diperdebatkan tergantung pada siapa Anda bertanya). Itu tidak merujuk ke gaya (font, latar belakang dll), itu merujuk pada konten, dan jenis js yang dapat memblokir render dalam konten itu. Saya ragu Google menyarankan untuk menggunakan gaya sebaris, dapatkah Anda benar-benar memposting saran yang diberikan?

— Christian

@Coop Mengapa tidak hanya membuat jawaban, bukan komentar?

— Ngarai Kolob

113

Ini karena Google baru-baru ini mengubah alat kecepatan halaman untuk lebih mencerminkan web seluler yang semakin meningkat. Jaringan data seluler memiliki karakteristik kinerja yang berbeda dari kabel atau wifi sehingga Anda perlu melakukan berbagai hal untuk mengoptimalkannya.

Above-the-fold (ATF) hanyalah nilai layar pertama - apa pun yang tidak perlu Anda gulir untuk melihatnya. Jelas, ini bervariasi tergantung pada perangkat dan orientasinya, jadi Anda mungkin perlu menggeneralisasi dan mungkin menemukan beberapa opsi umum yang bisa diterapkan, mungkin satu menargetkan smartphone, satu untuk tablet, dan satu untuk desktop yang lebih besar.

Adapun CSS apa yang mereka bicarakan, mereka benar-benar bermaksud semua CSS yang diperlukan untuk sepenuhnya gaya konten apa pun yang ditampilkan ATF. Untuk menentukan waktu muat konten ATF Anda, mereka akan mengambil screenshot dari versi final dan membandingkannya secara visual dengan halaman saat memuat dan ketika cukup mirip, mereka akan menganggap bahwa titik di mana konten ATF dimuat.

Ini adalah presentasi video dari Google tentang subjek ini:

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

Penekanannya adalah membuat pengguna melakukan sesuatu dalam detik pertama. Alasan di balik menempatkan CSS untuk konten ATF langsung ke dalam HTML mencerminkan penelitian mereka tentang kinerja data seluler yang menunjukkan bahwa jika CSS tidak ada di sana, itu tidak akan dimuat cukup cepat untuk berada di detik pertama.

Mereka juga menyediakan tautan ke alat-alat yang mungkin dapat mengotomatisasi sebagian dari ini. Saya belum mencobanya dan YMMV.

— Joshua Coady
sumber

@Joshua, saya telah melakukan beberapa hal untuk "Menghilangkan JavaScript dan CSS yang memblokir render-blok di atas-the-fold" <noscript> ... </noscript>. Tetapi hanya merefleksikan ponsel. Tidak di desktop. untuk url ini winni.in/cake-delivery-in-bangalore

— V SH

2

wawasan halaman google akan memberi tahu Anda dengan jelas berapa banyak% css yang merujuk pada konten di atas flip yang dimuat terlalu terlambat dan halaman mungkin telah dirender sebelumnya. Daripada Anda bisa memindahkan bagian css untuk mencapai hasil hijau. saya dapat melakukannya untuk Anda: goo.gl/GsRxNc

tautan dari Google yang menjelaskan 'di atas flip' https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

— Tidak ada wanita tidak menangis
sumber

Bisakah Anda mengklarifikasi apa yang dimaksud dengan persen? Katakanlah PageSpeed melaporkan bahwa 55% konten di atas-lipat dapat dirender tanpa menunggu stylesheet eksternal dimuat. Yang berarti bahwa 45% dari konten di atas-lipatan ditata dengan aturan dari stylesheet eksternal. Tapi bukan itu masalahnya .

— x-yuri

0

Konten di atas flip adalah bagian dari halaman web yang terlihat di jendela browser saat halaman pertama kali dimuat. Google ingin melihat inline CSS diekstraksi dari file CSS utama Anda dan disuntikkan ke tag kepala, memungkinkan semua yang Anda lihat terlebih dahulu dimuat terlebih dahulu.

sumber - https://www.c2experience.com/blog/passing-googles-abovethefold-css#:~:text=Above%2Dthe%2Dfold%20content%20is,first%20to%20be%20load%20first pertama .

— Emily Katie
sumber

-1

Mereka merujuk pada pemblokiran render seperti analitik atau kode pelacakan yang karenanya mereka menyarankan untuk menempatkan skrip "muat saya sebelum segalanya" di footer karena mereka akan dimuat setelah pengguna memiliki situs di layar.

— CowboyWillie
sumber

Ini benar. Mereka harus ditunda atau dimuat secara async, atau dipindahkan ke footer / sebelum tag </body> penutup, karena itu tidak penting untuk halaman. Kode krusial, seperti gaya halaman utama atau Bootstrap, harus dimuat di bagian atas halaman atau Anda akan mengalami FOUC (Flash Of Unstyled Content), jadi hanya hal yang dapat dilakukan mengenai komponen-komponen penting ini adalah dengan memperkecil dan menggabungkannya menjadi lebih sedikit file, untuk mengurangi pemblokiran render. Komentar ini adalah dukungan untuk komentar CowboyWillie yang tidak diunggah secara adil.

— Tahi Reu