Pemasaran Kandungan

Cara Memuatkan Font Adobe (Typekit) Dengan Lebih Pantas Dengan JavaScript

Memandangkan saya telah mencari untuk meningkatkan prestasi tapak saya, satu bidang yang menjadi kebimbangan ialah memuatkan fon tersuai yang saya gunakan melalui Adobe Fonts daripada Adobe Creative Cloud (juga dikenali sebagai TypeKit). Jika anda ingin memuatkan fon, terdapat beberapa cara:

  • Fon Selamat Pelayar: Dengan mengelakkan penggunaan mana-mana fon tersuai dan, sebaliknya, menggunakan fon lalai yang disokong pelayar, anda boleh meningkatkan kelajuan tapak secara mendadak. Walaupun ini mungkin kelihatan sebagai pilihan, estetika keseluruhan akan mengerikan. Ini bukan pilihan yang realistik untuk kebanyakan syarikat kerana anda terhad kepada Arial, Helvetica, Times New Roman, Georgia dan Courier New.
  • Fon Pengehosan Sendiri: Anda boleh membeli lesen untuk fon dan memuatkannya pada pelayan anda. Terdapat juga pembangunan tambahan yang boleh dilakukan supaya ia dimuatkan dengan lebih cepat… tetapi nampaknya ia agak sukar.
  • Fon Dihoskan: Kebanyakan pereka web menggunakan perpustakaan yang dihoskan di mana anda boleh membina pakej fon dan menggunakan kod untuk merujuk dan memaparkannya di tapak anda dengan coretan kod pantas. Dua pemain utama dalam pasaran ini ialah Adobe dan Google Font. Banyak CMS platform menggabungkan fungsi untuk memasukkan ini.

Fon Adobe

Dengan Adobe Fonts, anda memilih fon yang anda ingin paparkan di tapak anda dan kemudian membina projek dengannya. Satu aspek kritikal di sini adalah dengan hanya memuatkan fon yang anda ingin gunakan di seluruh tapak anda dan tidak lagi... semakin banyak fon dan gaya yang anda pilih, semakin perlahan tapak anda.

projek fon adobe martech zone

Perhatikan bagaimana ID Projek (xxxxxx) digunakan dalam setiap contoh kod. Jika anda ingin menggunakan kod ini, cuma pastikan anda menggantikan ID Projek dengan ID Projek anda atau ia tidak akan berfungsi. Seperti yang anda lihat, skrip lalai yang disediakan untuk memuatkan fon ialah:

<link rel="stylesheet" href="https://use.typekit.net/xxxxxx.css">

Malangnya, Adobe Fonts tidak menyediakan pilihan yang lebih baik untuk memuatkan fon anda… walaupun ia wujud. Kod JavaScript warisan berikut yang disediakan Adobe adalah lebih pantas daripada memuatkan fon melalui CSS atas beberapa sebab:

  1. Kod JavaScript menggunakan tak segerak memuatkan, yang bermaksud bahawa penyemak imbas boleh terus memuatkan halaman semasa skrip sedang diambil. Sebaliknya, apabila anda memuatkan fon melalui CSS, penyemak imbas mesti menunggu fail CSS dimuat turun dan dihuraikan sebelum ia boleh mula memuatkan fon. Ini boleh mengakibatkan kelewatan dalam memuatkan fon dan masa memuatkan halaman yang lebih perlahan.
  2. Kod JavaScript menggunakan Pemuat fon web Typekit, yang menyediakan fungsi tambahan untuk memuatkan fon. Sebagai contoh, pemuat fon web boleh mengesan sama ada penyemak imbas menyokong @font-face peraturan dan boleh mengelakkan memuatkan fon secara tidak perlu dalam pelayar yang tidak menyokong
    @font-face. Ia juga boleh memberikan prestasi pemuatan fon yang lebih baik dan pemaparan fon yang lebih baik.
  3. Kaedah CSS memerlukan tambahan HTTP meminta untuk mengambil fail CSS, sedangkan kod JavaScript adalah serba lengkap dan tidak memerlukan sebarang fail tambahan untuk diambil. Ini boleh menyebabkan masa pemuatan lebih cepat sedikit untuk kod JavaScript.

Secara keseluruhan, menggunakan kaedah JavaScript warisan ini untuk memuatkan fon Typekit boleh menghasilkan pemuatan fon yang lebih pantas dan lebih dipercayai daripada menggunakan kaedah CSS.

<script src="//use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

Jika anda menjalankan tapak WordPress, anda juga boleh mengemas kini fail functions.php anda untuk memuatkan Projek anda:

add_action( 'wp_head', 'theme_typekit_inline' );
function theme_typekit() {
	wp_enqueue_script( 'theme_typekit', '//use.typekit.net/xxxxxx.js', '', false);
}
add_action( 'wp_enqueue_scripts', 'theme_typekit' );

function theme_typekit_inline() {
  if ( wp_script_is( 'theme_typekit', 'done' ) ) { ?>
	<script>try{Typekit.load({ async: true });}catch(e){}</script>
  <?php }
}

Setiap sedikit penting apabila anda cuba meningkatkan kelajuan tapak anda. Adobe Fonts bukanlah perkhidmatan yang sangat pantas, jadi membantu mengurangkan masa dengan setiap pemuatan halaman boleh membuat perubahan!

Douglas Karr

Douglas Karr ialah CMO daripada OpenINSIGHTS dan pengasas Martech Zone. Douglas telah membantu berpuluh-puluh syarikat permulaan MarTech yang berjaya, telah membantu dalam usaha wajar lebih $5 bilion dalam pemerolehan dan pelaburan Martech, dan terus membantu syarikat dalam melaksanakan dan mengautomasikan strategi jualan dan pemasaran mereka. Douglas ialah transformasi digital yang diiktiraf di peringkat antarabangsa dan pakar serta penceramah MarTech. Douglas juga merupakan pengarang buku panduan Dummie dan buku kepimpinan perniagaan yang diterbitkan.

Artikel yang berkaitan

Kembali ke atas butang
Tutup

Adblock Dikesan

Martech Zone mampu memberikan anda kandungan ini tanpa sebarang kos kerana kami mengewangkan tapak kami melalui hasil iklan, pautan ahli gabungan dan tajaan. Kami amat menghargai jika anda akan mengalih keluar penyekat iklan anda semasa anda melihat tapak kami.