Cara Memperbaiki Kesalahan "Pastikan teks tetap terlihat selama pemuatan font web" di PageSpeed

Apakah Anda mendapatkan kesalahan " Pastikan teks tetap terlihat selama pemuatan Webfont " saat memeriksa wawasan kecepatan halaman Google Anda dan tidak tahu bagaimana mengatasi masalah ini? Secara umum, saya tahu bagaimana mengatasi masalah ini di situs web berbasis PHP atau HTML khusus, tetapi ketika datang ke WordPress, saya juga kesulitan.

Jadi di sini, di panduan ini, kita akan berbicara tentang bagaimana kita dapat mengatasi masalah ini di WordPress (saya juga akan membagikan langkah-langkah untuk memperbaiki masalah ini di situs berbasis PHP & HTML khusus) dan meningkatkan skor kecepatan halaman Anda dengan menghapus kesalahan ini.

Mengapa Menampilkan Kesalahan "Pastikan teks tetap terlihat selama pemuatan Webfont" di PageSpeed

Saat menguji situs web Anda di Google PageSpeed ​​Insight, Anda mungkin telah melihat masalah kesalahan "Pastikan teks tetap terlihat selama pemuatan Webfont", dan setelah mengeklik kesalahan, itu akan menampilkan URL lengkap file font.

Seperti yang Anda lihat pada gambar di atas, saya juga mendapatkan kesalahan "pastikan teks tetap terlihat selama pemuatan Webfont" di situs web ini, dan ketika saya mengkliknya, itu akan menampilkan URL lengkap file Google Font.

Mengapa itu menunjukkan kesalahan?

Ketika sebuah situs web dimuat di browser dan mendeteksi file font khusus apa pun yang diterapkan pada teks, itu menunggu hingga font diunduh, dan hingga saat itu, teks tidak terlihat. Setelah file font khusus diunduh, itu segera berlaku untuk situs web, dan ini dikenal sebagai kilatan teks tak terlihat.

Bagaimana Memperbaiki Flash Teks Tak Terlihat?

Memperbaiki kilatan teks yang tidak terlihat juga dapat memperbaiki kesalahan "pastikan teks tetap terlihat selama pemuatan Webfont" di situs web Anda, dan memperbaiki masalah ini sangat mudah.

Anda dapat dengan mudah memperbaiki masalah ini dengan menambahkan

 tampilan font: tukar;

kode di Anda saat ini

 @font-wajah {

}

properti CSS.

Tapi apa itu @font-face?

@font-face adalah aturan CSS sederhana di mana Anda dapat menerapkan font khusus ke teks. Ini memiliki ekstensi seperti woff2, woff, ttf, dll. Misalnya, kode @font-face akan terlihat seperti ini:

 @font-wajah {

font-family: Roboto,sans-serif;

tampilan font: tukar; // ---> Ini akan memperbaiki masalah ini.

gaya font: normal;

font-berat: 400;

src: url(Roboto.woff2);

}

Sekarang kita menerapkan font ini dalam paragraf menggunakan;

 p {

font-family: Roboto, sans-serif;

ukuran font: 18px;

}

Saat sebuah situs web dimuat, ini menunjukkan bahwa tag paragraf memiliki font " Roboto " yang diterapkan, dan langsung mulai mengunduh font yang digunakan dalam tag paragraf. Sampai font diunduh, teks tetap tidak terlihat.

Inilah sebabnya mengapa ini menunjukkan kesalahan " pastikan teks tetap terlihat selama pemuatan font web " di kecepatan halaman dan menambahkan tampilan font: swap; di @font-face CSS Anda saat ini dapat menyelesaikan masalah ini.

Cara Memperbaiki Masalah Ini di WordPress

Jika Anda menggunakan WordPress dan itu menunjukkan kesalahan ini dalam wawasan kecepatan halaman, maka Anda dapat dengan mudah menyelesaikan masalah ini menggunakan langkah-langkah sederhana. Saya telah membagikan langkah-langkah untuk mengatasi kesalahan ini pada font lokal dan font Google.

Solusi untuk Google Font

Awalnya, Google Fonts tidak akan menambahkan font-display: swap; aturan untuk font mereka, tetapi sekarang mereka mendukung parameter kueri baru untuk menerapkan font-display: swap; dengan menambahkan parameter &display=swap di akhir file font google.

