Mengikuti Penilaian Wawasan PageSpeed ​​Google

Jika Anda seorang pemilik bisnis, Anda tertarik untuk mendapatkan peringkat pencarian yang lebih baik untuk situs web Anda. Jika Anda seorang pengembang, Anda harus memenuhi kebutuhan klien dan membuat situs yang mampu memberi peringkat dengan baik. Google mempertimbangkan ratusan karakteristik ketika menentukan urutan situs web di Halaman Peringkat Mesin Pencari (SERP).

Kecepatan halaman secara resmi disebut sebagai atribut peringkat penting pada pertengahan 2018. Dalam artikel ini, kami akan menjelaskan skor kinerja yang harus diperhatikan oleh pemilik bisnis: PageSpeed ​​Insights. Kami akan membahas lebih dalam beberapa detail teknis yang akan membantu pengembang perangkat lunak melakukan perbaikan dalam kasus yang rumit, seperti yang terkait dengan aplikasi satu halaman.

Mengapa Uji Wawasan PageSpeed ​​Google Penting

Ketika Google memperkenalkan PageSpeed ​​Tools pada 2010, sebagian besar pemilik situs web mengenalnya. Mereka yang belum harus membuka PageSpeed ​​Insights untuk memeriksa situs mereka.

Layanan ini memberikan detail tentang kinerja situs web baik di browser desktop maupun seluler. Sangat mudah untuk melewatkan fakta bahwa Anda dapat beralih di antara mereka menggunakan tab Seluler dan Desktop di bagian atas analisis:

Karena perangkat seluler kompak dan bertujuan untuk menghemat masa pakai baterai, browser web mereka cenderung menunjukkan kinerja yang lebih rendah daripada perangkat yang menjalankan sistem operasi desktop, jadi perkirakan skor desktop akan lebih tinggi.

Perusahaan teknologi besar tidak akan mendapat skor merah di area mana pun, tetapi situs yang lebih kecil yang berjalan dengan anggaran yang lebih ketat mungkin. Pemilik bisnis juga dapat menjalankan PageSpeed ​​Insights di situs pesaing mereka dan membandingkan hasilnya dengan situs mereka sendiri untuk melihat apakah mereka perlu berinvestasi dalam meningkatkan kinerja.

Berapa Skor yang Cukup untuk Lulus Penilaian PageSpeed?

PageSpeed ​​menggunakan metrik dari Core Web Vitals untuk memberikan penilaian lulus/gagal.

Alat ini memiliki tiga skor:

1. PageSpeed ​​secara mencolok menampilkan skor Performa dalam lingkaran berwarna di bagian Diagnosis Masalah Performa. Ini dihitung menggunakan mesin virtual bawaan PageSpeed ​​dengan karakteristik yang cocok dengan rata-rata perangkat seluler atau desktop. Harap diingat bahwa nilai ini untuk pemuatan halaman dan untuk mesin virtual PageSpeed, dan tidak dipertimbangkan oleh mesin Google Search.

   Angka ini berguna ketika pengembang menerapkan perubahan pada situs web, karena memungkinkan mereka untuk memeriksa efek perubahan pada kinerja. Namun, mesin pencari Google hanya mempertimbangkan skor rinci.

2. Skor mendetail untuk halaman tertentu —dan untuk halaman yang dianggap serupa dengan halaman yang dianalisis oleh PageSpeed—dihitung dari statistik yang dikumpulkan browser Chrome di komputer asli dan dikirim ke Google. Ini berarti kinerja di Firefox, Safari, dan browser non-Chromium lainnya tidak diperhitungkan.

3. Ringkasan untuk semua halaman situs web diperoleh dengan cara yang sama seperti skor satu halaman. Untuk mengaksesnya, pilih tab Asal alih-alih tab URL Ini. URL yang tercantum di bawah bilah tab akan berbeda, karena Origin akan menampilkan halaman utama situs (hanya domain).

Google terus memperbarui daftar metrik yang dipertimbangkan oleh PageSpeed, jadi sumber terbaik dari apa yang penting adalah bagian Pengalaman / Core Web Vitals di Google Search Console, dengan asumsi Anda telah menambahkan situs web Anda di sana.

Untuk lulus Penilaian Vital Web Inti, semua skor harus berwarna hijau:

