Cara Memuat Font Google Lebih Cepat di Blogger

Google Web Fonts terbuka bagi para pengembang untuk mengoptimalkan blog mereka dengan gaya teks terbaik. Ketika pengunjung mengunjungi situs web Anda, browser memuat font default yang aman untuk web seperti Arial, dll. Pengembang menambahkan font Google saat skrip membaca file font dari Google Fonts untuk memastikannya menampilkan gaya font berkode default. 

Ketika font Google dimuat, ia akan menggantikan font default dengan font Google untuk beberapa detik awal, saat memuat konten, hal ini akan merusak pengalaman desain web untuk situs web Anda, dan mengganggu pengunjung. Jadi, Anda perlu memuat font Web yang muncul lebih cepat dan dengan cara yang benar.

Kami menggunakan font Oswald untuk judul dan font Open Sans untuk teks artikel. Lihat bagaimana kami memuatnya untuk hasil yang optimal.

Letakkan kode impor Google di bawah judul sehingga kode tersebut dimuat pertama kali setelah tag HTML HEAD, bahkan sebelum file CSS. Hal ini akan mengoptimalkan kecepatan karena akan dimuat sebelum font default muncul terlebih dahulu. Hal ini akan memastikan bahwa font dimuat sebelum CSS. Ingatlah bahwa karena file CSS mengikuti, Anda dapat menata tag Anda dengan font dalam file CSS.

1. Gunakan Font Format Tautan

Google Font menawarkan 3 cara untuk memuat font web Google - impor, link rel, dan JavaScript. Menggunakan tag link rel akan memungkinkan Anda untuk menempatkan kode. Letakkan di atas HTML dan muat paling cepat sebelum file CSS. Format tautan memudahkan untuk mengambil font dan gaya CSS. Diambil dari server font Google untuk ditampilkan di badan situs web Anda. Tautan font Google terlihat seperti yang dilampirkan di bawah ini.

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Kode impor harus dimasukkan ke dalam file CSS, meskipun Anda dapat menambahkannya di bagian atas file CSS. Anda dapat menambahkan Flash, namun menurut SEO jangan pernah menambahkan Flash karena mesin pencari tidak dapat merender sumber daya Flash yang akan memberikan pengalaman web yang buruk bagi pengunjung Anda.

2. Memuat Lebih Sedikit Font

Semakin banyak Anda menambahkan banyak font ke template Anda, semakin banyak waktu pemuatan meningkat dan itu mempengaruhi kecepatan Anda dalam statistik SEO web dan itu akan menyebabkan kerugian besar bagi pesaing Anda. Situs web yang baik adalah situs web yang mudah dijangkau orang dan mendapatkan apa yang mereka cari, sedangkan situs web yang buruk adalah situs web yang membutuhkan banyak waktu untuk menyampaikan informasi kepada pengunjung. 

Google membenci pengalaman pengguna yang buruk. Jadi mengapa Anda membutuhkan 4 font Google untuk ditampilkan di setiap halaman? Sebaiknya Anda memilih maksimal dua jenis huruf - satu jenis huruf tebal untuk berita utama dan satu jenis huruf yang mudah dibaca untuk artikel. Semakin banyak font yang Anda pilih, semakin lama waktu yang dibutuhkan untuk memuatnya.

<link href='http://fonts.googleapis.com/css?family=Open+Sans|Oswald' rel='stylesheet' type='text/css'>

Gabungkan Kode Font Google Anda Di google font, kami memiliki hak istimewa untuk memiliki kotak dialog yang bagus di bawah ini setiap kali Anda memilih font yang akan digunakan. Font dari keluarga font yang sama dikelompokkan untuk menghindari penambahan skrip yang berbeda yang akan memperlambat situs web Anda. Biasanya, disarankan untuk membuka maksimal satu tautan di situs web Anda. Anda dapat memuat beberapa font Google dengan satu baris kode. Lihat contoh di bawah ini di mana kami telah menggabungkan font Open Sans dan Oswald.

3. Memuat Varian Default Font Web Google

Setiap opsi font memungkinkan Anda untuk memuat berbagai gaya font. Hal ini memperluas cara kita untuk menggunakan satu font di seluruh templat situs web kita sehingga kita dapat menghasilkan gaya font templat yang dioptimalkan dengan lebih baik yang akan berjalan cepat saat dirender. Apakah Anda perlu menambahkan semua varian dan melipatgandakan waktu pemuatan beberapa kali lipat? Memuat banyak varian sama dengan memuat banyak font. Pilih gaya default setiap font dan hanya akan memuat satu varian.

Halaman Google Font untuk setiap font menjelaskan dengan sangat jelas berapa lama waktu yang dibutuhkan untuk memuat font. Pengukur beban di samping font menunjukkan seberapa cepat setiap font akan dimuat. Jika Anda terus menambahkan lebih banyak font, semakin lama waktu yang dibutuhkan untuk memuat. Beberapa font berat dan dapat memakan waktu hampir dua kali lipat waktu muat. Jadi pilihlah dengan bijak dan pilihlah font yang memuat lebih cepat. Sebagai contoh, Open Sans memiliki dampak halaman 15 sementara Droid Sans akan lebih banyak yaitu 25! Gunakan Pemuat Font Web

Bagi mereka yang hanya ingin memuat font Google mereka sebelum CSS dimuat dan perlu memastikan tidak ada kejutan teks bergaya, gunakan pemuat font web - JavaScript yang akan memastikan font dimuat sebelum bagian lain dari situs dan menghindari kilatan teks bergaya. Meskipun skrip asinkron tersedia, lebih baik menggunakan skrip sinkron untuk memastikan font Anda dimuat terlebih dahulu.

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      keluarga: ['Open Sans', 'Oswald']
    }
  });
</script>

Jadi cobalah trik font Google ini dan ubah desain situs web Anda untuk dampak yang lebih besar.