Cara Menggunakan Halaman Instan di WordPress untuk Memuat Konten

Jika Anda ingin mempercepat situs WordPress Anda, menggunakan Halaman Instan di WordPress adalah taktik yang kurang dikenal yang memanfaatkan kekuatan "preloading".

Itulah preloading – menggunakan kode untuk memberi tahu browser pengunjung untuk memuat halaman tertentu. Akibatnya, pengguna dapat mengalami navigasi yang lebih cepat, dan jika Anda menerapkannya dengan benar, mereka tidak akan pernah melihat ada lebih banyak pemuatan data di latar belakang.

Di artikel ini, kami akan memecah cara kerja preloading, lalu mengajari Anda cara menggunakan Halaman Instan skrip untuk menambahkan fungsionalitas ke WordPress. Kami juga akan menguji seberapa besar perbedaan preloading yang terjadi di kehidupan nyata.

Mari kita mulai!

Pengantar preloading ‘tepat waktu’

Preloading adalah a tag yang memberi tahu browser bahwa mereka harus memuat dan menyimpan sumber daya sesegera mungkin. Anda dapat, misalnya, menggunakan kode ini sehingga browser akan mengambil file style.css Anda segera setelah memuat halaman Anda:

Biasanya, Anda menggunakan tag preload untuk mengunduh stylesheet atau skrip. Namun, preloading tepat waktu melangkah lebih jauh. Ini memberitahu browser Anda untuk mulai memuat halaman lain ketika Anda berinteraksi dengan tautan tertentu.

Peramban Anda tidak melakukan apa pun dengan laman yang dimuatnya, selain dari menyimpannya. Ini berarti ketika Anda mengklik tautan, waktu pemuatan harus lebih cepat dari biasanya. Namun, ingatlah bahwa preloading tepat waktu hanya berfungsi untuk:

• Tautan internal di dalam situs web Anda
• Tautan ke halaman eksternal (jika Anda mau!)

Dengan kata lain, menambahkan preloading tepat-waktu ke situs web Anda harus mempercepat navigasi internal. Namun, itu tidak akan memengaruhi waktu pemuatan dari mesin pencari atau dari situs web lain.

Selama pengujian kami sendiri, kami menemukan bahwa rata-rata, kami butuh 200–300 ms untuk mengklik tautan dari waktu kami mengarahkannya. Dalam skenario kehidupan nyata, ini akan menjadi gigitan yang bagus dari waktu pemuatan halaman mana pun, bahkan jika itu sudah cepat untuk memulai.

Perlu dicatat bahwa preloading tidak sama dengan 'prefetching,' yang merupakan istilah lain yang mungkin Anda alami. Prefetching juga memberi tahu browser Anda untuk memuat aset di latar belakang. Namun, hal itu dilakukan pada prioritas yang lebih rendah, yang tidak sesuai dengan tujuan memulai pemuatan dengan segera.

Halaman Instan memudahkan pengaturan preloading "just-in-time"

Untuk yang belum tahu, Halaman Instan adalah skrip open-source yang dapat Anda gunakan untuk menambahkan preloading tepat-waktu ke situs web Anda. Skrip mulai memuat halaman baru segera setelah pengguna mengarahkan kursor ke tautan – meskipun itu hanya memuat konten statis.

Menurut Halaman Instan, ketika pengguna mengarahkan tautan sekitar 65 ms, ada kemungkinan 50 persen bahwa mereka akan mengklik tautan itu. Pada titik ini, browser Anda akan memiliki waktu untuk mulai memuat halaman di latar belakang, yang mengarah ke waktu pemuatan yang lebih singkat.

Sebelum menambahkan skrip ke situs web Anda, Anda ingin menjalankan beberapa tes kecepatan internal. Untuk melakukan ini, kami ingin menggunakan Alat Dev Chrome. Cukup klik kanan pada halaman mana saja di situs web Anda dan pilih opsi Inspect. Dengan alat terbuka ke kanan, pilih tab Jaringan, lalu klik tautan internal:

Bagian DOMContentLoaded di sudut kanan bawah memberi tahu Anda berapa lama waktu yang dibutuhkan untuk memuat HTML. Jalankan beberapa tes ini dan catat hasilnya – itu adalah baseline Anda.

Sekarang, mari kita bahas cara menggunakan Halaman Instan di WordPress.

Cara termudah untuk menggunakan Halaman Instan di WordPress

Meskipun kami akan menunjukkan kepada Anda metode manual tentang cara menggunakan Halaman Instan di WordPress di bagian selanjutnya, cara termudah untuk memulai dengan Halaman Instan di WordPress adalah dengan plugin khusus:

Tidak diperlukan tutorial di sini – Anda cukup memasang plugin dan mulai berfungsi!

