وقت الرسم الأولي للمحتوى (FCP) هو مقياس حاسم في أداء الويب الحديث. يقيس الوقت من لحظة التنقل حتى عرض أول نص أو صورة على الشاشة. بينما يركز العديد من المطورين على وقت الحظر الكلي (TBT) أو أكبر رسم للمحتوى (LCP)، فإن تحسين FCP يضمن أن يدرك المستخدمون أن الصفحة تُحمّل بسرعة منذ المللي ثانية الأولى.
مسار الرسم الحرج (CRP) هو تسلسل الخطوات التي تمر بها المتصفحات لتحويل كود HTML وCSS وJavaScript إلى بكسلات على الشاشة. من خلال فهم هذا المسار، يمكننا تحديد الاختناقات حيث ينتظر المتصفح الموارد قبل أن يتمكن من الرسم. يستكشف هذا المقال كيف يمكن لتلميحات الموارد واستراتيجيات التحميل المسبق أن تقلل بشكل كبير من وقت الحظر أثناء الرسم.
فهم الحظر أثناء الرسم
بشكل افتراضي، يقوم المتصفح بتنفيذ وتنزيل النصوص البرمجية الخارجية، مما قد يوقف غالباً عملية تحليل HTML. وبالمثل، تمنع ملفات CSS الرسم حتى يتم تحميلها وتحليلها. يمكن أن يتسبب هذا المزامنة في تأخير كبير في FCP. للتخفيف من ذلك، يجب علينا إعطاء الأولوية للموارد الحرجة وتأجيل أو استخدام التحميل غير المتزامن (async) للموارد غير الحرجة.
تنفيذ التحميل المسبق
يخبر التحميل المسبق المتصفح بجلب الموارد في وقت مبكر من عملية تحميل الصفحة، وغالباً قبل أن يصل محلل HTML إلى تعريف المورد. هذا مفيد بشكل خاص للخطوط، والصور الرئيسية، أو نصوص JavaScript التي تحتاجها العرض الأولي.
استخدم عنصر <link> مع سمة rel="preload". حدد سمة as لتعريف نوع المحتوى، مما يساعد المتصفح على تحسين أولوية الطلب.
<head>
<link rel="preload" href="critical-font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="hero-image.jpg" as="image">
</head>عند تحميل الخطوط مسبقاً، قم دائماً بتضمين سمة crossorigin. يتم تقديم الخطوط بنوع MIME وسياق أصل مختلفين؛ بدون هذه السمة، قد يرفض المتصفح المورد المحمّل مسبقاً أو يفشل في تطبيقه بشكل صحيح.
الاستفادة من الاستباقية لاستعلامات DNS
إذا كانت صفحتك تعتمد على موارد تابعة لجهات خارجية مستضافة على نطاقات مختلفة، يجب على المتصفح حل عنوان DNS قبل الاتصال. يضيف حل DNS زمن انتقال (latency)، خاصة على الشبكات البطيئة. يمكنك تلميح المتصفح إلى أنه يجب عليه إجراء هذا الحل في الخلفية.
استخدم علاقة dns-prefetch لتحديد النطاقات التي يجب على المتصفح حلها مبكراً. هذا خفيف الوزن ولديه تأثير ضئيل على عرض النطاق الترددي.
<head>
<link rel="dns-prefetch" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://analytics.example.com">
</head>استخدام الاتصال المسبق لاتصالات أسرع
بينما يقتصر الاستباقية لاستعلامات DNS على حل العنوان فقط، يذهب preconnect خطوة إلى الأمام. فهو يبدأ اتصالاً مبكراً مع الأصل المستهدف، بما في ذلك حل DNS، ومصافحة TCP، والتفاوض على TLS اختيارياً. هذا يقلل بشكل كبير من زمن الانتقال للطلبات اللاحقة.
استخدم preconnect للموارد الحرجة التابعة لجهات خارجية مثل نصوص التحليل، وبوابات الدفع، أو واجهات برمجة التطبيقات الرئيسية المطلوبة للرسم الأولي أو التفاعل الفوري.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://api.yourservice.com">
</head>لاحظ أن preconnect يستهلك موارد أكثر من dns-prefetch. استخدمه فقط للنطاقات التي تكون واثقاً من أن طلباً سيتبعها قريباً. يمكن أن يؤدي الإفراط في استخدامه إلى إهدار عرض النطاق الترددي وعمر البطارية على الأجهزة المحمولة.
التنفيذ الاستراتيجي
لا ينبغي تحميل جميع الموارد مسبقاً أو الاتصال بها مسبقاً. لدى المتصفح حد لعدد الاتصالات المتزامنة لكل أصل، وقد يؤدي التلميح العدواني إلى حرمان موارد CSS أو تحليل HTML الحرجة. أعطِ الأولوية للموارد الأساسية للعرض الأولي. استخدم أدوات مثل Lighthouse أو WebPageTest لتحديد الفرص حيث سيكون للتلميحات أعلى تأثير على FCP.
الخاتمة
إتقان مسار الرسم الحرج أمر ضروري لتحسين وقت الرسم الأولي للمحتوى. من خلال الاستخدام الاستراتيجي لتلميحات الموارد مثل التحميل المسبق، والاستباقية لاستعلامات DNS، والاتصال المسبق، يمكنك توجيه المتصفح لجلب الموارد اللازمة في وقت أبكر، مما يقلل من أوقات الانتظار ويحسن إدراك المستخدم. تذكر قياس نتائجك وتعديل استراتيجيتك بناءً على بيانات المستخدمين الحقيقيين لضمان أفضل أداء ممكن.