Mengatasi Ensure Text Remains Visible During Webfont Load

Mengatasi ensure text remains visible during webfont load – Bagi kamu yang mengecek kecepatan website di PageSpeed Insights, mungkin terdapat peringatan pastikan teks tetap terlihat selama webfont memuat, hal tersebut merupakan masalah untuk kecepatan website. Nah kali ini saya akan membagikan cara mengatasi masalah tersebut untuk mengoptimalkan kecepatan blog kamu.

Browser Chrome, Safari, Firefox dan Opera menyembunyikan teks halaman web saat file font sedang diunduh. File font yang berukuran besar dapat membutuhkan waktu lebih lama untuk dimuat. Akibatnya, halaman blog dapat muncul tanpa teks pada waktu pemuatan halaman.

Mengatasi Ensure Text Remains Visible During Webfont Webfont Load

Font-display API berfungsi untuk menentukan bagaimana font dari web ditampilkan. Berikut cara mengatasi tampilkan teks melalui font-display.

Langkah 1: Silahkan masuk ke blogger.com, kemudian pilih menu Tema lalu pilih Edit HTML.

Langkah 2: Gunakan tools pencarian (CTRL + F), kemudian cari CSS @font-face, kemungkinan besar kode ini terdapat lebih dari satu di template kamu.

Langkah 3: Selanjutnya tambahkan font-display: swap; pada CSS @font-face yang terdapat di template kamu. Berikut contoh penulisannya.

Sebelum:

@font-face {
 font-family: 'Oswald';
 font-style: normal;
 font-weight: 400;
 src:url(//fonts.gstatic.com/s/oswald/v30/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUtiZTaR.woff2)format('woff2');
}

Sesudah:

@font-face {
 font-family: 'Oswald';
 font-style: normal;
 font-weight: 400;
 src:url(//fonts.gstatic.com/s/oswald/v30/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUtiZTaR.woff2)format('woff2');
 font-display: swap;
}

Jika CSS @font-face lebih dari satu, maka tambahkan font-display swap pada semua @font-face.

Langkah 4: Selanjutnya cari CSS body lalu tambahkan font-display: swap !important; pada CSS body. Berikut penulisannya.

body {
 font-display: swap !important;
}

Dengan deskriptor tampilan font, maka browser akan menentukan kapan font akan ditampilkan. Dengan menambah deskriptor swap maka blog akan menampilkan teks dalam font default saat file font sedang diunduh. Setelah selesai diunduh, maka teks blog akan berubah sesuai font yang seharusnya ditampilkan. Dengan begitu maka konten akan dimuat lebih cepat.

Google Font

Jika kamu yang menggunakan Google Font, kamu dapat mengatasi masalah ini dengan menambahkan parameter &display=swap ke akhir URL Google Font kamu, berikut penulisannya.

Sebelum:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">

Sesudah:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

Dukungan Browser

Perlu diketahui bahwa tidak semua browser utama mendukung tampilan font: swap. Jika browser tidak mendukung tampilan font, browser akan memuat secara default untuk memuat font. Namun hal ini bukanlah masalah besar, karena hampir semua browser yang umum digunakan sudah mendukung tampilan swap.

Akhir Kata

Itu tadi cara untuk mengatasi ensure text remains visible during webfont load atau pastikan teks tetap terlihat selama webfont memuat. Dengan menggunakan cara diatas maka kecepatan blog kamu akan meningkat sekian persen pada PageSpeed Insight. Baiklah sekian saja artikel singkat ini, semoga bermanfaat.