Home Trending Search Menu

Optimasi Google Font: Untuk Mempercepat dan Meningkatkan Performa Website

optimasi google font: untuk mempercepat dan meningkatkan performa website

Salah satu kunci utama dari optimasi atau mempercepat performa website adalah mengurangi total file size yang harus dimuat oleh suatu halaman. Termasuk Font.

  1. Apa itu Google Fonts?
  2. Cara Optimasi Google Fonts
    1. Self Host CSS dari Google Font
    2. Batasi Jumlah Font
    3. Batasi Variasi Font
    4. Batasi Jenis Karakter Teks
    5. Preload & Preconnect Google Font
    6. Inline CSS Google Font
    7. Self Host Google Font Files
    8. Convert Font ke Base64

Apa itu Google Fonts?

Google Fonts adalah font library yang disediakan oleh google dengan status free license. Menurut wikipedia, total ada 1.020 font family yang dengan baik hati disediakan oleh google di font library-nya ini.

Saat ini, lebih dari 70% website di seluruh dunia memanfaatkan google font library ini untuk mempercantik teks di websitenya dan membuatnya unik.

Hingga hari ini, total sudah mencapai 45.017,963.913.466 total font views, dengan penggunaan font terbanyak adalah Roboto, Open Sans, dan Lato. Detailnya bisa dilihat di sini.

The problem is…

Menyajikan font dari google sebenarnya dapat mengurangi performa kecepatan website kita.

Memang tidak signifikan dari sisi end-user, terutama bila font yang kita gunakan tidak banyak. Namun dengan kebutuhan browser untuk merender HTML, CSS, dan JavaScript, beserta icon fonts yang seringnya juga banyak digunakan, google font ini juga merupakan salah satu elemen penting yang perlu untuk kita optimasi.

Ingat, salah satu kunci utama dari mempercepat performa website adalah mengurangi total page size yang harus dimuat oleh suatu halaman. Tidak terkecuali dengan font.

Untuk gambar, kita bisa memperkecil file size-nya dengan mengompress ukurannya. Kita bisa melakukan itu dengan memanfaatkan fitur-fitur kompresi gambar yang banyak bertebaran di internet. Bahkan banyak CDN khusus gambar yang menyediakan fitur on the fly image optimization secara gratis juga. Untuk mengoptimasinya lagi, kita bisa mengaplikasikan fitur lazyload untuk gambar agar gambar-gambar kita hanya dimuat saat memang dibutuhkan.

Untuk CSS dan JavaScript, kita bisa memperkecil ukurannya dengan memanfaatkan fitur minify (dan bahkan combine) yang biasa tersedia di berbagai plugin cache. Kita juga bisa menunda eksekusi CSS dan JavaScript ini agar tidak langsung dimuat di awal, agar browser tidak langsung terbebani dengan memuat CSS dan JavaScript yang memang tidak diperlukan di awal.

Untuk html, kita juga bisa melakukan minify HTML.

Bagaimana dengan Font?

Cara Optimasi Google Fonts

1. Self Host CSS dari Google Font

Bila kita menyajikan font dari google, akan lebih baik bila kita tidak menggunakan mentah-mentah file CSS yang diberikan oleh google.

Untuk memanggil font dari google, standar yang biasanya dilakukan adalah menggunakan kode seperti ini:

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

Apa yang terjadi bila kita menggunakan kode tersebut? Kita memanggil file CSS sebesar sekitar 800Bytes yang berisi ini:

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xFIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xMIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xEIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xLIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xHIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xGIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic3CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic-CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic2CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic5CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic1CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic0CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Padahal yang kita butuhkan hanya latin text-nya saja.

Bila kita memanggil google font dengan memasukkan css-nya secara manual ke dalam file css kita sendiri, kita hanya perlu menggunakan ini:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Jauh lebih sedikit, bukan?

2. Batasi Jumlah Font

