Cara Menggunakan Tag Tautan Rel= Preload Untuk Meningkatkan Kinerja Situs WordPress

Jika Anda ingin meningkatkan kinerja situs WordPress Anda, salah satu cara yang dapat Anda lakukan adalah dengan menggunakan tag tautan rel="preload". Tag ini memungkinkan Anda memberi tahu browser untuk mulai memuat aset tertentu sebelum aset tersebut benar-benar dibutuhkan. Misalnya, Anda dapat menggunakannya untuk memuat logo situs web Anda sebelum konten utama halaman dimuat.
Menambahkan tag rel="preload" ke situs WordPress Anda cukup mudah. Anda hanya perlu menambahkan sedikit kode ke header situs Anda. Pada artikel ini, kami akan menunjukkan cara melakukannya.

Bagaimana Saya Memuat Permintaan Kunci Di WordPress?

Untuk memuat permintaan kunci di WordPress menggunakan Autoptimize, buka Settings > Autoptimize > Preload key request . Dasbor WordPress Anda dapat diakses melalui tautan. Kotak permintaan khusus Pramuat akan tersedia. Masukkan tautan yang Anda terima sebagai hasil dari peringatan permintaan kunci pramuat di kotak itu.

PageSpeed ​​mungkin menyarankan untuk memuat peluang yang harus Anda manfaatkan. Ada file untuk merender halaman Anda yang disebut sebagai 3 level jauh di dalam kode Anda yang dimuat sebelum ditampilkan. Dengan kata lain, file akhir diminta oleh file lain dan tidak terletak langsung di dalam HTML situs WordPress. Menggunakan PageSpeed, Anda dapat mengidentifikasi masalah apa pun dengan kinerja situs Anda. Saat Anda memuat font atau file, mungkin perlu beberapa saat untuk muncul. Saat kami memuat font sebelum mereka mengetahuinya sendiri, kami mengatakan bahwa mereka akan membutuhkannya. Saat memuat file, Anda harus menambahkannya ke daftar putar dengan sintaks tertentu, seperti link rel=preload.

Ketika file tertentu diminta, browser mendeteksi tag tautan khusus dan mulai mengunduhnya. Jika Anda memprioritaskan terlalu banyak file, ini dapat mengakibatkan kemacetan yang menunda file penting lainnya. Dalam hal ini, WP Rocket sudah memuat font Google, jadi Anda tidak perlu melakukan sesuatu yang istimewa. Anda akan dapat memuat font Anda terlebih dahulu dengan fitur itu jika Anda menggunakan fitur Hapus CSS yang Tidak Digunakan. Anda juga dapat meng-host file-file ini secara lokal jika Anda mau. Akibatnya, daripada meminta Google menghosting situs web Anda, host Anda akan dihosting di server yang dikelola oleh Google.

Plugin WordPress dapat memuat font, baik secara manual dengan mengedit file header, atau melalui plugin WordPress WP Rocket. Karena Google PageSpeed ​​Insights tidak meminta font melalui WP Rocket, disarankan untuk memuatnya dengan WP Rocket.

Cara Memuat Tautan Di WordPress

Navigasikan ke pengaturan blog Anda, klik 'Tautan', dan di bawah judul 'Tautan', tempelkan tautan ke dalam 'Kotak teks Muat sebelumnya'.

Apa Itu Preload Di Link Rel?

Preload in link rel adalah standar baru yang diperkenalkan di HTML5 yang memungkinkan pengembang web untuk menginformasikan browser tentang file yang akan diperlukan selama pemuatan halaman. Dengan cara ini, browser dapat mulai memuat file-file ini segera, alih-alih menunggu HTML diuraikan. Ini dapat meningkatkan waktu buka halaman, terutama untuk halaman yang membutuhkan banyak file eksternal.

Link rel="preload" digunakan untuk menunjukkan link mana yang memiliki atribut ini untuk diprioritaskan. Preload adalah sesuatu yang harus dilakukan browser untuk menggunakan preload, yang merupakan sesuatu yang dapat diputuskan untuk dilakukan atau tidak. Ini adalah deskripsi yang sangat rinci tentang kata kunci preload dalam spesifikasi W3C.

