Performa situs web di perangkat seluler tidak seperti yang Anda lihat saat membuka situs di iPhone 13 yang tersambung ke WiFi kantor. Itu yang dilihat pelanggan Anda di Android Rp 2 jutaan dengan RAM 3 GB, di ponsel 4G yang ramai, di basement mall di Bekasi. Itu adalah dua situs web berbeda, dan hanya satu di antaranya yang menghasilkan uang bagi Anda.

Saya menulis awal tahun ini tentang mengapa kecepatan situs penting bagi pendapatan. Ini adalah sekuel praktisnya: protokol pengujian sebenarnya yang dapat Anda jalankan minggu ini, dan daftar perbaikan yang diprioritaskan berdasarkan di mana saya secara konsisten menemukan hasil terbesar. Tidak ada apa pun di sini yang memerlukan pembangunan kembali situs Anda.

Kesenjangan ini lebih besar dari perkiraan sebagian besar pemilik. Saya baru-baru ini menguji situs e-commerce UKM yang dimuat dalam 1,8 detik di laptop pengembang. Pada Android kelas menengah melalui 4G yang dibatasi, konten bermakna pertama membutuhkan waktu 11 detik. Pengembang tidak berbohong, begitu pula pelanggan yang menyerah. Mereka hanya berada di planet yang berbeda.

Langkah 1: uji seperti pelanggan Anda, bukan seperti pengembang Anda

Anda memerlukan dua hal: perangkat yang realistis dan koneksi yang realistis. Berikut protokolnya.

Dapatkan perangkat dengan anggaran nyata. Beli atau pinjam ponsel di kisaran Rp 1,5 hingga 2,5 juta, Redmi, Realme, Samsung A-series. Hal inilah yang sebenarnya dimiliki oleh sebagian besar pengguna Indonesia. Simpan itu sebagai perangkat pengujian permanen Anda. Emulasi perangkat Chrome berguna, tetapi ini berjalan pada CPU laptop Anda, dan CPU adalah penyebab utama ponsel murah. JavaScript yang diurai secara instan di MacBook bisa memakan waktu empat hingga enam kali lebih lama pada chipset Android yang hemat.

Batalkan koneksi. Dua opsi:

  1. Di Chrome DevTools di laptop Anda, buka tab Jaringan dan setel pembatasan ke "Fast 3G". Ini pesimistis, itulah intinya.
  2. Pada perangkat sebenarnya, matikan WiFi dan uji data seluler sebenarnya, idealnya jauh dari kantor Anda, di mana sinyalnya sangat bagus.

Kosongkan cache terlebih dahulu. Pelanggan Anda yang datang dari iklan Instagram tidak memiliki cache apa pun. Uji di tab penyamaran atau hapus data penjelajahan, lalu atur waktu pengalamannya dengan tangan: kapan Anda bisa membaca sesuatu, kapan Anda bisa mengetuk sesuatu, kapan sesuatu berhenti melompat-lompat.

Dapatkan angkanya. Jalankan halaman utama Anda melalui PageSpeed ​​Insights, dan lihat skor seluler, bukan desktop. Fokus pada tiga metrik: Cat Konten Terbesar (saat konten utama muncul, bidik di bawah 2,5 detik), Total Waktu Pemblokiran (berapa lama skrip membekukan halaman), dan Pergeseran Tata Letak Kumulatif (berapa banyak lompatan). PageSpeed ​​juga menampilkan data lapangan dari pengguna Chrome sebenarnya jika situs Anda memiliki lalu lintas yang cukup, dan data tersebut mengungguli pengujian laboratorium mana pun.

Tuliskan angka dasar Anda sebelum menyentuh apa pun. Anda tidak dapat mengklaim perbaikan tanpa sebelumnya.

Langkah 2: daftar perbaikan, berdasarkan urutan hasil

Setelah melakukan hal ini pada lusinan situs UKM, empat perbaikan yang sama menyebabkan sebagian besar peningkatan, kira-kira dalam urutan ini.

Perbaikan 1: gambar (biasanya 60 hingga 80 persen masalahnya)

Hampir setiap situs UKM lambat yang saya audit mengirimkan foto asli kamera. JPEG 4 MB langsung dari kamera ponsel, yang ditampilkan dalam kartu produk dengan lebar 400 piksel, adalah pemborosan belaka.

  • Ubah ukuran gambar kira-kira sesuai ukuran yang ditampilkan. Thumbnail produk tidak memerlukan lebar 4000 piksel.
  • Kompres mereka. Alat seperti Squoosh atau TinyPNG memotong ukuran file sebesar 70 hingga 90 persen tanpa perbedaan yang terlihat.
  • Sajikan WebP sedapat mungkin. Sebagian besar platform dan CDN sekarang dapat melakukan ini secara otomatis.
  • Tetapkan atribut lebar dan tinggi secara eksplisit sehingga tata letak tidak melompat saat gambar dimuat.Angka sebenarnya dari pekerjaan baru-baru ini: halaman beranda berubah dari 9,2 MB menjadi 1,4 MB hanya dari pekerjaan gambar, dan LCP pada 4G yang dibatasi turun dari 10,5 detik menjadi 3,9.

