افتح لوحة الشبكة، وأعد التحميل، وانظر إلى الشكل قبل أن تقرأ شيئًا. أربعةُ أشكال تغطّي كلّ صفحةٍ بطيئة تقريبًا، وكلٌّ منها يشير إلى مكانٍ آخر.
١. شريطٌ طويل في الأعلى، ثمّ كلُّ شيءٍ آخر
المستندُ نفسه أخذ أكثر الوقت. وذاك وقتُ خادم، ولا شيء في الصور أو السكربتات يغيّره. اذهب فقِس زمنَ أوّل بايت.
٢. سُلَّم
كلُّ طلبٍ يبدأ حين ينتهي سابقُه. فشيءٌ لا يُكتشَف إلّا بعد أن يُحمَّل شيءٌ آخر — صحيفةُ أنماطٍ تستورد أخرى، أو سكربتٌ يُدرج سكربتًا. وكلُّ درجةٍ رحلةُ ذهابٍ وإياب كاملة.
<link rel="preload" href="/fonts/body.woff2" as="font" crossorigin>٣. جدارٌ ثمّ ذيلٌ طويل
كلُّ شيءٍ يبدأ معًا وقليلٌ منه يطول كثيرًا. وذلك القليل من طرفٍ ثالث عادةً: سكربتُ تحليلات، أو أداةُ محادثة، أو خطٌّ من نطاقٍ آخر. خادمُك بخير والصفحةُ ليست بخير.
سكربتُ طرفٍ ثالث في الرأس بلا async ولا defer يحجب التصيير على زمن استجابة خادمهم هم. وانقطاعُهم صفحتُك البيضاء.
٤. فجوةٌ كبيرة قبل أوّل رسم
وصلت البايتات ولم يُرسَم شيء. أنماطٌ تحجب التصيير أو خطٌّ ينتظر التبديل. انظر في حجم أوّل صحيفة أنماط وفي font-display.
@font-face { font-display: swap; }الأعمدة الثلاثة الجديرة بالقراءة
- الانتظار (زمن أوّل بايت) — الخادم يفكّر.
- تنزيل المحتوى — البايتات تتحرّك. والكبيرُ هنا يعني أنّ الملفّ أكبر من اللازم.
- الاصطفاف / التعطّل — انتظارُ اتّصال. والكبيرُ هنا على HTTP/1.1 هو سببُ وجود HTTP/2.
اختبر على اتّصالٍ مخنوق لا على اتّصالك. فعلى وصلةِ مكتبٍ سريعة يبدو كلُّ شيءٍ تقريبًا بخير، وزوّارك على هواتفهم.
