Bagaimana cara mengoptimalkan waktu buka halaman dan meningkatkan SEO Anda?

Diterbitkan: 2021-07-01

Bagaimana cara mengoptimalkan waktu buka halaman dan meningkatkan SEO Anda?

Kita hidup di dunia yang sangat tidak sabaran. Menyediakan konten berkualitas dengan cepat adalah pencapaian yang patut ditiru beberapa tahun yang lalu. Saat ini, ini adalah persyaratan dasar untuk bisnis apa pun.

Semakin lama Anda membuat orang menunggu untuk mengakses situs web Anda, semakin besar kemungkinan mereka terpental. Situs web yang lambat adalah masalah serius yang membutuhkan perhatian segera.

Mengapa?

Misalkan Anda memiliki tingkat konversi 3%. Anda mendapatkan tiga prospek untuk setiap 100 klik. Sekarang, bagaimana jika ketiganya terpental karena halaman arahan Anda dimuat di tahun dinosaurus? Bayangkan dampaknya pada bottom line Anda.

Dalam posting ini, kami akan menunjukkan kepada Anda bagaimana menghindari skenario itu. Ada 5 langkah untuk mengoptimalkan waktu buka halaman Anda.

Daftar isi

  1. Temukan kecepatan memuat halaman Anda saat ini.
  2. Optimalkan situs web Anda untuk meningkatkan kecepatan memuat halaman.
  3. Pertimbangkan untuk mengubah penyedia hosting web Anda
  4. Gunakan Jaringan Distribusi Konten
  5. Gunakan Halaman Seluler yang Dipercepat
  6. Hasil

Langkah Satu: Temukan kecepatan memuat halaman Anda saat ini.

Google PageSpeed ​​Insights dan GTMetrix adalah alat yang berguna untuk menghitung kecepatan halaman. Kedua daftar faktor yang menghambat kecepatan. Namun, GTMetrix memberi tahu Anda berapa detik yang diperlukan untuk memuat halaman Anda.

Plugin URL domain Anda di GTMetrix dan biarkan alat ini menjalankan keajaibannya.

Dalam beberapa detik, itu akan mengisi angka dan memberi Anda nilai.

GTMetrix untuk menemukan kecepatan memuat halaman saat ini

Ini juga akan memetakan berapa banyak waktu yang dibutuhkan setiap elemen halaman untuk memuat. Misalnya, sesuai gambar di atas, butuh 5,5 detik untuk memuat FCP, atau First Colourful Paint. Total waktu buka halaman adalah 7,3 detik yang malas!

Alat ini juga memberikan daftar saran untuk meningkatkan kecepatan memuat halaman Anda…

Masalah yang memengaruhi kecepatan pemuatan halaman Anda

…dan beberapa tips lagi:

Elemen yang memengaruhi ukuran halaman

Bagian yang akan datang menguraikan tentang cara mendapatkan skor kecepatan yang lebih cepat di GTMetrix.

Langkah Kedua: Optimalkan situs web Anda untuk meningkatkan kecepatan memuat halaman.

Kiat untuk Optimasi Gambar SEO

Bagaimana cara memperkecil ukuran gambar?

Setiap situs web adalah file yang dimuat dari server berdasarkan permintaan. Anda ingin ukuran file menjadi minimal untuk mempromosikan pemuatan cepat.

Gambar biasanya berukuran besar! Mereka membutuhkan waktu ribuan tahun untuk dimuat.

Tapi mereka menambahkan nilai yang luar biasa jika digunakan dengan bijak. Misalnya, gambar GTMetrix membantu saya menyampaikan maksud saya dengan lebih baik sambil memberi Anda referensi.

Kita tidak boleh menghilangkan gambar, tapi kita bisa mengoptimalkan penggunaannya. Ini adalah 4 metode untuk mengurangi ukuran gambar.

  • Kompresi Gambar
  • Memotong Gambar
  • Mengubah Ukuran Gambar
Kompresi Gambar

Buat gambar yang Anda gunakan berukuran lebih kecil. Proses pengurangan ukuran file ini disebut kompresi gambar. Gambar adalah tumpukan lapisan; setiap lapisan menambahkan rasa. Kompresi mengurangi ukuran halaman dengan menghapus lapisan yang mempertajam gambar.

Ini memang berdampak pada kualitas gambar, tetapi lebih dari kompensasi dengan memenangkan poin SEO Anda.

Mulailah dengan menyimpan gambar Anda dalam format JPG karena mengambil ruang disk yang lebih kecil. Beberapa blog merekomendasikan JPEG2000 atau WEBP, tetapi tema saya memiliki masalah rendering dengan format itu. Seringkali, JPG bekerja dengan baik.

