Menerapkan Preload, Prefetch, Preconnect di WordPress

Manfaatkan fitur peramban modern seperti preloading, prefetching, preconnect untuk membuat situs web WordPress lebih cepat.


Sebagai pemilik situs, yang tidak ingin membuat segala hal yang mungkin untuk memuat halaman web lebih cepat?

Memastikan pemuatan situs 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 yang berikut ini petunjuk browser. Mereka juga dikenal sebagai teknik pra-penelusuran.

Catatan: peramban memberi petunjuk tentang teknik-teknik yang tidak banyak membantu ketika Anda mengakses situs web untuk pertama kalinya, tetapi permintaan berikutnya lebih cepat.

Preload

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

Preloading akan menjadi ide bagus untuk diterapkan jika Anda mengharapkan pengguna mengunjungi beberapa halaman selanjutnya. Seperti toko eCommerce tempat pengguna mengunjungi halaman produk dan kemudian memeriksa informasinya, membandingkannya dengan produk lain, menambah keranjang, 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 menambah kinerja situs web dengan banyak teknik penting, termasuk prapembuatan caching dan sitemap.

Bagaimana Anda tahu jika preload diaktifkan?

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

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

Pra-koneksi

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.

Pra-menghubungkan petunjuk browser untuk membuat koneksi ke domain lain di latar belakang untuk menghemat waktu untuk pencarian DNS, pengalihan, jabat tangan TCP, negosiasi TLS, dll. Idenya adalah untuk menurunkan latensi untuk menyediakan pemuatan sumber daya 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 mengkonfigurasi sumber daya yang diperlukan, Anda harus melihatnya di sumber halaman seperti di bawah ini.

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

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

Prefetch

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

Prefetch DNS – dijelaskan di bawah ini

Tautan pengambilan awal – dikonfigurasi menggunakan. Digunakan untuk mengambil lebih dulu HTML atau sumber daya statis. Anda dapat mengambil sumber daya menggunakan sebagai atribut.

karena atribut mendukung berbagai sumber seperti audio, video, skrip, trek, gaya, font, objek, dokumen, dll. Preetching tautan dapat dikonfigurasikan dengan bantuan Plugin Pre Party Resource Hints.

Prefetch DNS

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

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

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

Bukankah itu keren??

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

// * Prefetching DNS
function dns_prefetch () {
gaung

}
add_action (‘wp_head’, ‘dns_prefetch’, 0);

Anda dapat membaca lebih lanjut di Dokumen web Mozilla.

Prerender

Apakah Anda mengharapkan pengguna situs Anda menavigasi halaman potensial?

Prerender dapat membantu memuat aset tersebut di latar belakang, dan ketika pengguna mengekliknya, mereka mendapatkannya dengan sangat cepat. Anda dapat mencapai ini dengan plugin Petunjuk Partai Sumber Daya.

Prapenguraian cocok untuk halaman atau aset yang ringan, tetapi berhati-hatilah dengan seluruh situs atau sumber daya yang besar karena dapat meningkatkan pemanfaatan CPU dan bandwidth dan memperlambat situs. Jadi, coba dengan sumber daya yang lebih kecil dan mengujinya 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 sesuai kebutuhan.

Plugin Pre Party Resource Hints – plugin gratis menawarkan DNS-prefetch, tautan prefetch, prerender, pra-koneksi, dan preload.

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

Plugin gratis itu bagus asalkan dikelola dan didukung. Sayangnya, ini tidak terjadi pada banyak plugin, dan itulah sebabnya 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.

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

Perfmatters – yang 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 yang Anda gunakan. Dan, sangat penting untuk mengoptimalkan kinerja situs Anda untuk peringkat pencarian dan konversi yang lebih baik. Teknik di atas mudah diikuti, tetapi Anda tidak harus berhenti di situ.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map