كيفية تقليل وقت تحميل FontAwesome وزيادة سرعة موقع الويب

في هذه المقالة ، سأوضح لك كيف يمكنك تقليل وقت تحميل FontAwesome عن طريق تأخير تحميل أوراق الأنماط.

Font Awesome هي مكتبة أيقونات شائعة توفر نطاقًا واسعًا من الرموز الموجهة القابلة للتطوير والتي يمكن تخصيصها واستخدامها بسهولة في مشاريع تطوير الويب. عندما يستخدم موقع ويب أوراق أنماط رائعة للخط للأيقونات ، فإنه يؤدي عمومًا إلى إبطاء السرعة بشكل كبير حيث يحتاج المتصفح إلى تنزيل الخط من خادم جهة خارجية. في هذه العملية ، يمنع تحميل الأصول الحرجة أولاً ويقلل من نتائج إحصاءات سرعة الصفحة.

ربما تكون قد رأيت أخطاء مثل تقليل CSS غير المستخدمة ، أو تقليل موارد حظر العرض ، أو تجنب تسلسل الطلبات الحرجة بسبب التعليمات البرمجية الرائعة للخط.

لذا ، فإن الحل هو إما تبديل الرموز الرائعة بالخط بأيقونات SVG أو تأخير تحميلها. ليس من الممكن دائمًا تبديل الرموز بالكامل بأيقونات SVG ولكن يمكننا بسهولة تأخير تحميل ورقة الأنماط الرائعة للخط وزيادة سرعة تحميل موقع الويب.

كيفية تأخير رموز Font-Awesome في Blogger؟

لتأخير الرموز الرائعة للخط ، تحتاج أولاً إلى تحديد الإصدار المستخدم على موقع الويب الخاص بك.

يمكنك ببساطة البحث عن ( CTRL + F ) عن الخطوط الرائعة في كود السمة وإزالتها من قالبك.

