Cara Mencapai 100 di Google PageSpeed ​​Insights (di WordPress)

Bukankah lebih bagus jika ada alat untuk membantu Anda membuat situs web Anda lebih cepat? Nah, ada! Google PageSpeed ​​Insights adalah namanya, dan ini adalah layanan gratis yang tersedia untuk mengatasi kesengsaraan situs web Anda yang lambat. Pada artikel ini kita akan melihat apa itu, bagaimana cara kerjanya, dan bagaimana Anda bisa mencapai skor Google PageSpeed ​​Insights 100/100 yang sulit dipahami di WordPress.

Apa itu Google PageSpeed ​​Insights?

Google PageSpeed ​​Insights adalah alat online untuk mengukur kecepatan dan pengalaman pengguna situs web Anda. Ini mengukur waktu muat situs di desktop dan seluler dan menampilkan berbagai metrik tentang kinerja situs. Jika metrik dinilai kurang optimal, alat tersebut memberikan saran tentang cara memperbaikinya.

Cukup buka Google PageSpeed ​​Insights, masukkan URL, dan tekan Analisis. Google menilai situs Anda di seluler dan desktop. Anda mungkin menemukan bahwa skor Anda lebih baik pada satu hal daripada yang lain.

Google biasa memberikan skor keseluruhan dari 100 untuk sebuah halaman web, tetapi sekarang tidak lagi.

Sebagai gantinya, Google mengukur tiga statistik yang disebut Core Web Vitals . Ini adalah:

• Largest Contentful Paint (LCP) : seberapa cepat konten utama situs dimuat. Ini harus 2,5 detik atau kurang untuk pengalaman pengguna yang baik.
• First Input Delay (FID) : seberapa responsif situs terhadap masukan pengguna. FID harus 100 milidetik atau kurang.
• Pergeseran Tata Letak Kumulatif (CLS) : mengukur stabilitas visual halaman web. Skor CLS 0,1 atau kurang lebih disukai.

Selain itu, Google mengukur hal berikut:

• First Contentful Paint (FCP) : waktu yang dibutuhkan halaman web untuk mulai merender di layar. Skor FCP yang baik adalah 1,8 detik atau kurang.
• Interaction to Next Paint (INP) : mengukur seberapa responsif halaman terhadap interaksi pengguna. Situs web yang benar-benar responsif memiliki INP 200 milidetik atau kurang.
• Time to First Byte (TTFB) : waktu yang diperlukan untuk pengiriman byte pertama data setelah permintaan server. TTFB 0,8 ​​detik atau kurang ideal.

Di bawahnya, di bagian Diagnosis masalah performa, Google PageSpeed ​​Insights memberi Anda empat skor – Performa, Aksesibilitas, Praktik Terbaik, dan SEO. 90 atau lebih adalah skor yang bagus, 50 hingga 89 menunjukkan peningkatan dapat dilakukan, dan apa pun di bawah 50 adalah buruk.

Di bawah ini adalah Peluang dan Diagnostik Google. Ini adalah cara Anda secara tidak langsung dapat meningkatkan skor Performa Anda. Metrik Kinerja memiliki pengaruh terbesar pada kecepatan situs Anda.

Sebelum kita membahas cara meningkatkan kinerja situs web Anda, mari kita lihat mengapa kecepatan situs web itu penting.

Mengapa kecepatan situs web penting?

Kecepatan situs web berdampak besar pada perilaku pengguna dan konsumen.

Waktu rata-rata yang diperlukan untuk memuat halaman arahan seluler sepenuhnya adalah 22 detik [1] .

Probabilitas terpental meningkat 32% seiring waktu pemuatan halaman dari 1 detik menjadi 3 detik [2] .

53% kunjungan diabaikan jika situs seluler membutuhkan waktu lebih dari 3 detik untuk memuat [3] .

Jelas, jika Anda menjalankan situs e-niaga, situs yang lambat menghasilkan konversi yang menurun, dan itu adalah sesuatu yang ingin Anda atasi. Tingkat konversi turun seiring dengan waktu yang dibutuhkan situs untuk memuat [4] :

• Halaman yang dimuat dalam 2,4 detik memiliki tingkat konversi 1,9%.
• Pada 3,3 detik, tingkat konversi adalah 1,5%
• Pada 4,2 detik, tingkat konversi kurang dari 1%
• Pada 5,7+ detik, tingkat konversi adalah 0,6%