Agar nilainya menjadi hijau, halaman harus mendapat skor setidaknya 75% dalam pengujian, dan banyak pengguna perlu merasakan nilai yang sama atau lebih baik. Ambang batas berbeda untuk setiap skor dan secara signifikan lebih tinggi untuk FID.

Untuk lebih memahami nilainya, klik judul skor:

Tautan ini ke posting blog yang menjelaskan ambang batas untuk kategori yang diberikan secara lebih rinci.

Data diakumulasikan selama 28 hari, dan ada dua perbedaan utama lainnya dari apa yang mungkin dialami pengguna sebenarnya:

1. Performa perangkat nyata dan kecepatan internet bervariasi, sehingga pengujian ini menghasilkan hasil yang berbeda dari hasil mesin virtual PageSpeed.
2. Peringkat terperinci dihitung selama seluruh halaman hidup, mengambil nilai terburuk dari setiap interval lima detik halaman terbuka.

Jika banyak pengguna situs tinggal di wilayah dengan akses internet yang lambat dan menggunakan perangkat yang sudah ketinggalan zaman atau berkinerja buruk, perbedaannya bisa mengejutkan. Ini bukan salah satu rekomendasi peningkatan PageSpeed ​​Insights. Sepintas, tidak jelas bagaimana menangani masalah ini, tetapi kami akan mencoba menjelaskannya nanti.

Meningkatkan Skor Menggunakan Rekomendasi PageSpeed ​​Insights

Bagian utama dari peringkat berasal dari cara sebagian besar pengguna membuka halaman. Terlepas dari kenyataan bahwa tidak semua pengguna mengunjungi situs web untuk jangka waktu yang lama, dan sebagian besar mengunjungi situs web sesekali, semua pengguna dipertimbangkan dalam peringkat, jadi meningkatkan kecepatan pemuatan halaman, yang berdampak pada semua orang, adalah tempat yang baik untuk memulai.

Rekomendasi dapat kita temukan di bagian Peluang di bawah hasil penilaian.

Kami dapat memperluas setiap item dan mendapatkan rekomendasi terperinci untuk peningkatan. Ada banyak informasi, tetapi berikut adalah tip paling mendasar dan penting:

• Tingkatkan kecepatan respons server. Misalnya, jika Anda menggunakan hosting bersama, tingkatkan paket Anda atau migrasi ke server pribadi virtual (VPS) atau bahkan server khusus. Juga, tidak semua host sama. Coba pilih hosting yang andal dengan perangkat keras yang baik dan jaminan uptime.
• Turunkan volume lalu lintas yang diperlukan untuk membuka situs Anda. Untuk mencapai ini, Anda dapat mengganti gambar dengan yang dioptimalkan: mengubah formatnya, menyesuaikan resolusi dan kompresi, mengganti gambar animasi dengan gambar statis jika diperlukan, dll. Sistem manajemen konten populer memiliki plug-in yang membuat proses ini menjadi mudah.
• Cache lebih banyak data. Cara termudah untuk melakukannya adalah dengan menggunakan jaringan pengiriman konten (CDN) seperti Cloudflare untuk konten statis (gambar, gaya, skrip, halaman yang tidak berubah). Anda dapat mengonfigurasi aturan caching untuk mengoptimalkan kinerja.

Sekarang mari kita lihat faktor yang lebih rumit, di mana programmer berpengalaman dapat membantu.

Cara Men-debug Skor Selama Seumur Hidup Halaman

Seperti yang disebutkan, Google Search Console mempertimbangkan skor rata-rata yang diperoleh dari browser berbasis Chromium selama 28 hari terakhir dan juga menyertakan nilai untuk seluruh umur halaman.

Ketidakmampuan untuk melihat apa yang terjadi selama masa hidup halaman adalah masalah. Mesin virtual PageSpeed ​​tidak dapat menjelaskan bagaimana kinerja halaman setelah dimuat dan pengguna berinteraksi dengannya, yang berarti pengembang situs tidak akan memiliki akses ke rekomendasi untuk perbaikan.

Solusinya adalah dengan menyertakan pustaka Google Chrome Web Vitals dalam versi pengembang proyek situs untuk melihat apa yang terjadi saat pengguna berinteraksi dengan laman.

