Mengatasi Ensure text remains Visible During Webfont load

  • Whatsapp
20200612 194952 0000 640x358 1 - Simeyong Blog seputar tutorial handphone, komputer, review terbaik

Cara Memperbaiki Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web / Ensure text remains visible during webfont load. Bisa di pastikan banyak orang menggalami masalah setelah mengecek speed blog di PageSpeed Insights muncul pesan Pastikan teks tetap terlihat selama pemuatan font web atau dalam bahasa inggrisnya Ensure text remains visible during webfont load.

Google sebenarnya sangat peduli pada kecepatan website anda, salah satu cara meningkatkan kecepatan website anda adalah dengan melakukan beberapa configurasi pada script kalian, bisa dengan cara mengedit code secara manual, maupun menggunakan sebuah Pluggin bagi pengguna WordPress.

Banyak orang yang mengabaikan saran dari google tersebut karena bingung “tidak tau apa yang harus dilakukan,” saya pun awalnya juga bingung, ketika mengecek website simeyonghttp://simeyong.com selalu muncul pesan Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web / Ensure text remains visible during webfont load.

Setelah cari info sana sini ternyata sangat gampang sekali mengatasi permasalahan tersebut. Sebelum lanjut ke tutorial mengatasi Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web / Ensure text remains visible during webfont load. Akan saya jelaskan maksud dari pesan tersebut. maksudnya, secara default saat ada pengunjung masuk ke website kamu, ada sebagian font yang tersembunyi saat memuat halaman website tersebut, lha untuk mempercepat loading website kamu, kamu harus menampilkan font saat memuat website.

Nah di sini, saya akan membagikan 2 tutorial mengatasi Ensure text remains visible during webfont load. Silahkan pilih mana yang cocok untuk website kamu.

Pertama; menggunakan cara edit manual
Untuk WordPress, silahkan wordpress lalu masuk menu Tampilan/Tema – Penyunting Tema – Jika ada peringatan Untuk berhati hati dalam mengedit tema, tekan saja Saya Mengerti. Lalu cari file CSS.

Untuk Blogger, Buka Menu TemaEdit HTML

Kemudian cari kode @font-face, jika sudah menemukan kode tersebut, nanti kamu akan menemukan tampilan yang kurang lebih akan seperti ini.

@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato'),
local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
}

Langkah selanjutnya maka tambahkan kode font-display: swap;

@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'),
local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}

Jika kamu menemukan code @font-face lebih dari satu, lakukan hal yang sama seperti di atas. Jika sudah kamu tambahkan kode font-swap sekarang tinggal simpan. Tunggu beberapa saat lalu cek lagi di page speed insight untuk memastikannya. Jika masalah Ensure text remains visible during webfont load berhasil di perbaiki nanti tampilannya kurang lebih akan seperti ini, pesan Ensure text remains visible during webfont load tidak akan muncul.

Ensure text remains visible during webfont load
Ensure text remains visible during webfont load

Kedua; Menggunakan Pluggin (Khusus WordPress)

Masuk Pluggins – Tambah Baru – di Form pencarian ketikkan aja Font swap tampilannya nanti akan seperti ini,

Plugins font swap
Plugins swap font google display

Tekan tambahkan lalu aktifkan pluggin tersebut maka ptomatis otomatis nanti pluggins tersebut akan memperbaiki masalah Ensure text remains visible during webfont load.

Selain menggunakan Pluggins Font Swap, kamu juga bisa menggunakan Pluggins LiteSpeed Cache, Install dan aktifkan Pluggin LiteSpeed Cache, lalu buka settingan pluggin tersebut – tekan Menu Page Optimization – pilih tab CSS Optimization – cari pilihan paling bawah yang bertuliskan Font Display Optimization, lalu pilih Swap.

Plugins LiteSpeed Cache
Plugins LiteSpeed Cache

Demikian Cara Mengatasi Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web / Ensure text remains visible during webfont load. Semoga bermanfaat.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

1 Komentar