Performa dan kecepatan web: teknik terbaik

Kecepatan pemuatan dan kinerja web ada di bibir semua orang di komunitas SEO dan webperf, dan lebih luas lagi di E-marketing dan E-commerce.

Seperti yang Andy Davies, konsultan dan referensi dalam kinerja web, mengingatkan kita:
“Konteks mempengaruhi pengalaman,
pengalaman mempengaruhi perilaku,
perilaku mempengaruhi pendapatan bisnis.”

Jadi, apakah Anda mencoba meningkatkan pendapatan, SEO, atau keduanya, Anda pasti tahu bahwa halaman cepat sangat penting untuk kualitas pengalaman pengguna Anda. Kecepatan juga membantu mengirimkan sinyal yang tepat ke Google, yang telah memperhitungkan kecepatan sejak pembaruan Pengalaman Halaman.

Seperti yang Anda ketahui juga, sebuah situs harus memenuhi harapan pengguna sebelum memenuhi harapan mesin pencari. Dengan demikian, kecepatan tampilan dan interaktivitas adalah bagian dari prasyarat untuk pengalaman pengguna yang berkualitas, terutama untuk mempromosikan keterlibatan dan konversi! Perhatikan misalnya bahwa, menurut penelitian Google, 77% pengguna Internet lebih cenderung memesan di situs atau aplikasi yang memungkinkan mereka menyelesaikan pembelian dengan cepat.

Tetapi teknik mana yang memiliki dampak paling terlihat pada pengunjung Anda, untuk menawarkan pengalaman penjelajahan yang lancar dan kecepatan yang nyata?

Berikut adalah daftar periksa yang diatur oleh tuas pengoptimalan, untuk kecepatan tampilan dan interaktivitas yang lebih baik.

Optimalkan kecepatan tampilan situs

Semakin ringan halaman, semakin sedikit waktu yang dibutuhkan untuk ditampilkan.
Selain pengoptimalan sumber daya, Anda dapat mengatur tingkat tampilan dan dimensi berbagai elemen yang membentuk halaman untuk meningkatkan perasaan kecepatan dan kegunaan. Berikut adalah beberapa teknik penting:

• Mengompresi gambar ke format yang paling efisien
  Format WebP (disarankan oleh Google) dan AVIF (yang menawarkan hasil yang lebih baik) generasi baru memungkinkan Anda mengurangi bobot gambar hingga 50% dibandingkan JPEG, sambil mempertahankan kualitas visual yang optimal. Mengetahui bahwa berat gambar mewakili sekitar 50% dari berat halaman, ini adalah tuas penting untuk membuat halaman Anda cepat.
• Sesuaikan tampilan media dan gambar ke layar yang berbeda
  Ubah ukuran dan tentukan ukuran media dan gambar bergantung pada apakah pengguna mengunjungi situs Anda dari ponsel atau komputer.
• Kurangi bobot sumber daya halaman
  Optimalkan kode Anda: minifikasi (penghapusan karakter yang tidak perlu) dari file HTML, JS dan CSS, dan kompresi sumber daya (format Gzip dan Brotli), dan dalam beberapa kasus penggabungan, semuanya merupakan praktik yang baik untuk mengurangi bobot halaman, dan karenanya mempercepat tampilan di browser.
• Pemuatan malas
  Teknik ini hanya memuat apa yang terlihat di layar, bukan memuat seluruh halaman. Dengan kata lain, browser hanya menyediakan upaya yang benar-benar diperlukan sehubungan dengan apa yang perlu dilihat pengunjung di layarnya.
• Optimalkan font
  Anda dapat mengoptimalkan format font Anda (misalnya WOFF2, yang menghemat 30 hingga 50% pada ukuran file), dan juga memilih untuk menampilkan teks meskipun font belum dimuat oleh browser, untuk mempercepat rendering.
• Hilangkan pemblokiran sumber daya dan muat secara tidak sinkron
  Hindari memblokir rendering halaman Anda: lebih suka memuat sumber daya secara asinkron, terutama untuk CSS (CSS kritis), JS (async dan defer) dan font (display:swap).
  Tentu saja, jika Anda tidak punya pilihan karena beberapa sumber penting di awal pemuatan halaman, sumber daya ini harus seringan mungkin.
• Mengadopsi strategi caching yang tepat
  Untuk membuat halaman ditampilkan secepat mungkin bagi pengguna Anda, cache elemen statis.
  Untuk melakukan ini, Anda perlu mengidentifikasi konten dinamis dan konten statis sebelumnya, dan menentukan aturan untuk menyimpan konten statis: untuk berapa lama, dan di cache mana (browser, asal atau CDN).

[Studi Kasus] Mengelola perayapan bot Google

Dengan lebih dari 26.000 referensi produk, 1001Pneus membutuhkan alat yang andal untuk memantau kinerja SEO mereka dan memastikan bahwa Google mencurahkan anggaran perayapannya pada kategori dan halaman yang tepat. Pelajari cara berhasil mengelola anggaran perayapan untuk situs web e-niaga dengan OnCrawl.

Baca studi kasus

Tingkatkan interaktivitas: halaman yang langsung responsif

Selain kecepatan di mana elemen ditampilkan di browser, kemampuan untuk berinteraksi sangat penting untuk memberikan kepuasan total kepada pengguna Anda.

