زيادة سرعة الموقع الإلكتروني مع قوقل google

كيفية تحديد وتقليل الموارد التي تمنع عرض الصفحة السريع في 2022

هل تؤدي موارد حظر العرض إلى إبطاء صفحاتك وتؤثر على تجربة المستخدم؟  

تعرف على كيفية تحديد هذه المشكلات وحلها.

يعد تحديد الموارد المسؤولة عن حظر عرض الصفحة وتقليله نقطة تحسين مهمة يمكنها زيادة سرعة الصفحة أو تقليلها.

يمكن أن يكون هذا مهمًا جدًا بحيث يمكنك كسب المزيد من تجربة صفحة موقعك (ورضا المستخدم).

زيادة سرعة الموقع 

في عام 2021 ، بلغ متوسط ​​وقت المشاهدة لصفحة ويب متنقلة بالكامل 22 ثانية ، مقابل  2018 15 ثانية ، من الواضح أن هذا أطول بكثير من الثواني 2-3 التي أوصت بهاجوجل Google ، كما أنها أعلى بكثير من ما كانت عليه من قبل.

ما الذي يمكن أن يتسبب في مشكلات موارد العرض المحظورة؟

ما الذي يدفع الزيادة في سرعة عرض الصفحة الإجمالية؟

هناك اتجاه مثير للاهتمام يجب ملاحظته وهو الزيادة في استخدام خطوط الجهات الخارجية على خطوط النظام.  

يميل استخدام خطوط الجهات الخارجية كموارد إلى التداخل مع معالجة الصفحة وعرضها.

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

قد يؤثر هذا التقديم عبر الصناعة على وقت التسليم هذا ،  بالطبع ، ليس هذا هو السبب الوحيد لمنع مشاكل تعيين الموارد.

بالإضافة إلى ذلك ، فإن خدمات قوقل Google الخاصة ، مثل Google Analytics أو التتبع باستخدام بكسلات Facebook التابعة لجهات خارجية ، تميل إلى أن يكون لها تأثير كبير على وقت المشاهدة.

لا يجب أن تكون الرغبة في الاعتماد على هذه التقنيات سيئة من وجهة نظر التسويق.

ولكن من منظور مورد حظر العرض ، يمكن أن يؤدي ذلك إلى زيادة كبيرة في أوقات تحميل الصفحة وكيفية عرض جوجل Google (والمستخدمين) لصفحاتك.

الحل المثالي هو ضمان تحميل صفحتك بأسرع ما يمكن لتفاعل المستخدم.

قد يكون السبب أيضًا هو ممارسات تطوير الويب السيئة التي يستخدمها مطورو الويب اليوم.

في كلتا الحالتين ، يحتاج كل مشروع موقع ويب إلى اعتبار ذلك جزءًا من مراجعة Core Web Vitals.

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

بدلاً من ذلك ، إنها التجربة العامة للصفحة كما تم قياسها بواسطة Google Page Experience Framework أو "أساسيات الويب الأساسية".

لهذا السبب تريد العمل على تحسين سرعة الصفحة وتحسين مسارات العرض الحرجة عبر DOM أو نموذج كائن المستند.

     ما هو مسار التوريد الحرج في الصفحة؟

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

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

يعني تحسين مسار العرض الحرج أنه يمكنك زيادة أداء العرض إلى أقصى حد على جميع الأجهزة.

اعلانات قوقل 2022 google 

يتم تحقيق ذلك من خلال تحسين مسارات العرض الحرجة للوصول إلى التغطية الأولى في أسرع وقت ممكن.

بشكل أساسي ، أنت تقلل مقدار الوقت الذي يقضيه المستخدم في التحديق في شاشة فارغة لعرض المحتوى المرئي بأسرع ما يمكن (انظر 0.0 ثانية أدناه).   

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

     كيف تعمل مسارات العرض الحرجة؟

