√ Mengatasi Ensure Text Remains Visible During Webfont Load

√ Mengatasi Ensure Text Remains Visible During Webfont Load - Selamat berjumpa kembali sahabat SMK NEGERI 1 SERI KUALA LOBAM, Senang dapat bertemu anda kembali untuk membahas materi atau artikel √ Mengatasi Ensure Text Remains Visible During Webfont Load, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. Semoga pembahasan postingan atau artikel kategori Artikel Blogger, yang kami tulis ini dapat anda pahami. Tanpa memperpanjang basa-basi lagi, kami sampaikan selamat membaca.

Seberapa dalam artikel √ Mengatasi Ensure Text Remains Visible During Webfont Load ini dapat kami bahas dan jabarkan kepada anda, kiranya tidak mengurangi makna. Kami hanya berpesan kepada pembaca SMK NEGERI 1 SERI KUALA LOBAM, jadikan artikel kami ini sebagai materi tambahan. Jika masih kurang lengkap, pembaca dapat menambah wawasan dengan mencari artikel serupa diblog lainnya atau menanyakan langsung kepada pakar yang mahir dengan masalah √ Mengatasi Ensure Text Remains Visible During Webfont Load. Selamat menambah wawasan!

√ 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:

Sesudah:

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.

Penutup Artikel √ Mengatasi Ensure Text Remains Visible During Webfont Load

Demikian artikel √ Mengatasi Ensure Text Remains Visible During Webfont Load kali ini, semoga bisa memberi manfaat untuk anda semua pembaca blog SMK NEGERI 1 SERI KUALA LOBAM. Allright, sampai jumpa pada postingan artikel lainnya.

Baru saja anda membaca artikel √ Mengatasi Ensure Text Remains Visible During Webfont Load dengan alamat link https://smkn1serikualalobam.blogspot.com/2015/03/mengatasi-ensure-text-remains-visible.html

Artikel √ Mengatasi Ensure Text Remains Visible During Webfont Load ini kami arsipkan pada kategori Blogger.