Cara mempercepat loading webfonts
Cara mempercepat loading fonts blog (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.
Comments
Post a Comment
Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.
If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.