free html hit counter
Cara mempercepat loading webfonts
Cara mempercepat loading webfonts
2017-09-11 / Unknown

Cara mempercepat loading fonts blog (webfonts).

Cara mempercepat loading webfonts
Sekian banyak kode yang saya implementasikan namun belum ada yang mempercepat loading font. Nah berikut tutorialnya:

Metode 1.

Taruh atau ambil fonts (ttf,woff, dan lainnya) di cdn
 Lalu pasang htaccess berikut:
# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
add_header Access-Control-Allow-Origin *;
}

2. Gunakan Non-Blocking CSS Loading

<link rel="stylesheet" type="text/css" href="fonts.css" media="none" onload="this.media='all';">
<link rel="stylesheet" type="text/css" href="style.css" media="none" onload="this.media='all';">

3. Bedakan fonts model dengan CSS


h1 { font-family: Arial, serif; } /* basic system font */ .fontsloaded h1 { font-family: 'MySpecialFont', serif; } /* custom system font */

<link href="fonts.css" onload="document.body.className+=' fontsloaded';" rel="stylesheet" type="text/css" >

4. Letakkan fonts file di penyimpanan lokal (localstorage)

Selesai. Begitulah sedikit pengetahuan saya dalam merender fonts lebih cepat.
Namun saya rekomendasikan menggunakan NON BLOCKING RENDER LOADING.

Cara mempercepat loading webfonts

PermaLink: https://www.webmanajemen.com/2017/09/cara-mempercepat-loading-webfonts.html
Incoming search terms for Cara mempercepat loading webfonts:
  • Cara mempercepat loading webfonts
  • Cara mempercepat loading webfonts WMI Gitlab

Google Rich Snippets | Schema Markup Validator | Google Pagespeed Insight