Menerapkan Preload, Prefetch, Preconnect di WordPress

Manfaatkan fitur browser modern seperti preloading, prefetching, preconnect untuk membuat website WordPress lebih cepat.

Sebagai pemilik situs, siapa yang tidak suka melakukan segala kemungkinan untuk memuat halaman web lebih cepat?

Memastikan situs dimuat lebih cepat secara konsisten di seluruh dunia merupakan tantangan. Ada beberapa hal yang dapat Anda lakukan untuk memuat sumber daya situs dengan cepat, termasuk mengaktifkan petunjuk peramban berikut . Mereka juga dikenal sebagai teknik pra-penjelajahan .

Catatan : teknik petunjuk browser tidak banyak membantu saat Anda mengakses situs web untuk pertama kali, tetapi permintaan berikutnya lebih cepat.

Pramuat

Anda dapat menggunakan tag preload untuk memberi tahu browser agar mengambil beberapa sumber daya statis lebih awal. Mereka bisa berupa gambar, font, JavaScript, CSS, skrip, video, dll. Ini membantu memprioritaskan pemuatan sumber daya; karenanya, kinerja ditingkatkan.

Pramuat akan menjadi ide yang baik untuk diterapkan jika Anda mengharapkan pengguna Anda mengunjungi beberapa halaman selanjutnya. Seperti toko eCommerce tempat pengguna mengunjungi halaman produk dan kemudian memeriksa informasinya, membandingkan dengan produk lain, menambahkan ke troli, membayar, dll.

Anda dapat menggunakan plugin berikut untuk mengatur fitur Preload.

Petunjuk sumber daya yang lebih baik – plugin gratis untuk mengonfigurasi file CSS dan JS.

WP Rocket – plugin premium untuk meningkatkan kinerja situs web dengan banyak teknik penting, termasuk caching pramuat dan peta situs.

Bagaimana Anda tahu jika pramuat diaktifkan?

Cara tercepat untuk mengetahuinya adalah dengan melihat sumber halaman. Anda akan melihat sesuatu seperti di bawah ini.

 <link rel="preload" as="style" href="IMPORTANT.css"> <link rel="preload" as="script" href="CRITICAL.js">

Tidak semua browser mendukung Preload saat menulis. Jadi, periksa matriks kompatibilitas sebelum implementasi.

Prakoneksi

Apakah Anda memuat sumber daya dari domain lain? Mungkin CDN?

Jika tidak, dan setiap sumber daya dimuat dari domain tunggal Anda, maka ini mungkin tidak membantu.

Peramban petunjuk prakoneksi untuk membuat sambungan ke domain lain di latar belakang guna menghemat waktu untuk pencarian DNS, pengalihan, jabat tangan TCP, negosiasi TLS, dll. Idenya adalah untuk menurunkan latensi guna menyediakan pemuatan sumber daya yang cepat dari domain lain.

Sekali lagi, Anda dapat menggunakan plugin petunjuk sumber daya yang lebih baik yang disebutkan di atas atau yang premium seperti perfmatters.

Setelah mengonfigurasi sumber daya yang diperlukan, Anda akan melihatnya di sumber halaman seperti di bawah ini.

 <link rel="preconnect" href="https://ANOTHERSITE.com">

Catatan: jika Anda memuat sumber daya dari domain yang memerlukan CORS maka Anda perlu menentukan bahwa sebagai crossorigin dan output akan terlihat seperti.

 <link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>

Preconnect kompatibel dengan versi terbaru Chrome, Edge, Firefox, Safari.

Ambil terlebih dahulu

Biarkan browser mengambil halaman berikutnya, yang menurut Anda akan dibutuhkan saat pengguna bernavigasi. Prefetch akan mengunduh sumber daya yang diperlukan dan menyimpannya di cache lokal dan menyajikannya dengan cepat saat dibutuhkan. Ada dua jenis prefetch.

Prefetch DNS – dijelaskan di bawah

Tautan prefetch – dikonfigurasi menggunakan <link url ..>. Digunakan untuk mengambil lebih dulu HTML atau sumber daya statis. Anda dapat mengambil sumber daya terlebih dahulu menggunakan as atribut.