مسار العرض الحرج هو تسلسل الخطوات التي يتخذها المتصفح لعرض الصفحة عن طريق تحويل HTML و CSS وجافا سكريبت إلى وحدات بكسل فعلية على الشاشة.

بشكل أساسي ، يجب أن يطلب المستعرض جميع ملفات HTML و CSS وجلبها وتحليلها (بالإضافة إلى بعض الأعمال الإضافية) لبدء عرض أي محتوى مرئي.

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

فيما يلي مثال على كيفية إدراك المستخدم لتحميل الصفحة بناءً على مراحل مختلفة من عملية تحميل الصفحة:    

لذلك ، يمكن أن يؤدي تحسين مسار العرض الحرج إلى تحسين تجربة الصفحة الإجمالية ، والتي يمكن أن تساعد في تحسين الأداء كما تم قياسه بواسطة Core Web Vitals.

     كيف يمكنني تحسين مسار العرض الحرج؟

لتحسين مسار العرض الحرج ، تحتاج إلى ملف تعريف يعرض حظر الموارد.

قد يتم حظر أي مورد يحظر العرض أثناء العرض الأولي للصفحة ، مما قد يؤثر سلبًا على نتائج Web Essentials.

     وهذا يشمل تحسين العملية:

تقليل عدد موارد سلسلة التوريد الهامة، يمكن القيام بذلك عن طريق تأخير إمداد جميع الموارد المحتملة بحظر.

حدد أولويات الوسائط المهمة وقم بتنزيلها أعلى الصفحة في أسرع وقت ممكن.

ضغط حجم ملف أي موارد هامة متبقية.

من خلال القيام بذلك ، يمكنك تحسين "أساسيات الويب" والطريقة التي يتم بها عرض صفحاتك للمستخدمين بالفعل.

 لماذا يجب عليك الاهتمام ؟     

تُظهر بيانات سلوك مستخدم Google أن معظم المستخدمين يغادرون المواقع البطيئة بعد حوالي 3 ثوانٍ.

بالإضافة إلى البحث الذي يُظهر أن تقليل أوقات تحميل الصفحة وتجربة الصفحة المحسّنة يمكن أن يترجما إلى مستوى أعلى من رضا المستخدم ، هناك العديد من تحديثات Google الرئيسية التي قد ترغب في التحضير لها.

عند إصدار هذه التحديثات ، سيكون تحديد موارد الحظر وتحسينها عاملاً أساسيًا للبقاء في الطليعة.

ستطبق Google صفحات سطح المكتب في عام 2022 ، والتي سيتم طرحها في فبراير وتنتهي في مارس.

وفقًا لـ Google ، سيتم الآن ربط نفس مؤشرات الويب الأساسية الثلاثة (LCP و FID و CLS) والحدود الخاصة بكل منها بترتيب سطح المكتب.

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

تفسيرهم لهذه العوامل التي يعتبرونها كما يلي:

 أقصى مدة للحدث: وقت استجابة رد الفعل يساوي أطول مدة حدث فردي لأي حدث في مجموعة التفاعل.

إجمالي مدة الحادث: وقت الاستجابة هو مجموع كل مدد الحادث ، باستثناء أي اضطرابات.

مع العديد من الدراسات التي تربط التحسينات في أوقات تحميل الصفحة بالتحسينات الهائلة في مؤشرات الأداء الرئيسية (معدل التحويل ، معدل الارتداد ، الوقت المستغرق في الموقع) ، أصبح تحسين وقت استجابة الموقع هدفًا تجاريًا رئيسيًا للعديد من المؤسسات.

يتمتع محترفو تحسين محركات البحث (SEO) بمكانة فريدة لقيادة هذه الجهود ، حيث يتمثل دورهم في الغالب في سد الفجوة بين أهداف العمل وأولويات مطوري الويب.

تساعد هذه القدرة على مراجعة المواقع وتحليل النتائج وتحديد مجالات التحسين على العمل مع المطورين لتحسين الأداء وإيصال النتائج إلى أصحاب المصلحة الرئيسيين.

