Font Awesome CSS से सीधे लिंक करने के बजाय, मैं Font Awesome CDN से जेएस का उपयोग कर रहा हूं ताकि एसिंक्रोनस लोडिंग की अनुमति मिल सके। होमपेज पर आइकन हैं लेकिन Google की पेजस्पीड इनसाइट्स अभी भी इसे रेंडर-ब्लॉकिंग जेएस के रूप में चिह्नित करती है।

मैं फ़ॉन्ट विस्मयकारी सीडीएन द्वारा प्रदान किए गए कस्टम जेएस लिंक का उपयोग कर रहा हूं और इसे <head> अनुभाग में डाल रहा हूं (मैं इसे <body> के अंत में भी रख सकता हूं, लेकिन वहीं पर फ़ॉन्ट विस्मयकारी सीडीएन मुझे इसे डालने के लिए कहता है। )

<script src="https://use.fontawesome.com/mycustomcode.js"></script>

और हां, मैंने Font-Awesome-CDN पर अपने खाते में लॉग इन करके Async लोडिंग चालू कर दी है।

9
Anupam 27 मार्च 2018, 14:34

2 जवाब

सबसे बढ़िया उत्तर

जैसा कि @ ग्रामथानोस की टिप्पणी में बताया गया है, <head> के अंदर सब कुछ रेंडर-ब्लॉकिंग है। फ़ॉन्ट-भयानक सीडीएन सीएसएस को अतुल्यकालिक रूप से लोड करता है जो इसे गति देता है लेकिन Google अभी भी जेएस को रेंडर-ब्लॉकिंग के रूप में देखेगा।

JS को <body> के अंत में ले जाने से इसे रेंडर-ब्लॉकिंग नहीं होने और पेजस्पीड इनसाइट्स चेतावनी से छुटकारा पाने में मदद मिली।

3
Anupam 29 मार्च 2018, 06:06

मैं केवल यह साझा करना चाहता था कि कैसे मैंने फ़ॉन्ट विस्मयकारी लोड करने के तरीके में केवल एक बदलाव के साथ लोडिंग पृष्ठ को 50% से अधिक कम कर दिया। सीधे HTML फ़ाइल में स्क्रिप्ट टैग को शामिल करने के बजाय, मैंने जावास्क्रिप्ट के माध्यम से जेएस फ़ाइल को प्रोग्रामेटिक रूप से लोड किया:

var script = document.createElement('script')
script.src = 'https://use.fontawesome.com/releases/v5.8.2/js/solid.js'
document.head.appendChild(script);

script = document.createElement('script')
script.src = 'https://use.fontawesome.com/releases/v5.8.2/js/brands.js'
document.head.appendChild(script);

script = document.createElement('script')
script.src = 'https://use.fontawesome.com/releases/v5.8.2/js/fontawesome.js'
document.head.appendChild(script);
0
João Henrique Silveira 5 जुलाई 2019, 20:50