Skor PageSpeed ​​Insights tinggi vs kecepatan halaman sebenarnya

Google menghitung skor PageSpeed ​​Insights dari data lab (dikumpulkan dalam kondisi terkontrol) dan data lapangan (dikumpulkan dari pengguna sebenarnya di alam bebas).

Untuk menguji kecepatan halaman Anda yang sebenarnya, Anda dapat menggunakan alat online seperti tes kecepatan GTmetrix atau Pingdom.

Dengan menggunakan alat ini, Anda dapat menguji situs Anda di berbagai lokasi.

Anda dapat melihat di GTmetrix bahwa waktu muat halaman untuk server pengujian di San Antonio, Texas adalah 666 md – skor yang sangat bagus.

Di Hong Kong, waktu muat halaman sedikit lebih lama – 1,4 detik.

Pingdom juga menunjukkan waktu muat cepat 850 md untuk pengujian di Washington DC tetapi waktu muat lebih lambat 1,06 dtk di Tokyo, Jepang.

Alat Uptrends memungkinkan Anda menguji di perangkat seluler dan desktop. Inilah hasil untuk situs WP Shout dari Paris, Prancis di iPad Air – waktu muat 1,9 detik:

Jadi sepertinya ada korelasi antara skor Google PageSpeed ​​Insights dan kecepatan halaman yang sebenarnya.

Cara mendapatkan skor Google PageSpeed ​​Insights 100 yang ideal di WordPress

Sekarang Anda tahu mengapa skor Google PageSpeed ​​Insights yang tinggi itu penting, saatnya mencari cara untuk meningkatkannya.

Cara meningkatkan skor Google PageSpeed ​​Insights

1. Optimalkan gambar

Mengoptimalkan gambar Anda untuk Web adalah cara mudah untuk meningkatkan skor Performa Anda.

Anda memerlukan plugin kompresi gambar seperti Optimole.

Plugin ini dapat memampatkan gambar Anda ke ukuran file yang lebih kecil sehingga lebih cepat dimuat. Anda dapat menggunakannya untuk semua unggahan gambar baru maupun yang sudah ada. Apa yang hebat tentang Optimole adalah ia juga akan mengirimkan gambar Anda melalui CDN, membuat pengiriman menjadi lebih cepat.

Itu juga dapat mengonversi gambar Anda ke format WebP, yang memiliki ukuran lebih kecil dari file JPG atau PNG. Ini akan membantu Anda meneruskan rekomendasi Sajikan gambar dalam format generasi berikutnya . Selain itu, Anda dapat mengubah ukuran gambar yang lebih besar yang Anda miliki dengan mengatur lebar maksimumnya.

Pastikan gambar Anda memiliki atribut width dan height yang ditentukan untuk memenuhi elemen Image tidak memiliki peluang lebar dan tinggi yang eksplisit .

Plugin Optimole juga menyertakan pemuatan lambat, yang hanya memuat gambar atau video saat pengguna menggulir ke bawah. Ini membantu dengan peluang Tunda gambar di luar layar , yang ditunjukkan di bawah ini.

Metode lain untuk mengurangi ukuran file gambar adalah dengan menggunakan gambar SVG. SVG adalah file vektor sehingga dapat dengan mudah diubah skalanya tanpa memengaruhi ukuran filenya. Mereka tidak didukung secara native di WordPress tetapi Anda dapat menambahkannya ke Perpustakaan Media Anda dengan plugin seperti Dukungan SVG atau SVG Aman.

2. Hindari ukuran DOM yang berlebihan

Apa itu DOM? DOM adalah singkatan dari Document Object Model dan merupakan struktur seperti pohon dengan semua elemen HTML, atribut, dan teks halaman disertakan.

Beberapa strategi untuk mengurangi ukuran DOM adalah dengan memecah halaman web yang panjang menjadi beberapa bagian yang lebih kecil, dan menghindari menyembunyikan node DOM dengan deklarasi {display:none;} di CSS.

Salah satu faktor yang dapat meningkatkan ukuran DOM adalah dengan menggunakan page builder. Pembuat halaman cenderung menambah jumlah elemen <div> pada halaman.

