Langsung ke konten utama

Cara Mempercepat Loading Teks Huruf dan Postingan Pada Blog Website

Cara Mempercepat Loading Teks Huruf dan Postingan Pada Blog Website
Loading Teks


Menghindari menampilkan teks yang lama terlihat di situs

PeluangSukses.Com Font sering kali merupakan file besar yang membutuhkan waktu beberapa saat untuk dimuat. Beberapa browser menyembunyikan teks hingga font dimuat, menyebabkan kilatan teks tak terlihat (FOIT) .

Audit tampilan font Lighthouse gagal

Lighthouse menandai URL font apa pun yang mungkin menampilkan teks tak terlihat:

Cara termudah untuk menghindari menampilkan teks yang tidak terlihat saat font kustom dimuat adalah dengan menampilkan font sistem untuk sementara. Dengan termasuk font-display:swap dalam Anda @font-face style, Anda dapat menghindari FOIT di sebagian besar browser modern:

@font-face {

  font-family: 'Pacifico';

  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;

}

The font-display API menentukan bagaimana font ditampilkan. swap memberitahu browser bahwa teks yang menggunakan font harus segera ditampilkan menggunakan font sistem. Setelah font kustom siap, itu menggantikan font sistem. (Lihat Hindari teks tak terlihat saat memuat posting untuk informasi lebih lanjut.)

  1. Pramuat font web # Gunakan <link rel="preload" as="font"> untuk mengambil file font Anda sebelumnya.
  2. Google Font # Tambahkan &display=swap parameter ke akhir URL Google Font Anda:

Tempatkan dibawah <head>

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
Jika template tidak bisa disave bisa menggunakan kode dibawah:
<link display='swap' href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet'/>

Dukungan browser peramban #

Perlu disebutkan bahwa tidak semua browser utama mendukung font-display: swap, jadi Anda mungkin perlu melakukan sedikit lebih banyak pekerjaan untuk memperbaiki masalah teks yang tidak terlihat.*

PeluangSukses.Com

Menghitung Keuntungan Budidaya Ikan Lele

CARA BELI IKAN LELE DI PASAR PERIKANAN PURWONEGORO BANJARNEGARA

Antara Prestasi Anies dan Prestasi Bank DKI

20 Kata Yang Orang Tua Harus Ucapkan Ke Anak Sedari Kecil

Sederet Artis Nikah Tanpa Restu Orang Tua hingga ada yang Pilih MURTAD atau MUALAF

5 Cara Ampuh Usir Semut di Toples Gula dan Makanan Manis Lainnya

5 Contoh Kekuatan Makeup Riasan Sangat Senang Dengan Hasilnya

5 Cara Tetap Sejuk di Cuaca Panas Tanpa AC Rumah

Pengecut ? Anies Coba Dikalahkan Sebelum Bertanding !

NASIB MIRIS Sederet Artis Ini Bangkrut Seketika Salah Kelola Honor

Support : Copyright © 2019. PeluangSukses.Com - Informasi Usaha, Bisnis dan Gaya Hidup - All Rights Reserved