Fitur Google PageSpeed: peningkatan peringkat situs dan peringkat pencarian

Materi, terjemahan yang kami terbitkan hari ini, dikhususkan untuk peringkat kecepatan situs, yang dapat dihitung menggunakan Google PageSpeed ​​Insights.

Bukan rahasia lagi bahwa kecepatan situs di zaman kita telah menjadi salah satu karakteristik terpentingnya. Semakin cepat situs memuat dan bersiap-siap untuk bekerja, semakin tinggi pula pendapatan yang dibawanya kepada pemiliknya. Mempercepat situs berarti mengurangi jumlah pengguna yang, setelah hampir tidak pernah mengunjungi situs ini, meninggalkannya, bosan menunggu pengunduhan materi. Yang sangat penting bagi kinerja situs adalah kenyataan bahwa sekarang indikator Google PageSpeed ​​digunakan sebagai salah satu faktor peringkat situs dalam hasil pencarian. Akibatnya, saat ini banyak organisasi yang memperhatikan kecepatan situs mereka.

Perubahan dalam algoritma peringkat situs

Tahun lalu, Google membuat dua perubahan besar pada indeks pengindeksan dan algoritma peringkat situsnya.

• Pada bulan Maret, pengindeksan didasarkan pada versi halaman mobile daripada desktop.
• Pada bulan Juli, algoritma peringkat SEO telah diperbarui . Saat menghitungnya untuk halaman seluler dan iklan, mereka mulai menggunakan peringkat kecepatan halaman.

Fakta-fakta ini memungkinkan kami untuk menarik kesimpulan sebagai berikut:

• Kecepatan versi seluler situs ini akan memengaruhi peringkat SEO keseluruhannya.
• Jika halaman situs dimuat dengan lambat, ini akan mengurangi skor kualitas iklan dan iklan akan lebih mahal.

Inilah yang dikatakan Google tentang hal itu: “Situs lebih cepat tidak hanya meningkatkan pengalaman pengguna; data terbaru menunjukkan bahwa peningkatan kecepatan situs, di samping itu, mengarah pada penurunan biaya dukungannya. Kami sangat menghargai kecepatannya. Hal yang sama dapat dikatakan tentang pengguna kami. Itu sebabnya kami memutuskan bahwa ketika menghitung indikator peringkat pencarian, kami juga akan memperhitungkan kecepatan situs. "

Untuk memahami bagaimana perubahan ini mempengaruhi proyek kami dalam hal mengoptimalkan kinerja mereka, kita perlu memahami teknologi yang mendasari penilaian kecepatan situs. PageSpeed ​​5.0 adalah versi yang sepenuhnya direvisi dari sistem ini. Sekarang didasarkan pada Lighthouse dan CrUX (Laporan Pengalaman Pengguna Chrome).

Pembaruan ini, di samping itu, membawa algoritma penilaian baru, yang sangat menyulitkan tugas untuk mendapatkan skor tinggi di PageSpeed.

Apa yang telah berubah di PageSpeed ​​5.0?

Sebelum versi 5.0, alat PageSpeed ​​memeriksa halaman, menganalisis kepatuhannya dengan seperangkat aturan heuristik. Jika ada gambar besar yang tidak terkompresi pada halaman, PageSpeed ​​dapat menyarankan pengembang web untuk mengompres gambar ini. Tidak Ada Judul Cache? Sistem dapat menyarankan mereka untuk menambahkan.

Rekomendasi terkait dengan pemeriksaan halaman ini. Rekomendasi berikut dapat menghasilkan kinerja halaman yang lebih baik. Tetapi aturan heuristik agak dangkal, mereka tidak bertujuan mengeksplorasi tayangan apa yang dimuat dan dirender halaman yang akan menyebabkan pengunjung nyata ke situs.

