8 أسرار لتحسين خطوط الويب لتقليل وقت التحميل

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

كيف تؤثر خطوط الويب على أداء موقع الويب الخاص بك

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

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

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

الخبر السار هو أن تحسين خطوط الويب الخاصة بك للأداء عملية سهلة للغاية. فيما يلي طرق لمساعدتك على البدء:

1. تدقيق ومراقبة استخدام الخط

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

من الضروري أن تكون على دراية بحجم النطاق الترددي الذي يستخدمه كل خط حتى تتمكن من تحديد أي منها تريد الاحتفاظ به وأيها ستفقده.

يمكنك استخدام أداة مثل Web Font Loader لمساعدتك في ذلك. إنها أداة مجانية مفتوحة المصدر تساعدك على مراقبة كيفية تحميل الخطوط الخاصة بك.

كما يسمح لك بتحميل الخطوط بشكل غير متزامن بحيث يستمر تحميل صفحتك ، حتى إذا استغرقت بعض الخطوط وقتًا أطول.

2. مجموعة فرعية لموارد الخط

من خلال تقليل موارد الخطوط الخاصة بك ، يمكنك تقليل النطاق الترددي المستخدم على موقع الويب الخاص بك بشكل كبير وجعل التجربة الإجمالية للمستخدمين أسرع وأكثر موثوقية.

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

إذا كنت تستخدم خدمة خطوط ويب مثل Typekit أو Google Fonts ، فيمكنك تعيين خطوط فرعية عن طريق تحديد مجموعات أحرف معينة عند إعداد مشروعك. إذا كنت تستخدم خطوطًا ذاتية الاستضافة ، فيمكن أن تساعدك العديد من الأدوات والبرامج النصية الرائعة في القيام بنفس الشيء.

3. استخدم تنسيقات الخطوط الحديثة

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

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

وهناك عدد قليل من الطرق.

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

4. تحميل خطوط الويب بشكل غير متزامن

الآن ، دعنا ننتقل إلى نصيحة التحسين الرابعة: تحميل خطوط الويب بشكل غير متزامن. هذه طريقة رائعة لضمان تحميل موقعك بسرعة ودون انقطاع.

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

5. تنفيذ ملفات تعريف الارتباط

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

عندما يتعلق الأمر بخطوط الويب ، يمكن أن تساعد ملفات تعريف الارتباط في تسريع عملية تحميل الخطوط الخاصة بك.

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

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

6. الحد من الأحرف في الخطوط

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

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

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

7. استخدم رأس التحميل المسبق

لتعزيز أداء تحميل خط الويب والعرض السلس ، يجب تنفيذ رأس التحميل المسبق في أسرع وقت ممكن.

• يساعد هذا الرأس المتصفح على تنزيل خطوط الويب بشكل أسرع ، حتى قبل تسليم CSS.
• أيضًا ، يضمن التحميل المسبق لخطوط الويب توفرها في ذاكرة التخزين المؤقت بمجرد استخدامها في المشروع.

استخدمه لتحميل موارد الخطوط الخاصة بك مسبقًا. تأكد من استخدام نوع وسائط مناسب ، مثل font / woff2 أو font / woff ، لوصف موارد الخط عند تحميلها مسبقًا. يمكن للمتصفح بعد ذلك تحديد أولويات هذه الموارد ، حتى لو لم يتم استخدامها على الفور في مشروعك.

8. التخزين المؤقت هو المفتاح

التخزين المؤقت ضروري لأية استراتيجية تحسين خط الويب. تشتمل حلول التخزين المؤقت للحافة الرئيسية - مثل Cloudflare و Amazon CloudFront - على أدوات يمكنك استخدامها لتخزين خطوط الويب بسهولة.

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

كقاعدة عامة ، أقوم عمومًا بتعيين وقت انتهاء صلاحية يتراوح بين شهر وثلاثة أشهر للخطوط المخزنة مؤقتًا ، اعتمادًا على عدد مرات تغييرها.

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

أسئلة وأجوبة
1. ما هي أفضل الممارسات لتحسين خطوط الويب لتقليل وقت التحميل؟

• بالنسبة لخطوط الويب ، احتفظ بالخطوط التي تستخدمها عند الحد الأدنى واستخدم خطوط الويب التي تكون كائنات متحركة.
• استخدم قاعدة CSS @ font-face ، أو قم بتطبيق خط متغير على العنصر ذي الأنماط.
• امنح خطوط الويب خطًا احتياطيًا يتم تحميله قبل الخط المستخدم في ورقة الأنماط.
• جرب هذه الطرق المذكورة لتحسين موقع الويب الخاص بك.

2. كيف يمكنني التأكد من أن خطوط الويب مضغوطة بشكل صحيح لتقليل وقت التحميل؟
لتحسين مواقع الويب الخاصة بك لأوقات التحميل المثلى ، ابحث في خطوط الويب. تعرف على المزيد حول خطوط الويب باستخدام هذه الموارد:

* [خطوط الويب: كتاب تمهيدي] (https://www.useit.com/alertbox/web-fonts-primer) * [خطوط الويب] (https://hackernoon.com/web-fonts-whats-the-diff -بين-عادي-جريء-1be219e86e36)
* [خطوط الويب: كتاب تمهيدي] (https://www.useit.com/alertbox/web-fonts-primer)

3. ما هي أفضل الأدوات والتقنيات لاختبار التحميل؟
هناك دائمًا مجال للتحسين ، وهناك دائمًا طرق لاختبار تحميل موقعك. يمكنك الحصول على مساعدة من أدوات مثل PageSpeed ​​Insights و Google's Lighthouse.

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

فما تنتظرون؟ ابدأ في تحسين خطوط الويب الخاصة بك اليوم! يمكنك تجربة SKT Themes إذا كنت بحاجة إلى سمات WordPress احترافية لا تستغرق وقتًا لتحميلها على موقعنا.

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