<link rel="prefetch" href="https://somesite.com/articles/page/2/" as="document">

as atribut mendukung berbagai sumber daya seperti audio, video, skrip, trek, gaya, font, objek, dokumen, dll. Pengambilan tautan dapat dikonfigurasi dengan bantuan plugin Petunjuk Sumber Daya Pra Pesta.

DNS Prefetch

Memuat sumber daya dari banyak domain dan ingin menyelesaikannya di latar belakang?

Penyiapan cepat ini dapat membantu menyelesaikan semua domain potensial lebih awal sehingga ketika sumber daya diminta, ia memuat lebih cepat. Ini membantu menurunkan latensi keseluruhan.

Katakanlah Anda memuat sumber daya dari 3 domain, dan setiap domain membutuhkan waktu sekitar 100 md untuk melakukan pencarian DNS, maka Anda akan menghemat latensi 300 md.

Bukankah itu keren?

Anda dapat mengimplementasikannya dengan menggunakan plugin perfmatters atau menambahkan yang berikut ini di file functions.php tema Anda jika Anda merasa nyaman dalam mengedit file tema.

 //* DNS Prefetching function dns_prefetch() { echo '<meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" /> <link rel="dns-prefetch" href="https://ANDANOTHERONE.com" /> <link rel="dns-prefetch" href="https://AND.SOMEMORE.com" /> } add_action('wp_head', 'dns_prefetch', 0);

Anda dapat membaca lebih lanjut di Mozilla web docs.

Prarender

Apakah Anda mengharapkan pengguna situs Anda menavigasi halaman potensial?

Prarender dapat membantu memuat aset tersebut di latar belakang, dan ketika pengguna mengkliknya, mereka mendapatkannya dengan sangat cepat. Anda dapat mencapai ini dengan plugin Petunjuk Sumber Daya Pra Pesta.

Prarendering cocok untuk halaman atau aset yang ringan, tetapi berhati-hatilah dengan seluruh situs atau sumber daya yang besar karena dapat meningkatkan penggunaan CPU dan bandwidth serta memperlambat situs. Jadi, coba dengan sumber daya yang lebih kecil dan uji untuk memastikan tidak ada efek samping.

Seperti yang Anda lihat, ada empat plugin utama yang terlibat untuk mengimplementasikan petunjuk browser di WordPress. Pilih yang Anda suka dan sesuaikan dengan kebutuhan.

Plugin Pre Party Resource Hints – plugin gratis menawarkan DNS-prefetch, link prefetch, prerender, preconnect, dan preload.

Petunjuk sumber daya yang lebih baik – alternatif dari yang di atas.

Plugin gratis itu bagus asalkan dipelihara dan didukung. Sayangnya, ini tidak terjadi pada banyak plugin, dan itulah mengapa terkadang lebih baik menggunakan versi berbayar. Plugin versi komersial didukung secara profesional dan terkini dengan standar WordPress & perbaikan keamanan. Jika Anda bersedia menghabiskan beberapa dolar untuk mengoptimalkan kinerja situs Anda, maka Anda dapat memeriksa yang berikut ini.

WP Rocket – bereputasi baik, dipercaya oleh lebih dari 800.000 situs. Harganya $49 untuk satu situs web.

Perfmatters – ringan dengan mudah diikuti biaya $24,95 untuk satu situs. Saat saya menulis, ia menawarkan fitur-fitur berikut.

Itu banyak optimasi.

Kesimpulan

Inti WordPress ringan, tetapi menjadi besar tergantung pada tema dan plugin apa yang Anda gunakan. Dan, penting untuk mengoptimalkan kinerja situs Anda untuk peringkat dan konversi pencarian yang lebih baik. Teknik di atas mudah diikuti, tetapi Anda tidak boleh berhenti di situ.

Anda juga harus mempertimbangkan untuk menggunakan CDN untuk menyimpan dan mengirimkan konten lebih cepat ke pengguna Anda, secara global. Ada banyak, tapi saya akan merekomendasikan mencoba SUCURI yang menawarkan CDN dan keamanan, keduanya.