Di PageSpeed ​​5.0, halaman dimuat ke browser Chrome nyata, yang dikendalikan oleh Lighthouse. Lighthouse mencatat metrik yang diperoleh dari browser, menerapkan model skor untuk mereka, dan menampilkan skor kinerja keseluruhan. Rekomendasi untuk meningkatkan kinerja diberikan berdasarkan poin yang dicetak oleh halaman yang diteliti untuk indikator individual.

Mercusuar, seperti PageSpeed, memiliki sistem penilaian kinerja situs. Di PageSpeed ​​5.0, evaluasi kinerja diambil langsung dari Lighthouse. Output skor kinerja oleh PageSpeed ​​sekarang adalah skor yang sama dengan yang dihasilkan Lighthouse.


Peringkat kinerja PageSpeed ​​didasarkan pada peringkat yang dihasilkan oleh Lighthouse

Sekarang kita tahu dari mana skor PageSpeed ​​berasal, mari kita bicara tentang bagaimana skor ini dihitung dan apa yang dapat dilakukan untuk meningkatkan kecepatan situs.

Apa itu Google Lighthouse?

Lighthouse adalah proyek sumber terbuka, yang ditangani oleh tim khusus, dipilih dari antara pengembang Google Chrome. Selama beberapa tahun terakhir, Lighthouse telah menjadi alat gratis standar untuk menganalisis kinerja situs.

Lighthouse menggunakan Protokol Debugging Jarak Jauh Chrome (Protokol Debugging Jarak Jauh Chrome) untuk membaca informasi tentang permintaan jaringan, untuk mengukur kinerja kode JavaScript, untuk memverifikasi kepatuhan dengan standar untuk aksesibilitas konten halaman. Alat ini mengukur indikator waktu yang difokuskan pada persepsi halaman oleh pengguna. Ini termasuk, misalnya, Cat Konten Pertama , Waktu untuk Interaktif, dan Indeks Kecepatan.

Jika Anda tertarik dengan Mercusuar - lihat materi ini dari repositori proyek resmi, yang didedikasikan untuk deskripsi umum arsitekturnya.

Perhitungan peringkat kinerja situs di Lighthouse

Sebagai bagian dari studi kinerja halaman, Lighthouse menulis banyak metrik yang berfokus pada mengevaluasi apa yang dilihat pengguna dan apa yang dialami pengguna saat bekerja dengan halaman tersebut. Berikut adalah enam metrik yang digunakan untuk memperoleh skor kinerja keseluruhan:

• Waktu untuk Interaktif (TTI, Unduh waktu untuk interaksi).
• Indeks Kecepatan.
• Cat Konten Pertama (FCP, Waktu Unduhan Konten Pertama).
• Idle CPU Pertama.
• Cat Bermakna Pertama (FMP, Unduh Waktu untuk Konten Cukup).
• Diperkirakan Latensi Input.

Masing-masing indikator dievaluasi pada skala 0 - 100. Penilaian dilakukan dengan memperoleh persentil ke-75 dan ke-95 untuk halaman seluler dari Arsip HTTP dan dengan menggunakan fungsi log normal .

Dengan mengikuti algoritma ini dan mempertimbangkan data yang digunakan untuk menghitung TTI, Anda dapat melihat bahwa jika halaman dapat menjadi "interaktif", cocok untuk interaksi pengguna, dalam 2,1 detik, maka TTI akan sama dengan 92/100.


TTI

Setelah masing-masing indikator dihitung, bobot tertentu diberikan padanya, yang digunakan sebagai pengubah dalam menghitung total indikator. Berikut adalah bobot yang ditetapkan untuk berbagai metrik.

Bobot menunjukkan bagaimana masing-masing indikator mempengaruhi pengalaman pengguna ponsel dengan halaman.

Di masa mendatang, set ini dapat diperluas untuk memasukkan indikator yang diambil dari set data Laporan Pengalaman Pengguna Chrome yang terkait dengan persepsi pengguna tentang situs.

Anda mungkin tertarik mempelajari bagaimana penggunaan bobot memengaruhi peringkat kinerja akhir. Jika demikian, lihat tabel ini yang dibuat oleh tim Mercusuar. Setelah menganalisanya, Anda dapat lebih memahami proses ini.


