Tutorial Cara Optimasi Speed Landing Page Scalev

Pada saat Anda membuat landing page di Scalev sebetulnya pengaturan bawaan dari Scalev sudah dioptimalkan untuk speed.

Tetap kencang tanpa pengaturan tingkat lanjut.

Jadi, Anda tidak perlu repot mengatur settingan macam-macam yang bikin Anda kebingungan.

Namun apabila Anda ingin memastikan speed-nya selalu kencang dan stabil di atas 90+ saat mengetes di PageSpeed, maka tutorial ini wajib Anda praktikkan secara religius.

Speed LP bawaan Scalev

Hasil pengetesan landing page pada gambar di atas menggunakan template bawaan Scalev tanpa pengaturan apa pun.

Gunakan template Sales Page atau Blank Page

Untuk membuat LP dengan template Sales Page dari Scalev ikuti langkah-langkah berikut ini.

1. Masuk ke dashboard Scalev lalu klik menu Landing Page

2. Klik tombol Tambah Landing Page lalu akan muncul pilihan template Scalev

3. Pilih template Sales Page

Pilih template Sales Page

Anda juga bisa pilih Blank Page untuk membuat LP dari awal (kosong).

Setelah itu Anda bebas berkreasi dengan template LP tersebut.

Ketika Anda selesai berkreasi membuat LP, sebelum lanjut untuk menerbitkannya maka Anda perlu mengecek ulang beberapa pengaturan sebagai berikut:

4. Cek pada tab Desain di Landing Page Studio, pastikan Pengaturan Font menggunakan System Default.

Pengaturan Font

5. Lalu pada tab pengaturan Landing Page Studio, pastikan fitur Speed Boost di “Matikan Custom Font” statusnya AKTIF (toggle berwarna biru)

Matikan Custom Font

Pastikan gambar pertama yang paling atas atau yang paling pertama muncul di LP Anda memakai Tipe Loading Langsung, caranya:

6. Di editor Landing Page Studio cari komponen gambar yang terletak paling atas / paling awal ditempatkan, lalu klik ikon gear

Klik gear untuk ke pengaturan komponen gambar

7. Kemudian muncul dialog berikutnya, pilih Tipe Loading Langsung

Pilih tipe Langsung pada Tipe Loading

8. Pastikan seluruh font yang Anda gunakan di tiap komponen Teks itu menggunakan System Default.

9. Klik tombol Simpan

Lakukan pengaturan komponen gambar Tipe Langsung ini HANYA pada gambar teratas yang paling awal muncul.

Istilahnya Above The Fold.

Jadi gambar yang pertama kali muncul pada saat membuka LP tanpa scroll ke bawah maka itulah gambar yang harus disetting Tipe Loading.

Boleh setting gambar lebih dari satu kalau memang yang muncul pertama kali jumlahnya lebih dari satu gambar.

Lalu pada gambar-gambar lainnya setelah scroll ke bawah maka pengaturan pada komponen gambar pilih Tipe Loading Lazy Loading.

Tipe Loading Lazy Loading

Lakukan pengaturan tersebut ke gambar-gambar lainnya (jika ada) setelah Above The Fold, yaitu posisinya sekitar di pertengahan landing page sampai ke paling bawah.

Optimalkan Ukuran Gambar/Foto

Aset gambar atau foto yang diupload ke Landing Page Studio Scalev itu juga sudah dioptimisasi otomatis secara on-the-fly (ketika diupload gambarnya dioptimalkan).

Tetapi sangat disarankan untuk mengoptimasi ukuran gambar asli Anda agar semakin ringan namun tetap menjaga kualitas visualnya.

Sehingga ketika diupload ke Scalev gambarnya semakin optimal.

Untuk mengoptimasi gambar Anda ikuti langkah-langkah berikut ini:

1. Buka situs web pengompres gambar Optimizilla → klik di sini

Tampilan web Optimizilla

2. Klik tombol Upload Files atau seret gambar ke area yang disesuaikan (boleh upload lebih dari satu gambar)

3. Setelah upload dan proses kompres gambarnya selesai, klik tombol Download.

