Mobile Analysis in PageSpeed Insights

تحلل أداة PageSpeed Insights إحدى الصفحات لمعرفة ما إذا كانت تتبع توصياتنا لجعل الصفحة يتم عرضها في أقل من ثانية على شبكة الجوّال. فقد أظهرت الأبحاث أن أي تأخير عن ثانية واحدة سيتسبب في مقاطعة تدفق أفكار المستخدم، مما يؤدي إلى تجربة سيئة. إن هدفنا هو الإبقاء على تفاعل المستخدم مع الصفحة وتقديم التجربة الأمثل، بغض النظر عن الجهاز أو نوع الشبكة.

ليس من السهل استيفاء المهلة الزمنية البالغة ثانية واحدة. ولحسن الحظ، فإن الصفحة الكاملة لا يجب أن يتم عرضها خلال هذه المهلة الزمنية، بدلا من ذلك، يجب علينا تقديم محتوى الجزء المرئي (ATF) وعرضه في أقل من ثانية واحدة، مما يسمح للمستخدم ببدء التفاعل مع الصفحة في أسرع وقت ممكن. وبينما يعمل المستخدم على فهم الصفحة الأولى من المحتوى، يمكن أن يتم تقديم باقي الصفحة تدريجيًا في الخلفية.

التكيّف مع شبكات الجوّال التي تستغرق وقتًا طويلاً للاستجابة

إن استيفاء معيار ATF الذي يبلغ ثانية واحدة على أجهزة الجوّال يفرض تحديات فريدة لا توجد على الشبكات الأخرى. يمكن للمستخدمين الدخول إلى موقعك عبر مجموعة مختلفة من شبكات الجيل الثاني والثالث والرابع. وتكون أزمنة الاستجابة للشبكات ذات أهمية أكبر من الاتصال السلكي وتستهلك جزءًا كبيرًا من المهلة الزمنية التي تبلغ 1000 مللي ثانية لعرض محتوى ATF:

  • 200-300 مللي ثانية لأزمنة جولات الذهاب والإياب لشبكات الجيل الثالث
  • 50-100 مللي ثانية لأزمنة جولات الذهاب والإياب لشبكات الجيل الرابع

إن شبكات الجيل الثالث هي أكثر أنواع الشبكات انتشارًا حول العالم، وبينما تبدأ شبكات الجيل الرابع في الانتشار حول العالم، يجب أن تستمر في توقع أن غالبية المستخدمين سيدخلون إلى صفحتك عبر شبكات الجيل الثالث. ولهذا السبب، فإننا نفترض أن كل طلب من الشبكة سيستغرق في المتوسط 200 مللي ثانية.

مع وضع كل ذلك في الاعتبار، علينا تطبيق ذلك على ما سبق. فإذا نظرنا إلى تسلسل نموذجي بين المتصفح والخادم، فإن 600 مللي ثانية قد تم استغراقها فعلاً بواسطة حمل شبكة الاتصال: بحث نظام أسماء النطاقات لحل اسم المضيف (على سبيل المثال، google.com) إلى عنوان IP وجولة ذهاب وإياب الشبكة لإجراء تأكيد اتصال TCP وأخيرًا جولة ذهاب وإياب نهائية للشبكة لإرسال طلب HTTP. وبهذا لا يتبقى لنا سوى 400 مللي ثانية فقط!

تقديم تجربة العرض في أقل من ثانية واحدة

بعد طرح زمن استجابة الشبكة، يتبقى لدينا 400 مللي ثانية فقط في المهلة الخاصة بنا، ولا يزال هناك الكثير من العمل لإنجازه: يجب على الخادم عرض الاستجابة ويجب تنفيذ شفرة التطبيق من جانب العميل ويجب على المتصفح تنسيق المحتوى وعرضه. ومع وضع ذلك في الاعتبار، فإن المعايير التالية يجب أن تساعدنا في البقاء ضمن المهلة:

(1) يجب أن يعرض الخادم الاستجابة (في أقل من 200 مللي ثانية)
إن وقت استجابة الخادم هو الوقت الذي يستغرقه الخادم لعرض محتوى HTML الأولي، مما يؤثر على وقت نقل الشبكة. ونظرًا لأن لدينا وقتًا قليلاً جدًا - فإنه من المثالي أن يتم إجراء ذلك خلال 200 مللي ثانية ويفضل أن يتم في أقل من ذلك!
(2) يجب أن يتم تقليل عدد عمليات إعادة التوجيه إلى الحد الأدنى
يمكن أن تضيف عمليات إعادة توجيه HTTP جولة أو جولتي ذهاب وإياب إضافيتين إلى الشبكة (جولتا ذهاب وإياب إذا كان الأمر يتطلب بحثًا في نظام أسماء النطاقات)، مما يستهلك المئات من المللي ثوانٍ من زمن الاستجابة الإضافي على شبكات الجيل الثالث. ولهذا السبب، فإننا ننصح بشدة مشرفي المواقع بتقليل عدد عمليات إعادة التوجيه إلى الحد الأدنى، والتخلص منها بشكلٍ مثالي تمامًا - يكون ذلك مهمًا حقًا بالنسبة إلى مستندات HTML (تجنب عمليات إعادة التوجيه "m dot" قدر المستطاع).
(3) يجب أن يتم تقليل عدد جولات الذهاب والإياب حتى يتم العرض الأول إلى الحد الأدنى