Fragmen tabel yang menunjukkan perhitungan peringkat kinerja halaman

Jika Anda mengubah metrik interactive dalam contoh di atas (inilah yang kami sebut TTI di sini) dari 5 detik hingga 17 detik (yaitu, ke tingkat TTI rata-rata global untuk halaman seluler), maka peringkat halaman akan turun menjadi 56% ( itu - dia akan mendapatkan 56 poin dari 100 kemungkinan).

Jika Anda mengatur indikator first-contentful-paint menjadi 17 detik, peringkat akan turun menjadi 62%.

Akibatnya, kita dapat menyimpulkan bahwa metrik TTI memiliki dampak terbesar pada peringkat situs final. Oleh karena itu untuk mendapatkan halaman PageSpeed ​​yang berperingkat tinggi, Anda harus menunjukkan TTI yang layak.

Perbaikan TTI

Jika kita secara luas mempertimbangkan masalah peningkatan TTI, maka kita dapat mengatakan bahwa ada dua faktor yang sangat kuat mempengaruhi indikator ini:

• Jumlah kode JavaScript yang dimuat di halaman.
• Waktu yang diperlukan untuk menyelesaikan berbagai tugas JavaScript di utas utama.

Di sini Anda dapat menemukan detail tentang TTI, tetapi jika Anda ingin dengan cepat, tanpa perlu riset tambahan, tingkatkan TTI situs web Anda, kami dapat merekomendasikan pengurangan jumlah kode JavaScript.

Sedapat mungkin, hapus kode JavaScript yang tidak digunakan, atau coba pastikan bahwa halaman tersebut hanya memuat skrip yang digunakan pada halaman ini. Pemenuhan rekomendasi ini dapat berarti menyingkirkan polyfill lama atau mengganti perpustakaan pihak ketiga dengan alternatif yang lebih kompak dan lebih modern.

Penting untuk diingat bahwa apa yang disebut " harga JavaScript " tidak hanya waktu yang diperlukan untuk mengunduh kode. Peramban perlu membuka zip, mengurai, mengkompilasi, dan akhirnya menjalankan kode JavaScript yang dimuat. Semua operasi ini dapat memakan banyak waktu. Terutama pada perangkat seluler.

Di antara langkah-langkah efektif untuk mengurangi jumlah kode JS yang digunakan oleh halaman, berikut ini dapat dicatat:

• Analisis polyfill yang digunakan dan penolakan dari mereka yang tidak lagi dibutuhkan oleh audiens Anda.
• Mencari tahu "biaya" dari masing-masing perpustakaan pihak ketiga yang digunakan. Untuk mempelajari tentang ukuran perpustakaan yang digunakan dalam proyek ini, Anda dapat menggunakan alat-alat seperti webpack-bundle-analyzer dan source-map-explorer .
• Alat JavaScript modern (seperti webpack) dapat memecah aplikasi JS besar menjadi kumpulan bundel kecil, yang secara otomatis dimuat saat diperlukan. Khususnya, ketika pengguna berpindah dari halaman ke halaman situs. Pendekatan ini untuk mengoptimalkan kinerja situs dikenal sebagai pemecahan kode . Penggunaannya memiliki efek yang sangat baik pada TTI.
• Gunakan pekerja layanan yang melakukan cache bytecode yang dihasilkan dari parsing dan kompilasi skrip. Jika Anda dapat memasukkan mekanisme caching seperti itu dalam proyek Anda, maka sumber daya sistem pengunjung situs akan dihabiskan untuk mem-parsing dan menyusun kode hanya ketika Anda pertama kali pergi ke sumber daya. Pada kunjungan berulang ke situs, materi yang diperlukan akan diambil dari cache.

Pemantauan TTI

Agar berhasil menjelajahi bagaimana situs Anda dilihat oleh pengguna yang melihatnya, kami sarankan untuk menggunakan sistem pemantauan kinerja situs web seperti Calibre . Secara khusus, kita berbicara tentang fakta bahwa situs diuji pada setidaknya dua perangkat - pada komputer desktop yang cepat dan pada ponsel, yang kinerjanya berada pada tingkat perangkat kelas menengah yang lambat.