Jika tidak, Anda membuat mereka frustrasi yang diterjemahkan ke dalam perilaku seperti klik marah, mouse bergerak panik di halaman, atau menggulir acak untuk memeriksa apakah halaman berfungsi.
Dalam kasus terburuk, pengunjung Anda kembali ke halaman sebelumnya, atau meninggalkan situs Anda untuk selamanya untuk melakukan pencarian baru di Google, atau pergi ke pesaing Anda.
Ingatlah bahwa jika terjadi pengalaman negatif, 43% pengguna Internet akan mengunjungi situs pesaing untuk pembelian berikutnya. Karena itu Anda harus memberi diri Anda sarana untuk menarik tetapi juga untuk mempertahankan pengunjung Anda.

Paling sering, skrip pihak ketiga dan Javascript yang dapat menyebabkan interaktivitas yang buruk. Memang, selama browser sibuk mengambil, mengurai, dan mengeksekusi JavaScript, browser tidak dapat merespons interaksi pengguna.

Sekali lagi, ada teknik untuk mengoptimalkan kode Anda dan Pihak Ketiga Anda, dan memungkinkan pengunjung Anda menikmati pengalaman yang optimal:

• Kurangi dampak Pihak Ketiga dengan menunda pemuatannya
  Anda dapat mulai memuat dan menjalankan skrip setelah elemen konten prioritas ditampilkan di halaman Anda. Namun berhati-hatilah: perlu diingat bahwa menunda pemuatan JavaScript tidak membuatnya gratis dalam hal kinerja!
  Mungkin masalah menunda pemuatan beberapa fungsi (obrolan, widget, pelacakan...) setelah tampilan elemen utama untuk meyakinkan pengguna, tetapi itu tidak membatalkan waktu yang dibutuhkan browser untuk memproses kode, itu hanya menggesernya dalam waktu.
• Kurangi waktu eksekusi JavaScript
  Bagilah tugas-tugas yang menghabiskan waktu browser Anda (Tugas Panjang), dan juga pastikan untuk mendukung pemrosesan singkat dalam menanggapi interaksi pengguna (misalnya, hindari mendengarkan secara aktif peristiwa tertentu seperti menggulir; dan manfaatkan waktu ketika browser memiliki waktu luang untuk menjalankan pemrosesan JavaScript tertentu).
• Kurangi pekerjaan Utas Utama
  Browser akan dapat merespons interaksi lebih cepat dengan mengurangi jumlah permintaan dan ukuran pertukaran.

Hemat waktu juga: otomatiskan teknik pengoptimalan situs Anda

Kami baru saja membahas dua aspek yang sangat penting dari pengalaman pengguna: kecepatan tampilan dan interaktivitas. Kabar baiknya adalah bahwa semua pengoptimalan yang baru saja kami sebutkan dalam daftar periksa ini dapat dilakukan secara otomatis!

Selain itu, Anda mungkin telah menautkan ke dua Data Web Inti Google yang memungkinkan Anda untuk mengevaluasi aspek-aspek ini, masing-masing: Cat Konten Terbesar dan Penundaan Input Pertama.
Tentu saja, Anda juga harus mempertimbangkan untuk meningkatkan stabilitas visual halaman Anda untuk pengalaman pengguna yang optimal, dengan mengerjakan skor Pergeseran Tata Letak Kumulatif Anda.

Anda harus tahu bahwa 3 metrik ini (LCP, CLS, dan Total Blocking Time, atau TBT, yang setara dengan FID) menyumbang 70% dari skor yang diatribusikan oleh PageSpeed ​​Insights.
Jadi, secara logis, apa pun yang Anda lakukan untuk mempercepat halaman Anda dan mengoptimalkan metrik ini akan berdampak positif pada pengguna Anda, serta pada skor kinerja Anda.
Singkatnya, Anda dapat menerapkan pendekatan yang sama untuk UX Anda seperti yang Anda lakukan dalam SEO: konten dan pengalaman berkualitas menjamin kepuasan pengguna, dan berkontribusi untuk diindeks dengan lebih baik oleh Google.

Juga, seperti dalam SEO, optimasi webperf harus dipertahankan dari waktu ke waktu.
Ini membutuhkan waktu dan keahlian karena teknik dan metrik berkembang dengan cepat. Selain itu, bahkan dalam tim besar, sumber daya teknis tidak selalu memiliki waktu atau pengetahuan untuk secara efektif menjaga kecepatan situs; dan mengerahkan sumber daya dan energi untuk operasi komando yang jatuh seperti souffle sangat membuat frustrasi dan bahkan mengecilkan hati.

Jadi, daripada membuang waktu untuk pemeliharaan, takut akan efek samping pada setiap evolusi situs, dan mengalikan plugin dengan risiko kelebihan beban, lebih baik mengotomatiskan penerapan semua teknik pengoptimalan frontend dengan satu alat!

Anda harus tahu bahwa dalam banyak kasus, untuk situs e-niaga lalu lintas tinggi, ROI dari solusi pengoptimalan webperf mudah diukur.
Memang, Google memperkirakan bahwa -0,1 detik waktu pemuatan dapat menghasilkan +8% konversi, yang dapat dicapai dengan sangat mudah oleh solusi pengoptimalan frontend.
Di Fasterize, kami telah menemukan bahwa seringkali, bahkan peningkatan rasio konversi kurang dari 1 poin sudah cukup untuk memastikan ROI solusi SaaS kami; belum lagi waktu yang dihemat oleh tim teknis.
Bisnis menjadi urat nadi perang, Anda dapat melakukan perhitungan sendiri, dan itu mudah dilakukan! Hal ini memungkinkan Anda untuk memahami minat mengotomatisasi pengoptimalan kinerja, dan untuk meyakinkan serta melibatkan tim internal Anda.

Hemat waktu di semua lini!