منذ تقديم Lighthouse، ظهرت معلمات جديدة تتعلق بسرعة الصفحة. أحد أهم هذه المعلمات هو First Contentful Paint (FCP). في الإصدار 10 من Lighthouse، اعتبارًا من يونيو 2024، يبلغ تأثير FCP على النتيجة الإجمالية 10%.
لاعتماد وفهم FCP كمقياس، من الضروري أولاً فحص علم النفس الذي يقف وراءه. المفهوم مشابه ل المرايا المثبتة في المصاعد:
لتلخيص ذلك بإيجاز: في النصف الأول من القرن العشرين، زاد استخدام المصاعد في المباني الشاهقة بشكل ملحوظ، لكن أنظمة المصاعد كانت بدائية مقارنة باليوم. ولذلك ظهرت فكرة تركيب مرايا في المصاعد لتجعل الوقت الذي تقضيه في المصعد أقصر.
العودة إلى موضوعنا: النقطة التي تجعلك تنتظر أثناء وقت التحميل عند محاولة الوصول إلى الصفحة هي FCP. تعريف First Contentful Paint هو الوقت الذي يستغرقه عرض أول نص أو صورة أو لوحة قماشية غير بيضاء، وما إلى ذلك، للمستخدم. وحدة FCP هي ثانية.
في Lighthouse، يتم تحديد مقياس الألوان لـ FCP كما يلي:
- 0-2 ثانية: أخضر => سريع
- 2-4 ثانية: برتقالي => يحتاج إلى تحسين
- 4+ ثانية: أحمر => بطيء
وفقًا لبيانات أرشيف HTTP، عدد المواقع التي يمكن أخذها بعين الاعتبار سريع 25%، ويتم تصنيف 50% من المواقع الموجودة على أنها بطيئة.
ما الذي يمكن عمله لتحسين FCP؟
تقليل وقت استجابة الخادم
بشكل عام، يمكن تفسير ذلك على أنه تحسينات مطلوبة على جانب الخادم من الخادم والبرنامج. لسرد المشكلات التي تؤثر سلبًا على وقت استجابة الخادم:
- يمكن أن تكون مشاركة الخادم وتكوينه (أي إعدادات الخادم) وموارد الخادم هي المشكلة. يجب زيادة سعة الخادم الخاص بك وفقًا لحركة المرور الخاصة بك. في بعض الحالات، يمكن أن تؤثر استعلامات قاعدة البيانات المكتوبة بشكل سيئ ومكونات البرامج شديدة التعقيد بشكل خطير على وقت استجابة الخادم.
- قد يؤدي عدم استخدام CDN (شبكة تسليم المحتوى) إلى تأخير الوصول إلى المحتوى، مما يؤثر على FCP. مع زيادة حجم المحتوى، على سبيل المثال، إذا تمت محاولة استدعاء ملف GIF متحرك كبير أو مقطع فيديو بدون CDN وكان الخادم الرئيسي في قارة مختلفة، فقد تحتاج إلى التفكير في حلول CDN لحل FCP.
- قد يؤدي عدم تقديم محتوى ثابت باستخدام سياسة ذاكرة تخزين مؤقت مناسبة ومتسقة إلى زيادة التحميل الخادم الخاص بك دون داع مع زيادة عدد الزوار. على سبيل المثال، إذا لم تحتفظ بشعارك في ذاكرة التخزين المؤقت طويلة المدى أثناء تحميله على كل صفحة، فإنك تلحق الضرر بوقت استجابة الخادم الخاص بك دون داع.
- عمليات إعادة توجيه الصفحة غير الضرورية أثناء الوصول إلى الصفحة يمكن أن يؤثر بشكل غير ضروري على FCP الخاص بك.
على سبيل المثال، في الماضي، كانت هناك إعدادات مثل هذا: عندما يريد المستخدم الدخول إلى موقع ما، كانت هناك عملية إعادة توجيه HTTP إلى HTTPS، ثم إذا كان الهاتف المحمول، تتم إعادة توجيه HTTPS إلى الهاتف المحمول (على سبيل المثال، https:// www إلى https://m)، وإذا تمت إزالة الصفحة وإعادة توجيهها إلى مكان آخر باستخدام الرقم 301، فستشعر وكأن المستخدم قد تم نقله من مكتب إلى آخر في مكتب الضرائب. يعد هذا مثالًا متطرفًا لفهم أفضل، ولكن إذا قمت بإعادة توجيه صفحة إلى عنوان URL آخر باستخدام إعادة التوجيه 301 ثم أعدت توجيه تلك الصفحة إلى أخرى باستخدام 301، فمن المحتمل أنك تقوم بنفس الإعداد غير المنطقي.
- إذا كنت لا تستخدم الاتصال المسبق أو الجلب المسبق لـ DNS البادئات عند الاتصال بخدمات الطرف الثالث والاتصال بالعديد من خدمات الطرف الثالث، فإنك لا تفعل أي شيء مفيد لـ FCP.
تقليل موارد حظر العرض
يجب أن أعترف أن هذه النقطة المفردة المكتوبة كبند يمكن أن تستغرق شهورًا لمعالجتها.
لتحقيق ذلك، هناك طريقة الحل حيث كل يتم تحميل JS وCSS والموارد المماثلة التي تمنع عرض الصفحة بعد وقت إنشاء الصفحة، ولكن يتم تحميل الجزء المرئي في البداية من الموقع أولاً أثناء تحميل الموقع. ومع ذلك، للقيام بذلك، يجب فحص جميع موارد JS وCSS والموارد المماثلة، ويجب فصل العمليات الأكثر استهلاكًا للوقت. بالإضافة إلى ذلك، فإن استخدام أقل عدد ممكن من خدمات الجهات الخارجية يساعد في تحسين FCP.
