Preload Key Requests Website eCommerce

TokoDaring.Com – Preload Key Requests Website eCommerce. Mungkin anda sedang mengejar kecepatan website eCommerce anda ke level yang lebih maksimum. Anda sedang mencoba untuk mengeliminasi apa yang menjadi hambatannya. Lalu tiba-tiba menemukan satu error, ‘preload key requests’.

Preload Key Requests Website eCommerce

Tentang pagespeed insight

Artikel Lainnya:

Bahasa Pemrograman

Alat (tools) pengukuran kinerja website toko daring yang komprehensif adalah menggunakan PSI yang bukan Partai Solidaritas Indonesia, melainkan tools google PageSpeed Insights.

PSI dapat melaporkan kinerja per halaman toko online yang di simulasikan menggunakan perangkat seluler dan desktop. Lalu memberikan saran tentang bagaimana cara meningkatkan performa halaman tersebut, termasuk cara mengatasi ‘preload key requests wordpress’.

PageSpeed Insights menyediakan data lab dan data lapangan halaman website yang anda uji. Data lab (Lab Data) berguna untuk men-debug masalah kinerja, karena data di kumpulkan di lingkungan yang terkendali tetapi belum memperlihatkan kondisi real dunia nyata.

Maksudnya, halaman website yang sedang anda uji, di akses oleh sebuah sistem dengan menggunakan perangkat dan jaringan yang sudah di siapkan sebelumnya, seolah di akses oleh pengguna.

Sedangkan Field Data menangkap pengalaman pengguna dunia nyata yang sebenarnya – tetapi memiliki serangkaian metrik yang lebih terbatas. Lihat lebih detail tentang pagespeed insight.

Misalnya ketika anda sedang mengakses untuk membaca konten ini. Chrome menangkap banyak parameter terkait performa halaman website ini dan menyajikannya pada report PSI Field Data.

Preload key requests website ecommerce

Preload key requests

Consider using `<link rel=preload>` to prioritize fetching resources that are currently requested later in page load. Learn more.

Preload key requests sebenarnya bukanlah error yang mengganggu, atau error yang membuat website ecommerce anda menjadi tidak berfungsi. Bukan juga error yang mengakibatkan website anda matot alias mati total.

Meskipun anda mengalami masalah ini, website akan tetap dapat di akses secara normal, seperti tidak terjadi apa-apa.

Preload key requests sebenarnya hanyalah saran yang di sodorkan PSI. Dan jika anda dapat mengatasi masalah ini, akan ada improvisasi dari segi kecepatan website. Meskipun hanya dalam hitungan ratusan mili detik.

Nyatanya cara mengatasi preload key requests terbilang mudah. Jadi tidak ada salahnya anda luangkan waktu sebentar untuk mengatasi masalah tersebut.

Preload key requests wordpress dan bagaimana bisa terjadi ?

Sebelum mencoba mengatasi malah tersebut, mari pahami dulu tentang preload key requests dan bagaimana itu bisa terjadi.

Ini adalah flow yang berjalan ketika website ecommerce WordPress anda di akses oleh pengunjung :

• File index.php mendeklarasikan untuk segera menyiapkan WordPress environment termasuk juga penyiapan tema website (wp-blog-header.php).
• Lalu file wp-blog-header.php kemudian akan memanggil wp-load.php di mana file tersebut akan mengecek file wp-config.php di file root.
• Jika file wp-config.php dapat di temukan, maka akan segera menjalankan WordPress environment, termasuk memanggil file-file tema website melalui file template-loader.php.

Di situlah WordPress mulai menjalankan semua file yang di perlukan hingga dapat menampilkan tampilan website secara utuh, sesuai alamat URL yang di ketik oleh pengunjung.

Halaman tersebut tidak akan lengkap hingga sumber daya terakhir, -biasanya file style.css di download, di urai, dan di jalankan.

Maka google pagespeed insight akan menandai file style.css tersebut sebagai kandidat preload key requests. Jika anda menemukan file font sebagai sesuatu yang harus di ‘preload’, itu karena tema dan plugin memuat file fonts dengan cara mengimportnya dari file CSS.

