Modul 4.3: Cara Meningkatkan Kecepatan Landing Page

September 25, 2017 by no comments

Setelah sharing cara mengukur kecepatan landing page, tibalah saatnya sharing cara meningkatkannya.

To the point!

Saat ini saya sudah berkenalan dengan HTML dan CSS, serta sedang berusaha mengenal Javascript. Terus terang, saya pribadi bukan seorang programmer atau web developer yang mengerti dengan bahasa pemrograman.Jadi, teknik yang saya akan share di sini adalah teknik orang awam.

Dalam mengoptimasi kecepatan landing page milik, saya biasanya meminta web developer karyawan perusahaan itu untuk mengoptimasi landing page agar kecepatan landing page saat meningkat.

Adapun ketika mengoptimasi landing page milik sendiri, dan karena saya adalah seorang pengguna WordPress.org, saya biasanya menggunakan lima tools berikut:

  1. Picresize
  2. Optimizilla
  3. Jetpack
  4. WP Fastest Cache
  5. Far Future Expiration

Nah, jika Anda adalah pengguna WordPress.org dan awam tentang dunia pemrograman, modul ini sangat berguna bagi Anda. Jika sebaliknya, silakan abaikan modul ini.

1. Picresize

Picresize

Picresize adalah tools untuk mengatur ukuran gambar, dan saya pribadi menggunakan Picresize untuk mengecilkan ukuran gambar yang akan di-upload di blog.

Mengapa gambar perlu dikecilkan ukurannya? Agar gambar-gambar dalam landing page tidak membutuhkan waktu yang lama untuk di-load saat dikunjungi oleh pengunjung. Semakin cepat gambar ter-load, semakin cepat pula website diakses oleh pengunjung.

Untuk mengecilkan ukuran gambar dengan Picresize, silakan ikuti langkah-langkah berikut:

  1. Kunjungi situs Picresize.
  2. Klik tombol “Browse”, lalu pilih gambar yang ingin Anda kecilkan ukurannya, lalu klik tombol “Open”.
  3. Setelah itu, klik tombol “Continue (Resize, Crop, & Special Effects)”.
  4. Di halaman picresize.com/edit, di bagian “Resize Your Picture”, klik kolom “50% Smaller” lalu ganti menjadi “Custom Size”, lalu tentukan berapa “Width Pixels”-nya. Saya pribadi lebih sering meresize gambar menjadi berukuran 800 atau 640 Width Pixels.
  5. Setelah itu, klik tombol “I’m Done, Resize My Picture!”
  6. Di halaman picresize.com/results, klik “Save to Disk” untuk men-download gambar ke dalam komputer Anda.

Enam langkah di atas adalah langkah yang saya biasa lakukan ketika mengubah ukuran gambar dengan Picresize. Kolom-kolom lain selain kolom yang ada di dalam enam langkah di atas tidak saya ubah. Cara ini tidak perlu Anda ikuti 100%. Silakan gunakan tools ini sesuka Anda!

2. Optimizilla

Optimizilla Logo

Optimizilla adalah tools untuk memperkecil size gambar, baik yang berformat png maupun jpg. Sebelum memakai Optimizilla, saya biasa menggunakan CompressPNG.com untuk memperkecil size gambar png dan CompressJPG.com untuk memperkecil gambar jpg.

Namun, setelah mengetahui Optimizilla, saya segera beralih ke Optimizilla karena lebih praktis.

Optimizilla Home Page

Untuk memperkecil size gambar dengan menggunakan Optimizilla, silakan ikuti empat langkah berikut:

  1. Kunjungi situs Optimizilla.
  2. Klik tombol “UPLOAD FILES”, lalu pilih gambar yang Anda kecilkan size-nya, lalu klik tombol “Open”.
  3. Optimizilla akan melakukan kompresi terhadap gambar secara otomatis.
  4. Setelah proses kompresi selesai, klik tombol “Download”. Gambar yang Anda download adalah gambar yang sama dengan yang tadi Anda upload, hanya berbeda dari segi size-nya.

3. Jetpack

Jetpack

Jetpack adalah plugin WordPress yang memiliki fitur Photon, di mana fitur tersebut bisa mempercepat load sebuah halaman.

