Cara Optimasi CSS Font Awesome di Blog

Cara Optimasi CSS Font Awesome di Blog

Beberapa hari yang lalu saya mencoba cek load speed blog saya di PageSpeed Insights. Dari hasil yang saya dapat, saya mendapatkan peringatan untuk mengatasi render blocking css dari font awesome.

Kemudian saya mencoba mencari tutorial untuk mengatasi masalah ini. Kebanyakan tutorial yang saya temukan, memberikan solusi untuk menerapkan asynchronous pada script pemanggil link font awesome tersebut.

Akhirnya saya mencoba trik itu. Setelah saya coba, blog saya sudah tidak lagi mendapatkan peringatan mengenai render blocking dari font awesome. Tetapi ketika saya membuka blog saya, ikon-ikon font awesome yang saya terapkan di blog saya hilang semua alias tidak ada yang muncul. Dan akhirnya saya anggap percobaan ini gagal.

Setelah melakukan percobaan tersebut, saya mencoba mengatasi hal ini dengan kreasi saya sendiri. Jadi saya memindahkan css font awesome yang hanya saya perlukan ke blog saya. Lalu menghapus script pemanggil link eksternal font awesome nya. Dan ternyata cara ini berhasil.

Langkah Pertama

Buka Blogger > Template > Edit HTML > Letakkan kode script dari font awesome di bawah ini di atas ]]></b:skin>

@font-face{
font-family:'FontAwesome';
src:url('http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.eot?v=4.4.0');
src:url('http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),
url('http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),
url('http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),
url('http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),
url('http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal

.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-lg {
font-size: 1.3333333333333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.fa-2x {
font-size: 2em;
}
.fa-3x {
font-size: 3em;
}
.fa-4x {
font-size: 4em;
}
.fa-5x {
font-size: 5em;
}
.fa-fw {
width: 1.2857142857142858em;
text-align: center;
}
.fa-ul {
padding-left: 0;
margin-left: 2.142857142857143em;
list-style-type: none;
}
.fa-ul > li {
position: relative;
}
.fa-li {
position: absolute;
left: -2.142857142857143em;
width: 2.142857142857143em;
top: 0.14285714285714285em;
text-align: center;
}
.fa-li.fa-lg {
left: -1.8571428571428572em;
}
.fa-border {
padding: .2em .25em .15em;
border: solid 0.08em #eeeeee;
border-radius: .1em;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.fa.pull-left {
margin-right: .3em;
}
.fa.pull-right {
margin-left: .3em;
}

Catatan : Pada script di atas saya menggunakan font awesome versi 4.4.0 , jika Anda ingin menggunakan font awesome versi terbaru silahkan ganti 4.4.0 dengan kode font awesome versi terbaru.

Langkah Kedua

Kemudian silahkan catat ikon apa saja yang Anda gunakan untuk blog Anda. Untuk mencari font awesome apa saja yang digunakan di blog Anda, silahkan cari fa- dengan CTRL+F. Misal Anda mencari fa- pada template blog Anda. Lalu Anda menemukan kode fa-youtube,fa-facebook,fa-twitter, dan fa-google-plus maka catatlah semua kode tersebut.

Lalu, cari kode css style untuk masing-masing ikon yang telah Anda catat di link font awesome atau di sini. Untuk memudahkan pencarian silahkan gunakan CTRL+F lagi. Misal Anda mencari kode css style untuk ikon fa-youtube terlebih dahulu, maka Anda akan menemukan kode css seperti berikut.

.fa-youtube:before {
content: "f167";
}

Lakukan cara tersebut untuk ikon lainnya, lalu letakkan css style untuk masing-masing ikon yang Anda dapat di atas kode ]]></b:skin>. Atau jika di gabung dengan script pada langkah pertama akan menjadi seperti berikut.

@font-face{
font-family:'FontAwesome';
src:url('http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.eot?v=4.4.0');
src:url('http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),
url('http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),
url('http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),
url('http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),
url('http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal

.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-lg {
font-size: 1.3333333333333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.fa-2x {
font-size: 2em;
}
.fa-3x {
font-size: 3em;
}
.fa-4x {
font-size: 4em;
}
.fa-5x {
font-size: 5em;
}
.fa-fw {
width: 1.2857142857142858em;
text-align: center;
}
.fa-ul {
padding-left: 0;
margin-left: 2.142857142857143em;
list-style-type: none;
}
.fa-ul > li {
position: relative;
}
.fa-li {
position: absolute;
left: -2.142857142857143em;
width: 2.142857142857143em;
top: 0.14285714285714285em;
text-align: center;
}
.fa-li.fa-lg {
left: -1.8571428571428572em;
}
.fa-border {
padding: .2em .25em .15em;
border: solid 0.08em #eeeeee;
border-radius: .1em;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.fa.pull-left {
margin-right: .3em;
}
.fa.pull-right {
margin-left: .3em;
}
.fa-youtube:before {
content: "f167";
}
.fa-facebook:before {
content: "f09a";
}
.fa-twitter:before {
content: "f099";
}
.fa-google-plus:before {
content: "f0d5";
}

Perhatikan baik-baik, jika Anda mencari css style untuk fa-facebook maka salin lah css style pada fa-facebook:before saja dan jika Anda mencari css style untuk fa-facebook-square maka salin lah css style pada fa-facebook-square:before saja. Begitu pun dengan ikon lainnya.

Jangan lupa cek kembali blog Anda di PageSpeed Insights, dan lihat keberhasilan trik ini.

Terima kasih, semoga bermanfaat.

Leave a Reply