Potensial saving dari preload key request

Penghematan potensial (potensial saving) akan di berikan oleh PSI berdasarkan pada seberapa cepat browser dapat memulai request jika anda membuat link rel preload key requests terhadap file kandidat.

Misalnya, jika file font, font.woff adalah kandidat yang harus di preload, dan memerlukan waktu 800 mili detik untuk di unduh dan di eksekusi, maka potensi penghematan untuk setiap sumber daya adalah 800 mili detik.

Karena file font.woff tidak akan lagi di anggap menjadi sumber penghambat untuk setiap request.

Apa saja yang menjadi sumber penghambat ?

Apa yang menjadi atau di anggap sebagai sumber penghambat mungkin bukan hanya file font saja. Bisa saja file lain tergantung hasil pengukuran dan saran google pagespeed insight.

Beruntung karena google pagespeed insight memberitahukan secara jelas file dan alamat (path) file yang menjadi sumber masalah tersebut. Klik kanan file URL tersebut lalu klik ‘copy link address’.

Jika di lihat secara lengkap link file font tersebut mungkin seperti ilustrasi berikut https://domain-anda.com/wp-content/themes/theme-name/assets/fonts/fa-solid-900.woff2.

Cara mengatasi preload key requests

Kini waktunya untuk mengatasi preload key requests, Oh my…. ternyata cara mengatasi preload key requests juga amatlah mudah. Tidak seperti error ‘Error WordPress Not Valid JSON Response’ yang sebelumnya kita bahas.

Cukup hanya berikan link rel preload ke dalam sistem website ecommerce WordPress. Berikan atribut rel pada element link url di dalam file header.php. Seperti pada contoh di bawah.

<link rel="preload" href="https://domain-anda.com/wp-content/themes/theme-name/assets/fonts/font-file.woff2" as="font" crossorigin="anonymous"> // ganti dengan alamat url yang tertera di google pagespeed

<link rel="preload" href="https://domain-anda.com/wp-content/themes/theme-name/assets/fonts/font-file.woff2" as="font" crossorigin="anonymous">

Ketikan URL dengan benar dan pastikan anda mengetikannya di antara <head> dan </head> . Lalu coba lakukan lagi pengukuran dengan google pagespeed insight pada halaman website anda, dan seharusnya masalah “preload key requests” tidak akan lagi muncul.

Bagaimana memberikan link rel preload sesuai kandidatnya

Apa yang menjadi atau di anggap sebagai sumber penghambat mungkin bukan hanya file font saja. Bisa saja file lain tergantung hasil pengukuran google pagespeed insight.

Tergantung ekstensinya anda tetap dapat memberikan atribut rel="preload", dan memberikan atribut as yang sesuai. Misalnya untuk file JS, CSS, font atau gambar, berturut-turut seperti contoh berikut.

<!-- file js -->
<link rel="preload" href="file.js" as="script">

<!-- file css -->
<link rel="preload" href="file.css" as="style">

<!-- file font -->
<link rel="preload" href="file.woff" as="font">

<!-- file gambar -->
<link rel="preload" href="file.jpg" as="image">

Memberikan atribut as yang sesuai akan membuat browser menyetel prioritas sumber daya yang diambil sebelumnya sesuai dengan jenisnya. Menyetel header yang tepat, dan menentukan apakah sumber daya sudah ada di cache.

Perlu di perhatikan bahwa browser akan menggunakan nilai atribut sesuai type yang di berikan. Ini untuk memastikan bahwa resource sudah di muat sebelumnya dan hanya sesuai jenis filenya.

Pemberian atribut as yang salah akan membuat browser mengabaikan perintah pemberian link preload dan menjadi sia-sia.

Artikel tentang error website ecommerce dan cara mengatasinya

Cari tau error apa saja yang kerap terjadi dan menimpa website toko online yang di buat menggunakan WordPress dan WooCommerce. Artikel yang berkaitan dengan error lainnya, lihat arsip artikel yang kami tag sebagai ‘error wordpress’ atau ‘error website ecommerce’.

Artikel terkait :