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.
sumber
Jawaban:
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.
sumber
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
sumber
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 .
sumber
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.
sumber