انظر تحميل موقعك من خلال عيون الزائر الخاص بك
احصل على فكرة جيدة عما يختبره زوارك بالفعل عند زيارتهم لموقع الويب الخاص بك.
هل لاحظت أي شيء يتم تحميله ببطء أو في غير مكانه؟ يمكن أن يساعدك ذلك في تحديد حالات التأخير المهمة ومشكلات التحويل التي يواجهها زوارك.
لقطة شاشة تعرض نتيجة اختبار أداء الويب DebugBear ، أكتوبر 2022 يوضح شريط المخطط الزمني تقدم عرض موقع الويب بمرور الوقت.
على سبيل المثال ، تبدأ هذه الصفحة في العرض بعد 0.7 ثانية ، ويتم عرض الصورة الرئيسية بعد 1.3 ثانية.
يتم عرض موقع الويب بالكامل ، والمعروف أيضًا باسم Visually Complete ، عند عرض أداة الدردشة بعد 3.7 ثانية.
لقطة شاشة لـ DebugBear تعرض تقدم عرض موقع ويب بمرور الوقت ، أكتوبر 2022 داخل الأداة ، يمكنك أيضًا مشاهدة تسجيل فيديو لعملية العرض.
هذه طريقة رائعة لإثبات تأثير مشكلات الأداء على العملاء أو أعضاء آخرين في فريقك.
لقطة شاشة تعرض تسجيل فيديو لموقع تم عرضه جزئيًا في DebugBear ، أكتوبر 2022 اختبر تغييرات سرعة الموقع من خلال رؤية إحصائيات التحميل الحقيقية
لنفترض أنك قمت بتحسين موقع الويب الخاص بك ، وتريد معرفة ما إذا كانت هذه التغييرات ستحدث تأثيرًا.
تُجري هذه الأداة "اختبارًا معمليًا" في بيئة مثالية لاكتشاف ما إذا كنت تقوم بتحسين موقعك بشكل صحيح.
عندما تختبر موقعك ، ستحصل على "نتيجة المختبر" الرسمية ، وهي عبارة عن ملخص لستة مقاييس أداء تأتي من نتيجة الأداء من أداة Lighthouse من Google:
- First Contentful Paint (10٪ من النتيجة الإجمالية).
- مؤشر السرعة (10٪).
- أكبر طلاء محتوى (25٪).
- وقت التفاعل (10٪).
- إجمالي وقت الحظر (30٪).
- التحول في التخطيط التراكمي (15٪).
باستخدام هذه البيانات ، ستكتشف مدى فائدة الجولة الأخيرة من التحسينات وما قد تحتاج إلى تغييره.
الآن ، ربما تتساءل عما تحتاج إلى تغييره. دعنا نتعلم كيفية تحسين موقعك باستخدام كل مقياس رئيسي في نظرة عامة على المقاييس.
كيفية تحسين سرعة الموقع
يعد إجراء اختبار السرعة هو الجزء الأول من رحلة تحسين موقع الويب الخاص بك.
بمجرد حصولك على المقاييس الخاصة بك ، ستحتاج إلى معرفة كيفية تفسيرها وماذا تفعل لإصلاحها.
في منطقة نظرة عامة على المقاييس لتقرير سرعة موقع الويب الخاص بك ، سترى المقاييس الرئيسية التي سنركز عليها للمساعدة في تسريع موقعك:
- First Contentful Paint : يمكن تسريع ذلك عن طريق إصلاح سرعة اتصال الخادم.
- أكبر رسم محتوى : يمكن تسريع ذلك عن طريق تحسين الوسائط والموارد.
بالإضافة إلى ذلك ، يمكنك استخدام عرض الطلب بدون انقطاع لمعرفة المدة التي تستغرقها الطلبات وكيف يؤثر ذلك على هذه المقاييس.
كيفية تسريع أول رسم مضمون (FCP)
لنبدأ بجعل موقع الويب الخاص بك يظهر في وقت أقرب للزائرين ؛ سنتناول First Contentful Paint أولاً.
ما هو أول رسم مضمون؟
يقيس First Contentful Paint مدى سرعة ظهور محتوى الصفحة لأول مرة بعد انتقال الزائر إلى تلك الصفحة.
من المهم أن يظهر المحتوى الرئيسي الخاص بك بسرعة من أجل منع الزائر من مغادرة موقع الويب الخاص بك. كلما أسرع المستخدم في مغادرة موقع الويب الخاص بك ، زادت سرعة تعلم Google أن تجربة الصفحة قد تكون سيئة.
ولكن كيف تعرف بالضبط سبب بطء تحميل موقع الويب الخاص بك؟
كيف يمكنك الكشف عن مشكلات الخادم التي تؤدي إلى إبطاء موقع الويب الخاص بك؟ هيا نكتشف.
لماذا يستغرق رسم أول محتوى لي وقتًا طويلاً؟
قد يتأثر FCP الخاص بك بسرعة اتصال الخادم وطلبات الخادم وموارد حظر العرض والمزيد.
يبدو الأمر كثيرًا ، ولكن هناك طريقة سهلة لمعرفة بالضبط ما يبطئ FCP الخاص بك - شلال الطلب.
توضح هذه الأداة المفيدة الطلبات التي يتم إجراؤها بواسطة موقع الويب الخاص بك ومتى يبدأ كل طلب وينتهي.
على سبيل المثال ، في لقطة الشاشة هذه ، نرى أولاً طلبًا لمستند HTML ثم طلبين لتحميل أوراق الأنماط المشار إليها في المستند.
لقطة شاشة تعرض بيانات تصحيح الأخطاء لمقياس First Contentful Paint في DebugBear ، أكتوبر 2022 لماذا يحدث أول رسم مضمون بعد 0.6 ثانية؟ يمكننا تفصيل ما يحدث على الصفحة لفهم ذلك.
فهم ما يحدث قبل الرسم الأول المحتوى
قبل أن يتم تحميل الأجزاء الأولى من المحتوى على صفحة الويب الخاصة بك ، يجب على متصفح المستخدم الخاص بك الاتصال أولاً بخادمك واسترداد المحتوى.
إذا استغرقت هذه العملية وقتًا طويلاً ، فسيستغرق المستخدم وقتًا طويلاً حتى يرى موقع الويب الخاص بك.
هدفك هو معرفة ما يحدث قبل أن يبدأ تحميل موقع الويب الخاص بك حتى تتمكن من تحديد المشكلات وتسريع التجربة.
تحميل الصفحة الجزء 1: يقوم المستعرض بإنشاء اتصال بالخادم
قبل طلب موقع ويب أولاً من خادم ، يحتاج متصفح الزائر إلى إنشاء اتصال شبكة بهذا الخادم.
يستغرق هذا عادةً ثلاث خطوات:
- التحقق من سجلات DNS للبحث عن عنوان IP الخاص بالخادم بناءً على اسم المجال.
- إنشاء اتصال خادم موثوق (يُعرف باسم اتصال TCP).
- إنشاء اتصال خادم آمن (يُعرف باسم اتصال SSL).
يتم تنفيذ هذه الخطوات الثلاث بواسطة المتصفح ، واحدة تلو الأخرى. تتطلب كل خطوة رحلة ذهابًا وإيابًا من متصفح الزائر إلى خادم موقع الويب الخاص بك.
في هذه الحالة ، يستغرق إنشاء اتصال الخادم حوالي 251 مللي ثانية.
لقطة شاشة من DebugBear تعرض رحلات ذهابًا وإيابًا للشبكة المستخدمة لإنشاء اتصال بالخادم ، أكتوبر 2022 تحميل الصفحة الجزء 2: المستعرض يطلب مستند HTML (الوقت حتى البايت الأول يحدث هنا)
بمجرد إنشاء اتصال الخادم ، يمكن لمتصفح الزائر أن يطلب رمز HTML الذي يحتوي على محتوى موقع الويب الخاص بك. يسمى هذا طلب HTTP.
في هذه الحالة ، يستغرق طلب HTTP 102 مللي ثانية. تتضمن هذه المدة كلاً من الوقت المستغرق في رحلة الذهاب والعودة للشبكة والوقت المستغرق في انتظار قيام الخادم بإنشاء استجابة.
بعد 251 مللي ثانية لإنشاء الاتصال و 102 مللي ثانية لتقديم طلب HTTP ، يمكن لمتصفح الزائر الخاص بك أخيرًا البدء في تنزيل استجابة HTML.
يُطلق على هذا المعلم اسم الوقت حتى أول بايت (TTFB). في هذه الحالة ، يحدث ذلك بعد إجمالي 353 مللي ثانية.
بعد أن تصبح استجابة الخادم جاهزة ، يقضي متصفح الزائر بعض الوقت الإضافي في تنزيل كود HTML. في هذه الحالة ، تكون الاستجابة صغيرة نسبيًا ولا يستغرق التنزيل سوى 10 مللي ثانية إضافية.
لقطة شاشة DebugBear تعرض المكونات المختلفة لطلب HTTP ، أكتوبر 2022 تحميل الصفحة الجزء 3: موقع الويب الخاص بك يقوم بتحميل موارد إضافية لحظر العرض
لا تعرض المستعرضات الصفحات أو تعرضها فور تحميل المستند. بدلاً من ذلك ، عادةً ما تكون هناك موارد إضافية لحظر العرض.
ستبدو معظم الصفحات سيئة بدون أي نمط مرئي ، لذلك يتم تحميل أوراق أنماط CSS قبل بدء عرض الصفحة.
يستغرق تحميل صفحتي أنماط إضافيتين في مثال اختبار سرعة موقع الويب هذا 137 مللي ثانية.
لاحظ أن هذه الطلبات لا تتطلب اتصالاً جديدًا بالخادم. يتم تحميل ملفات CSS من نفس المجال كما كان من قبل ويمكن إعادة استخدام الاتصال الحالي.
لقطة شاشة لـ DebugBear تعرض موارد إضافية لحظر العرض يتم تحميلها بعد مستند HTML ، أكتوبر 2022 تحميل الصفحة الجزء 4: المستعرض يعرض الصفحة
أخيرًا ، بمجرد تحميل جميع الموارد الضرورية ، يمكن لمتصفح الزائر أن يبدأ في عرض الصفحة. ومع ذلك ، فإن القيام بهذا العمل يستغرق أيضًا بعضًا من وقت المعالجة - في هذه الحالة ، 66 مللي ثانية. يشار إلى ذلك من خلال علامة مهمة وحدة المعالجة المركزية البرتقالية في عرض الشلال.
لقطة شاشة DebugBear توضح الخطوات التي تبدأ من تحميل مستند HTML حتى عرض صفحة الويب ، أكتوبر 2022 نحن نفهم الآن سبب حدوث FCP بعد 632 مللي ثانية:
- 364 مللي ثانية لطلب مستند HTML.
- 137 مللي ثانية لتحميل أوراق الأنماط.
- 66 مللي ثانية لعرض الصفحة.
- 65 مللي ثانية لأعمال المعالجة الأخرى.
تتضمن أعمال المعالجة الأخرى وظائف صغيرة مثل تشغيل البرامج النصية المضمنة أو تحليل كود HTML و CSS بمجرد تنزيله. يمكنك رؤية هذا النشاط كخطوط رمادية صغيرة أسفل شريط صور العرض مباشرةً.
كيفية تحسين أول محتوى محتوى (FCP)
الآن بعد أن فهمت ما الذي يؤدي إلى عرض موقع الويب الخاص بك ، يمكنك التفكير في كيفية تحسينه.
- هل يستطيع الخادم الاستجابة لطلب HTML بسرعة أكبر؟
- هل يمكن تحميل الموارد عبر نفس الاتصال بدلاً من إنشاء اتصال جديد؟
- هل هناك طلبات يمكن إزالتها أو تغييرها بحيث لا تحظر العرض بعد الآن؟
الآن بعد أن تم تحميل الأجزاء الأولى من موقع الويب الخاص بك في وقت أقرب ، حان الوقت للتركيز على جعل تحميل الموقع بالكامل أسرع.
كيف تسرع أكبر رسم محتوى (LCP) مع توصيات DebugBear
هناك الكثير من الطرق لتسريع LCP الخاص بك.
لتسهيل الأمر ، يقدم لنا DebugBear الخطوات التالية الرائعة في قسم التوصيات.
دعنا نلقي نظرة على بعض الأمثلة على التوصيات ونتعلم كيفية تسريع LCP لهذا الموقع.
التوصية 1: بدء طلبات صور LCP من مستند HTML
إذا كان أكبر عنصر محتوى في صفحتك عبارة عن صورة ، فإن أفضل ممارسة هي التأكد من أن عنوان URL مضمن مباشرةً في مستند HTML الأولي. سيساعد ذلك على بدء التحميل في أسرع وقت ممكن.
ومع ذلك ، لا يتم استخدام أفضل الممارسات هذه دائمًا ، وأحيانًا يستغرق وقتًا طويلاً قبل أن يكتشف المتصفح أنه يحتاج إلى تنزيل الصورة الرئيسية.
في المثال أدناه ، تتم إضافة أكبر محتوى ، وهو صورة ، إلى الصفحة باستخدام JavaScript. نتيجة لذلك ، يحتاج المستعرض إلى تنزيل برنامج نصي يبلغ حجمه 200 كيلو بايت وتشغيله قبل أن يكتشف الصورة ويبدأ في تنزيلها.
لقطة شاشة من DebugBear تعرض سلسلة طلبات متسلسلة تؤدي إلى طلب صورة ، أكتوبر 2022 كيفية الإصلاح: اعتمادًا على موقع الويب ، يوجد حلان محتملان.
الحل 1: إذا كنت تستخدم JavaScript للتحميل البطيء لصورة كبيرة ، فقم بتحسين حجم الصورة وإزالة نص التحميل البطيء أو استبدالها بخاصية التحميل الحديثة = "lazy" ، والتي لا تتطلب JavaScript.
الحل 2: في حالات أخرى ، يمنع العرض من جانب الخادم الاضطرار إلى تنزيل تطبيق JavaScript قبل عرض الصفحة. ومع ذلك ، قد يكون هذا الأمر معقدًا في بعض الأحيان في التنفيذ.
التوصية 2: تأكد من تحميل صور LCP بأولوية عالية
بعد تحميل كود HTML للصفحة ، قد تكتشف متصفحات زوارك أنه بالإضافة إلى صورتك الرئيسية ، قد يلزم تحميل عدد كبير من الموارد الإضافية مثل أوراق الأنماط.
الهدف هنا هو التأكد من تحميل صورتك الرئيسية الأكبر حجمًا لتلبية متطلبات أكبر محتوى من Google.
الموارد الأخرى ، مثل نصوص تحليلات الطرف الثالث ، ليست بنفس أهمية صورتك الرئيسية.
بالإضافة إلى ذلك ، ستكون معظم الصور المشار إليها في HTML الخاص بموقعك في الجزء السفلي غير المرئي من الصفحة بمجرد عرض الصفحة. قد يكون بعضها مخفيًا تمامًا في التنقل الرأسي المتداخل.
لهذا السبب ، تقوم المستعرضات في البداية بتعيين أولوية جميع طلبات الصور على منخفض. بمجرد عرض الصفحة ، يكتشف المتصفح الصور المهمة ويغير الأولوية. يمكنك رؤية مثال على ذلك في لقطة الشاشة أدناه ، كما هو موضح بواسطة علامة النجمة في عمود الأولوية.
لقطة شاشة من DebugBear تعرض صورة LCP يتم تحميلها بأولوية أولية منخفضة ، أكتوبر 2022 يُظهر الشلال أنه على الرغم من علم المتصفح بالصورة في وقت مبكر ، إلا أنه لم يبدأ تنزيلها ، كما هو موضح بالشريط الرمادي.
كيفية الإصلاح: لحل هذه المشكلة ، يمكنك استخدام ميزة متصفح جديدة تسمى تلميحات الأولوية. إذا أضفت السمة fetchpriority = "high" إلى عنصر img ، فسيبدأ المتصفح في تحميل الصورة مباشرة من البداية.
التوصية 3: لا تخفي محتوى الصفحة باستخدام CSS
في بعض الأحيان قد تنظر إلى طلب عرض بدون انقطاع وقد تم تحميل جميع موارد حظر العرض ولكن لا يزال لا يظهر أي محتوى للصفحة. ماذا يحدث هنا؟
غالبًا ما تخفي أدوات اختبار A / B محتوى الصفحة حتى يتم تطبيق اختلافات الاختبار على عناصر المحتوى في الصفحة. في هذه الحالات ، يقوم المستعرض بعرض الصفحة ولكن كل المحتوى شفاف.
ماذا يمكنك أن تفعل إذا لم تتمكن من إزالة أداة اختبار A / B؟
كيفية الإصلاح: تحقق مما إذا كان بإمكانك تكوين الأداة لإخفاء المحتوى المتأثر باختبارات أ / ب فقط. بدلاً من ذلك ، يمكنك التحقق مما إذا كانت هناك طريقة لجعل أداة اختبار A / B يتم تحميلها بسرعة أكبر.
لقطة شاشة من DebugBear تعرض شريطًا سينمائيًا يتم عرضه حيث يتم إخفاء المحتوى بواسطة أداة اختبار A / B ، أكتوبر 2022 راقب سرعة موقعك باستخدام DebugBear
هل تريد اختبار موقع الويب الخاص بك باستمرار؟ جرب أداة المراقبة المدفوعة الخاصة بنا مع نسخة تجريبية مجانية مدتها 14 يومًا.
بهذه الطريقة ، يمكنك التحقق مما إذا كانت تحسينات الأداء تعمل بشكل جيد ويتم تنبيهك إلى أي تراجع في الأداء على موقعك.
لقطة شاشة تعرض اتجاهات سرعة الموقع لموقع ويب في DebugBear ، أكتوبر 2022 
لقطة شاشة تعرض بيانات Core Web Vitals في DebugBear ، أكتوبر 2022