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

20 Kata Yang Orang Tua Harus Ucapkan Ke Anak Sedari Kecil

Menghitung Keuntungan Budidaya Ikan Lele

5 Cara Tetap Sejuk di Cuaca Panas Tanpa AC Rumah

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

Antara Prestasi Anies dan Prestasi Bank DKI

Anies dipanggil KPK ! Siasat Licik Jegal Lawan Politik 2024 ! Jokowi Megawati Prabowo Anies Baswedan

5 Contoh Kekuatan Makeup Riasan Sangat Senang Dengan Hasilnya

KAMPUNG SUSUN ALA ANIES & RUSUN ALA AHOK BEDA

TAK TAHAN MENJANDA ARTIS CANTIK PUNYA BANYAK MANTAN SUAMI! Siapa saja mereka?

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

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