Memuat tag link dalam template

Tag link

Format tag link biasanya seperti ini :

<link href='/style.css' rel='stylesheet'>

Tag link berfungsi untuk menghubungkan template dengan suatu dokumen yang berada diluar template.
Tag ini juga sering kali digunakan untuk menghubungkan stylesheet ekternal (CSS) maupun untuk menambahkan ikon kedalam halaman.
Untuk memasang tag <link/> ke dalam template diletakkan dibagian <head>.

Memasang tag link di <head>

Tag link paling umum biasanya digunakan untuk kebutuhan penggunaan font misal Google Font ataupun web icon seperti Font Awesome dan sejenisnya.

Peletakan tag link ini juga berpotensi memberi pengaruh terhadap pemuatan teks sehingga menurunkan kecepatan muat halaman seperti tertera pada hasil test Pagespeed Insight dibawah ini.

Untuk menghindari hal tersebut, biasanya pemasangan tag di head harus dimarkup terlebih dahulu. Misal, pada pemasangan Google Font selalu disarankan agar menambahkan font-display='swap' pada CSSnya. Sedangkan jika menggunakan tag link markup dilakukan pada parameter URLnya seperti ini : &display=swap.

Dibawah ini kode asli yang dicopy langsung dari Google Font

<link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Jika pemasangan kode asli dari Google Font ternyata masih terkendala pada saat menyimpan template, ini biasanya karena ketidakcocokan markup karakter URL dengan karakter yang ditetapkan dalam template. Untuk memerbaiki URLnya sesuaikan dengan kode berikut :

<link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=''>
 <link href="https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap" rel="stylesheet">

Setelah itu simpan.

Cara alternatif

Dibawah ini adalah cara alternatif untuk memasang tag link dengan bantuan script.

Sebelum meletakkan tag link nya, copy-paste script berikut ini ke dalam template, diatas kode </head>

<noscript id="deferred-styles">
  <link crossorigin='' href='https://pasteURLdisini.css' rel='stylesheet'/>
</noscript>
<script>
  var loadDeferredStyles = function() {
  var addStylesNode = document.getElementById("deferred-styles");
  var replacement = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
    };
  var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
    else window.addEventListener('load', loadDeferredStyles);
</script>

Misal saja, sebagai contoh adalah tag link Google Font ini :

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital@1&display=swap" rel="stylesheet">

Copy URL yang ditandai warna kuning ke dalam script, perhatikan baris nomor 2 script diatas. Hapus teks di atribut href='' ganti dengan URL yang diinginkan, simpan template lalu test di PageSpeed Insight

Jika masih terdapat error atau belum lolos test, gunakan cara kedua yaitu Menempatkan CSS dari URL tag link tersebut langsung kedalam template.

Mengambil CSS dari URL tag link

Caranya :
Pertama-tama, copy tag script dengan CDATA ini :
<script>//<![CDATA[ //--paste disini //]]></script>

Paste kode tersebut tepat diatas tag penutup </head>.

Kedua, ikuti langkah berikut ini :

Perhatikan sekali lagi untuk contoh, lihat kode tag link Google Font diatas. Masih fokus pada URLnya yang ditandai warna kuning.

Copy URLnya lalu buka di-tab baru untuk melihat file raw (mentah) yang dimuat tag link tersebut.

Jika sudah terbuka akan nampak kode CSS / Script, selanjutnya Copy semua kode, pakai cara cepat :
tekan ctrl + A untuk memblok seluruh kode dihalaman.
Lalu tekan ctrl + C untuk menyalin seluruh kode tersebut.

Langkah terakhir, kembali ke template, arahkan cursor tepat ke tag script + CDATA yang barusaja dipaste lalu tekan ctrl + V untuk mempaste kode.

PERHATIKAN :

Jika berupa script, tempatkan diatas tag </body>.
Tapi jika berupa CSS, tempatkan di tag <head> bersama CSS yang sudah ada.
lalu Simpan.

⇐ Sebelumnya

Selanjutnya ⇒

Coding Blogger