सामग्री मार्केटिङ

कसरी जाभास्क्रिप्टको साथ Adobe फन्टहरू (Typekit) छिटो लोड गर्ने

मैले मेरो साइटको कार्यसम्पादन सुधार गर्न खोजिरहेको छु, चिन्ताको एउटा क्षेत्र भनेको अनुकूलन फन्टहरू लोड गर्दैछु जुन मैले Adobe Fonts मार्फत प्रयोग गरिरहेको छु। एडोब रचनात्मक क्लाउड (TypeKit को रूपमा पनि चिनिन्छ)। यदि तपाइँ फन्टहरू लोड गर्न चाहनुहुन्छ भने, त्यहाँ धेरै तरिकाहरू छन्:

  • ब्राउजर-सुरक्षित फन्टहरू: कुनै पनि अनुकूलन फन्टहरूको प्रयोगलाई बेवास्ता गरेर र, यसको सट्टा, पूर्वनिर्धारित ब्राउजर-समर्थित फन्टहरू प्रयोग गरेर, तपाइँ नाटकीय रूपमा साइटको गति बढाउन सक्नुहुन्छ। जबकि यो एक विकल्प हुन सक्छ, समग्र सौन्दर्यशास्त्र भयानक हुनेछ। तपाईं एरियल, हेल्भेटिका, टाइम्स न्यू रोमन, जर्जिया, र कुरियर न्यूमा सीमित हुनाले धेरै कम्पनीहरूको लागि यो व्यावहारिक विकल्प होइन।
  • स्व-होस्टिङ फन्टहरू: तपाईं फन्टहरूको लागि इजाजतपत्र खरीद गर्न सक्नुहुन्छ र तिनीहरूलाई तपाईंको सर्भरमा लोड गर्न सक्नुहुन्छ। त्यहाँ थप विकासहरू पनि छन् जुन गर्न सकिन्छ ताकि तिनीहरू छिटो लोड हुन्छन्... तर यो एकदम थोरै काम जस्तो देखिन्छ।
  • होस्ट गरिएका फन्टहरू: धेरै जसो वेब डिजाइनरहरूले होस्ट गरिएको पुस्तकालयहरू प्रयोग गर्छन् जहाँ तपाईं फन्टहरूको प्याकेज निर्माण गर्न सक्नुहुन्छ र सन्दर्भको लागि कोड प्रयोग गर्न सक्नुहुन्छ र तिनीहरूलाई द्रुत कोड स्निपेटको साथ तपाईंको साइटमा प्रदर्शन गर्न सक्नुहुन्छ। यस बजारमा दुई प्रमुख खेलाडीहरू Adobe र गुगल फन्ट्स। धेरै सीएमएस प्लेटफर्महरूले यी समावेश गर्न कार्यक्षमता समावेश गर्दछ।

एडोब फन्टहरू

Adobe Fonts को साथ, तपाईंले आफ्नो साइटमा प्रदर्शन गर्न चाहनुभएको फन्टहरू चयन गर्नुहोस् र त्यसपछि तिनीहरूसँग एउटा परियोजना निर्माण गर्नुहोस्। यहाँ एउटा महत्वपूर्ण पक्ष भनेको तपाईंले आफ्नो साइटमा प्रयोग गर्न चाहनुहुने फन्टहरू मात्र लोड गर्नु हो र अरू होइन... तपाईंले जति धेरै फन्टहरू र शैलीहरू चयन गर्नुहुन्छ, तपाईंको साइट त्यति नै ढिलो हुनेछ।

एडोब फन्ट परियोजना martech zone

नोट गर्नुहोस् कसरी परियोजना आईडी (xxxxxx) प्रत्येक कोड उदाहरणहरूमा प्रयोग गरिन्छ। यदि तपाइँ यो कोड प्रयोग गर्न चाहनुहुन्छ भने, तपाइँको परियोजना ID संग परियोजना ID लाई प्रतिस्थापन गर्न निश्चित हुनुहोस् अन्यथा यसले काम गर्ने छैन। तपाईले देख्न सक्नुहुन्छ, फन्टहरू लोड गर्न प्रदान गरिएको पूर्वनिर्धारित स्क्रिप्ट हो:

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