Ada banyak alasan mengapa Anda mungkin menggunakan prefetching. Memilih untuk mengambil sumber daya yang sering digunakan pada halaman, misalnya, akan mengurangi kemungkinan bahwa sumber daya tersebut tidak akan dimuat dari jaringan. Anda mungkin juga ingin mengambil sumber daya yang hanya diperlukan dalam waktu singkat untuk mengurangi kembung memori. Prefetching dapat dilakukan dengan dua cara: resource prefetching dan cache prefetching. Sumber daya pengambilan awal dokumen mengacu pada sumber daya yang digunakan dokumen untuk memproses dokumen terlebih dahulu. Ada juga skrip dan modul yang dapat digunakan untuk menghasilkan file gambar dan lembar gaya, serta jenis file dan objek lainnya. Prefetching, di sisi lain, mengacu pada prefetching sumber daya yang digunakan browser dalam cache-nya. Ini mencakup sumber daya seperti HTML5 serta panggilan AJAX yang masih di-cache. Algoritma prefetching dapat digunakan dalam berbagai cara. Algoritma Least Recent Used (LRU) adalah salah satu metode yang paling umum untuk memilih sumber daya yang paling sedikit digunakan. Algoritma Random Early Release (RER) adalah algoritma prefetching umum lainnya yang memilih sumber daya berdasarkan nama file mereka. Salah satu konsekuensi dari prefetching adalah pengalaman pengguna yang menurun. Secara umum, mengambil sumber daya yang mungkin diperlukan akan mengurangi jumlah waktu yang diperlukan browser untuk menunggu tersedianya sumber daya. Akibatnya, pengguna akan memiliki lebih sedikit waktu menunggu halaman dimuat dengan menggunakan metode ini. Saat halaman dimuat , penulis dapat menentukan cara media harus dimuat dengan menetapkan atribut pramuat. Preload adalah metode yang digunakan penulis untuk menginformasikan browser tentang tampilan dan nuansa situs web. Prefetching dapat berguna dalam berbagai cara. Cache diunggulkan.

Pramuat Sumber Daya Untuk Pemuatan Halaman Lebih Cepat

Ketika sumber daya tertentu dimuat sebelumnya hingga dokumen utama dimuat, ini meningkatkan kecepatan pemuatan halaman. Ini dapat berguna jika penulis percaya bahwa sumber daya tertentu tidak akan diperlukan sampai dokumen utama selesai dimuat. Atribut preload dapat digunakan di elemen apa pun yang memiliki tautan. Atribut preload, yang dapat berupa no atau auto, didasarkan pada nilai Boolean. Setel browser ke otomatis untuk menentukan sumber daya mana yang akan dimuat sebelumnya berdasarkan konten tautan. Atribut preload menonaktifkan pramuat saat disetel ke none.

Bagaimana Saya Menambahkan Loader ke Situs WordPress Saya Tanpa Plugin?

