كل بضعة أشهر يُقال لعميل إن موقعه بطيء لأنه مليء بالعناصر البصرية، وإن الحل حذف الصور. ونادرًا ما تكون هذه هي المشكلة الحقيقية.
زمن أكبر عنصر مشكلة معمارية غالبًا
يقيس مؤشر LCP لحظة اكتمال عرض أكبر عنصر في الشاشة. وفي موقع يُعرض من المتصفح، لا تبدأ هذه الساعة إلا بعد أن ينزّل المتصفح حزمة الجافاسكربت وينفّذها ويطلب البيانات ويرسم النتيجة.
ولا يعالج أي قدر من ضغط الصور فجوة من أربع ثوانٍ قبل أن يُعرض أي شيء أصلًا. أما عرض الصفحة من الخادم فيعالجها، لأن الاستجابة الأولى تحتوي المحتوى فعلًا.
إزاحة التخطيط انضباط لا مقايضة
إزاحة التخطيط التراكمية شبه ذاتية التسبّب بالكامل: صور بلا أبعاد، وخطوط تُستبدل فتعيد تدفّق النص، ولافتات تُحقن فوق المحتوى بعد الرسم.
احجز المساحة. حدّد العرض والارتفاع لكل صورة ليوجد الإطار قبل وصول البيانات. وامنح خطوط الويب خطًا بديلًا مطابقًا في القياسات كي لا يزيح الاستبدال فقرة. ولا شيء من هذا يقيّد التصميم.
قِس الصفحة التي يصل إليها الناس
درجات المختبر على الصفحة الرئيسية هي أقل الأرقام فائدة. فالصفحات التي تكسب الزيارات العضوية صفحات عميقة — قائمة أو مقال أو منتج — وهي عادة الأثقل والأقل اختبارًا.
استخرج بيانات الاستخدام الفعلي للقوالب التي تتلقّى زيارات البحث فعلًا، وأصلح أسوأ قالب لا المتوسط.
المؤشر الأقسى
حلّ مؤشر «الاستجابة حتى الرسم التالي» (INP) مكان «تأخر أول إدخال»، وهو مؤشر أقلّ تسامحًا بكثير. فالمؤشر القديم كان يقيس المدة التي يحتاجها المتصفح ليبدأ معالجة التفاعل، أما INP فيقيس المدة حتى تتحدّث الشاشة فعلًا، وفي كل تفاعل خلال الجلسة.
ولذلك يلتقط ما تجاهله المؤشر القديم بلطف: واجهة ثقيلة تعتمد على الجافاسكربت، تحجب فيها نقرة على مرشّح الخيط الرئيسي نصف ثانية ريثما يعاد الرسم من المتصفح. والحل نادرًا ما يكون تحسينات دقيقة، بل إرسال جافاسكربت أقل، وتقسيم المهام الطويلة، ونقل ما لا يحتاج المتصفح إلى الخادم.
الخطوط أرخص المكاسب عادة
خطوط الويب مصدر موثوق للرسم البطيء ولإزاحة التخطيط معًا، وهي في الوقت نفسه أسهل ما في هذه القائمة إصلاحًا كما يجب.
استضفها بنفسك بدل استدعاء ملف أنماط من طرف ثالث، حتى لا يصرف المتصفح رحلة كاملة ليكتشف ملف الخط. وحمّل مسبقًا الوجوه الظاهرة في أول الشاشة فقط. وجزّئ الملفات — وهذا يهمّ مرتين في موقع ثنائي اللغة، لأن خطًا عربيًا غير مجزّأ يحمل كل المحارف تنزيل كبير لصفحة تستخدم جزءًا يسيرًا منها. ثم امنح كل وجه خطًا بديلًا بقياسات معدّلة، حتى لا يزيح الاستبدال عند وصول الخط الحقيقي سطرًا واحدًا من النص.
السرعة ليست بلا مدخلات تصميمية
لا شيء من كل ما سبق يقيّد شكل الصفحة، لكن قرارين هما فعلًا قرارا تصميم، وإنكار ذلك هو ما يجعلهما يُتخذان بشكل سيئ افتراضيًا.
الأول: ما هو عنصر الصدارة؟ فيديو بعرض الشاشة هو أكبر عنصر بطيء بحكم تعريفه، وصدارة قائمة على الخطوط مع صورة واحدة محسّنة ليست كذلك، والفرق على هاتف متوسط يُقاس بالثواني. والثاني: كم من الصفحة يحتاج أن يكون تفاعليًا؟ فالمكوّن الذي كان يمكن أن يكون نصًا ثابتًا وبُني كأداة تعمل في المتصفح يكلّف كل زائر حجم الجافاسكربت، سواء لمسه أم لا. وهذان يستحقان قرارًا مقصودًا مبكرًا والأرقام على الطاولة.
التحفّظ الصادق
المؤشرات مدخل واحد بين مدخلات كثيرة، وصفحة سريعة بلا مضمون لن تتفوّق على صفحة بطيئة تجيب عن السؤال. أصلح الأداء لأنه يرفع التحويل على الزيارات التي تملكها أصلًا، واعتبر أثر الترتيب مكسبًا إضافيًا.