Ukuran file dari font tidak kecil, walaupun yang sudah berekstensi woff2. Ini adalah ukuran file woff2 dari 3 font yang paling sering digunakan di atas.

Roboto

11,0KB

(400/Regular)

11.0KB

(700/Bold)

Open Sans

9,13KB

(400/Regular)

9,08KB

(700/Bold)

Lato

14,0KB

(400/Regular)

14,2KB

(700/Bold)

Jadi, jika kita menggunakan 2 kombinasi font saja, halaman kita sudah harus memuat tambahan file minimal sebesar 20KB dengan tambahan 4 request. Bila kita menggunakan lebih dari 2 font, tentu akan semakin bertambah lagi total page size dan total request yang harus dirender oleh browser.

Ingat, semua request yang berupa file bersifat render-blocking. Sebisa mungkin, kita harus meminimalkan jumlah request ini beserta besaran masing-masing file nya.

Best Practice: Jangan menggunakan font lebih dari 2.

3. Batasi Variasi Font

Font untuk bold style dan italic style, sering sebenarnya tidak perlu kita panggil untuk dimuat. Pada dasarnya, browser akan tetap ‘menebalkan’ dan memiringkan (italic) teks yang sudah kita atur dengan bold, font-weight: 700, dan italic pada style-nya.

Hasilnya sering sama saja. Kalaupun ada perbedaan, dalam banyak kasus, masih dapat ditoleransi.

Contoh Font Roboto Bold dengan hanya memanggil varian font regulernya (400)

Contoh Font Roboto Italic dengan hanya memanggil varian font regulernya (400)

Dengan hanya memanggil 1 font, jumlah request yang harus dimuat oleh suatu halaman akan jadi jauh berkurang.

4. Batasi Jenis Karakter Teks

Sudah pernah melihat sebenarnya jenis karakter teks (glyphs) yang ada di dalam suatu file font yang masih default itu seperti apa?

optimasi google font: untuk mempercepat dan meningkatkan performa website

Di atas adalah tampilan jenis-jenis karakter teks (glyphs) yang ada dalam file font Roboto regular. Tidak semuanya kita butuhkan, bukan? Cukup banyak yang tidak kita butuhkan, sebenarnya.

Kita bisa memilih jenis-jenis karakter yang kita perlukan dari google font dengan cara berikut.

Copy-paste ini ke browser:

https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&text=1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz@!-_+/\|/%20&subset=latin&display=swap

Hasilnya akan keluar CSS sebagai berikut:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/l/font?kit=KFOmCnqEu92Fr1Me4GZNCzcPbOHTuKd-SkmHNWwpVAzhGqdObQ3W7kiW3xZtkyJ4nCsmv5SUEKa9G3lhbJTltfR592bhZBr4xRJ9jWppcxaY6-qawqQjUIY&skey=a0a0114a1dcab3ac&v=v20) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/l/font?kit=KFOlCnqEu92Fr1MmWUlvBh0_IsHA06hvVlSEMGssVwHubd41bgjR60ub0BtuliV9nzY5opeRF6O-FnZsaJLei8h88GPiaRX1xhd6iGl0bAub7u2fwaksXYJJElw&skey=c06e7213f788649e&v=v20) format('woff2');
}

Perbedaan ukuran file dari CSS default google dan CSS yang sudah kita filter karakter teksnya:

Roboto

(default)

11,0KB

(400/Regular)

11.0KB

(700/Bold)

Roboto

(text-filtered)

5,76KB

(400/Regular)

5,72KB

(700/Bold)

Berkurang lebih dari setengahnya, bukan? Kita bisa jauh menghemat size dengan melakukan metode ini.

Alternatif lain, kita bisa mengurangi ukuran google font dari yang standar dengan memilih unicode range secara sepesifik seperti ini:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+000-5FF; /* Latin glyphs only */
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+000-5FF; /* Latin glyphs only */
}

*Kuncinya ada di unicode-range: U+000-5FF;.

