عندما يتعلق الأمر بتحسين أداء موقع الويب، فإن كل مللي ثانية مهم. إحدى الطرق الأكثر فعالية لتقليل أوقات التحميل للموارد المهمة هي استخدام سمة رابط HTML rel = "preload". في هذه المقالة، سنتعمق في كيفية عمل التحميل المسبق، ومتى يتم استخدامه، وكيف يمكنه تحسين تجربة المستخدم بشكل كبير على موقع الويب الخاص بك.

ما هو rel = "التحميل المسبق"؟

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

بعبارات أبسط، أنت تعطي المتصفح تنبيهًا بشأن الملفات المهمة للحصول على تجربة سلسة.

لماذا يجب عليك استخدام التحميل المسبق؟

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

إليك كيف يمكن أن يساعدك التحميل المسبق:

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

بناء الجملة والاستخدام

لنبدأ بمثال أساسي لكيفية استخدام rel = "preload". فيما يلي مقتطف HTML بسيط يوضح التحميل المسبق لخط مخصص:

في هذا المثال:

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

التحميل المسبق لأنواع مختلفة من الموارد
يمكنك التحميل المسبق لأنواع مختلفة من الموارد المهمة لعرض صفحتك. دعونا نلقي نظرة على بعض الأمثلة الشائعة:

1. التحميل المسبق للخطوط
غالبًا ما تكون الخطوط سببًا رئيسيًا لبطء التحميل الأولي للصفحات. ويضمن تحميلها مسبقًا أن النص تم تصميمه بشكل صحيح بمجرد عرض المحتوى، مما يمنع وميض النص غير المنسق (FOUT) أو وميض النص غير المرئي (FOIT).

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

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

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

أفضل الممارسات لاستخدام rel="preload"

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

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

2. استخدم crossorigin للموارد الخارجية : عند التحميل المسبق للموارد من مجال مختلف، تأكد من تضمين سمة crossorigin. وهذا يضمن إمكانية جلب المورد الخاص بك بشكل صحيح دون مشاكل CORS.

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

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

مثال لاستخدام rel="preload" على موقع الويب الخاص بك
فيما يلي مثال كامل لكيفية دمج rel = "preload" في صفحة ويب نموذجية:

    
    
    

    
    
    
    
    

    
    


    

        
Preload Example
        
    

    

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

عندما لا تستخدم rel = "التحميل المسبق"

على الرغم من أن التحميل المسبق قوي، إلا أنه ليس حلاً سحريًا لجميع الموارد. فيما يلي بعض الحالات التي قد ترغب في تجنب استخدامها:

الموارد غير المهمة: لا تقم بتحميل الأصول غير الضرورية مسبقًا للعرض الأولي لصفحتك.

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

خاتمة
يعد استخدام rel="preload" طريقة بسيطة ولكنها فعالة لتسريع موقع الويب الخاص بك عن طريق مطالبة المتصفح بجلب الموارد المهمة في أسرع وقت ممكن. ومن خلال التركيز على التحميل المسبق للأصول الأساسية مثل الخطوط وأوراق الأنماط والصور، يمكنك تقليل أوقات التحميل وتحسين تجربة المستخدم.

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