Cara kerjanya, Photon akan menyalin file gambar yang ada di landing page kita dan mengubah alamat gambar tersebut menjadi alamat yang dilewatkan ke server wp.com terlebih dahulu. Server wp.com ini berbasis cloud, sehingga dengan kata lain kita mempunyai CDN gratis rasa premium.

Untuk mulai memanfaatkan fitur Photon pada Jetpack, silakan ikuti beberapa langkah berikut:

  1. Kunjungi halaman Jetpack di WordPress Respository.
  2. Klik tombol “Download”.
  3. Login ke halaman dashboard WordPress self hosted Anda.
  4. Klik “Plugins”.
  5. Klik tombol “Add New”.
  6. Klik tombol “Upload Plugin”.
  7. Klik tombol “Choose File”.
  8. Pilih file Jetpack yang telah Anda download.
  9. Klik tombol “Open”.
  10. Klik tombol “Install Now”.

Setelah proses instalasi selesai, hal yang harus Anda lakukan berikutnya ialah mengaktifkan fitur Photon di dalam settingan Jetpack.

4. WP Fastest Cache

WP Fastest Cache

WP Fastest Cache adalah salah satu plugin WordPress terpopuler, terbukti berdasarkan data WordPress Repository, bahwa plugin ini telah diinstal oleh lebih dari 400 ribu pengguna, dan mayoritas dari mereka memberikan rating bintang lima.

Langsung saja, untuk mulai menggunakan WP Fastest Cache, silakan ikuti beberapa langkah berikut:

  1. Kunjungi halaman WP Fastest Cache di WordPress Respository.
  2. Klik tombol “Download”.
  3. Login ke halaman dashboard WordPress self hosted Anda.
  4. Klik “Plugins”.
  5. Klik tombol “Add New”.
  6. Klik tombol “Upload Plugin”.
  7. Klik tombol “Choose File”.
  8. Pilih file WP Fastest Cache yang telah Anda download.
  9. Klik tombol “Open”.
  10. Klik tombol “Install Now”.

Setelah proses instalasi selesai, hal yang harus Anda lakukan berikutnya adalah melakukan sejumlah pengaturan, dan Anda bisa mencontoh settingan yang saya lakukan (Silakan cek screenshot di bawah ini).

WP Fastest Cache setting recommendations

Selain tab settings, tab CDN perlu juga Anda atur, dan pastikan Anda mengintegrasikan WP Fastest Cache dengan fitur Photon milik Jetpack. Jika sudah diatur, tampilan tab CDN Anda akan menjadi seperti di bawah ini.

Setting CDN menggunakan WP Fastest Cache

5. Far Future Expiration

Ini juga termasuk plugin WordPress. Cara kerjanya? Mohon maaf, saya belum bisa menjelaskannya. Walau demikian, tidak mengapa, mari kita langsung saja bahas cara memanfaatkannya.

Untuk mulai menggunakan Far Future Expiration, silakan ikuti beberapa langkah berikut:

  1. Kunjungi halaman Far Future Expiratuon di WordPress Respository.
  2. Klik tombol “Download”.
  3. Login ke halaman dashboard WordPress self hosted Anda.
  4. Klik “Plugins”.
  5. Klik tombol “Add New”.
  6. Klik tombol “Upload Plugin”.
  7. Klik tombol “Choose File”.
  8. Pilih file Far Future Expiration yang telah Anda download.
  9. Klik tombol “Open”.
  10. Klik tombol “Install Now”.

Setelah proses instalasi selesai, hal yang harus Anda lakukan berikutnya adalah klik “Settings” > FarFutureExpiry, lalu lakukan sejumlah pengaturan, dan Anda bisa mencontoh settingan yang saya lakukan (Silakan cek screenshot di bawah ini).

Far Future Expiration

Jika Anda sudah selesai melakukan pengaturan di atas, Anda bisa mengecek kecepatan landing page Anda dan membandingkannya dengan kecepatan landing page sebelum dioptimasi.

Demikian penjelasan tentang cara meningkatkan kecepatan landing page, terutama landing page yang menggunakan platform WordPress.org. Modul 4.3 ini saya akhiri, silakan beralih ke modul berikutnya.