أهداف تحسين الموارد المحظورة من قوقل google 

الهدف الرئيسي من تحسين مسار العرض الحرج هو ضمان تحميل الموارد اللازمة لتقديم المحتوى الهام في أعلى الصفحة في أسرع وقت ممكن.

يجب عدم إعطاء الأولوية لجميع الموارد التي تمنع العرض ، بالإضافة إلى جميع الموارد التي تمنع عرض الصفحة بسرعة.

ستساهم كل نقطة من نقاط التحسين في التحسين العام لسرعة صفحتك وقابليتها للاستخدام ونتائج Core Web Vitals.

لماذا  CSS تمنع تحويل HTML إلى شيء يمكن للمتصفح استخدامه: DOM.  ملفات CSS هي نفسها.  يجب تحويل هذا إلى CSSOM.

من خلال تحسين ملفات CSS في DOM و CSSOM ، يمكنك المساعدة في تقليل الوقت الذي يستغرقه المتصفح لعرض كل شيء ، الأمر الذي يقطع شوطًا طويلاً نحو تجربة صفحة أفضل. العرض؟

أكدت جوجل Google مرارًا وتكرارًا أن العلامات ليست بالضرورة مهمة للترتيب.

ولكن بالرغم من ذلك  ، بناءً على الاستعلام ، قد يكون من المفيد الحصول على ميزة التصنيف من خلال تحسين سرعة الصفحة.

بالنسبة لملفات CSS ، فهي تعتبر موارد تمنع العرض.

     لماذا ا؟

على الرغم من أن هذا يحدث في جزء من الثانية أو أقل (معظم الوقت) ، لا يبدأ المتصفح في عرض محتوى الصفحة حتى يتم طلب جميع أنماط CSS وجلبها ومعالجتها.

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

هذا يعني أن صفحتك ستكون في الغالب كذلك بسبب عدم وجود مصطلح أفضل.

ستؤدي إزالة أنماط CSS إلى جعل الصفحة غير قابلة للاستخدام عمليًا.

يحتاج الكثير من المحتوى إلى إعادة تصميمه ليكون أقل جاذبية للمستخدمين.

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

بهذه الطريقة يمكنه البدء في بناء CSS DOM الخاص به (أو شجرة CCSOM).

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

قد يختلف أيضًا اعتمادًا على حجم وعدد ملفات CSS هذه.

تُظهر شجرة العرض أدناه مثالاً لمتصفح يعرض جميع الملفات التي تحتوي على CSS في DOM:    

يوجد أيضًا مثال لتسلسل عرض الصفحة أدناه ، حيث يتم تحميل جميع الملفات في العملية ، من إنشاء DOM إلى اللوحة النهائية وتكوين الصفحة ، والمعروف باسم مسار العرض الحرج.

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

توصيات جوجل Google الرسمية في تحديثها الجديد هي

"CSS هو مورد يحظر العرض. قدمه للعميل في أقرب وقت ممكن لتقليل وقت العرض الأول."

يجب تحويل HTML إلى شيء يمكن للمتصفح استخدامه: DOM.  ملفات CSS هي نفسها.  يجب تحويلها إلى CSSOM.

من خلال تحسين ملفات CSS في DOM و CSSOM ، يمكنك المساعدة في تقليل الوقت الذي يستغرقه المتصفح لعرض كل شيء ، الأمر الذي يقطع شوطًا طويلاً نحو تجربة صفحة أفضل.   

  لماذا تمنع JavaScript  العرض المحسّن؟

هل تعلم أن تحميل JavaScript ليس ضروريًا دائمًا؟

عند استخدام JavaScript ، فإن تحميل كافة موارد JavaScript وتحليلها ليس خطوة ضرورية لعرض الصفحة بأكملها.