Dengan pendekatan ini, Anda akan memiliki data untuk opsi terbaik untuk bekerja dengan situs Anda, dan untuk yang terburuk. Pada saat yang sama, Anda harus terbiasa dengan kenyataan bahwa pengunjung ke situs Anda tidak menggunakan perangkat canggih yang sama seperti yang digunakan oleh tim Anda.

Pembuatan profil manual yang cermat

Untuk mendapatkan hasil maksimal dari profil kinerja kode JS, halaman pengujian diuji pada perangkat seluler yang mengalami perlambatan khusus. Jika Anda memiliki telepon tua yang tergeletak di laci meja Anda, realisasi ide ini dapat memberikannya kehidupan kedua yang indah.

Pengganti yang baik untuk perangkat nyata adalah kemampuan Alat Pengembang Chrome. Berikut adalah bahan tentang pembuatan profil Bereaksi aplikasi menggunakan alat ini.

Metrik lainnya

Metrik seperti Indeks Kecepatan, Cat Konten Pertama, dan Cat Arti Pertama didasarkan pada bagaimana browser merender halaman. Mereka dipengaruhi oleh faktor-faktor yang mirip dengan yang telah kita bicarakan. Dampak pada faktor-faktor ini sering mengarah pada peningkatan semua indikator ini.

Secara obyektif, meningkatkan metrik ini lebih mudah daripada TTI. Faktanya adalah bahwa dasar untuk perhitungan mereka adalah kecepatan rendering halaman oleh browser. Metrik ini dapat ditingkatkan dengan mengikuti panduan yang diberikan setelah analisis halaman menggunakan Lighthouse.

Jika Anda tidak memuat font sebelumnya atau mengoptimalkan halaman, dengan mempertimbangkan karakteristik kueri kritis, maka Anda dapat mulai meningkatkan kinerja rendering situs Anda dari dua arah ini. Dalam artikel ini Anda dapat menemukan informasi terperinci tentang bagaimana browser memuat dan menampilkan sumber daya penting yang digunakan dalam pembentukan halaman web.

Hasil: di lokasi pemantauan dan membuat perbaikan nyata pada pekerjaan mereka

Konsol pencarian Google yang diperbarui, Lighthouse, dan PageSpeed ​​Insights adalah alat yang luar biasa yang memungkinkan Anda untuk secara instan mengevaluasi kinerja keseluruhan situs. Namun, mereka tidak cocok untuk tim yang perlu terus memantau dan meningkatkan kinerja proyek mereka.

Pemantauan kinerja yang berkelanjutan adalah bagian penting dari alur kerja yang bertujuan untuk terus mempertahankan kinerja situs di tingkat tinggi. Dengan pendekatan ini, tim proyek langsung belajar tentang masalah kinerja. Dengan pengujian kinerja manual, penyebaran hasil yang tidak terduga dimungkinkan. Akibatnya, tanpa membuat lingkungan pengujian khusus, hampir tidak mungkin untuk menguji kinerja situs menggunakan perangkat yang berbeda, atau mensimulasikan parameter perubahan lain dari sistem pengguna potensial.

Kecepatan halaman telah menjadi faktor penting dalam peringkat halaman SEO. Pernyataan ini sangat kuat akhir-akhir ini, ketika hampir 50% lalu lintas web dihasilkan oleh perangkat seluler.

Untuk memastikan bahwa situs Anda tidak kehilangan posisinya dalam hasil pencarian, coba gunakan alat versi modern untuk menganalisis kinerja halaman yang paling penting dan menjaga kecepatannya pada tingkat yang sesuai dengan Anda.

Pembaca yang budiman! Apakah Anda mengoptimalkan proyek web Anda dengan mempertimbangkan peningkatan indikator yang memengaruhi nilai Google PageSpeed?