Posted on

Cara Mengatasi Preload Key Request

Cara Mengatasi Preload Key Request

wpJakarta.Com – Cara Mengatasi Preload Key Request. Ketika melakukan pengukuran kinerja website menggunakan google pagepeed. Mungkin satu masalah yang sering di temui adalah preload key request. Artikel ini membahas pemahaman tentang preload key request. Juga bagaimana cara mengatasi preload key request.

Parameter preload key request dan cara mengatasi preload key request

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

Ketika mengukur performa website melalui google pagespeed (lighthouse), preload key request menjadi salah satu parameter Opportunities. Meskipun tidak secara langsung memengaruhi skor kinerja, namun mencari cara mengatasi preload key request dapat membuat halaman website tampil / loading lebih cepat. Meskipun hanya dalam hitungan ratusan milidetik. Nyatanya cara mengatasi preload key request terbilang mudah. Jadi tidak ada salahnya anda luangkan waktu sebentar untuk mengatasi masalah tersebut.

Tips-trik WordPress

Tips-trik dan tutorial WordPress kami mungkin dapat membantu dalam mengkustom website WordPress anda.

Tentang preload key request dan cara mengatasi preload key request

Ketika website di akses, file index.php mendeklarasikan untuk segera menyiapkan WordPress environment termasuk juga penyiapan tema website (wp-blog-header.php). File wp-blog-header.php kemudian akan memanggil wp-load.php di mana file tersebut akan mengecek file wp-config.php di file root. Dan jika file wp-config.php di temukan, 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 URL yang di ketik oleh pengunjung website. Halaman tersebut tidak akan lengkap hingga sumber daya terakhir (file css / style.css) di download, di urai, dan di jalankan. Dengan contoh di atas, google pagespeed akan menandai style.css tersebut sebagai kandidat preload key request. Itulah biasanya anda akan melihat file font.woff sebagai sesuatu yang harus di “preload” karena tema dan plugin meloading file fonts dengan mengimport dari file CSS.

Potensial saving dari preload key request

Penghematan potensial (potensial saving) di ukur berdasarkan pada seberapa cepat browser dapat memulai request jika kita membuat link preload key request terhadap kandidat. Misalnya, jika file font.woff memerlukan waktu 200 milidetik untuk di unduh dan mengeksekusi, maka potensi penghematan untuk setiap sumber daya adalah 200 milidetik karena file font.woff tidak akan lagi di anggap menjadi sumber penghambat untuk setiap request. Apa yang menjadi atau di anggap sebagai sumber penghambat mungkin bukan hanya file font. Bisa saja file lain tergantung hasil pengukuran google pagespeed.

Tips-trik WooCommerce

Tips-trik dan tutorial WooCommerce kami mungkin dapat membantu dalam mengkustom website WordPress anda.

Cek file apa yang perlu di “preload key request”

URLPotential Savings
…fonts/fa-solid-900.woff2 (domain-anda . com)1,080 ms
…fonts/fa-brands-400.woff2 (domain-anda . com)600 ms

Beruntung karena google pagepeed memberitahukan secara jelas file dan alamat (path) yang jadi sumber masalah tersebut. Misalnya seperti contoh di atas. Anda hanya perlu tau URL file yang jadi masalah tersebut dan berikan link preload. Klik kanan file URL tersebut lalu klik “copy link address”. Jika di lihat secara lengkap link file font tersebut mungkin seperti https://domain-anda.com/wp-content/themes/theme-name/assets/fonts/fa-solid-900.woff2.

Artikel lainnya

Cara mengatasi preload key request melalui header.php

Cara mengatasi preload key request, adalah dengan memberikan link meta <link rel="preload">pada url tersebut dan ketikan ke dalam file header.php sebelum tag </head>. Seperti pada contoh di bawah. Ketikan URL dengan benar dan pastikan anda mengetikannya di antara <head> dan </head> . Coba lakukan lagi pengukuran dengan google pagespeed, dan seharusnya masalah “preload key request” tidak lagi muncul.

<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">

Apa yang menjadi atau di anggap sebagai sumber penghambat mungkin bukan hanya file font. Bisa saja file lain tergantung hasil pengukuran google pagespeed. Tergantung extensi filenya anda tetap dapat memberikan <link rel="preload">, dan memberikan atribut as yang sesuai. Misalnya untuk file JS, CSS, font, gambar, berturut-turut seperti 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.

  • Artikel : Cara Mengatasi Preload Key Request.
  • Hashtag : #Google Pagespeed.