الآن استخدم البرنامج النصي أدناه واستبدله بالشفرة المصدر لـ font-awesome بالإصدار الصحيح.

 <script> setTimeout(function() { // Add the Font Awesome stylesheet dynamically var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'; document.head.appendChild(link); }, 3000); // Delay of 3 seconds </script>

إذا كان لديك العديد من الأكواد الرائعة للخطوط ، فإنه يستخدم كلاً من الاستيراد وأوراق الأنماط ، فأنت بحاجة إلى استخدام البرنامج النصي أدناه مع رابط المصدر.

 <script> setTimeout(function() { // Add the Font Awesome stylesheet dynamically var link1 = document.createElement('link'); link1.rel = 'stylesheet'; link1.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'; document.head.appendChild(link1); var link2 = document.createElement('link'); link2.rel = 'stylesheet'; link2.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css'; document.head.appendChild(link2); }, 3000); // Delay of 3000 milliseconds (3 seconds) </script>

الآن ، استخدم أحد هذه البرامج النصية أعلى علامة إغلاق النص مباشرةً واحفظ الكود. الآن أصبحت الرموز الرائعة للخط كسولة أو يمكنك القول تأخير 3 ثوانٍ. يمكنك ضبط هذه القيمة في البرنامج النصي أعلاه.

تحميل مكتبة Font Awesome بشكل غير متزامن باستخدام JavaScript

وإذا كنت لا ترغب في تأخير الرموز الرائعة الخطية ، فيمكنك تحميل مكتبة Font Awesome بشكل غير متزامن باستخدام JavaScript. بهذه الطريقة ، سيتم جلب الرموز وعرضها بعد تحميل المحتوى المهم للصفحة. لن تكون هذه الطريقة فعالة مثل طريقة التأخير ولكنها بالتأكيد ستتحسن من الطريقة الافتراضية.

 <!-- Place this script tag in the head section of your HTML --> <script> // Asynchronous loading of Font Awesome (function() { var link = document.createElement('link'); link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'; // Replace with your Font Awesome CSS URL link.rel = 'stylesheet'; link.type = 'text/css'; var script = document.getElementsByTagName('script')[0]; script.parentNode.insertBefore(link, script); })(); </script>

في هذا المثال ، يتم تحميل ملف Font Awesome CSS بشكل غير متزامن باستخدام JavaScript. اضبط عنوان URL داخل السمة link.href للإشارة إلى ملف Font Awesome CSS الذي تريد استخدامه.

من خلال تنفيذ هذا الأسلوب ، سيتم تحميل المحتوى المهم لصفحة الويب الخاصة بك أولاً ، دون انتظار رموز Font Awesome. بعد ذلك ، سيتم تحميل الرموز بشكل غير متزامن ، مما يقلل من وقت التحميل الأولي ويحسن سرعة الموقع الإجمالية.

الطريقة المتقدمة

بالتأكيد! هناك طريقة أخرى لتأخير تحميل أيقونات Font Awesome وهي استخدام واجهة برمجة تطبيقات Intersection Observer . يتيح لك هذا الأسلوب تحميل الرموز فقط عندما تصبح مرئية في منفذ العرض ، مما يقلل من وقت تحميل الصفحة الأولي. إليك كيفية تنفيذه:

قم بإزالة ورقة الأنماط الافتراضية Font Awesome كما هو مذكور في الطريقة السابقة.

أضف عنصرًا نائبًا لكل رمز Font Awesome. يمكن أن يكون هذا عنصرًا بسيطًا من نوع <span> أو <div> .

استخدم واجهة برمجة تطبيقات Intersection Observer لاكتشاف متى تكون عناصر العنصر النائب مرئية في منفذ العرض. عندما يصبح عنصر مرئيًا ، قم بتحميل Font Awesome CSS واستبدل العنصر النائب بالأيقونة الفعلية.

إليك مثال على التنفيذ باستخدام JavaScript:

 <!-- Place this script tag in the head section of your HTML --> <script> // Intersection Observer callback function function loadFontAwesome(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { // Load Font Awesome CSS var link = document.createElement('link'); link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'; // Replace with your Font Awesome CSS URL link.rel = 'stylesheet'; link.type = 'text/css'; document.head.appendChild(link); // Replace placeholder with Font Awesome icon var placeholder = entry.target; var iconClass = placeholder.getAttribute('data-icon'); var iconElement = document.createElement('i'); iconElement.className = iconClass; placeholder.parentNode.replaceChild(iconElement, placeholder); // Stop observing this element observer.unobserve(entry.target); } }); } // Set up Intersection Observer var options = { root: null, rootMargin: '0px', threshold: 0.1 }; var observer = new IntersectionObserver(loadFontAwesome, options); // Start observing the placeholder elements var placeholders = document.querySelectorAll('.font-awesome-placeholder'); placeholders.forEach(function(placeholder) { observer.observe(placeholder); }); </script> <!-- Place the placeholder elements wherever needed --> <p>Some content...</p> <span class="font-awesome-placeholder" data-icon="fas fa-heart"></span> <p>Some more content...</p>

في هذا المثال ، نستخدم واجهة برمجة تطبيقات Intersection Observer لاكتشاف متى تصبح عناصر العنصر النائب مع الفئة font-awesome-placeholder مرئية في منفذ العرض. عندما يكون عنصر مرئيًا ، نقوم بتحميل Font Awesome CSS ديناميكيًا ، واستبدال العنصر النائب بعنصر الرمز الفعلي ، والتوقف عن ملاحظة هذا العنصر.

اضبط عنوان URL داخل السمة link.href للإشارة إلى ملف Font Awesome CSS الذي تريد استخدامه. أيضًا ، قم بتعديل سمة رمز البيانات لكل عنصر نائب لتحديد فئة رمز Font Awesome المطلوبة.

باستخدام واجهة برمجة تطبيقات " Intersection Observer " ، سيتم تحميل أيقونات Font Awesome فقط عندما تكون على وشك الظهور ، مما يقلل من وقت التحميل الأولي للصفحة ويحسن سرعة موقع الويب.

آمل أن تساعدك هذه المقالة في تقليل وقت تحميل FontAwesome وزيادة سرعة تحميل موقع الويب. بهذه الطريقة ، يمكنك جعل أساسيات الويب الحيوية لموقعك الإلكتروني سهلة الاستخدام.