نظرًا لكيفية تقدير TCP لسعة الاتصال (أي بطء بدء TCP)، فإن اتصال TCP الجديد لا يمكن أن يبدأ على الفور في استخدام المعدل الكامل المتاح لنقل البيانات بين العميل والخادم. ونظرًا لذلك، فإن الخادم يمكنه إرسال ما يصل إلى 10 حزم TCP في الاتصال الجديد (14 كيلوبايت تقريبًا) في جولة الذهاب والإياب الأولى، ثم يجب عليه انتظار قبول العميل لهذه البيانات حتى يمكنه زيادة نافذة ازدحام الشبكة والمتابعة لتقديم المزيد من البيانات.

وبسبب سلوك TCP هذا، فإنه من المهم تخصيص المحتوى التابع لك لتقليل عدد جولات الذهاب والإياب إلى الحد الأدنى المطلوب لعرض البيانات المطلوبة لإجراء العرض الأول للصفحة. يجب أن تتم ملاءمة محتوى ATF ليتم عرضه بأقل من 14 كيلوبايت بشكلٍ مثالي - وهذا يسمح للمتصفح بعرض الصفحة بعد جولة ذهاب وإياب واحدة فقط. وكذلك، فمن المهم ملاحظة أن حد الحزم البالغ عددها 10 حزم (IW10) تم تحديثه مؤخرًا ليتوافق مع معيار TCP: يجب عليك أن تتأكد من ترقية الخادم إلى أحدث إصدار للاستفادة من هذا التغيير. وإلا فإن الحد سيتراوح من 3 إلى 4 حزم على الأرجح!

(4) تجنب الحظر الخارجي لعناصر جافا سكريبت وCSS في محتوى الجزء المرئي

حتى يتمكن المتصفح من عرض إحدى الصفحات للمستخدم، يجب أن يحلل الصفحة. وإذا واجه المتصفح نصًا برمجيًا خارجيًا للتزامن أو الحظر أثناء التحليل، يجب أن يتوقف وينزِّل هذا المورد. وفي كل مرة ينفذ ذلك، فإنه يضيف جولة ذهاب وإياب، مما يتسبب في تأخير العرض الأول للصفحة.

ونتيجة لذلك، فإن عناصر جافا سكريبت وCSS المطلوبة لعرض المنطقة المرئية وعناصر جافا سكريبت وCSS المطلوبة لإضافة وظائف إضافية إلى الصفحة يجب أن يتم تحميلها بعد تقديم محتوى ATF.

(5) احتفظ بوقت لإجراء المتصفح التنسيق والعرض (200 مللي ثانية)
إن عملية تحليل شفرة HTML وCSS وتنفيذ جافا سكريبت تستغرق وقتًا وتستهلك موارد العميل! وبناءً على سرعة جهاز الجوّال ومدى تعقيد الصفحة، فإن هذه العملية يمكن أن تستغرق المئات من المللي ثوانٍ. وإننا نوصي بالاحتفاظ بمدة تبلغ 200 مللي ثانية لحمل المتصفح.
(6) تحسين وقت تنفيذ جافا سكريبت والعرض
يمكن أن تستغرق النصوص البرمجية المعقدة والشفرة غير الفعالة عشرات بل ومئات من المللي ثوانٍ لتنفيذها- استخدم أدوات مطوّري البرامج المدمجة في المتصفح لتحليل شفرتك وتحسينها. للحصول على مقدمة رائعة، اطلع على دورة تدريبية تفاعلية على أدوات مطوّري البرامج في Chrome‏.

الأسئلة الشائعة