لذلك فهو ليس من الناحية الفنية جزءًا ضروريًا من عرض الصفحة.

مع ذلك ، هناك تحذير واحد: يتم ترميز معظم مواقع الويب الحديثة بطريقة تتطلب JavaScript (مثل إطار عمل Bootstrap JS) لجعل الصفحة تعمل.

ومع ذلك ، إذا اكتشف المستعرض ملف JavaScript قبل عرض الصفحة لأول مرة ، فقد تنقطع عملية العرض لاحقًا وبعد تنفيذ ملف JavaScript بالكامل.

يمكنك تحديده بطريقة أخرى عن طريق وضع ملف JavaScript جانبًا لاستخدامه لاحقًا.

مثال على ذلك هو تضمين وظيفة JS في HTML ، مثل التنبيهات.  قد يتسبب هذا في توقف الصفحة عن العرض حتى بعد تشغيل كود JavaScript هذا.

تمتلك JavaScript القدرة الحصرية على تعديل أنماط HTML و CSS ، لذلك من المنطقي.

نظرًا لأن JavaScript قد يعدل محتوى الصفحة بالكامل ، فقد يتأخر تحليل وتنفيذ JavaScript.  يتم تمكين هذا التأخير افتراضيًا في المتصفحات - لموقف "فقط في حالة".

     موصى به رسميًا من قِبل قوقل Google:

"يحظر JavaScript أيضًا إنشاء DOM وتأخيرات عرض الصفحة. لضمان الأداء الأمثل  قم بإزالة JavaScript غير الضرورية من مسار العرض الحرج."

     كيفية اختيار إظهار الموارد المحظورة

تحديد مسارات التوريد الحرجة وتحليل الموارد الهامة:

قم بإجراء الاختبار باستخدام webpagetest.org وانقر على صورة "Cascade".

ركز على جميع الأصول المطلوبة والمحملة حتى ظهور شريط "بدء العرض" الأخضر.

تحليل المناظر الطبيعية للشلال ؛ ابحث عن ملفات CSS أو JavaScript الضرورية قبل سطر "بدء العرض" الأخضر ، لكنها ليست مهمة لتحميل المحتوى في أعلى الصفحة.   

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

في المثال الخاص بي ، لاحظت بعض طلبات JavaScript التي يمكن أن تكون حرجة.

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

      طرق أخرى لتحسين هذه الموارد.

     بالنسبة لملفات JavaScript غير المرغوب فيها ، قد تفكر في تجميع الملفات وتأجيلها من خلال تضمينها في أسفل الصفحة.

     بالنسبة لملفات CSS غير الضرورية ، يمكنك أيضًا تقليل عدد ملفات CSS لديك عن طريق تجميعها وضغطها في ملف واحد.

يمكن أن يؤدي تحسين طرق التشفير أيضًا إلى زيادة سرعة تحميل الملفات وتقليل تأثيرها على سرعة عرض الصفحة.

طرق لتقليل عدد العناصر المحظورة على الصفحة

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

هناك العديد من الحلول لهذه المشكلة ، من تأجيل ملفات JavaScript و CSS إلى تقليل تأثير CSS.

أحد الحلول الممكنة هو إضافة CSS بدون استيراد القواعد.

لا تستخدم قواعد الاستيراد لإضافة CSS.

من وجهة نظر الأداء ، بينما يبدو أن الاستيراد يبقي ملفات HTML نظيفة ، يمكن أن يؤدي إلى مشاكل في الأداء.

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

    أهم النصائح لتقليل حظر تجربة الصفحة 

•  ضغط الصور والتحسين
•    تحسين تدفق الفيديو
•    تمكين التخزين المؤقت
•    تصغير CSS و JS.
•    إزالة البرامج النصية التي تمنع العرض
•    استخدام البرامج النصية بشكل غير متزامن
•    استفد من التخزين المؤقت للمتصفح
•    استخدام موارد التحميل المسبق والجلب المسبق.