Temui Thor Render Engine: Buat Halaman Cepat Kilat

Nama saya Piotr Dolistowski, Direktur Teknik Senior di Instapage. Saya memimpin cabang teknis perusahaan di Warsawa, Polandia termasuk koordinasi proyek dan manajemen sumber daya manusia. Semua yang ada di artikel hari ini adalah hasil langsung dari upaya tim saya untuk membuat sistem rendering halaman yang lebih cepat untuk pelanggan Instapage.

Bukan rahasia lagi bagi pemasar digital bahwa kecepatan memuat halaman berdampak langsung pada keterlibatan pengguna dan rasio pentalan. Google dan lainnya telah menjadikan kecepatan halaman sebagai titik penekanan bagi siapa pun yang bekerja dalam pemasaran digital setidaknya selama beberapa tahun, jadi ini bukan hal baru untuk tahun 2019.

Kami telah menampilkan ini berkali-kali sebelumnya, tetapi penelitian Google menunjukkan bahwa untuk halaman yang dimuat lambat, keterlibatan pengguna merosot sementara rasio pentalan meningkat:

Inilah mengapa tim kami bekerja tanpa lelah untuk menghadirkan Thor Render Engine™ kepada Anda. Mesin render adalah pembuat halaman baru kami dan bagian dari pengalaman halaman kami yang sepenuhnya responsif yang memastikan halaman arahan pasca-klik Anda dimuat dengan sangat cepat tanpa upaya apa pun dari Anda.

Sebelum kita menyelami detail sistem rendering baru Instapage, mari kita tinjau mengapa pemuatan lambat halaman arahan pasca-klik merugikan konversi.

Dampak pemuatan halaman yang lambat terhadap konversi

Seberapa lambat halaman memuat lambat? Setiap detik penundaan waktu muat halaman seluler menyebabkan penurunan konversi:

Terjemahan: pengguna online tidak memiliki kesabaran untuk menunggu lama untuk memuat halaman Anda. Jadi jika tidak segera dimuat, mereka akan meninggalkan halaman. Hal ini meningkatkan rasio pantulan, menurunkan keterlibatan pengguna, berdampak buruk bagi pengalaman pengguna secara keseluruhan, dan pada akhirnya membatasi konversi.

Akamai memiliki wawasan berikut setelah mengumpulkan data tentang 10 miliar kunjungan pengguna dari pengecer online teratas:

• Separuh konsumen menelusuri produk dan layanan di ponsel cerdas mereka, sementara hanya satu dari lima yang benar-benar membeli di ponsel mereka.
• Penundaan 100 milidetik dalam waktu muat situs web dapat menurunkan tingkat konversi sebesar 7%
• Penundaan dua detik dalam waktu muat halaman web meningkatkan rasio pentalan sebesar 103%
• 53% pengunjung situs seluler akan meninggalkan halaman yang membutuhkan waktu lebih dari tiga detik untuk dimuat
• Tingkat bouncing pembeli ponsel adalah yang tertinggi, sementara pembeli tablet memiliki tingkat bouncing terendah

Jadi, bagaimana Anda bisa memastikan halaman arahan pasca-klik Anda dimuat dengan cepat? Wawasan PageSpeed ​​Google dapat membantu, tetapi seberapa banyak?

Wawasan PageSpeed ​​Google melaporkan kinerja suatu laman, menunjukkan apakah suatu laman cepat, rata-rata, atau lambat pada perangkat seluler dan desktop. Ini juga memberikan saran tentang bagaimana halaman itu dapat ditingkatkan:

Namun, jika Anda tidak memiliki latar belakang teknis, wawasan kecepatan halaman mungkin membingungkan Anda. Memahami metrik First Contentful Paint (FCP) dan First Input Delay (FID) apa yang mungkin tepat di kepala Anda.

Masukkan Thor Render Engine™ Instapage.

Detail di balik Thor Render Engine™

Kami mengembangkan Thor Render Engine™ untuk memastikan bahwa semua halaman arahan pasca-klik Instapage dimuat dengan cepat.

Ini berarti penulisan ulang penuh halaman arahan pasca-klik di setiap aspek — mengubah struktur HTML, Pemfaktoran Ulang JavaScript dan CSS, dan Daya Tanggap CSS untuk memastikan semua yang ada di backend halaman Anda memungkinkannya dimuat secara instan.

Bagian terbaik dari semua perubahan ini adalah Anda tidak perlu melakukan apa pun karena Thor Render Engine™ bekerja secara diam-diam di belakang layar untuk membuat halaman Anda secepat kilat.