Dari sini, ada dua cara untuk mencapai lebih banyak kompresi.

  1. Kompres gambar secara online

Buka kompresjpeg dan unggah gambar JPG Anda. Alat ini memampatkan gambar Anda dan memberi tahu seberapa banyak gambar itu dikompresi. Unduh gambar terkompresi dan gunakan untuk halaman web Anda.

Cara mengompres gambar Anda
  1. Gunakan plugin untuk mengompresi gambar

Saya bukan penggemar berat menggunakan plugin. Tentu, mereka mempermudah pekerjaan jika Anda tidak bisa membuat kode. Tetapi mereka menghalangi kode situs web Anda yang ada. Namun, ini adalah opsi yang layak dipertimbangkan.

Kompres gambar menggunakan plugin untuk meningkatkan kecepatan memuat halaman Anda

Ada banyak sekali plugin yang dapat membantu Anda mengompresi gambar; Anda dimanja oleh pilihan. Bagaimanapun, periksa tanda centang 'Kompatibel dengan versi WordPress Anda' sebelum menggunakan plugin apa pun.

Pilih antara Kompresi Lossy/Lossless

Kompresi bisa lossy/lossless. Ini menjelaskan sejauh mana Anda mengompresi gambar Anda.

Saya menggunakan kompresi lossless untuk gambar teks-berat. Teks gambar yang hilang cenderung terlalu buram untuk dibaca. Saya menggunakan kompresi lossless untuk yang lainnya.

Bereksperimenlah dengan mana yang paling cocok untuk Anda.

Pangkas Gambar

Sepertinya metode yang jelas untuk mengurangi ukuran gambar – Anda benar-benar mengurangi ukuran gambar – tetapi banyak yang cenderung mengabaikannya.

Catat dimensi gambar yang sesuai untuk blog Anda. Ukuran gambar utama dan gambar unggulan harus konsisten. Namun, visual pendukung dapat dipangkas untuk menampilkan apa yang diperlukan.

Misalnya, tidak ada tangkapan layar di pos ini yang memiliki visual yang berlebihan. Tidak ada bilah alamat atau footer. Setiap piksel menambah waktu buka halaman. Hapus yang tidak perlu.

Ubah Ukuran Gambar di MS Paint

Metode yang terdengar jelas ini tersembunyi di depan mata.

  1. Buka gambar Anda di MS Paint. Anda akan melihat opsi untuk mengubah ukuran.
  2. Tetapkan persentase pengubahan ukuran Anda, dan sekarang Anda memiliki versi yang jauh lebih kecil dalam dimensi dan ukuran. Ini menghemat banyak pada ukuran file!
Gunakan MS Paint untuk meningkatkan kecepatan memuat halaman Anda

Memuat Gambar Malas

Semua data situs web Anda disimpan di pusat data dan diambil saat dibutuhkan; gambar tidak berbeda. Teknik lazy load menunda proses pengambilan hingga saat pengunjung menggulir ke visual.

Baru kemudian sistem mengumpulkan sumber daya yang diperlukan untuk melayani gambar tersebut. Teknik ini mengurangi beban awal pada sistem dengan mengantrikan elemen-elemen untuk memuat hanya bila diperlukan.

Ini tidak hanya menghemat waktu buka awal tetapi juga menghemat bandwidth.

Cobalah di halaman ini: gulir ke bawah dan lihat bagaimana gambar dimuat saat Anda mencapainya, bukan sebelumnya.

Bagaimana cara menerapkan Lazy Load di situs web Anda?

Plugin Lazy Load a3 dapat membantu Anda menerapkan lazy load dengan cepat.

Pilih Font yang tepat.

Font sering kali berada di bawah lingkup desain; itu jarang dilihat sebagai faktor kinerja.

Tapi itu berkontribusi pada ukuran halaman. Laporan dari GTMetrix yang dibahas sebelumnya menunjukkan bahwa Font menempati ukuran paling banyak setelah gambar.

Untuk kecepatan memuat yang cepat, Anda harus memilih font yang memuat dengan cepat.

Saya menggunakan Open Sans untuk situs web saya karena saya tidak perlu menjadi mewah untuk kategori bisnis saya. Jika Anda memiliki bisnis kreatif, Anda mungkin ingin mengorbankan sedikit kecepatan halaman untuk aspek kecantikan. Juga, jika Anda ingin font bergaya berkontribusi pada identitas merek Anda, lakukanlah. Merek >> Kecepatan Halaman.

Tempelkan kodenya