Jika Anda menggunakan Elementor, sejak versi 3.0 beberapa pembungkus HTML telah dihapus, yang mengurangi ukuran DOM.

Atau Anda dapat beralih menggunakan Gutenberg alih-alih pembuat halaman, seperti yang dilakukan Chris Lema.

Anda dapat menemukan lebih banyak tip untuk menghindari ukuran DOM yang berlebihan di pos ini.

3. Optimalkan JavaScript dan CSS

File CSS dan JS dapat diperkecil dan dikompresi untuk meningkatkan kinerja. Minifikasi menghapus semua spasi dari file CSS atau JS, sedangkan kompresi GZIP menghapus karakter berulang seperti {.

Plugin WordPress yang memungkinkan Anda mengecilkan CSS atau JS termasuk Autoptimize (gratis) dan WP Rocket (berbayar).

Minifikasi dapat merusak situs Anda, jadi plugin yang mengecilkan memiliki opsi kecualikan file dari minifikasi jika Anda memiliki masalah.

WP Rocket juga memiliki opsi untuk menggabungkan file CSS dan JS Anda menjadi satu file, mengurangi permintaan. Namun, Anda tidak ingin melakukan ini jika server web Anda menggunakan HTTP/2. Anda dapat menguji apakah server Anda menjalankan HTTP/2 untuk memeriksa terlebih dahulu.

Anda dapat mengaktifkan kompresi GZIP dengan sebagian besar plugin caching. Jika server web Anda adalah Apache atau LiteSpeed, plugin dapat menulis ke file .htaccess Anda secara langsung atau menyediakan baris untuk disalin dan ditempel. Jika Anda menggunakan NGINX atau IIS, Hummingbird juga menyediakan konfigurasi untuk mengaktifkan kompresi di server ini.

Jika ada CSS atau JS di situs Anda yang tidak digunakan, saatnya untuk menghapusnya. Anda dapat menggunakan Chrome DevTools untuk menemukan CSS dan JS yang tidak terpakai, yang kemungkinan besar berasal dari sebuah plugin.

Anda juga dapat menggunakan Penghemat CSS Rapidload untuk melihat CSS apa yang dapat hilang dari situs web Anda:

4. Hilangkan sumber daya yang memblokir render

CSS dan JS pemblokiran render adalah file yang ditandai sebagai pemblokiran cat pertama halaman web Anda.

Plugin Autoptimize dapat mengatasi masalah ini, dan sebagai hasilnya, tingkatkan skor First Contentful Paint dan Largest Contentful Paint Anda.

5. Kurangi waktu respons server awal

Waktu respons server bergantung pada beberapa faktor: tema dan plugin yang Anda gunakan, dan jenis hosting web yang Anda miliki.

Pertimbangkan untuk menghapus kelebihan plugin yang tidak Anda gunakan atau beralih ke tema yang ringan, seperti Astra.

Untuk hosting, kami merekomendasikan hosting WordPress terkelola melalui hosting web bersama. Host WordPress yang dikelola menyertakan pengoptimalan server sebagai bagian dari layanan.

6. Pastikan teks tetap terlihat selama pemuatan font webPastikan teks tetap terlihat selama pemuatan font web

Jika Anda menggunakan font web, rekomendasi Google akan menghentikan teks halaman Anda menjadi tidak terlihat saat dimuat.

Rekomendasi tersebut menyarankan untuk menambahkan font-display: swap; ke deklarasi @font-face Anda di stylesheet Anda.

Tangkapan layar di bawah menunjukkan cara menambahkan properti ini menggunakan plugin Pembersihan Aset.

7. Pertahankan jumlah permintaan tetap rendah dan ukuran transfer kecil

Google PageSpeed ​​Insights mencatat jumlah file yang diminta oleh server web dan ukuran file tersebut.

Jika Anda memiliki jumlah besar di sini, Anda dapat menguranginya dengan:

• Mengoptimalkan gambar dan file media Anda. Disarankan untuk menggunakan file video sebagai pengganti GIF animasi.
• Mengoptimalkan CSS dan JS Anda
• Mengoptimalkan font dan skrip pihak ketiga Anda
• Mengurangi ukuran file HTML

8. Hindari merantai permintaan kritis

Permintaan kritis adalah permintaan yang penting untuk memuat halaman. Misalnya, logo bisa menjadi permintaan kritis.

Rantai panjang dan rantai berisi unduhan besar dianggap buruk untuk kecepatan situs web Anda. Mereka berdampak pada Cat Konten Pertama dan Cat Konten Terbesar.

Menurut Google, untuk menghindari rangkaian permintaan kritis, Anda harus:

• Minimalkan jumlah sumber daya penting: hilangkan, tunda unduhannya, tandai sebagai asinkron, dan seterusnya.
• Optimalkan jumlah byte penting untuk mengurangi waktu pengunduhan (jumlah perjalanan bolak-balik).
• Optimalkan urutan pemuatan sumber daya penting yang tersisa: unduh semua aset penting sedini mungkin untuk mempersingkat panjang jalur kritis.

Anda dapat melakukannya dengan:

• Pramuat permintaan kunci, gambar, dan font dengan menggunakan "link rel="preload" di HTML yang mereferensikannya.
• Meminimalkan CSS dan JavaScript Anda.
• Hilangkan resource yang memblokir render.

Anda dapat menggunakan plugin seperti WP Rocket untuk melakukan tugas ini untuk Anda.

9. Hindari tugas utas utama yang panjang dan minimalkan kerja utas utama

Tugas utas utama yang panjang adalah tugas JavaScript (lebih dari 50 md) yang menunda Waktu untuk Interaktif bagi pengguna.

Meminimalkan pekerjaan utas utama berarti mengurangi waktu parsing, kompilasi, dan eksekusi JS.

Anda dapat mengurangi panjang dan waktu tugas JavaScript dengan:

• meminimalkan penggunaan plugin yang membengkak
• menghosting font dan skrip analitik Anda secara lokal
• mengecilkan atau menunda JS dan CSS
• malas memuat gambar latar belakang

Lihat artikel berikut untuk tips lebih lanjut tentang cara meminimalkan kerja utas utama di WordPress.

10. Hindari pergeseran tata letak yang besar Hindari pergeseran tata letak yang besar

Pergeseran tata letak berkontribusi pada metrik Pergeseran Tata Letak Kumulatif dan memberikan kesan kepada pengguna halaman yang melompat.

Anda dapat menyembuhkan masalah ini dengan:

• Menambahkan dimensi ke media Anda
• Pramuat font Anda
• Mengoptimalkan konten dinamis Anda misalnya, formulir pendaftaran buletin

Untuk informasi lebih lanjut, baca panduan ini untuk memperbaiki pergeseran tata letak kumulatif di WordPress.

11. Kurangi dampak kode pihak ketiga

Skrip pihak ketiga adalah yang dihosting di tempat lain, seperti pelacakan Google Analytics atau penyematan YouTube.

Jika memungkinkan, cobalah menghosting skrip secara lokal. Anda tidak dapat melakukannya dengan YouTube, tetapi Anda dapat menghosting kode analitik dan font secara lokal.

Anda dapat menggunakan plugin Google Font Lokal untuk menghosting Google Font di server Anda sendiri.

Google Analytics Lokal untuk WordPress – plugin cache permintaan eksternal akan menghosting Google Analytics Anda secara lokal.

12. Gunakan CDN

Jaringan Pengiriman Konten adalah jaringan server jarak jauh yang menyimpan dan menyajikan konten web kepada pengguna.

CDN dapat meningkatkan kecepatan situs Anda dengan meng-cache file statis (mis., HTML, CSS, dan JavaScript) dan menayangkannya dari lokasi terdekat ke pengguna. Ini membantu mengurangi skor First Contentful Paint dan Largest Contentful Paint Anda.

Kami menggunakan Cloudflare CDN di WP Shout. Anda dapat memulainya secara gratis.

Pelajari lebih lanjut tentang mengapa Anda harus menggunakan CDN dan opsi terbaik.

Kesimpulan tentang cara mendapatkan skor Google PageSpeed ​​Insights 100

Kami telah melihat bahwa ada beberapa faktor dalam permainan yang menentukan kecepatan situs. Kiat-kiat ini akan membantu Anda mencapai skor sempurna.

Namun, Anda tidak boleh terlalu terpaku pada skor 100 – skor 90+ masih sangat bagus. Baca posting David tentang mengoptimalkan kinerja situs untuk melihat apa yang kami lakukan untuk meningkatkan skor kami.