Cara Meningkatkan Skor Cerapan Google PageSpeed Insights

Bagaimana Meningkatkan Kelajuan Halaman Web Anda

Cara Semak atau Check Kelajuan Halaman web anda?

Apabila anda mempunyai halaman pendaratan yang dimuatkan dengan sangat perlahan, tidak kira betapa menariknya tawaran anda atau reka bentuk halaman dengan baik kerana pelawat tidak akan bertahan lama untuk melihat mana-mana bahagian halaman anda. Semak juga di 👉 APB.

Masa pemuatan halaman yang perlahan tidak baik untuk keseluruhan pengalaman pengguna dan penukaran halaman pendaratan anda. Ini bukan sahaja tidak mesra pengguna malah Google juga akan menghukum (penalti) halaman yang dimuatkan dengan sangat perlahan.

Jadi, bagaimana untuk memastikan halaman anda dimuatkan dengan laju dan cepat? Sila semak di 👉 Google PageSpeed Insights.

Apakah Google PageSpeed Insights?

Google PageSpeed Insights ialah alat yang mengukur prestasi halaman untuk peranti mudah alih dan peranti desktop. Ia mengambil url dua kali, sekali dengan ejen pengguna mudah alih dan sekali dengan ejen pengguna desktop.

Skor PageSpeed Insights berjulat dari 0 hingga 100 mata. Skor yang lebih tinggi adalah lebih baik dan skor 85 atau ke atas menunjukkan bahawa halaman itu menunjukkan prestasi yang baik.

Memasukkan URL dan menekan "Analisis" akan memberikan anda laporan terperinci dengan cepat tentang perkara yang melambatkan halaman web tersebut berdasarkan dua parameter, lengkap dengan pengesyoran tentang cara membetulkannya.

Parameter 1: Masa untuk memuatkan di atas lipatan. Ini ialah jumlah masa yang diperlukan untuk halaman memaparkan kandungan di atas lipatan selepas pengguna meminta halaman baharu.

Parameter 2: Masa untuk memuatkan halaman penuh. Ini ialah jumlah masa yang diperlukan penyemak imbas untuk memaparkan halaman sepenuhnya selepas permintaan pengguna.

Tetapi adakah ia cukup baik apabila orang menjangkakan halaman dimuatkan dalam sekelip mata? Ketika apabila setiap detik dikira. Untuk mendapat markah setinggi mungkin, inilah perkara yang perlu anda lakukan…

Mencapai skor Google PageSpeed Insights yang tinggi

Jika anda melihat banyak warna merah dan kuning dalam laporan anda, ini adalah kerana halaman anda mempunyai beberapa isu pemuatan yang ketara.

Alat ini akan memberitahu anda tentang isu tersebut, tetapi mesej ralat mungkin agak sukar untuk difahami.

 

Dibawah ada beberapa langkah (Step by Step) yang anda perlu lakukan dalam proses cara bagaimana untuk membetulkannya:

1. Elakkan ubah hala halaman pendaratan

Jika halaman anda belum direka bentuk secara responsif, hasilnya boleh menjadi beberapa ubah hala ke halaman yang dioptimumkan untuk peranti yang berbeza. Beberapa corak ubah hala biasa, menurut Google:

example.com menggunakan reka bentuk web responsif, tiada ubah hala diperlukan – pantas dan optimum

example.com → m.example.com/home – penalti berbilang perjalanan pergi balik untuk pengguna mudah alih

example.com → www.example.com → m.example.com – pengalaman mudah alih yang sangat perlahan

Setiap kali pengguna perlu diubah hala, pemaparan halaman akan dihentikan — yang menambahkan detik berharga pada masa muat halaman anda. Elakkan ubah hala sama sekali dengan membina halaman anda dengan reka bentuk responsif — kaedah yang memastikan pengalaman pengguna yang berkualiti tidak kira peranti yang digunakan prospek anda.

​

2. Dayakan pemampatan

Pelayar hari ini mampu menyediakan versi halaman alternatif yang lebih kecil kepada pengguna internet. Dengan gzip pemampat didayakan, halaman tersebut boleh mengecil saiznya sebanyak 90%.

Beginilah cara gzip mengoptimumkan permintaan HTTP dan proses tindak balas:

Apabila pemampatan didayakan, prosesnya kelihatan lebih seperti ini:

Daripada menyediakan halaman penuh kepada pengguna, penyemak imbas boleh mengambil versi mampat yang lebih kecil secara eksponen yang dimuatkan dalam sebahagian kecil daripada masa. 

3. Kecilkan CSS, HTML, JavaScript

Minifying merujuk kepada mengalih keluar data yang tidak perlu atau berlebihan tanpa menjejaskan cara halaman diproses oleh penyemak imbas. Pengekodan yang lemah boleh menjadi punca masalah ini, dan ia boleh diperbaiki dengan beberapa cara yang berbeza.

Di luar meninjau kod sumber halaman anda secara manual, Google mengesyorkan mencuba sumber berikut:

👉Pengecil HTML untuk mengecilkan HTML

👉CSSNano dan 👉 csso untuk mengecilkan CSS

👉UglifyJS2 dan 👉 Closure Compiler untuk mengecilkan JavaScript