JavaScript(JS) dan Cascading Style Sheets(CSS) adalah potongan kode yang mendukung setiap halaman web yang Anda lihat. Keduanya memengaruhi kecepatan pemuatan halaman dalam dua cara – keduanya menambah ukuran halaman dan membuat serangkaian permintaan ke server yang membutuhkan waktu untuk diproses.

Tetapi mereka diperlukan untuk menambahkan beberapa gaya dan semangat ke situs web Anda. Misalnya, perhatikan kotak langganan saya di bawah – kotak itu mengangguk ketika Anda menggulirnya ke bawah. Jika Anda melewatkan efeknya, muat ulang halaman ini dan coba lagi.

Efek menarik perhatian tetapi, jika digunakan secara berlebihan, menjadi gangguan.

Ada tradeoff antara gaya dan kecepatan halaman. Jangan menghilangkan gaya untuk kecepatan halaman. Namun, mengoptimalkan kode akan meningkatkan kecepatan memuat halaman Anda.

Dan ini adalah bagaimana saya melakukannya:

Perkecil JS/CSS

Minifikasi menghilangkan potongan kode yang tidak perlu, mengurangi ukuran file. Ini memungkinkan browser mengunduh dan mengeksekusi kode lebih cepat, menghemat bandwidth.

Memanfaatkan Caching

Cache adalah unit penyimpanan yang menyimpan salinan situs web Anda, sehingga tidak perlu memuat setiap kali diminta. Dengan caching, setelah memuat untuk pertama kalinya, situs web Anda akan memuat lebih cepat setiap kali dipanggil lagi.

Saya menggunakan plugin LiteSpeed ​​Cache untuk mengecilkan kode dan cache.

Langkah ketiga: Pertimbangkan untuk mengubah penyedia hosting web Anda.

Akankah mobil sport aerodinamis berjalan dengan Minyak Tanah? Tidak.

Demikian pula, situs web yang dioptimalkan dengan baik akan memiliki kecepatan memuat halaman yang lambat jika server hanya merespons pada zaman es berikutnya.

Saya ragu untuk melakukan perubahan terutama karena ketidakpastian. Tapi saya melakukan riset dan akhirnya memilih Hostinger, dan saya tidak menyesal.

Banyak web host lain melakukan pekerjaan untuk Anda. Putuskan apa yang cocok untuk Anda berdasarkan anggaran dan lokasi Anda.

Berikut adalah panduan lengkap untuk mengubah WebHost Anda.

Langkah empat: Gunakan Jaringan Distribusi Konten (CDN.)

Jarak geografis sangat mempengaruhi kecepatan halaman. Semakin jauh pengunjung dari tempat situs web Anda dihosting, semakin lama waktu buka halaman.

CDN adalah kumpulan server global yang terletak di beberapa pusat data di seluruh dunia. Ini memungkinkan pengunjung untuk terhubung dengan server yang secara geografis lebih dekat daripada server rumah. Ia melakukannya dengan memanfaatkan server di titik pertukaran antara jaringan yang berbeda.

Jarak yang dikurangi mendorong penayangan halaman web Anda lebih cepat.

Saya menggunakan CDN Cloudflare, dan itu telah memenuhi tujuannya.

Langkah lima (opsional): Gunakan Accelerated Mobile Pages (AMP) untuk meningkatkan kecepatan memuat halaman seluler

Ingat kita berbicara tentang mengecilkan kode. HTML adalah bentuk kode yang lebih ringan dari CSS/JS. Itu tidak mengizinkan gaya, tetapi HTML adalah kode dasar yang dibutuhkan server untuk memuat situs web Anda.

Halaman AMP adalah bentuk HTML dari halaman web Anda. Ini adalah halaman versi kedua yang sebagian besar digunakan untuk perangkat seluler. Mereka adalah kode yang dilucuti ke minimum, sehingga halaman dimuat dalam sepersekian detik.

Menjadi AMP berarti menghilangkan gaya dari halaman Anda. Namun, mereka bermanfaat untuk halaman berita dan blog. Saya menggunakannya sebentar tetapi kembali pada keputusan karena tiga langkah pertama sudah cukup bahkan untuk kecepatan halaman seluler saya.

Saya menulis panduan mendetail tentang memutuskan apakah Anda ingin menerapkan AMP atau tidak.

Hasil

Langkah-langkah di atas benar-benar luar biasa untuk kecepatan memuat halaman saya. Kembali ke GTMetrix, di sinilah situs web saya berdiri hari ini.

Ini memuat dalam 1,2 detik. Sekitar 6 kali lipat peningkatan.

Tapi, buktinya ada di puding. Cobalah, dan beri tahu saya di komentar bagaimana kelanjutannya.