Berikut tampilannya;

Jika Anda seorang pengembang tema atau Anda tahu cara mengedit file tema di WordPress, maka Anda dapat dengan mudah menambahkan parameter &display=swap di file font Google Anda.

Tetapi jika Anda tidak nyaman dengan mengedit file tema WordPress, Anda masih dapat menggunakan berbagai plugin seperti Asset CleanUp untuk menambahkan parameter ini dan menyelesaikan masalah "pastikan teks tetap terlihat selama pemuatan Webfont".

Cara Mengatasi Masalah ini Menggunakan Plugin "Pembersihan Aset"

Untuk menerapkan parameter display=swap di file Google Fonts Anda, Anda harus mengunduh dan menginstal plugin Asset CleanUp dari perpustakaan WordPress, yang tersedia secara gratis.

Setelah Anda mengunduh dan mengaktifkan plugin, klik opsi “Pembersihan Aset ” di panel admin WordPress Anda > lalu klik “ pengaturan ” di bawah “Pembersihan Aset” untuk membuka halaman pengoptimalan.

Setelah Anda berada di halaman pengaturan , klik opsi " Google Font ". Ketika Anda mengklik opsi Google Font , itu akan lebih membuka pengaturan dari mana Anda dapat dengan mudah mengelola berbagai pengaturan untuk mengoptimalkan file font google.

Beberapa pengaturan ini dapat mencakup;

Setelah Anda berada di pengaturan file font Google, pada pengaturan " Terapkan font-display: CSS property value " dan ubah dari " Jangan terapkan (default) " menjadi " swap (paling sering digunakan) " dan itu akan menambahkan &display= swap parameter ke semua file font google Anda.

Solusi untuk Tema & Font Plugin

Sebagian besar waktu tema atau plugin WordPress Anda memuat font lain seperti font-awesome atau font ikon dan itu juga menunjukkan masalah yang sama di Google PageSpeed ​​Insight.

Ini juga merupakan perbaikan yang mudah tetapi membutuhkan sedikit pengetahuan pengeditan WordPress. Jika Anda tidak nyaman dengan mengedit kode, Anda juga dapat menggunakan versi premium dari plugin “ Asset CleanUp Pro ” untuk secara otomatis menambahkan font-display: swap; Properti CSS di lembar gaya Tema atau Plugin WordPress Anda.

Untuk mengatasi masalah ini menggunakan Asset CleanUp Pro, klik opsi "Pembersihan Aset" di panel admin WordPress Anda > lalu klik " pengaturan " di bawah "Pembersihan Aset" untuk membuka halaman pengoptimalan.

Setelah Anda berada di halaman “ Pembersihan Aset ” > “ Pengaturan ”, klik opsi “ Font Lokal ” untuk membuka pengaturan penyesuaian untuk Font Lokal.

Setelah pengaturan kustomisasi " Font Lokal " telah dibuka di browser Anda, pilih " swap (paling sering digunakan) " dari opsi pilihan yang diberikan di bawah " Terapkan font-display: CSS property value " untuk secara otomatis menambahkan font-display: swap; di semua stylesheet Anda.

Membungkus

Dalam panduan ini, kami telah mencoba yang terbaik untuk menjelaskan bagaimana Anda dapat memperbaiki masalah "memastikan teks tetap terlihat selama pemuatan font web" atau "flash teks tak terlihat" pada wawasan kecepatan halaman.

Waktu pemuatan halaman dan kecepatan halaman merupakan faktor penting untuk memberikan pengalaman pengguna yang baik, dan memperbaiki masalah ini dapat memberikan pengalaman pengguna yang jauh lebih baik. Dan sebuah halaman tidak akan dianggap dimuat kecuali jika itu menunjukkan setiap hal di atasnya.

Jadi, Anda harus mengurangi waktu pemuatan konten di halaman agar halaman tidak timeout, dan pengguna bisa mendapatkan keseimbangan, kecepatan, dan stabilitas yang mereka inginkan. Jika Anda juga mengalami kecepatan situs web yang lambat, Anda dapat memeriksa posting kami tentang pengoptimalan kecepatan situs web untuk mengoptimalkannya dengan benar.