Menambahkan loader ke situs WordPress Anda tanpa plugin adalah proses yang sederhana. Pertama, Anda perlu membuat file baru bernama ” loader.php ” di folder tema WordPress Anda. Selanjutnya, salin dan tempel kode berikut ke file baru Anda:
/**
* Pemuat
*
* @paket WordPress
* Pemuat @subpaket
* @penulis Nama Anda Disini
*
* @internal Kode ini untuk memuat skrip ke situs WordPress Anda
* tanpa perlu plugin.
*/
/**
* Skrip Enqueue
*
* Mendaftar dan membuat skrip enqueues untuk front-end WordPress.
*/
fungsi wp_enqueue_scripts() {

// Daftarkan Script
wp_register_script( 'jquery-ui-core', '//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js', array( 'jquery' ), '1.9.1' , BENAR );

// Enqueue Script
wp_enqueue_script('jquery-ui-core');
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_scripts');
? >
Kode ini akan mendaftarkan dan mengantrekan skrip jQuery UI Core di situs WordPress Anda. Anda kemudian dapat menggunakan skrip jQuery UI Core di situs WordPress Anda tanpa memerlukan plugin.

Bagaimana Anda Memuat Halaman Di Html?

Anda dapat mengunduh dan menyimpan sumber daya (seperti skrip atau lembar gaya) sesegera mungkin dengan menggunakan *link rel=preload. Ini berguna ketika Anda membutuhkan sumber daya itu dalam beberapa detik setelah memuat halaman; Anda ingin mempercepat halaman. Setelah mengunduh sumber daya, browser tidak melakukan tindakan apa pun dengannya.

Ini adalah metode menyediakan browser web dengan pointer ke sumber daya/file yang akan diperlukan untuk memuat halaman web dalam waktu dekat. Petunjuk pramuat diberikan dengan menambahkan pramuat sebagai nilai ke elemen sumber daya yang perlu dimuat. Namun, pengunduhan sumber daya secara asinkron tidak diizinkan dalam status pemuatan. Saat browser melakukan sesuatu yang lain, ia mengunduh petunjuk pramuat pada saat yang bersamaan. Karena browser tidak mempelajari file-file ini sampai mereka diurai, mereka tidak tahu file apa yang diurai. Ini adalah metode yang tidak efisien untuk memuat aset ini karena browser tidak memiliki kemampuan untuk melakukannya. Akibatnya, Anda dapat menginstruksikan browser untuk mengunduh sumber daya tersebut di awal dengan menggunakan petunjuk pramuat .

Pramuat adalah fitur hebat untuk mempercepat situs web Anda, tetapi itu harus digunakan hanya pada kesempatan langka. Merupakan ide yang baik untuk memuat terlebih dahulu file yang diperlukan untuk dimuat di paro atas. Anda juga akan dapat meningkatkan kecepatan situs web Anda di Google PageSpeed ​​Insights. Selanjutnya, preload dapat dikombinasikan dengan push server HTTP/2. Pramuat font, CSS, JS, dan sumber daya lainnya tersedia. Ketika sebuah file ditemukan hanya saat file lain dirender, itu dapat mempercepat pemuatan situs web Anda secara keseluruhan. Beberapa jenis file standar dapat diisi sebelumnya menggunakan sintaks yang tercantum di bawah ini. Dalam hal ini, pramuat tidak menginstruksikan browser web untuk menerapkan file tertentu ke halaman web.

Pramuat WordPress

Preloading data di WordPress mengacu pada memuat data sebelum dibutuhkan. Ini bisa berguna dalam beberapa situasi, seperti saat Anda ingin memastikan bahwa bagian data tertentu selalu tersedia saat dibutuhkan, atau saat Anda ingin menghindari keharusan memuat data dari lokasi jauh setiap kali dibutuhkan. Pramuat data juga dapat membantu meningkatkan kinerja dengan mengurangi jumlah waktu yang diperlukan untuk memuat data saat dibutuhkan.

Situs Anda akan menjadi lebih cepat jika Anda menerapkan Preload, Prefetch, dan Preconnect di WordPress. Jika pengguna Anda diharapkan untuk mengunjungi beberapa halaman di beberapa perangkat, memuatnya terlebih dahulu adalah ide yang bagus. Prakoneksi memungkinkan Anda membuat koneksi keluar ke domain lain di latar belakang. Tujuannya adalah untuk mengurangi latensi agar dapat memuat sumber daya lebih cepat dari domain lain. Preconnect kompatibel dengan semua versi Chrome, Edge, Firefox, dan Safari. Prefetch DNS dilakukan dengan menggunakan array linkurl. Anda dapat menggunakannya untuk mengembalikan HTML atau sumber daya statis ke sistem.

Prarender memungkinkan Anda memuatnya di latar belakang saat masih aktif. Ini dilakukan dengan menggunakan plugin Petunjuk Sumber Daya Pra Pesta. Jika Anda membutuhkan aset yang ringan, renderlah, tetapi berhati-hatilah untuk tidak merender seluruh situs atau sumber daya yang besar secara berlebihan. Sebaiknya pertimbangkan juga untuk menyimpan dan mengirimkan konten lebih cepat ke pengguna Anda secara global dengan memanfaatkan CDN. Ada beberapa perusahaan yang menyediakan CDN dan keamanan, tetapi saya merekomendasikan SUCURI, yang menawarkan keduanya.

Sebagai hasil dari pramuat, pengguna dapat mengalami peningkatan kinerja yang signifikan, terutama jika koneksi mereka lambat. Untuk membuat halaman web dimuat lebih cepat, pengguna dapat memuat sumber daya lebih awal, sehingga pengguna tidak perlu menunggu halaman dimuat sepenuhnya. Sebelum memuat sumber daya, Anda harus mengingat beberapa hal: Saat memuat file, pastikan untuk menyertakan atribut yang tepat rel="preload" dalam komentar. Pengguna dapat menonaktifkan pramuat dengan mengklik tombol Tanpa Pramuat di pengaturan browser. Salah satu keuntungan dari preloading sumber daya adalah bahwa mereka dapat digunakan lebih efisien. Anda dapat mempercepat pemuatan halaman web dengan memuatnya sebelum dimuat. Waktu buka halaman dapat dikurangi dengan memuat sumber dayanya segera setelah diakses. Ini dapat mengurangi waktu yang dihabiskan untuk memuat sumber daya yang sering diminta oleh pengguna dengan memuatnya terlebih dahulu. Saat pengguna memuat browser, ia mengurangi jumlah waktu yang diperlukan untuk memuat sumber daya. Saat pengguna meminta sumber daya, pramuat dapat mempercepat proses dengan mengurangi jumlah waktu yang diperlukan browser untuk menemukannya. Pramuat mungkin bermanfaat dalam mempercepat proses pemuatan laman web secara umum. Saat menggunakan pramuat, penting untuk memahami manfaat dan keterbatasannya, serta berbagai cara di mana hal itu dapat bermanfaat.

Preloader WordPress Tanpa Plugin

Anda dapat membuat Animasi Pramuat WordPress dengan menerapkan CSS secara manual ke konten. Anda harus menggunakan animasi pramuat , yang dapat ditemukan di kode sumber CSS. Kemudian, salin kode sumber CSS untuk animasi pramuat yang telah disediakan oleh salah satu situs web ini.

Link Rel=preload> Harus Memiliki Nilai Valid As

Nilai as dari elemen tautan rel=preload> harus berupa nilai yang valid.

Preload Dan Prefetch: Percepat Pengalaman Pengguna Anda

Saat pengguna tiba di halaman, atribut preload dapat digunakan bersama dengan prefetch untuk meminta sumber daya. Ini membantu mempercepat pengalaman pengguna dengan memastikan bahwa browser mengetahui sumber daya apa yang diperlukan sebelum pengguna tiba di halaman.
Jika dan ketika file media dimuat, atribut yang disebut preload digunakan. Dengan menggunakan atribut preload, penulis dapat menentukan apa yang dia yakini akan menghasilkan pengalaman pengguna sebaik mungkin untuk situs tersebut. Atribut ini dapat diabaikan dalam beberapa kasus.