Pilihan lain, sudah tentu, untuk memanfaatkan rangka kerja AMP dan AMP Google untuk iklan. Kedua-dua program membenarkan pembangun membina halaman dengan versi HTML, CSS dan JavaScript yang dilucutkan. Hasilnya ialah halaman dan iklan yang dimuatkan dalam pecahan sesaat.

4. Utamakan kandungan di atas (above-the-fold content)

Walaupun kelihatan aneh, masa pemuatan halaman bukan semata-mata tentang seberapa cepat halaman anda dimuatkan. Ia juga mengenai prestasi yang dilihat.

Prestasi yang dirasakan boleh digambarkan sebagai "berapa cepatkah tapak web anda rasa apabila ia dimuatkan?" Ini mungkin sedikit berbeza daripada kelajuan tapak web anda sebenarnya dimuatkan. Prestasi yang dilihat semuanya adalah dari perspektif pengguna, bukan daripada alat ujian kelajuan tapak web.

Untuk meningkatkan persepsi prestasi, adalah penting untuk mengutamakan pemuatan kandungan yang penting kepada pengguna. Contohnya, teks halaman di atas lipatan harus dimuatkan sebelum widget pihak ketiga.

Walau bagaimanapun, apabila kod distrukturkan dengan tidak betul, hasilnya boleh mengurangkan prestasi yang dirasakan dalam fikiran pengguna. Jika elemen terakhir pada halaman anda untuk dimuatkan ialah elemen yang diklik oleh pengguna untuk melihat, halaman itu akan terasa seperti:

👉ia memuat lebih lama?

5. Mempercepatkan masa tindak balas pelayan

Masa tindak balas pelayan—masa yang diambil untuk pelayan anda mula memuatkan kandungan halaman untuk pengguna—ia boleh menjadi perlahan oleh beberapa faktor menurut Google:

• Pertanyaan pangkalan data
• Penghalaan perlahan
• Rangka kerja
• Perpustakaan
• CPU sumber perlahan
• Memory perlahan

6. Hapuskan JavaScript yang menyekat pemaparan

Antara lain, JavaScript mendayakan beberapa alat pihak ketiga yang berkuasa dan elemen halaman interaktif. Masalahnya ialah, ia juga menghentikan penghuraian kod HTML.

Apabila anda melihat mesej ralat yang berbunyi "hapuskan JavaScript yang menyekat pemaparan", ini bermakna terdapat sekeping kod JavaScript yang menjeda proses pemuatan untuk bahagian lipatan atas halaman anda. Skrip pihak ketiga khususnya mungkin dipersalahkan untuk masalah ini. Atasi tiga cara:

Skrip yang tidak penting untuk proses pemuatan harus sengaja ditangguhkan — diambil dan dilaksanakan selepas halaman dipaparkan sepenuhnya.

Skrip yang dimuatkan secara tak segerak hendaklah digunakan berbanding skrip yang dimuatkan secara serentak. Skrip segerak menjeda proses pemaparan halaman, manakala skrip tak segerak membenarkan penyemak imbas memuatkan elemen lain pada masa yang sama.

Pertimbangkan untuk menyelaraskan skrip — memasukkan sumber JavaScript luaran yang kecil terus ke dalam dokumen HTML anda — untuk mengurangkan bilangan permintaan yang perlu dibuat oleh penyemak imbas anda.

7. Manfaatkan cache pelayar

Ia boleh mengambil beberapa permintaan antara pelayan dan penyemak imbas sebelum halaman dimuatkan sepenuhnya untuk pengguna. Setakat masa, masing-masing menambah.

Caching membolehkan penyemak imbas anda, dalam satu cara, "mengingat" elemen tertentu yang telah dimuatkan baru-baru ini — pengepala, navigasi, logo, dsb. Lebih banyak elemen penyemak imbas boleh cache, semakin sedikit elemen yang perlu dimuatkan apabila pengguna membuat permintaan, dan akhirnya, lebih cepat halaman akan dimuatkan.

Google mengesyorkan dasar caching minimum selama seminggu, dan untuk elemen yang sebahagian besarnya tidak berubah, satu tahun adalah lebih baik.

8. Optimumkan imej

Elemen grafik seperti favicon, logo dan imej produk boleh merangkumi sehingga dua pertiga daripada jumlah berat halaman dengan mudah.

Apabila itu berlaku, kesan pada masa muat halaman, dan khususnya kadar penukaran, adalah besar. Menurut kajian itu, halaman yang menukar pelawat mengandungi 38% lebih sedikit imej daripada yang tidak:

Nasib baik, mengoptimumkan imej adalah mudah. Penggantian PNG dengan fail imej JPEG boleh menjimatkan saiz halaman dan masa pemuatan anda dengan mudah. Sila semak di pemampat imej seperti 👉Optimizilla.

Tetapi sebelum anda menggunakannya, tanya diri anda sama ada anda benar-benar memerlukan semua imej yang anda sertakan pada halaman anda. Adakah mereka benar-benar menambah nilai, atau bolehkah anda melakukannya tanpa mereka? Jika jawapannya adalah yang terakhir, buang semuanya untuk menjimatkan data dan masa.

😎Lihat kedudukan anda dengan Google PageSpeed Insights

Semak pengalaman pengguna yang lebih baik dan meningkatkan kelajuan halaman pendaratan anda dengan melihat faktor kelajuan yang telah dinyatakan di atas dengan 👉 Google PageSpeed Insights.