Mari uraikan perubahan untuk melihat apa yang telah kami lakukan untuk memuat halaman lebih cepat.

struktur HTML

Banyak yang dilakukan untuk membuat sistem rendering halaman lebih cepat dari sudut pandang HTML, dimulai dengan prioritas sumber daya.

Prioritas sumber daya

Kami telah membuang banyak kode yang tidak terpakai, ambigu, atau tidak optimal pada laman landas pasca-klik, sehingga menghasilkan markup yang jelas dan cepat ditampilkan.

Struktur HTML baru menjamin bahwa semua sumber daya akan dimuat dalam urutan yang benar. Gaya halaman (kecuali gaya font) telah ditambahkan ke bagian kepala karena, setelah itu, halaman dimuat lebih cepat daripada menggunakan lembar gaya CSS.

Daya tanggap tidak lagi memerlukan titik henti tambahan dalam CSS atau JavaScript karena laman akan dimuat dengan cepat dan tampak hebat tanpa kode tambahan. Selain itu, semua skrip ditempatkan di bagian bawah badan halaman sehingga tidak memblokir perenderan halaman. Skrip dan sumber daya penting (mis., font) menggunakan kemampuan pramuat browser, yang berarti mereka tidak diblokir saat halaman dirender. Selain itu, tidak ada JavaScript sinkron yang ditempatkan di tag kepala halaman.

Gambar dan video malas memuat

Meskipun gambar dan video tidak memblokir perenderan, ketika ada banyak yang hadir di halaman, bandwidth dapat tersumbat dengan terlalu banyak permintaan, terutama dengan gambar besar. Hal ini dapat menyebabkan pengalaman pengguna yang buruk karena gambar di paro atas dimuat secara bersamaan dengan gambar di paro bawah, yang tidak terlihat oleh pengunjung.

Untuk mengatasi masalah ini, kami memperkenalkan pengoptimalan berikut:

• Gambar di paro atas dimuat dengan prioritas lebih tinggi — pengunduhan segera dimulai sehingga dapat dilihat bahkan sebelum laman menjadi interaktif.
• Gambar dan video di paro bawah dimuat dengan malas — unduhan dipicu saat pengguna menggulir ke sana. Kotak abu-abu digunakan sebagai placeholder untuk gambar yang belum dimuat.
• Untuk mencegah pengguna melihat kotak abu-abu ini, gambar sebenarnya dimuat saat digulir ke viewport. Namun saat digulir pada jarak 400px ke viewport bawah. Saat mereka memasuki viewport, mereka sudah dimuat.
• Aturan yang sama berlaku untuk video, yang dimuat di iframe.

Untuk mewujudkannya, kami memanfaatkan API mutakhir dari IntersectionObserver, yang membuat pemuatan lambat menjadi sangat efisien dengan jejak ukuran kode yang kecil:

Pemfaktoran ulang JavaScript

Refaktor JavaScript menyertakan pengoptimalan berikut:

1. Arsitektur modular: Semua kode JavaScript pada halaman arahan pasca-klik terkait dengan fitur widget tertentu. Kami membagi kode kami menjadi beberapa bundel, masing-masing berisi kode untuk fitur tertentu. Jadi, saat pengguna mendesain halaman hanya dengan gambar dan tautan, tidak ada kode untuk widget Formulir atau Popup yang akan dimuat sehingga halaman dimuat dengan cepat.
2. Sangat ringan: Kami menghapus perpustakaan lama dan mendesain ulang seluruh arsitektur kode, ini memungkinkan kami untuk mengurangi ukuran total JavaScript pada halaman dari lebih dari 1MB menjadi sekitar 200kB (yaitu 5x lebih sedikit!), sedangkan halaman biasa akan memuat kurang dari 100kB berkat modularisasi yang dijelaskan di atas.
3. Semua Async: Karena JavaScript memblokir perenderan, kami memindahkan semua impor skrip ke bagian bawah tag BODY. Hal ini memungkinkan browser merender halaman penuh sebelum skrip dieksekusi memungkinkan pengunjung untuk melihat konten yang bermakna lebih awal. Skrip yang menyediakan interaktivitas akan memuat dan mengeksekusi hanya setelah mereka mulai berinteraksi dengan bagian halaman tersebut. Ini memberikan pengalaman yang sangat bagus terutama pada perangkat seluler dengan kinerja lebih rendah dan seringkali koneksi internet yang buruk.