दुर्भाग्यवश, Adobe Fonts ले तपाईंको फन्टहरू लोड गर्नको लागि राम्रो विकल्प प्रदान गर्दैन... यद्यपि यो अवस्थित छ। निम्न लिगेसी JavaScript कोड Adobe मार्फत फन्टहरू लोड गर्ने भन्दा छिटो छ CSS केहि कारणका लागि:

  1. जाभास्क्रिप्ट कोड प्रयोग गर्दछ अतुल्यकालिक लोड हुँदैछ, जसको अर्थ ब्राउजरले स्क्रिप्ट ल्याउने क्रममा पृष्ठ लोड गर्न जारी राख्न सक्छ। यसको विपरित, जब तपाइँ CSS मार्फत फन्टहरू लोड गर्नुहुन्छ, ब्राउजरले फन्टहरू लोड गर्न सुरु गर्नु अघि CSS फाइल डाउनलोड र पार्स हुनको लागि कुर्नु पर्छ। यसले फन्ट लोडिङमा ढिलाइ र पृष्ठ लोड हुने समय ढिलो हुन सक्छ।
  2. जाभास्क्रिप्ट कोड प्रयोग गर्दछ Typekit वेब फन्ट लोडर, जसले फन्टहरू लोड गर्नका लागि थप कार्यक्षमता प्रदान गर्दछ। उदाहरणका लागि, वेब फन्ट लोडरले ब्राउजरले समर्थन गर्छ कि गर्दैन भनेर पत्ता लगाउन सक्छ @font-face नियम र समर्थन नगर्ने ब्राउजरहरूमा अनावश्यक रूपमा फन्टहरू लोड गर्नबाट बच्न सक्छ
    @font-face। यसले राम्रो फन्ट लोडिङ प्रदर्शन र सुधारिएको फन्ट रेन्डरिङ पनि प्रदान गर्न सक्छ।
  3. CSS विधिलाई थप आवश्यक छ HTTP CSS फाइल ल्याउन अनुरोध, जबकि JavaScript कोड स्व-निहित छ र कुनै पनि अतिरिक्त फाइलहरू आवश्यक छैन ल्याउनु पर्छ। यसले JavaScript कोडको लागि थोरै छिटो लोडिङ समयको परिणाम हुन सक्छ।

समग्रमा, टाइपकिट फन्टहरू लोड गर्न यो लिगेसी JavaScript विधि प्रयोग गर्दा CSS विधि प्रयोग गर्नु भन्दा छिटो र अधिक भरपर्दो फन्ट लोड हुन सक्छ।

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

यदि तपाइँ एक WordPress साइट चलाइरहनुभएको छ भने, तपाइँ तपाइँको परियोजना लोड गर्न को लागी तपाइँको functions.php फाइल पनि अपडेट गर्न सक्नुहुन्छ:

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 }
}

तपाईंले आफ्नो साइटको गति सुधार गर्ने प्रयास गर्दा हरेक थोरैले गणना गर्छ। Adobe Fonts धेरै छिटो सेवा होइन, त्यसैले प्रत्येक पृष्ठ लोडको साथ केही समय दाढी गर्न मद्दतले फरक पार्न सक्छ!

Douglas Karr

Douglas Karr को CMO छ OpenINSightTS र को संस्थापक Martech Zone। डगलसले दर्जनौं सफल MarTech स्टार्टअपहरूलाई मद्दत गरेको छ, Martech अधिग्रहण र लगानीमा $ 5 बिलियन भन्दा बढीको लगनशीलतामा सहयोग गरेको छ, र कम्पनीहरूलाई उनीहरूको बिक्री र मार्केटिङ रणनीतिहरू कार्यान्वयन र स्वचालित गर्न मद्दत गर्न जारी छ। डगलस एक अन्तर्राष्ट्रिय मान्यता प्राप्त डिजिटल रूपान्तरण र MarTech विशेषज्ञ र वक्ता हो। डगलस डम्मीको गाईड र व्यापार नेतृत्व पुस्तकका प्रकाशित लेखक पनि हुन्।

सम्बन्धित लेख

शीर्ष बटनमा फर्कनुहोस्
बन्द

Adblock पत्ता लाग्यो

Martech Zone तपाइँलाई यो सामग्री कुनै पनि लागतमा उपलब्ध गराउन सक्षम छ किनभने हामीले हाम्रो साइटलाई विज्ञापन राजस्व, सम्बद्ध लिङ्कहरू, र प्रायोजनहरू मार्फत मुद्रीकरण गर्छौं। यदि तपाईंले हाम्रो साइट हेर्दै आफ्नो विज्ञापन अवरोधक हटाउनु भयो भने हामी प्रशंसा गर्नेछौं।