Apakah Anda Membutuhkan Skor 100% di Google PageSpeed ​​Insights?

Kami tidak suka menunggu. Jika orang harus menunggu saat mengunjungi situs web Anda, mereka akan bosan dan akan mengunjungi situs web lain. Loading web Anda dengan cepat adalah kebutuhan penting saat ini. Tapi bagaimana kita bisa tahu jika sebuah situs web lambat atau cepat?

Saya tahu, pertanyaan ini tampaknya agak bodoh. Anda bisa mengetahui apakah suatu web cepat atau lambat dengan mengukur waktu pemuatannya, duh. Yang sulit adalah mengetahui apakah nilai yang dihasilkan dari analisis ini dapat digolongkan “lambat” atau “cepat”. Menunggu 2 detik mungkin tidak menjadi masalah, tetapi jika situs web saya dimuat dalam separuh waktu, itu akan jauh lebih baik, bukan? Khususnya jika Anda mempertimbangkan hal-hal seperti situs web Anda mungkin hanya membutuhkan waktu 2 detik untuk memuat koneksi Internet Anda, tetapi bagaimana dengan mereka yang memiliki koneksi lambat?

Semua ini adalah masalah yang lebih kompleks daripada yang terlihat pada awalnya. Untuk menetapkan ukuran yang sebanding, ada evaluator tingkat pengoptimalan situs web, seperti Google PageSpeed ​​Insights atau GTMetrix, hanya untuk menyebutkan beberapa.

Evaluator ini dapat menganalisis halaman web dan memberikan nilai pada skala 0 hingga 100 tergantung pada tingkat pengoptimalannya. Selain itu, mereka mendeteksi karakteristik web dan menunjukkan saran yang dapat kami lakukan untuk meningkatkan kualitasnya dan, menurut dugaan, kecepatannya.

Namun, mencari kesempurnaan bisa menjadi kontraproduktif. Mencari keunggulan di Google PageSpeed ​​Insights dapat mengabaikan aspek lain dari situs web Anda yang juga penting, seperti pengalaman pengguna.

Mencari Keunggulan di Google PageSpeed ​​Insights

Kami baru-baru ini menulis ulang tema situs web kami dari awal dan telah mengubah semua halaman kami menggunakan blok dari editor blok WordPress yang baru. Ini adalah latihan untuk lebih memahami karakteristik editor blok dan juga melihat kekurangannya, belajar sambil melakukan.

Mengambil keuntungan dari tugas ini, kami telah menganalisis situs web kami dengan Google PageSpeed ​​Insights untuk mencoba meningkatkan nilai akhirnya dan sedekat mungkin dengan 100 yang diinginkan. Selanjutnya kita akan melihat beberapa poin yang telah kami tingkatkan berkat indikasi Google dan kesimpulan kami tentang hal itu.

Gunakan ukuran yang sesuai untuk gambar

Kami telah membahas topik ini di blog kami. Ingatlah bahwa Anda harus mencoba menggunakan ukuran gambar yang sesuai dengan kebutuhan tema Anda. Jangan gunakan gambar raksasa karena tidak perlu.

Jika Google PageSpeed ​​Insights mengeluh tentang gambar Anda, hal baiknya adalah ia akan memberi tahu Anda gambar apa yang menyebabkan masalah sehingga Anda dapat memperbaikinya. Ini adalah pekerjaan yang melelahkan untuk dilakukan tetapi hasilnya berdampak langsung pada waktu pemuatan web Anda.

Tunda pemuatan gambar yang tidak muncul di layar

Untuk semua gambar halaman Anda yang harus dilihat pengunjung harus menggulir ke bawah, yang disarankan adalah menerapkan lazy loading .

Apa yang Anda dapatkan dengan menggunakan lazy loading adalah Anda hanya meminta server untuk gambar saat pengunjung menggulir dan perlu melihatnya. Dengan cara ini kami menghindari kelebihan server dalam permintaan awal dan mengurangi waktu, membuat web memuat lebih cepat. Saya merekomendasikan Anda artikel ini tentang itu. Jika Anda ingin menggunakan plugin untuk lazy loading, mungkin yang satu ini bisa membantu Anda.

Dalam kasus kami, plugin pengoptimalan SiteGround menyertakan pemuatan lambat , jadi kami tidak memerlukan apa pun untuk mengaktifkan teknik ini di situs web kami.

Pastikan teks tetap terlihat saat font web dimuat

Jika Anda menggunakan Google Webfonts, seperti yang kami lakukan, adalah ironis untuk memeriksa bagaimana skrip yang diberikan Google kepada Anda untuk memuat font terdeteksi oleh Google PageSpeed ​​Insights sebagai tidak dapat diperbaiki.