Berbagai opsi tentang cara memasukkan perpustakaan ini ada di file README.md-nya di GitHub. Cara paling sederhana adalah dengan menambahkan skrip berikut. Itu di-tweak untuk menampilkan nilai selama masa pakai halaman di <head> templat utama:

 <script> (function() { var script = document.createElement('script'); script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js'; script.onload = function() { // When loading `web-vitals` using a classic script, all the public // methods can be found on the `webVitals` global namespace. webVitals.getCLS(console.log, true); // CLS supported only in Chromium. webVitals.getLCP(console.log, true); // LCP supported only in Chromium. webVitals.getFID(console.log, true); webVitals.getFCP(console.log, true); webVitals.getTTFB(console.log, true); } document.head.appendChild(script); }()) </script>

Perhatikan bahwa perhitungan Pergeseran Tata Letak Kumulatif (CLS) dan Cat Konten Terbesar (LCP) hanya tersedia untuk browser berbasis Chromium, termasuk Chrome, Opera, Brave (nonaktifkan Brave Shields agar perpustakaan berfungsi), dan sebagian besar browser modern lainnya, kecuali Firefox , yang didasarkan pada mesin Mozilla, dan browser Safari Apple.

Setelah menambahkan skrip dan memuat ulang halaman, buka alat pengembang browser dan alihkan ke tab Konsol.

Untuk melihat bagaimana nilai tersebut dihitung untuk versi seluler, alihkan ke perangkat seluler menggunakan toolbar Perangkat. Untuk mengaksesnya, klik tombol Toggle Device Toolbar di alat Pengembang browser Anda.

Ini akan membantu menentukan masalah. Memperluas baris di konsol akan menampilkan detail tentang apa yang memicu perubahan skor.

Sebagian besar waktu, saran otomatis untuk skor lain sudah cukup untuk mendapatkan ide tentang cara meningkatkannya. Namun, CLS berubah setelah halaman dimuat dengan interaksi pengguna, dan mungkin tidak ada rekomendasi, terutama untuk aplikasi satu halaman. Anda mungkin melihat skor 100 sempurna di bagian Diagnosis Masalah Kinerja, meskipun laman Anda gagal lulus penilaian untuk faktor-faktor yang dipertimbangkan oleh mesin telusur.

Bagi kita yang berjuang dengan CLS, ini akan sangat membantu. Perluas catatan log, lalu entri, entri spesifik, sumber, sumber spesifik, dan bandingkan currentRect dengan previousRect :

Sekarang kita dapat melihat apa yang berubah, kita dapat mengidentifikasi beberapa cara untuk memperbaikinya.

Mengurangi Pergeseran Tata Letak Kumulatif

Dari semua skor, CLS adalah yang paling sulit untuk dipahami, tetapi sangat penting untuk pengalaman pengguna. Pergeseran tata letak terjadi ketika elemen ditambahkan ke model objek dokumen (DOM) atau ukuran atau posisi elemen yang ada diubah. Ini menyebabkan elemen di bawah elemen tersebut bergeser, dan pengguna merasa mereka tidak dapat mengontrol apa yang terjadi, menyebabkan mereka meninggalkan situs web.

Ini relatif mudah untuk menangani ini pada halaman HTML sederhana. Atur atribut lebar dan tinggi untuk gambar sehingga teks di bawahnya tidak bergeser saat dimuat. Ini kemungkinan akan menyelesaikan masalah.

Jika halaman Anda dinamis dan pengguna bekerja dengannya seperti dengan aplikasi, pertimbangkan langkah-langkah berikut untuk mengatasi masalah CLS:

1. Setel laman untuk menampilkan konten 500 milidetik setelah pengguna mengeklik tombol atau tautan tanpa memicu CLS.
2. Ubah parameter yang tidak menyebabkan elemen DOM lain bergeser: latar belakang, warna, dll.
3. Pastikan elemen lain tidak akan bergeser saat mengubah ukuran atau posisi elemen.

Rekomendasi yang lebih mendetail tersedia di halaman Google Developers Optimize CLS.

Bagaimana 500 Milidetik Dapat Mengurangi CLS

Untuk mengilustrasikan cara menggunakan ambang 500 milidetik, kami akan menggunakan contoh yang melibatkan unggahan gambar.

Biasanya ketika pengguna mengunggah file, skrip menambahkan elemen <img> ke DOM, lalu browser klien mengunduh gambar dari server. Mengambil gambar dari server dapat memakan waktu lebih dari 500 milidetik dan dapat menyebabkan perubahan tata letak.

Tetapi ada cara untuk mendapatkan gambar lebih cepat karena sudah ada di komputer klien, dan dengan demikian buat elemen <img> sebelum batas waktu 500 milidetik habis.

Berikut adalah contoh universal pada ECMAScript murni tanpa pustaka yang akan berfungsi di sebagian besar peramban modern:

 <!DOCTYPE html> <html> <head></head> <body> <input type="file"> <img> <script> document.getElementById('input').addEventListener('change', function() { var imageInput = document.getElementById('input'); if (imageInput.files && imageInput.files[0]) { var fileReader = new FileReader(); fileReader.onload = function (event) { var imageElement = document.getElementById('image'); imageElement.setAttribute('src', event.target.result); } fileReader.readAsDataURL(imageInput.files[0]); } }); </script> </body> </html>

Seperti yang kita lihat sebelumnya, memperbaiki masalah semacam ini mungkin memerlukan ketangkasan mental. Dengan perangkat seluler, terutama yang murah, dan dengan internet seluler yang lambat, seni pengoptimalan kinerja tahun 90-an menjadi berguna dan pendekatan pemrograman web jadul dapat menginspirasi teknik kami. Alat debug browser modern akan membantu dengan itu.

Perbarui Google Search Console

Setelah menemukan dan menghilangkan masalah, mesin pencari Google mungkin memerlukan beberapa waktu untuk mendaftarkan perubahan. Untuk memperbarui hasil sedikit lebih cepat, beri tahu Google Search Console bahwa Anda telah memperbaiki masalah.

Pilih halaman yang sedang Anda kerjakan menggunakan kotak properti Cari di sudut kiri atas. Kemudian navigasikan ke Core Web Vitals di menu hamburger kiri:

Klik tombol Buka Laporan di kanan atas laporan seluler atau desktop. (Jika Anda mengalami masalah dengan keduanya, ingatlah untuk mengulangi tindakan yang sama untuk laporan kedua nanti.)

Selanjutnya, buka bagian Detail di bawah bagan dan klik baris dengan peringatan validasi gagal.

Kemudian klik tombol Lihat Detail untuk masalah ini.

Dan terakhir klik Mulai Validasi Baru.

Jangan mengharapkan hasil langsung. Validasi dapat memakan waktu hingga 28 hari.

Optimalisasi Adalah Perjuangan Terus Menerus

Pengoptimalan SEO adalah proses yang berkelanjutan, dan hal yang sama berlaku untuk pengoptimalan kinerja. Saat audiens Anda bertambah, server menerima lebih banyak permintaan dan respons menjadi lebih lambat. Meningkatnya permintaan biasanya berarti fitur baru ditambahkan ke situs Anda, dan dapat memengaruhi kinerja.

Ketika datang ke aspek biaya/manfaat dari pengoptimalan kinerja, perlu untuk mencapai keseimbangan yang tepat. Pengembang tidak perlu mencapai nilai terbaik di semua situs, setiap saat. Berkonsentrasi pada apa yang menyebabkan masalah kinerja yang paling signifikan; Anda akan mendapatkan hasil lebih cepat dan dengan sedikit usaha. Perusahaan besar mampu menginvestasikan banyak sumber daya dan mendapatkan semua nilai, tetapi ini tidak berlaku untuk bisnis kecil dan menengah. Pada kenyataannya, usaha kecil kemungkinan besar hanya perlu menyamai atau melampaui kinerja pesaing mereka, bukan industri kelas berat seperti Amazon.

Pemilik bisnis harus memahami mengapa pengoptimalan situs sangat penting, aspek pekerjaan apa yang paling penting, dan keterampilan apa yang harus dicari pada orang yang mereka pekerjakan untuk melakukannya. Pengembang, pada bagian mereka, harus selalu mengingat kinerja, membantu klien mereka membuat situs yang tidak hanya terasa cepat bagi pengguna akhir, tetapi juga mendapat skor yang baik di PageSpeed ​​Insights.