Perbaiki 2: pemuatan lambat

Jangan membuat ponsel memuat seluruh halaman untuk menampilkan layar pertama. Tambahkan loading="lazy" ke setiap gambar di paro bawah. Ini adalah salah satu atribut, yang didukung oleh setiap browser saat ini, dan pada halaman daftar produk yang panjang, atribut ini secara rutin memotong pengunduhan awal hingga setengah atau lebih. Jaga agar gambar pahlawan tetap bersemangat, pemuatan lambat pada hal pertama yang dilihat pengguna membuatnya lebih lambat.

Perbaiki 3: skrip diet

Buka tab Jaringan dan hitung skrip pihak ketiga. Situs UKM pada umumnya: dua alat analitik, alat peta panas yang belum pernah dibuka siapa pun dalam setahun, tiga widget obrolan dari era berbeda, pustaka penggeser, dan layanan font yang memuat enam bobot. Masing-masing membutuhkan waktu pengunduhan, dan lebih buruk lagi, waktu CPU pada chipset anggaran tersebut.

  • Hapus apa pun yang tidak digunakan secara aktif. Jujurlah.
  • Muat widget obrolan setelah halaman bersifat interaktif, atau pada pengguliran pertama, bukan di awal.
  • Potong bobot font menjadi dua atau tiga yang sebenarnya Anda gunakan.
  • Jika tema Anda memuat jQuery ditambah tiga pustaka plugin untuk mendukung satu carousel, carousel itu mahal.

Pada Android murah, Total Waktu Pemblokiran adalah hal yang paling dirugikan oleh skrip. Sebuah halaman mungkin terlihat dimuat tetapi abaikan ketukan selama beberapa detik karena CPU tersedak pada JavaScript. Itu terasa rusak bagi penggunanya meskipun air terjun mengatakan baik-baik saja.

Perbaiki 4: hosting dan cache

Jika byte pertama dari server Anda memerlukan waktu 2 detik, tidak ada pekerjaan frontend yang dapat menyelamatkan Anda. Periksa "waktu ke byte pertama" di DevTools. Penyebab umum: shared hosting kelebihan beban seharga Rp 300 ribu setahun, server berada di luar wilayah yang melayani pengguna Indonesia, dan tidak ada caching sehingga setiap kunjungan membangun kembali setiap halaman. Pindah ke hosting yang layak dengan CDN biasanya berharga Rp 100 hingga 300 ribu sebulan dan seringkali merupakan harga per rupiah termurah yang dapat Anda beli.

Langkah 3: uji ulang dan tetapkan anggaran

Jalankan protokol yang sama setelah perbaikan dan bandingkan dengan baseline Anda. Target realistis untuk situs UKM yang menggunakan 4G dengan perangkat kelas menengah: konten utama terlihat dalam waktu kurang dari 3 detik, halaman interaktif dalam waktu kurang dari 5 detik.

Kemudian tetapkan anggaran kinerja agar tidak rusak: misalnya, tidak ada halaman yang melebihi 1,5 MB, tidak ada gambar yang melebihi 150 KB, tidak ada skrip pihak ketiga baru tanpa menghapus satu pun. Tuliskan secara tertulis kepada siapa pun yang mengelola situs tersebut. Performa bukanlah proyek yang dilakukan satu kali saja, ini adalah kelas berat yang Anda berkomitmen untuk bertahan di dalamnya. Ini adalah bagian kecil dari disiplin yang lebih besar yang saya bahas dalam mengapa bisnis Anda memerlukan strategi teknologi, bukan hanya situs web, dan akumulasi pintasan yang membuat situs lambat adalah sepupu dekat hutang teknis.

Kesimpulannya

Pelanggan Anda tidak menggunakan WiFi Anda dan tidak menggunakan ponsel Anda. Minggu ini:

  1. Uji situs Anda dengan anggaran Android melalui data seluler nyata atau terbatas, penyamaran, dan tuliskan angkanya.
  2. Perbaiki gambar terlebih dahulu: ubah ukuran, kompres, muat lambat. Ini adalah kemenangan terbesar dengan usaha yang paling sedikit.
  3. Hapus atau tunda skrip yang sebenarnya tidak Anda gunakan.
  4. Periksa waktu ke byte pertama, dan upgrade hosting jika servernya sendiri lambat.
  5. Tes ulang, lalu tetapkan anggaran tertulis agar situs tetap cepat.

Seluruh latihan membutuhkan telepon pinjaman dan beberapa hari kerja terfokus. Alternatifnya adalah dengan diam-diam kehilangan setiap pelanggan yang harga ponselnya lebih murah dari Anda, yang mana di pasar ini adalah sebagian besar dari mereka.