Like & Share:
- Like & Share : Jika ini dapat bermanfaat bagi orang lain? Klik tombol bagikan dan beri tahu mereka!
- Comment : Berikan komentar, komentar spam dan tidak relevan tidak akan pernah dipublikasikan!
- Klik Iklan : Terima kasih atas partisipasi Anda yang berharga. Keterlibatan Anda sangat kami hargai!
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
Table of Contents
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 memanggilwp-load.php
di mana file tersebut akan mengecek filewp-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 filetemplate-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
.
URL | Potential Savings |
---|---|
…fonts/fa-solid-900.woff2 (tokodaring.com) | 1,080 ms |
…fonts/fa-brands-400.woff2 (tokodaring.com) | 600 ms |
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 :