Menurut Google, Anda harus menggunakan tampilan font-display CSS di @font-face agar pengguna dapat melihat teks saat memuat font web. Secara khusus, Anda harus menempatkan font-display:swap dalam pemuatan font sehingga browser tidak memblokir rendering teks hingga font tersedia. Anda dapat mengunduh font Google dan mengimpornya langsung menggunakan font-display dijelaskan di sini.

Dengan ini pengunjung dapat melihat teks dari awal, bahkan jika font tertentu oleh Google tidak dimuat. Pada saat font tersedia, browser akan menerapkannya ke teks, mengubah gayanya menjadi yang diinginkan.

Hapus sumber daya yang memblokir rendering

Gaya CSS dan skrip JavaScript semakin sering digunakan untuk mengubah desain konten dan membuatnya dinamis.

Jika kita memuat CSS dan JS di <header> web, hal yang normal adalah rendering konten diblokir dan web tidak memuat konten hingga file gaya dan JavaScript diproses.

Salah satu opsi untuk menghindarinya adalah dengan memindahkan file-file ini ke <footer> web. Dengan melakukan ini, semua konten yang masuk ke <body> akan dimuat dan dirender terlebih dahulu, tanpa diblokir.

Juga disarankan untuk menggunakan atribut defer dan async dalam skrip JavaScript sehingga pemuatan ditangguhkan atau dilakukan secara asinkron.

Aspek lain yang membantu meningkatkan skor akhir Google PageSpeed ​​Insights adalah fakta mengecilkan dan mengompresi file CSS dan JS, serta menggabungkannya masing-masing dalam satu file CSS dan JS. Namun, berhati-hatilah dengan kombinasinya karena jika Anda menggabungkannya dalam urutan yang salah, Anda dapat mengalami kekurangan dalam gaya dan merusak eksekusi kode JavaScript.

Anda dapat menggunakan plugin ini untuk mendapatkan hasil yang lebih baik, tetapi sekali lagi, gunakan dengan hati-hati.

Kelemahan Meningkatkan Kecepatan Situs Web Anda

Setelah menerapkan solusi atas saran yang diajukan oleh Google menggunakan laporan Google PageSpeed ​​Insights, waktu pemuatan situs web berkurang. Namun, ini memiliki harga yang tidak jelas apakah kita ingin membayar.

Salah satu efek samping dari keringanan situs web kami adalah pengalaman pengguna yang didapat pengunjung mungkin tidak sebaik sebelumnya. Biarkan saya menguraikan lebih lanjut …

Agar konten situs web kami ditampilkan sesegera mungkin di browser pengunjung kami, kami telah menunda pemuatan gaya JavaScript dan CSS di footer web kami (mereka telah berpindah dari header ke footer ). Dan kami juga mengizinkan teks untuk dimuat sebelum memiliki font web.

Semua ini menyebabkan pengunjung dengan cepat melihat konten web tanpa gaya. Yang berarti bahwa mereka melihat semuanya cukup datar dan jelek. Selain itu, mereka akan melihat bagaimana font teks berubah ketika sudah tersedia. Pengunjung juga akan melihat beberapa kedipan saat gaya CSS dan JavaScript diterapkan dan dijalankan.

Sebelumnya, dalam instalasi WordPress umum, pengunjung melihat pemuatan web tanpa masalah. Sekarang dia akan melihat bahwa itu memuat sedikit lebih cepat, tetapi semua kedipan yang dia alami ini mengurangi pengalaman pengguna dan mungkin membuat pengunjung berpikir bahwa web memuat dengan aneh. Atau bahkan ada sesuatu yang rusak di web karena setiap kali Anda menavigasi ke halaman, kedipan muncul sebentar.

Apakah layak memberikan perasaan aneh ini kepada pengunjung hanya untuk memenangkan beberapa milidetik dalam waktu pemuatan dan beberapa poin tambahan di Google PageSpeed ​​Insights? Kami tidak berpikir begitu. Dan untuk alasan ini kami telah kembali ke cara umum memuat gaya dan skrip yang dilakukan WordPress secara default.

Apakah ini berdampak negatif atau tidak pada aspek lain, seperti SEO , sebenarnya kami tidak tahu (dan kami tidak yakin ada yang tahu pasti). Kami juga tidak jelas apakah evaluasi Google PageSpeed ​​Insights memiliki bobot sebanyak yang diyakini sebagian orang.

Jelas bahwa ada aspek yang perlu ditingkatkan, seperti ukuran gambar yang benar, menggunakan file yang diperkecil untuk mengurangi bobotnya atau menghindari memuat semua yang tidak akan digunakan pada halaman.

Jangan tergila-gila dengan evaluator optimasi website Anda dan dengan mendapatkan skor maksimal. Lagi pula, pengunjung target Anda dibuat oleh darah dan daging, tidak dapat menghargai perbedaan minimum dalam sepersepuluh detik. Setelah nilai Anda sebagian besar benar, fokuslah pada hal lain.

Gambar unggulan dari Taun Stewart di Unsplash .