Cara menggunakan Halaman Instan secara manual di WordPress

Kami merekomendasikan plugin untuk sebagian besar pengguna, tetapi Anda juga dapat secara manual menambahkan skrip Halaman Instan ke situs WordPress Anda.

Manfaat kecil menggunakan metode manual adalah Anda memiliki sedikit lebih banyak kontrol atas bagaimana preloading Anda berfungsi.

Prosesnya akan berbeda tergantung pada metode apa yang Anda gunakan. Misalnya, Anda bisa gunakan kait untuk menambahkan kode ke WordPress atau menyisipkan kode secara langsung.

Kami akan menggunakan teknik terakhir karena Halaman Instan hanya membutuhkan beberapa baris kode untuk berfungsi.

Untuk melakukan ini, Anda ingin mengakses situs web Anda melalui File Transfer Protocol (FTP) dan menavigasi ke folder root WordPress Anda.

Sesampai di sana, pergi ke wp-content/themes dan cari folder yang sesuai dengan tema anak Anda.

Jika Anda tidak menggunakan tema anak, atau tidak yakin cara membuatnya, kami sarankan untuk menggunakan metode plugin di atas. Jika Anda mencoba menambahkan potongan kode ke file templat tema Anda tanpa menggunakan tema anak, perubahan Anda akan ditimpa saat berikutnya Anda memperbarui tema.

Kemudian cari footer.php file, yang seharusnya berisi bagian terakhir dari tema Anda tag. Buka file dengan editor teks, dan cari tag penutup tubuh (). Anda dapat melihat bagian dari contoh footer.php file di bawah, tetapi perlu diingat bahwa Anda mungkin terlihat sedikit berbeda tergantung pada tema yang Anda gunakan:

Sekarang, silakan tempelkan cuplikan kode berikut sebelum tag itu. Maka Anda ingin menyimpan perubahan pada file sebelum menutupnya:

Secara default, skrip hanya akan memuat pranala internal. Namun, Anda dapat mengubahnya untuk mengaktifkan preloading eksternal dengan menambahkan atribut ke tag, seperti ini:

Anda juga dapat memodifikasi penundaan saat mengarahkan mouse dengan menambahkan atribut lain. Misalnya, jika halaman Anda menyertakan banyak tombol dan elemen yang dapat diklik, Anda mungkin ingin menambah waktu hover sebelum preloading. Dengan demikian, browser Anda seharusnya hanya memuat pranala yang benar-benar direncanakan pengunjung untuk diklik:

Menguji preloading tepat waktu di WordPress

Kami melanjutkan dan menyiapkan skrip instant.page di salah satu situs web kami untuk pengujian. Anda melihat hasil baseline kami di bagian sebelumnya, jadi mari kita coba lagi tes untuk melihat apakah skrip membuat perbedaan yang signifikan:

Selama pengujian kami, kami tidak melihat perbedaan signifikan dalam waktu pemuatan dalam WordPress. Ada sedikit pengurangan menurut Alat Dev Chrome, tapi itu hanya beberapa milidetik, seperti yang Anda lihat. Ini tidak buruk, tetapi kami bahkan tidak mencapai 100 ms dalam pengurangan latensi.

Hasilnya memang lebih baik ketika Anda menggunakan skrip di situs web statis. Selama pengujian kami, kami berhasil mengukir 200 ms latensi tambahan dari situs web uji sepenuhnya-statis:

Pada akhirnya, menerapkan preloading tepat waktu mudah jika Anda adalah pengguna WordPress. Pengurangan latensi bagus, tetapi pengujian kami di WordPress tidak menunjukkan penurunan yang signifikan, yang berarti hanya pengubah permainan dalam situasi tertentu berdasarkan hasil ini.

Kesimpulan

Apa pun yang dapat Anda lakukan untuk meningkatkan waktu pemuatan situs web Anda baik untuk bisnis. Bahkan memangkas beberapa milidetik dapat berdampak signifikan pada pengalaman pengguna. Menerapkan preloading sangat bagus untuk meningkatkan kinerja lebih jauh. Secara khusus, ini berlaku untuk situs web dengan banyak konten, dan keinginan untuk memaksimalkan 'waktu di situs'.

Menerapkan preloading tepat waktu sama mudahnya dengan menambahkan halaman instan skrip di antara situs Anda tag. Jika Anda menggunakan WordPress, bahkan ada plugin itu bekerja untuk Anda. Namun, pengujian kami menunjukkan pengurangan latensi tidak sedramatis untuk situs WordPress seperti pada yang statis, seperti yang diharapkan.

Apakah Anda memiliki pertanyaan tentang cara kerja Halaman Instan atau preloading? Mari kita bicarakan di bagian komentar di bawah!