Perbandingan hasil kompres gambar asli dan gambar optimasi

Contoh hasil optimasi gambar berdasarkan gambar di atas:

• Ukuran asli: 220 KB
• Ukuran optimasi: 62 KB

Optimasi gambar tersebut berhasil membuat ukuran gambar menjadi lebih ringan sebesar 72%!

Jika visual gambar hasil kompres tersebut dirasa kurang cocok menurut Anda, Anda boleh mengatur kualitasnya dengan menarik/menggeser toggle Colors ke atas atau ke bawah sesuai keinginan.

Lakukan kompresi gambar-gambar yang lainnya jika Anda menggunakan lebih dari 1 gambar.

Namun jika Anda sudah puas dengan hasilnya bisa langsung download tanpa harus melakukan pengaturan tersebut.

Cukup upload dan download hasil optimasi gambarnya.

Kemudian taruh gambar-gambar tersebut ke komponen gambar di Landing Page Studio.

Dimensi Gambar Yang Disarankan

Agar pada saat proses memuat halaman menjadi lebih lancar maka disarankan untuk memakai dimensi gambar yang sesuai untuk diakses oleh pengguna HP (mobile-first).

Berikut ukuran dimensi yang disarankan:

• Width = maksimal 585px
• Height = maksimal 640px
• Size = kurang lebih 200kb

Pada saat melakukan kompresi gambar sesuaikan kualitas visualnya agar tetap jelas dan tidak buram.

Jadikan ukuran di atas sebagai patokan (bukan nilai absolut) untuk menentukan hasil akhir dimensi gambar yang Anda optimalkan.

Kekeliruan Yang Sering Terjadi

1. Keliru ketika menyetel tipe Loading gambar, yaitu:

❌ Gambar di area Above The Fold disetel dengan tipe Lazy Loading
❌ Gambar di area Below The Fold disetel dengan tipe Langsung

Untuk memahami perbedaan Above The Fold dan Below The Fold perhatikan gambar di bawah ini:

Ilustrasi area Above The Fold dan Below The Fold

Area yang diarsir warna biru adalah Above The Fold.

Ini adalah tampilan yang pertama kali dimuat dan dilihat oleh visitor.

Jika LP Anda ada gambar di area Above The Fold maka gambar tersebut wajib disetel tipe loadingnya ke Langsung.

Jangan kebalik.

Kemudian visitor scroll LP Anda ke bawah…

Nah di situlah visitor memasuki area Below The Fold.

Gambar-gambar yang ada di area Below The Fold Anda setel tipe loadingnya ke Lazy Loading.

Jangan sampai kebalik juga ya.

2. Keliru ketika menyetel pengaturan Speed Boost

❌ Menyalakan toggle “Matikan Custom Font” tapi pengaturan font di tab Desain menggunakan Custom Font

✅ Yang benar adalah toggle “Matikan Custom Font” menyala DAN pengaturan font di tab Desain wajib menggunakan System Default pada pengaturan font

3. Keliru tidak menyetel font pada komponen Teks menjadi System Default

Karena font default yang digunakan pada komponen Teks di atau komponen lain yang berisi teks di LPS itu Page Font.

Jadi harap dicek kembali dan pastikan memakai System Font.

Ringkasan

Untuk meringkas semua langkah-langkah optimasi di atas:

• Pilih template landing page bawaan Scalev yaitu template Sales Page
• Edit LP tersebut sesuai kebutuhan Anda
• Setting pengaturan font ke System Default di tab Desain LP
• Setting komponen gambar agar menggunakan Tipe Loading Langsung di tab Pengaturan LP
• Kompres ukuran gambar menggunakan Optimizilla
• Taruh gambar optimal ke komponen gambar di LP
• Pakai System Font di tiap komponen Teks

Sampai sini jika Anda sudah melakukan semua langkah-langkah optimasi tersebut dengan benar maka Anda sudah boleh menerbitkan landing page-nya dan siap untuk dijalankan.

Jika Anda punya pertanyaan lain terkait optimasi landing page Scalev silakan kirim komentar Anda di bawah artikel ini.