Mempercepat Loading Webfont dengan Query Display pada Google Font
Mempercepat Pemuatan Webfont dengan Query Display pada Google Font. Cara Mengatasi Google Fonts yang Mempengaruhi Skor Google PageSpeed
Kecepatan website atau load time sebuah website menjadi salah satu faktor SEO sebuah website. Hal ini sudah dikemukakan oleh para pakar SEO google dan Google itu sendiri.
Untuk itulah, mempercepat loading sebuah halaman web sangat penting dilakukan agar website mampu bersaing dengan yang lain, khususnya di mesin pencari seperti Google.
Banyak hal yang mempengaruhi kecepatan sebuah halaman web diantaranya:
Untuk itulah, mempercepat loading sebuah halaman web sangat penting dilakukan agar website mampu bersaing dengan yang lain, khususnya di mesin pencari seperti Google.
Banyak hal yang mempengaruhi kecepatan sebuah halaman web diantaranya:
- Server
- Ukuran halaman yang meliputi ukuran HTML, CSS, JavaScript dan Gambar.
- Penggunaan JavaScript dan CSS pihak ketiga,
- Pemanfaatan cache browser, dan lainnya
Saya pernah membahasnya dalam sebuah artikel berjudul Faktor-faktor penentu kecepatan Blog.
Jika kita melakukan test sebuah halaman website di Google PageSpeed Insight, salah satu masalah yang muncul menyatakan "Ensure text remains visible during webfont load".
Hal ini bisa diperbaiki dengan cara menambahkan value CSS font-display pada webfont tersebut. Sebelumnya saya pernah membahas di artikel ini.
Tapi, saat ini anda tidak perlu repot-repot karena faktanya Google Fonts sudah memperbaiki masalah skor Google PSI tersebut.
Ya, kini Google Fonts memungkinkan anda untuk bisa menambahkan atribut font-display dengan menggunakan query pada link font yang anda pilih. Dengan kata lain anda tidak perlu mengubah apapun pada CSS website anda.
Seperti gambar diatas, anda hanya perlu menambahkan kueri display=swap lalu mempaste tag <link> tersebut sebelum </head>.
Contoh jika anda memilih font roboto, maka anda harus mempaste kodenya seperti di bawah ini.
Kemudian save, dan coba untuk melakukan test Google PageSpeed insight kembali. Cara tersebut bisa anda terapakan di manapun, termasuk Blogger dan AMP.
Semoga bermanfaat :)
Masalah Loading Webfont Google Fonts
Salah satu masalah kecepatan web terletak pada penggunaan webfont pihak ketiga seperti Google Font.Jika kita melakukan test sebuah halaman website di Google PageSpeed Insight, salah satu masalah yang muncul menyatakan "Ensure text remains visible during webfont load".
Hal ini bisa diperbaiki dengan cara menambahkan value CSS font-display pada webfont tersebut. Sebelumnya saya pernah membahas di artikel ini.
Tapi, saat ini anda tidak perlu repot-repot karena faktanya Google Fonts sudah memperbaiki masalah skor Google PSI tersebut.
Ya, kini Google Fonts memungkinkan anda untuk bisa menambahkan atribut font-display dengan menggunakan query pada link font yang anda pilih. Dengan kata lain anda tidak perlu mengubah apapun pada CSS website anda.
Seperti gambar diatas, anda hanya perlu menambahkan kueri display=swap lalu mempaste tag <link> tersebut sebelum </head>.
Contoh jika anda memilih font roboto, maka anda harus mempaste kodenya seperti di bawah ini.
<head>
. . . . . .
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
. . . . . .
</head>
Kemudian save, dan coba untuk melakukan test Google PageSpeed insight kembali. Cara tersebut bisa anda terapakan di manapun, termasuk Blogger dan AMP.
Semoga bermanfaat :)