كيف تؤثر شبكات الجيل الرابع على معايير الجوّال أعلاه؟
إن أزمنة استجابة جولات الذهاب والإياب الأقل تُعد أحد التحسينات الأساسية في شبكات الجيل الرابع. ويساعد ذلك بشكلٍ كبير من خلال تقليل زمن الحمل الإجمالي للشبكة، والذي يكون في الوقت الحالي أكبر من 50% من المهلة التي تبلغ ثانية واحدة على شبكات الجيل الثالث. ومع ذلك، فإن الجيل الثالث هو أكثر أنواع الشبكات انتشارًا حول العالم، وسيكون كذلك لعدة أعوام تالية - فيجب عليك تحسين الصفحات مع وضع مستخدمي شبكات الجيل الثالث في الاعتبار.
أستخدم مكتبة جافا سكريبت، مثل JQuery، فهل هناك أية نصائح؟
يتم استخدام العديد من مكتبات جافا سكريبت، مثل JQuery في تحسين الصفحة لإضافة نسبة تفاعل وحركة وغير ذلك من التأثيرات. ومع ذلك، فإن العديد من هذه السلوكيات يمكن أن تتم إضافته بشكلٍ آمن بعد أن يتم عرض محتوى ATF. يمكنك فحص حركة التنفيذ وتحميل محتوى جافا سكريبت هذا حتى بعد أن يتم تحميل الصفحة.
أستخدم إطار عمل جافا سكريبت لتكوين الصفحة، فهل هناك أية نصائح؟
إذا تم تكوين محتوى الصفحة باستخدام جافا سكريبت من طرف العميل، فسيتعين عليك فحص عملية تضمين وحدات جافا سكريبت ذات صلة لتجنب المزيد من جولات الشبكة ذهابًا وإيابًا. وبالمثل، يمكن أن يؤدي تحسين العرض على الجهاز الخادم إلى تحسن كبير في أداء تحميل الصفحة للمرة الأولى: لعرض نماذج جافا سكريبت على الخادم، وتضمين النتائج في HTML واستخدام النمذجة من طرف العميل بمجرد تحميل التطبيق.
كيف سيساعد بروتوكول SPDY وHTTP 2.0؟
يهدف كل من بروتوكول SPDY وHTTP 2.0 إلى تقليل زمن استجابة عمليات تحميل الصفحات من خلال استخدام اتصال TCP المضمّن بشكلٍ أكثر كفاءة (تعدد الأقسام، ضغط الرأس، تحديد الأولوية). بالإضافة إلى ذلك، فإن الإرسال التلقائي للخادم يمكنه أن يساعد بشكلٍ أكبر في تحسين الأداء من خلال التخلص من زمن الاستجابة الإضافي للشبكة. وإننا ننصحك بالتقصي بشأن إضافة دعم SPDY على خوادمك والتبديل إلى HTTP 2.0 فور أن يكون المعيار جاهزًا.
كيف يمكنني تحديد عناصر CSS الحرجة على صفحتي؟
في أدوات مطوّري برامج Chrome، افتح لوحة التدقيقات وشغّل تقرير "أداء صفحة الويب" في التقرير الذي تم إنشاؤه، وابحث عن إزالة قواعد CSS غير المستخدمة. أو استخدم أية أداة أو نص برمجي تابع لجهة خارجية لتحديد محددات CSS التي تم تطبيقها على كل صفحة.
هل يمكن تنفيذ أفضل الممارسات هذه تلقائيًا؟
بكل تأكيد. هناك العديد من المنتجات التجارية ومنتجات تحسين أداء الويب مفتوحة المصدر (WPO) التي يمكن أن تساعدك في استيفاء بعض أو جميع المعايير الواردة أعلاه. للتعرف على الحلول مفتوحة المصدر، اطلع على أدوات تحسين سرعة الصفحة.
كيف يمكنني ضبط الخادم لاستيفاء هذه المعايير؟
تأكد أولاً أن الخادم يعمل بأحدث إصدار من نظام التشغيل. وللاستفادة من حجم نافذة ازدحام TCP الأولي المتزايد (IW10)، ستحتاج إلى الإصدار 2.6.39 من Linux kernel والإصدارات الأحدث. وبالنسبة إلى أنظمة التشغيل الأخرى، راجع الوثائق.
لتحسين زمن استجابة الخادم، ضع علامة على شفرتك أو استخدم أحد التطبيقات للمراقبة والحل لتحديد الأزمة - على سبيل المثال، وقت تشغيل البرمجة النصية، استدعاءات قواعد البيانات، طلبات RPC، العرض، وما إلى ذلك. فإن الهدف هو عرض استجابة HTML خلال 200 مللي ثانية.
ماذا بشأن سياسة أمان المحتوى؟
إذا كنت تستخدم CSP، فإنك قد تحتاج إلى تحديث سياستك الافتراضية.
أولاً، يجب تجنب تضمين سمات CSS في عناصر HTML (على سبيل المثال، &lt p style=...&gt) قدر الإمكان، نظرًا لأنها تؤدي في بعض الأحيان إلى تكرار غير مطلوب للشفرة، كما يتم حظرها افتراضيًا بواسطة CSP (يتم تعطيلها عبر "تضمين غير آمن" في "style-src"). وفي حالة تمكين CSP، سيتم حظر جميع علامات النصوص البرمجية المضمّنة افتراضيًا. وإذا كان لديك عناصر جافا سكريبت مضمّنة، فإنك ستحتاج إلى تحديث سياسة CSP إما لاستخدام تجزئات النصوص البرمجية أو النصوص البرمجية الاعتباطية أو استخدام "تضمين غير آمن" لتمكين جميع عمليات تضمين النصوص البرمجية المراد تنفيذها. وإذا كانت لديك أنماط تضمين، فستحتاج إلى تحديث سياسة CSP إما لاستخدام تجزئات النصوص البرمجية أو النصوص البرمجية الاعتباطية أو استخدام "تضمين غير آمن" لتمكين جميع عمليات حظر أنماط التضمين المراد معالجتها.

هل لديك المزيد من الأسئلة؟ الرجاء عدم التردد في طرح أسئلتك وتقديم تعليقاتك في مجموعة المناقشة التابعة لنا على pagespeed-insights-discuss.