Pemfaktoran ulang CSS

Kami juga telah menulis ulang seluruh lembar gaya CSS kami, menghapus kode pihak ketiga yang tidak diperlukan sehingga lembar gaya kami dapat digunakan kembali, mudah dibaca, dan ringan. Selain itu, kami menggunakan kelas CSS generik untuk menggunakan kembali kode CSS sebanyak mungkin.

Kami juga menerapkan animasi khusus CSS dengan akselerasi GPU. Perubahan terpenting dalam tumpukan CSS kami adalah memperkenalkan unit relatif "rem", bukan piksel. Berkat ini, halaman arahan pasca-klik sekarang dapat diskalakan dengan lancar di setiap ukuran perangkat, dari smartphone hingga tampilan desktop 4k.

daya tanggap CSS

Kami menggunakan "rem" dalam kombinasi dengan unit "vw" untuk membuat halaman arahan pasca-klik menjadi responsif. Artinya, ada dua celah dalam resolusi perangkat saat laman landas pasca-klik diperkecil antara lebar 768 dan 1200 piksel dan lebarnya di bawah 400 piksel. Di semua resolusi lainnya, konten utama tetap memiliki lebar tetap, seperti di pembuat. Nilai lebar tetap adalah 400px untuk ponsel dan 1200px untuk desktop.

Unit "Rem" memberi kita kemampuan untuk menghitung ulang posisi dan ukuran widget dengan lancar. Ini juga berarti kita tidak harus menggunakan JavaScript untuk mewujudkannya.

Kesimpulan:

• konten di bawah 400px secara otomatis diskalakan agar sesuai dengan lebar layar
• antara 400px dan 767px lebar konten tetap
• dari tampilan seluler 768px beralih ke tampilan desktop
• dari konten 768px hingga 1200px secara otomatis disesuaikan dengan lebar layar
• di atas 1200px konten sudah diperbaiki

Contoh uji kecepatan Thor Render Engine™

Karena Anda tidak pernah tahu bagaimana orang melihat halaman arahan pasca-klik Anda (desktop, seluler, atau tablet), pengalaman halaman harus benar-benar responsif. Solusi Thor Render Engine™ sepenuhnya responsif pada semua resolusi.

Sekarang mari kita bandingkan mesin render baru dengan generator halaman lama kita. Gambar di bawah menunjukkan hasil kecepatan halaman dari halaman yang sama meskipun dengan URL yang berbeda. (Catatan: Halaman tidak lagi aktif karena URL ini hanya untuk tujuan pengujian):

Hasil rendering halaman Instapage lama:

Hasil Thor Render Engine™:

Mencetak 56 pada pengujian pertama, dan meningkatkannya menjadi 95 pada pengujian kedua adalah peningkatan kecepatan pemuatan halaman sebesar 58,9%!

Perbandingan kecepatan memuat halaman

Setelah meringkas semua perubahan dengan Thor Render Engine™, mari kita lihat bagaimana kecepatan memuat halaman Instapage dibandingkan dengan kompetitor.

Kami menguji kecepatan halaman ini (tangkapan layar hanya menunjukkan paro atas) pada koneksi 3G:

Berikut berapa lama waktu yang dibutuhkan halaman untuk memuat:

• Dengan sistem rendering halaman Instapage lama (baris atas): 10,5 detik untuk mulai memuat
• Thor Render Engine™ (baris tengah): Dalam 5 detik, halaman dimuat 98%.
• Menggunakan pesaing (baris bawah): 8 detik untuk mulai memuat

Pada koneksi 4G, berikut hasilnya:

• Dengan sistem rendering halaman Instapage lama: 4,5 detik untuk mulai memuat
• Thor Render Engine™: Memuat sepenuhnya dalam 3,5 detik
• Menggunakan pesaing: 4,5 detik hanya untuk mulai memuat

Nikmati pemuatan halaman yang lebih cepat dengan Thor Render Engine™

Kecepatan halaman memainkan peran penting dalam pengalaman pengguna dan pada akhirnya konversi Anda. Saat waktu muat halaman lambat, Anda tidak hanya berisiko mengalami rasio pentalan yang tinggi, tetapi juga membuat pengguna frustrasi dalam prosesnya.

Dengan Thor Render Engine™, kami sekarang dapat menjamin bahwa halaman arahan pasca-klik Anda akan dimuat secara instan tanpa upaya apa pun dari Anda. Daftar untuk demo Instapage Enterprise hari ini dan rasakan sendiri perbedaannya.