Alternatif lainnya lagi, kita bisa mengunduh font-nya, dan menghapus character glyphs yang tidak kita perlukan dengan menggunakan software font editor seperti FontForge, dan menyajikannya langsung dari hosting kita.

5. Preload & Preconnect Google Font

Agar browser dapat merender google font lebih cepat, kita perlu mengaplikasikan preload dan preconnect.

Preconnect berguna untuk meminta browser melakukan koneksi dengan api google font di awal. Code snippet-nya seperti ini:

<link rel="preconnect" href="https://fonts.gstatic.com">

Sedangkan preload beguna untuk meminta browser memanggil file google font-nya di awal. Ini berguna agar tidak terjadi FOUT (Flash of Unstyled Text) saat pengunjung membuka website kita. Code snippet-nya seperti ini:

/* Roboto Regular 400 */
<link rel="preload" href="https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2" as="font" crossorigin>

/* Roboto Bold 700 */
<link rel="preload" href="https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2" as="font" crossorigin>

6. Inline CSS Google Font

Ada baiknya kita memisahkan file CSS yang khusus untuk memanggil google font agar kita bisa mengaplikasikan preload pada CSS tersebut. Karena file-size dari css google font setelah menggunakan metode di atas tidak akan besar, akan jauh lebih baik lagi bila kita menaruhnya secara inline di header.

Code snippet-nya seperti ini:

<style>
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+000-5FF; /* Latin glyphs only */
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+000-5FF; /* Latin glyphs only */
}
</style>

Dengan begitu, total request yang harus dirender oleh browser saat pengunjung mengakses website kita juga akan berkurang lagi.

7. Self Host Google Font Files

Mengapa kita perlu menyimpan file dari google font ke hosting kita sendiri, padahal google memiliki infrastruktur CDN yang luar biasa dan cepat? Jawabannya bisa dilihat di 2 gambar ini:

optimasi google font: untuk mempercepat dan meningkatkan performa website
Serve font langsung dari google
optimasi google font: untuk mempercepat dan meningkatkan performa website
Dengan menyimpan file google font ke hosting

Kita bisa mengunduh langsung file font-nya dari url source font yang terdapat di CSS, atau memanfaatkan Google-WebFonts-Helper yang dibuat oleh Mario Rantfl sejak tahun 2014 silam.

Catatan: Bila sudah memutuskan untuk menyimpan file font di hosting, dan sudah mengunduh file dari font-nya, kita bisa lebih leluasa menghapus character glyphs yang tidak kita perlukan dengan menggunakan software yang sudah dijelaskan di point 4 di atas.

8. Convert Font ke Base64

Bila sudah menerapkan metode filter karakter teks seperti yang tertera di point 4, kita bisa meng-convert font tersebut ke base64.

Caranya adalah mengunduh terlebih dulu file font dari google font tersebut dan meng-covert-nya ke base64 melalui aplikasi-aplikasi convert online seperti Gift Of Speed.

Untuk Roboto, code snippet-nya adalah seperti ini:

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: url(data:font/woff2;base64,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)
}

Kita hanya perlu mengganti semua bagian yang ada setelah “url(data:font/woff2;base64” dan sebelum “)” bila menggunakan font lain.

Catatan penting: Font yang sudah diubah ke base64 ukurannya akan menjadi lebih besar. Pastikan kita sudah filtering text yang kita gunakan agar tidak berakhir menjadi bumerang dengan membuat total page size kita menjadi jauh lebih besar dari yang seharusnya.

9. System font & Websafe Font

Dalam banyak kasus, kita sebenarnya tidak perlu menggunakan font khusus bila website kita tidak memerlukannya. Dengan memanfaatkan System Font dan Websafe Font, kita bisa sangat menghemat request dan juga page size.

Cek daftar Websafe Font yang benar-benar aman untuk digunakan di sini.

Selamat mencoba. Good Luck! 😉

*Baca versi lebih lengkapnya dalam Bahasa Inggris di sini.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *