Persiapan Wajib Uji PageSpeed Insights menjadi dasar penting saat membuat website baru atau memperbaiki website Divi 5 yang sudah berjalan. Tahap ini memastikan struktur halaman, konten, aksesibilitas, dan tampilan telah dibangun dengan benar sebelum pengujian dimulai. Hasil pengujian pun dapat menjadi baseline yang lebih relevan untuk proses evaluasi berikutnya.
PageSpeed Insights menganalisis URL menggunakan Lighthouse dalam lingkungan simulasi untuk kategori Performance, Accessibility, Best Practices, dan SEO. Artinya, kualitas sebuah halaman tidak hanya dilihat dari cepat atau lambatnya proses pemuatan. Struktur dan elemen dasar yang dibuat sejak awal juga dapat muncul dalam hasil audit Lighthouse.
- Pastikan Telah Memahami Persiapan Wajib Uji PageSpeed Insights
- Indikator yang Memengaruhi Skor PageSpeed Insights
- Pentingnya Proses Pembuatan Website Divi 5 yang Baik dan Benar Sebelum Tes PSI
- User Divi 5 sebagai Pengembang Website Sebelum Tes PageSpeed Insights
- Waktu Melakukan Tes PageSpeed Insights
- Ketahui 7 Persiapan Wajib Sebelum Uji PageSpeed Insights
- Diskusi Persiapan Wajib Uji PageSpeed Insights
Pastikan Telah Memahami Persiapan Wajib Uji PageSpeed Insights
Persiapan dasar sebelum pengujian PageSpeed Insights perlu dipahami sebagai bagian dari proses membangun halaman, bukan tahap optimasi lanjutan. Fokus utamanya adalah memastikan elemen yang menjadi bagian asli halaman sudah tersusun dengan tepat. Langkah tersebut berlaku ketika membuat website baru maupun saat melakukan perbaikan terhadap website Divi 5.
Cache, CDN, minifikasi, plugin optimasi, optimasi database, dan teknik serupa berada pada tahap sekunder setelah kondisi dasar website dapat diukur. Artikel ini belum membahas cara menaikkan angka Performance melalui konfigurasi teknis tersebut. Fokus pembahasan tetap berada pada tujuh persiapan yang seharusnya selesai saat proses pembuatan halaman berlangsung.
Indikator yang Memengaruhi Skor PageSpeed Insights
Indikator yang Memengaruhi Skor PageSpeed Insights tidak terbatas pada satu angka Performance yang terlihat setelah proses analisis selesai. Lighthouse membagi pemeriksaan ke beberapa kategori, sementara Performance Score dihitung dari metrik performa yang memiliki bobot masing-masing. Karena itu, istilah skor PSI perlu dibaca sesuai kategori audit yang sedang diperiksa.
Struktur heading, contrast ratio, alt text, nama link, dan nama button termasuk bagian yang dapat diperiksa dalam audit Accessibility. Title serta meta description juga memiliki pemeriksaan tersendiri pada Lighthouse dan Search. Kondisi tersebut menjelaskan alasan persiapan halaman perlu dilakukan secara menyeluruh, bukan hanya mengejar angka Performance.
Pentingnya Proses Pembuatan Website Divi 5 yang Baik dan Benar Sebelum Tes PSI
Proses Pembuatan Website Divi 5 menentukan kondisi halaman yang nantinya menjadi objek pengujian PageSpeed Insights. Struktur konten, pilihan warna, gambar, link, button, dan tampilan responsif sebaiknya sudah dipikirkan ketika halaman dibangun. Perbaikan sejak tahap pembuatan juga lebih terarah dibanding membongkar banyak bagian setelah website selesai.
Desain yang terlihat menarik belum tentu memiliki struktur dokumen dan aksesibilitas yang tepat. Tampilan visual perlu berjalan bersama susunan konten yang logis agar halaman tetap mudah digunakan dan dianalisis. Dengan fondasi tersebut, hasil PSI dapat dipakai untuk menemukan persoalan berikutnya secara lebih terarah.
User Divi 5 sebagai Pengembang Website Sebelum Tes PageSpeed Insights
Membangun atau Memperbaiki Website Sebelum Tes PageSpeed Insights membutuhkan perhatian terhadap elemen yang berada langsung di dalam halaman Divi 5. Setiap heading, teks, gambar, link, dan button membentuk dokumen yang nantinya dianalisis melalui URL. Kesalahan dasar pada tahap tersebut dapat ikut muncul sebagai temuan ketika audit Lighthouse dijalankan.
User Divi 5 berperan menentukan struktur halaman sejak proses desain berlangsung. Visual Builder memberi keleluasaan besar dalam mengatur tampilan, tetapi keputusan visual tetap perlu mengikuti fungsi setiap elemen. Pemilihan heading berdasarkan ukuran font saja, misalnya, dapat menghasilkan hierarki dokumen yang kurang tepat.
Waktu Melakukan Tes PageSpeed Insights
Waktu Melakukan Tes PageSpeed Insights sebaiknya ditentukan setelah komponen utama pada halaman sudah terpasang dan dapat diakses melalui URL yang akan dianalisis. Konten utama, gambar, heading, button, dan struktur layout perlu merepresentasikan kondisi halaman yang sebenarnya. Pengujian terlalu awal tetap dapat dilakukan, tetapi hasilnya belum tentu cocok dijadikan baseline final.
PageSpeed Insights menjalankan Lighthouse terhadap URL yang diberikan dalam kondisi simulasi. Hasil Performance juga dapat berubah akibat kondisi pengujian dan perubahan resource yang dimuat oleh halaman. Karena itu, baseline lebih berguna ketika versi halaman yang diuji sudah mendekati kondisi publik yang sebenarnya.
Ketahui 7 Persiapan Wajib Sebelum Uji PageSpeed Insights
Tujuh persiapan berikut berhubungan langsung dengan elemen dasar yang dibentuk selama proses pembuatan website Divi 5. Tujuannya bukan melakukan optimasi lanjutan, melainkan mencegah persoalan dasar ikut terbawa ketika halaman mulai diuji. Setiap poin juga dapat diterapkan pada halaman maupun posting karena keduanya tetap menghasilkan dokumen web yang dapat dianalisis.
Persiapan dimulai dari struktur informasi kemudian dilanjutkan ke keterbacaan, metadata, gambar, navigasi, responsivitas, dan finalisasi konten. Urutan tersebut membuat proses pembangunan website lebih terkontrol sebelum masuk ke tahap PSI. Setelah kondisi awal selesai, hasil audit dapat menjadi dasar untuk menentukan optimasi sekunder yang benar-benar diperlukan.
1. Struktur Heading
Struktur heading membantu membentuk hierarki informasi dari judul utama sampai pembahasan yang lebih spesifik. Penggunaan H1, H2, H3, dan tingkat berikutnya perlu mengikuti hubungan antarbagian, bukan sekadar ukuran visual. Tingkatan heading sebaiknya tidak dilompati ketika sebuah bagian memang menjadi turunan langsung dari bagian sebelumnya.
Divi 5 memungkinkan tampilan heading diatur secara visual tanpa harus mengubah fungsi semantiknya. Ukuran H2 dapat dibuat kecil atau H3 dapat dibuat besar selama hierarki kontennya tetap benar. Lighthouse Accessibility juga memiliki audit untuk memeriksa urutan heading yang turun secara berurutan. Struktur heading sangat penting untuk diperhatikan, karena merupakan indikator yang memengaruhi skor PageSpeed Insights.
2. Contrast Ratio Warna
Rasio kontrak antara warna hurup dan latar belakang menentukan tingkat keterbacaan teks terhadap warna latar belakang yang digunakan. Kombinasi warna yang terlihat menarik secara visual belum tentu menghasilkan kontras yang cukup untuk membaca konten dengan nyaman. Pemilihan warna teks dan background karena itu perlu dilakukan sebagai satu kesatuan desain.
WCAG 2.2 menetapkan rasio kontras minimum 4,5:1 untuk teks normal dan 3:1 untuk teks berukuran besar pada Level AA. Lighthouse Accessibility juga memeriksa kecukupan kontras antara warna foreground dan background. Pemeriksaan rasio sejak tahap desain dapat mencegah perubahan warna besar setelah halaman selesai dibuat. Perihal kontras rasio ini menjadi indikator yang memengaruhi skor PageSpeed Insights.
3. Title dan Meta Description
Title dan meta description perlu dipersiapkan sebagai bagian dari identitas setiap halaman atau posting, karena merupakan salah satu indikator yang memengaruhi skor PageSpeed Insights. Title membantu menjelaskan topik halaman, sedangkan meta description memberikan ringkasan singkat mengenai isi yang tersedia. Keduanya sebaiknya sesuai dengan konten yang benar-benar terdapat pada URL tersebut.
Lighthouse memiliki pemeriksaan terhadap keberadaan document title dan meta description. Google Search juga menjelaskan bahwa meta description yang baik perlu singkat, relevan, dan spesifik terhadap halaman terkait. Google dapat menggunakan meta description sebagai sumber snippet ketika dianggap lebih tepat untuk hasil pencarian tertentu.
4. Gambar dan Alt Text
Gambar sebagai indikator yang memengaruhi skor PageSpeed Insights perlu dipersiapkan berdasarkan fungsi dan kebutuhan tampilannya sebelum dimasukkan ke halaman Divi 5. Nama file yang deskriptif akan lebih jelas dibanding nama bawaan kamera atau kode acak yang tidak menjelaskan isi gambar. Ukuran dan gambar final juga sebaiknya sudah dipilih sebelum hasil PSI digunakan sebagai baseline.
Alt text diperlukan pada gambar yang membawa informasi agar fungsi gambar dapat dipahami melalui teknologi bantu dan konteks halaman. Gambar dekoratif perlu diperlakukan sesuai fungsinya sehingga alt text tidak diisi secara asal. Lighthouse memeriksa keberadaan atribut alt pada elemen gambar, sedangkan Google menyarankan nama file dan alt text yang deskriptif.
5. Link dan Button
Link dan button harus memiliki tujuan yang jelas sejak proses pembuatan halaman berlangsung. Teks seperti “klik di sini” dapat kehilangan konteks ketika dibaca terpisah dari kalimat di sekitarnya. Nama link atau button yang deskriptif membantu menjelaskan tindakan maupun halaman tujuan dengan lebih cepat.
CTA pada Divi 5 juga perlu dibuat berdasarkan fungsi, bukan hanya bentuk dan warna. Button untuk membuka layanan, membaca artikel, mengirim formulir, atau menuju halaman lain sebaiknya memiliki label yang sesuai. Lighthouse Accessibility memeriksa apakah link dan button mempunyai nama yang dapat dikenali secara jelas.
6. Responsive Mobile
Responsive mobile perlu diperiksa sebelum sebuah halaman dianggap selesai dan siap menjadi baseline pengujian. Ukuran teks, jarak antarbagian, susunan kolom, gambar, button, dan menu perlu tetap berfungsi pada layar yang lebih kecil. Layout desktop yang baik belum otomatis menghasilkan pengalaman mobile yang sama baiknya.
Pemeriksaan responsif juga perlu dilakukan setelah seluruh konten utama sudah masuk ke halaman. Perubahan panjang judul, ukuran gambar, atau jumlah isi dapat mengubah susunan layout pada viewport tertentu. PageSpeed Insights menyediakan analisis yang relevan untuk performa halaman pada perangkat, sehingga kondisi mobile perlu menjadi bagian dari persiapan akhir.
7. Finalisasi Konten
Finalisasi konten menjadi tahap terakhir sebelum hasil PageSpeed Insights dipakai sebagai baseline utama. Heading, paragraf, gambar, CTA, link, header, footer, dan komponen penting lain perlu berada pada kondisi yang mendekati versi publik. Baseline dari halaman kosong atau setengah selesai hanya menggambarkan kondisi halaman pada saat itu.
Penambahan gambar, script, section, formulir, atau komponen baru setelah pengujian dapat mengubah resource dan struktur halaman yang dianalisis. Secara praktis, pengujian final lebih representatif setelah konten utama telah ditetapkan. Tahap berikutnya baru dapat diarahkan pada analisis masalah dan optimasi teknis berdasarkan hasil PSI yang sebenarnya.
Diskusi Persiapan Wajib Uji PageSpeed Insights
Persiapan wajib sebelum uji PageSpeed Insights tidak berhenti pada usaha mendapatkan warna hijau pada laporan. Fondasi halaman yang baik membantu menghasilkan website Divi 5 yang lebih terstruktur, mudah dibaca, mudah digunakan, dan lebih siap dianalisis. Optimasi sekunder dapat dilakukan setelah persoalan dasar pada halaman tidak lagi menjadi penghambat.
Divi Solution membuka ruang diskusi seputar persiapan website, struktur halaman, hasil PageSpeed Insights, dan penggunaan Divi 5. Pembahasan dapat dimulai dari kondisi website baru maupun halaman lama yang sedang diperbaiki. Diskusi yang terarah membantu memisahkan masalah dasar pembuatan website dari persoalan optimasi teknis yang membutuhkan penanganan berbeda.
