Skip to main content
KOMPI AJAIB

follow us

Solusi Render-blocking Web Font Wordpress Self Hosted

Salah satu optimasi Wordpress yang harus kita lakukan adalah kecepatan loading blog, karena kecepatan loading halaman blog merupakan salah satu faktor SEO yang menjadi penentu rangking di SERP. Untuk optimasi loading blog ini salah satu dengan mengatasi render-blocking dari web font yang digunakan.

Pada postingan ini saya akan share solusi untuk mengatasi render-blocking dari web font pada Wordpress selfhosted yang bisa kita lakukan tanpa bantuan plugin sehingga hasilnya menjadi lebih optimal.

Masih banyak para pembuat template Wordpress yang masih menggunakan link CSS web font untuk mengatur jenis huruf di blog, nah inilah yang menjadi salah satu masalah yang dapat mengurangi nilai pada pagespeed insight yang menjadi acuan Google untuk nilai kecepatan sebuah halaman web.

Sebenarnya banyaknya link css dan script js untuk wordpress self hosted ini tidak akan mengganggu loading blog, karena ini bisa diatasi dengan plugin cache. Namun jika mengacu pada pagespeed insight, maka akan memberikan nilai negative karena akan ada banyak render-blocking dari link css maupun script js.

Link css dan script js ini berasal dari css style dari template blog, web font, maupun dari plugin-plugin yang dipasang. Tentunya jika kita bisa meminimalkan render-blocking ini maka itu akan menjadi lebih baik, salah satunya yaitu menghilangkan render-blocking dari link css web font.

Pada blog wordpress self hosted, menghilangkan render-blockinig web font ini sebenarnya lebih mudah. Karena kita bisa menghosting sendiri font-font yang kita gunakan tersebut.

Nah kali ini saya akan share cara menggunakan web font dengan menyimpan @font-face kit pada css style blog wordpress self hosted. Dengan ini pula loading web font tidak akan memiliki jeda, artinya ketika web dibuka maka font yang kita pilih akan langsung tampil.

Yang pertama harus dipersiapkan adalah @font-face kit dari font yang kita gunakan. Font face kit ini terdiri dari 4 jenis file dari font dengan ekstensi eot, svg, ttf, dan woff.

Sebagai contoh, misalkan kita menggunakan font Open Sans dengan ketebalan normal (400) dengan style normal, maka font face kit font-nya akan memiliki OpenSans-Regular-webfont.eotOpenSans-Regular-webfont.svgOpenSans-Regular-webfont.ttfOpenSans-Regular-webfont.woff. Dan pemasangan @font-face pada css style blog akan seperti di bawah ini.


@font-face {
    font-family: 'Open Sans';  
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Maka jika Anda menggunakan 4 jenis dari font Open Sans ini seperti 400 normal, 400 italic, 600 normal, 600 italic, maka kita akan membutuhkan 16 file font seperti di bawah ini.
  1. OpenSans-Regular-webfont.eot
  2. OpenSans-Regular-webfont.svg
  3. OpenSans-Regular-webfont.ttf
  4. OpenSans-Regular-webfont.woff
  5. OpenSans-Italic-webfont.eot
  6. OpenSans-Italic-webfont.svg
  7. OpenSans-Italic-webfont.ttf
  8. OpenSans-Italic-webfont.woff
  9. OpenSans-Semibold-webfont.eot
  10. OpenSans-Semibold-webfont.svg
  11. OpenSans-Semibold-webfont.ttf
  12. OpenSans-Semibold-webfont.woff
  13. OpenSans-SemiboldItalic-webfont.eot
  14. OpenSans-SemiboldItalic-webfont.svg
  15. OpenSans-SemiboldItalic-webfont.ttf
  16. OpenSans-SemiboldItalic-webfont.woff

Dan @font-face yang harus dipasang di style css blog seperti di bawah ini.


@font-face {
    font-family: 'Open Sans';  
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Italic-webfont.eot');
    src: url('fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Italic-webfont.woff') format('woff'),
         url('fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Semibold-webfont.eot');
    src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-SemiboldItalic-webfont.eot');
    src: url('fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic') format('svg');
    font-weight: 600;
    font-style: italic;
}

Untuk mendapatkan @font-face kit dari font silahkan cari dan download DI SINI. Silahkan ketikan jenis font yang dicari di kotak search. Setelah ada, silahkan masuk ke postingannya dan scroll halaman dan klik download web version untuk mendownlod font-face kit dari font yang kita cari.

Setelah itu silahkan ektrak file hasil downloadnya, di situ biasanya ada folder web font dan sub folder dari jenis yang di dalamnya terdapat font face kita dan stylesheet.css dari font tersebut. Setelah itu silahkan menuju cpanel hosting Anda dan klik file manager. Klik public_html > wp-content > themes > kemudian klik tema yang Anda gunakan. Jika belum ada folder font, silahkan buat folder font terlebih dahulu.

Setelah itu silahkan upload font face kit dari font yang Anda perlukan ke dalam folder font yang tadi Anda buat. Setelah proses upload font selesai, sekarang tinggal Anda simpan stylesheet.css dari masing-masing font seperti di atas ke dalam style css (style.php) blog Anda.

Kemudian silahkan hapus link css style untuk web font yang sebelumnya Anda pasang. Jika link tersebut langsung dari tema yang Anda gunakan, silahkan cari pada function.php.

Untuk optimasi lainnya untuk Wordpress, ada sebuah ebook yang menyajikan tips-tips langkah optimasi untuk meningkatkan kinerja website agar website bekerja lebih optimal untuk menghadapi persaingan dunia online. Silahkan unduh ebooknya melalui link berikut ini.
Silahkan unduh ebooknya sekarang dan Anda dapat langsung menerapkan di Website WordPress dengan mudah!

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar