استراتيجيات نمو الناشرين خلال موسم الانتخابات | ندوة عبر الإنترنت
استراتيجيات نمو الناشرين خلال موسم الانتخابات | ندوة عبر الإنترنت
في نهاية هذه الوحدة، يجب أن يكون لديك فهم واضح للمكونات المختلفة التي تساهم في تجربة الصفحة، ولماذا هي مهمة، وكيف يمكن تحسين كل منها لتحسين تجربة المستخدم لموقعك وتحسين محركات البحث.
مدة الفيديو
17:09
أجب عن الاختبار
قم بإجراء اختبار الوحدة الحالي
مواد
قوالب جاهزة للاستخدام
موارد
التقارير والموارد
2.3.1 ما هي تجربة الصفحة؟
تجربة الصفحة هي مجموعة من الإشارات - بما في ذلك مؤشرات الويب الأساسية (CWVs)، والتوافق مع الأجهزة المحمولة، وبروتوكول HTTPS، وإرشادات الإعلانات البينية المتطفلة - التي تستخدمها جوجل لاستقراء تجربة المستخدم على موقع الويب.
تجربة الصفحة هي تقييم لأداء الموقع وليس لمحتواه. ورغم أن جوجل لا تزال تعطي الأولوية لمدى ملاءمة المحتوى عند الإجابة على استفسارات المستخدمين، إلا أن تجربة الصفحة تُعدّ عاملاً حاسماً عندما تقدم عدة مواقع مستوى تغطية مماثلاً.
إشارات تجربة الصفحات الأربع هي:
تقيس مؤشرات تجربة المستخدم (CWVs) تجربة المستخدم من خلال التركيز على سرعة تحميل الصفحة، واستجابتها لإدخالات المستخدم، بالإضافة إلى ثباتها البصري. وهناك ثلاثة معايير لذلك:
أدخل تحديث جوجل في أبريل 2015 مقياس التوافق مع الأجهزة المحمولة، والذي يعزز ترتيب الصفحات المتوافقة مع الأجهزة المحمولة في نتائج البحث الخاصة بالأجهزة المحمولة.
في الواقع، ستعطي جوجل الأولوية للمواقع التي تضمن سهولة قراءة محتواها على الأجهزة المحمولة - مما يعني عدم الحاجة إلى التكبير، وعدم وجود تباعد كبير بين عناصر اللمس مثل أزرار تسجيل الدخول، وعدم وجود تمرير أفقي، وتجنب المحتوى غير القابل للتشغيل.
ينطبق التحديث على الصفحات الفردية، وليس على مواقع الويب بأكملها، كما أنه لا يؤثر على المحتوى الذي يتم عرضه على متصفحات سطح المكتب/الكمبيوتر المحمول.
HTTPS، أو بروتوكول نقل النص التشعبي الآمن، هو نسخة آمنة من بروتوكول الاتصال عبر الإنترنت HTTP.
يشكل بروتوكول HTTPS، أو HTTP، الجزء الأول من كل عنوان URL يُعرف باسم "المخطط". ويأتي هذا قبل اسم النطاق، وهو الجزء من عنوان URL المعروف باسم "السلطة".
الفرق بين HTTPS وHTTP هو أن الأول آمن بينما الثاني ليس كذلك. وهذا يعني عمليًا أن المستخدمين الذين يسجلون الدخول إلى موقع ما عبر اتصال HTTP يرسلون بياناتهم الشخصية كنص عادي غير مشفر.
يؤمّن بروتوكول HTTPS هذا الاتصال، ما يعني أن أي بيانات تُرسل بين متصفح المستخدم وخادم الموقع الإلكتروني تُشفّر أثناء نقلها. تحتاج المواقع التي ترغب في اتصالات آمنة إلى شهادة SSL، والتي يتحقق منها متصفح المستخدم ويؤكد صحتها.
الإعلانات البينية هي شكل إعلاني مخصص للهواتف المحمولة فقط، وتظهر فقط في الفواصل الطبيعية في المحتوى - مثل عندما ينتقل المستخدم من مقال إلى آخر - وتغطي الشاشة في هذه العملية.
تُعتبر الإعلانات البينية متطفلة عندما تحجب أو تحجب جزئياً رؤية المستخدم للمحتوى. وتندرج مربعات الحوار على مواقع الويب الخاصة بالهواتف المحمولة التي تتصرف بشكل مماثل ضمن هذه الفئة أيضاً.
تميل أقوى مهارات معظم الناشرين إلى أن تكون إنشاء المحتوى ونشره وتسويقه، مما يترك مجالاً ضئيلاً لفهم وتحسين ركائز تجربة الصفحة المختلفة.
إن محدودية الموارد تعني أن الناشرين سيجدون صعوبة في تبرير الوقت والمال اللازمين للتعمق في الجوانب التقنية لصفحات الويب الفردية، ناهيك عن موقع ويب كامل.
حتى لو تمكن الناشرون من تخصيص الوقت لمعالجة المشكلة، كما رأينا أعلاه، فإن تجربة الصفحة هي قضية متعددة الأوجه تتطلب نهجًا شاملاً لتحقيق مكاسب أداء ذات مغزى.
إن معرفة أي من إشارات تجربة الصفحة الأربع التي يجب البدء في العمل عليها قد يكون أمراً صعباً بحد ذاته.
تُعد تجربة الصفحة مهمة للغاية بالنسبة لتحسين محركات البحث للناشرين، حيث أن المحتوى الرائع لا يكفي لضمان الحصول على أعلى مرتبة في نتائج البحث.
لا تزال جوجل تُولي أهمية قصوى لأفضل المعلومات، ما يعني أن المحتوى الفريد أو الأخبار الحصرية ستحقق أداءً جيدًا حتى لو كانت تجربة المستخدم على الصفحة دون المستوى المطلوب . مع ذلك، في حال وجود العديد من الناشرين الذين يقدمون تغطية ممتازة للموضوع، تصبح تجربة المستخدم على الصفحة عاملًا حاسمًا يؤثر على ترتيب نتائج البحث.
لكل ركن من أركان تجربة الصفحة الأربعة تأثير مختلف على تحسين محركات البحث للموقع الإلكتروني. ويأتي التأثير الأسرع من التركيز على عناصر تجربة المستخدم، مما يُترجم إلى موقع إلكتروني يُحمّل بشكل أسرع.
أظهرت العديد من الدراسات أنه كلما طالت مدة تحميل موقع الويب، كلما فقد الجمهور اهتمامه بشكل أسرع وارتفع معدل الارتداد.
على سبيل المثال، وجدت دراسة أجرتها جوجل عام 2018 أن احتمالية الارتداد قفزت بنسبة 32٪ عندما ارتفعت أوقات تحميل الصفحة من ثانية واحدة إلى 3 ثوانٍ.
أظهرت دراسة أخرى أجرتها جوجل عام 2020 أن المواقع الإخبارية التي اجتازت اختبار CWV شهدت انخفاضًا بنسبة 22% في معدل التخلي عن الموقع مقارنةً بالمواقع التي لم تجتزه. في الوقت نفسه، حسّن موقع ياهو! اليابان من درجة CLS الخاصة به بمقدار 0.2 وشهد زيادة بنسبة 15.1% في عدد مشاهدات الصفحات لكل جلسة، وزيادة بنسبة 13.3% في مدة الجلسة.
على الرغم من أن جوجل صرحت صراحة بأنها لا تستخدم معدلات الارتداد كإشارة للتصنيف ، إلا أن ارتفاع معدل الارتداد يشير إلى عوامل تهتم بها جوجل - وهي سرعة تحميل الصفحة، واستجابتها، واستقرارها البصري.
يحتاج الناشرون الذين يستهدفون جمهور الأجهزة المحمولة إلى التأكد من أن مواقعهم الإلكترونية تُظهر إشارات ملائمة للأجهزة المحمولة، بحيث يمكن لكل من جوجل وبينج رصدها. إذ يُعطي كلا محركي البحث الأولوية للمواقع الإلكترونية الملائمة عند عرض نتائج البحث لمستخدمي الأجهزة المحمولة.
مقارنةً بتأثيرات CWV وملاءمة الموقع للأجهزة المحمولة، سيكون لتطبيق بروتوكول HTTPS تأثير أقل بكثير على تحسين محركات البحث للناشر. أعلنت جوجل في عام 2014 أنها ستستخدمه كعامل تصنيف، وبدأت في تصنيف جميع مواقع HTTP على أنها "غير آمنة" في متصفح كروم عام 2018. ومع ذلك، تكمن الفائدة الأكبر هنا في تعزيز أمان البيانات، خاصةً إذا كان نموذج عملك يعتمد على عائدات الاشتراكات.
في الوقت نفسه، يمكن للإعلانات البينية المتطفلة أو مربعات الحوار أن تحد من قدرة برامج زحف الويب على الزحف إلى الصفحة وفهرستها، مما يمنع محركات البحث من تصنيفها، ناهيك عن ظهورها في أعلى نتائج البحث.
تبدأ الخطوة الأولى نحو تحسين تجربة الصفحة بتقييم فعالية موقعك الإلكتروني الحالية.
هناك مجموعة واسعة من الأدوات التابعة للطرف الأول والثالث لتحقيق ذلك، ولكن في هذا الدليل، سنلقي نظرة على أدوات الطرف الأول من جوجل.
نعلم الآن أن عدد الزيارات عبر الويب (CWV) عامل مهم في ترتيب نتائج البحث. ولكن كيف يتم قياسه؟ يوضح الجدول أدناه المعايير التي ينبغي أن تقع ضمنها أعداد الزيارات المثلى عبر الويب للحصول على أفضل تجربة تصفح.
الآن وقد عرفنا ما نحتاج إلى قياسه وبأي قدر، يمكننا أن ننظر في كيفية قياس تجربة الصفحة.
فيما يلي قائمة ببعض الطرق الأكثر استخداماً.
الخيار الأول المتاح للناشرين هو الأكثر تحديًا من الناحية التقنية، وهو ليس خيارًا نوصي حتى بالتفكير فيه إلا إذا كان لديك مطور جيد للمساعدة في تنفيذه.
نتحدث هنا عن جمع بيانات المستخدمين من موقعك، وهي عملية تُعرف باسم مراقبة تجربة المستخدم الحقيقية (RUM)، ثم تحليل النتائج باستخدام Google Analytics 4 (GA4). لدى جوجل أدوات أخرى، مثل PageSpeed Insights (PSI)، التي تستخدم عينات البيانات لتقييم موقعك. ولكن إذا كان الهدف هو الحصول على صورة شاملة لتجربة المستخدم على موقعك، فأنت بحاجة إلى بيانات حقيقية مُجمّعة من موقعك.
ننصح باستخدام GA4 لهذه المهمة لسبب بسيط وهو أن جوجل تعتزم البدء في "إيقاف" الجيل السابق من جوجل أناليتكس، وهو Universal Analytics (UA)، اعتبارًا من منتصف عام 2023.
بصفتك ناشرًا، كان من المفترض أن تكون قد أنشأت حسابًا على Google Analytics 4 تحسبًا للانتقال. إذا لم تفعل ذلك، فيُرجى اتباع إرشادات Google حول كيفية إنشاء الحساب لأول مرة أو كيفية إضافته إلى موقع مُفعّل عليه Google Analytics 4 .
بعد إتمام ذلك، تتمثل الخطوة التالية في ربط مستودع بيانات BigQuery من Google بـ GA4 من خلال لوحة تحكم Analytics. سيُمكّنك ربط BigQuery من الاستعلام عن بياناتك باستخدام لغة SQL. إليك دليلًا حول كيفية ربط النظامين .
بعد إتمام هذه الخطوات، يمكننا الآن إضافة مكتبة مؤشرات أداء الويب إلى موقعك.
المكتبة، وهي مكتبة جافا سكريبت معيارية صغيرة للغاية لجمع البيانات، متاحة على GitHub.
يمكن تثبيت المكتبة إما من مستودع npm مفتوح المصدر عبر الإنترنت عن طريق تشغيل الأمر "npm install web-vitals" في موجه الأوامر أو عبر<script> tags on a content distribution network (CDN).
إليك مثال على هذا النوع من النصوص البرمجية:
بمجرد تثبيت مكتبة web-vitals، يمكن بعد ذلك إرسال بيانات المستخدم إلى Google Tag Manager (GTM)، باستخدام علامة قالب مخصصة موصى بها من Google قام Simo Ahava بإنشائها وصيانتها.
بمجرد تثبيت العلامة، يمكن لمقاييس CWV وبيانات الإسناد المرتبطة بها إرسالها إلى GA4.
بعد إعداد التحليلات لتتبع بيانات Google Tag Manager، ستتمكن من رؤية بيانات الأحداث في واجهة BigQuery. ويمكن الاستعلام عن هذه البيانات على النحو التالي:
بمجرد استلام نتيجة الاستعلام، يجب أن يبدو التقرير كالتالي:
يجب أن نؤكد مجدداً أن هذا حلٌّ للمطورين، وهو في الواقع أكثر تعقيداً بكثير مما يبدو. مع ذلك، فإن اعتماد هذا الحل سيمنحك قراءةً دقيقةً لأداء موقعك الإلكتروني.
للحصول على شرح أكثر تفصيلاً لهذه العملية، راجع دليل جوجل لعرض ملفات CWV في GA4 .
على الرغم من أن هذا هو النهج الأكثر دقة لرصد حوادث حرائق الغابات، إلا أن هناك طرقًا أبسط لمعالجة هذه المشكلة.
ومع ذلك، فإن PSI أقل دقة من استخدام نهج GA/RUM، ومع ذلك، يتم الاستشهاد به بشكل متكرر كواحد من أهم الأدوات التي يمكن استخدامها لقياس CWVs - وذلك بفضل سهولة استخدام الأداة.
على الرغم من أن PSI قد تستخدم فقط عينات من تجارب المستخدمين الحقيقية المأخوذة من تقرير تجربة مستخدم Chrome (CrUX) خلال فترة الـ 28 يومًا الماضية، إلا أنها توفر واجهة مستخدم بسيطة وسهلة الفهم . وهذا يعني أن تفسير البيانات عملية أبسط بكثير.
كما ترون في المثال أدناه، فإن فحص موقع فوربس يوفر على الفور ثروة من المعلومات حول موقع الناشر على سطح المكتب وموقع الهاتف المحمول.
يستخدم نظام PSI الفئات الخضراء والصفراء والحمراء المذكورة أعلاه عند تحديد درجات الأداء الجيدة، والتي تحتاج إلى تحسين، والضعيفة.
إن نهج أخذ العينات الخاص بـ CrUX يعني أنه في حين أن التقييم المذكور أعلاه لموقع Forbes قد أخذ في الاعتبار بعض تجارب المستخدمين الواقعية للموقع، إلا أنه لا يمكنه أخذ جميع بيانات مستخدمي الموقع في الاعتبار.
يصبح أسلوب أخذ العينات هذا إشكاليًا بالنسبة للمواقع الأصغر حجمًا، والتي لن يظهر الكثير منها في بيانات CrUX الميدانية.
مع ذلك، لا يزال بإمكان PSI تقديم تشخيص افتراضي لموقعك الإلكتروني باستخدام بيانات المختبر المستخرجة من أداة Lighthouse مفتوحة المصدر . انظر المثال أدناه:
تكمن مشكلة هذا الأسلوب في أن Lighthouse يجمع بياناته باستخدام إعدادات مُسبقة للأجهزة والشبكات، والتي لا تعكس إعدادات المستخدمين. وهذا يعني أنه بديل غير مناسب للواقع.
GSC هي أداة مصممة لتزويد الناشرين بنظرة شاملة على مشاكل CWV في مواقعهم الإلكترونية، مما يفتح الباب أمام نهج شامل لتحسين أداء الموقع.
يقوم النظام بذلك عن طريق تجميع تقارير أداء عناوين المواقع الإلكترونية بناءً على الحالة أو نوع المقياس أو التشابه الموضوعي. ولا يُحدد المشكلات في الصفحات الفردية، مما يحرم المستخدمين من فرصة تطبيق الإصلاحات على مستوى دقيق.
هنا يأتي دور PSI. مع ذلك، تجدر الإشارة إلى أن تقرير الصفحة الفردية في PSI قد يختلف اختلافًا كبيرًا عن نتائج المجموعة في GSC. ذلك لأن الصفحة الفردية ليست سوى عنصر واحد من نتائج المجموعة المجمعة في GSC.
عند تسجيل الدخول إلى لوحة تحكم GSC، سيجد المستخدمون علامة تبويب "مؤشرات أداء الويب الأساسية" على الجانب الأيسر. بالنقر على هذه العلامة، ستظهر تقارير منفصلة لمؤشرات أداء الويب الأساسية (CWV) للأجهزة المحمولة وأجهزة الكمبيوتر المكتبية لمجموعات عناوين URL.
على الرغم من وجود ثلاثة مقاييس CWV - LCP و FID و CLS - فإن عناوين URL ستحصل على درجة إجمالية بناءً على أسوأ مقياس أداء لجهاز معين، وهو ما سيؤثر أيضًا على تقارير المجموعة.
على سبيل المثال، إذا تلقى عنوان URL على الهاتف المحمول FID ضعيفًا و LCP جيدًا، فسيتم تصنيفه على أنه ضعيف على الهاتف المحمول.
مرة أخرى، من المهم التنويه إلى أن أداة فحص جوجل (GSC) ليست مصممة لإجراء إصلاحات دقيقة. مع ذلك، فهي مفيدة للغاية للناشرين الذين لديهم العديد من الصفحات المتشابهة. على سبيل المثال، قد تمتلك مواقع الأخبار تصميمًا وتخطيطًا قياسيًا نسبيًا لصفحات مقالاتها، حيث تستخدم صورة كأكبر عنصر في الجزء العلوي من الصفحة. في هذه الحالة، يمكن لأداة فحص جوجل (GSC) المساعدة بسرعة في تحديد مشاكل LCP عبر نطاق واسع من عناوين URL.
الأداة الأخيرة في مجموعة أدوات قياس أداء جوجل هي Lighthouse . تختلف هذه الأداة تمامًا عن الأدوات السابقة، إذ أنها تحاكي أداء المستخدم بناءً على مجموعة محددة من المعايير.
لا يعتمد هذا النظام على بيانات ميدانية، لذا فهو محدود الاستخدام عمليًا. فعلى سبيل المثال، تتأثر البيانات الميدانية باتصال المستخدم بالشبكة وبُعده عن خوادم الموقع، بينما يحاكي نظام Lighthouse جهازًا متوسط المدى لجمع البيانات ضمن بيئة مُتحكَّم بها.
من المهم أيضًا فهم أن نتيجة Lighthouse ليست مجرد تجميع لنتائج CWV. فهي تستثني تفاعلات المستخدم النهائي (FID)، لأن بيانات المختبر بطبيعتها لا تتضمن تفاعلات المستخدم النهائي، بينما تضيف إجمالي وقت الحظر (TBT) ومؤشر السرعة (SI) ووقت التفاعل (TTI). بالنسبة لمن يرغبون في محاكاة تجربة تفاعل المستخدم النهائي في المختبر، يمكن استخدام إجمالي وقت الحظر (TBT) كبديل.
مع ذلك، لا ننصح باستخدام Lighthouse كمصدر أساسي للقياس. بل ينبغي استخدامه كأداة مساعدة إلى جانب PSI للمساعدة في استكشاف أخطاء صفحات معينة وإصلاحها.
يمكن للناشرين الذين يرغبون في استخدام Lighthouse في اختباراتهم القيام بذلك عبر أدوات مطوري Chrome المدمجة مباشرة في متصفح Chrome، أو عبر إضافة للمتصفح المذكور أو على الرابط web.dev/measure .
ستقوم شركة Lighthouse بمراجعة صفحة الويب الخاصة بك وتقديم درجات من 100 في أربعة مجالات:
هذا ما يبدو عليه الأمر عندما نضع صفحتنا الرئيسية من خلال خيار web.dev.
يختلف تصميم مواقع الويب على الأجهزة المحمولة عن تصميم مواقع الويب التقليدية على أجهزة الكمبيوتر المكتبية من حيث أن الأجهزة المحمولة تحتوي على شاشات أصغر، وتستخدم بشكل عام أجهزة أقل قوة، وتعتمد فقط على مدخلات اللمس.
تُعطي المواقع المتوافقة مع الأجهزة المحمولة الأولوية لتجربة المستخدم من خلال اتباع مجموعة من أفضل الممارسات التي سنتناولها لاحقًا. حاليًا، أفضل طريقة للتحقق من توافق صفحاتك مع الأجهزة المحمولة هي استخدام أداة اختبار التوافق مع الأجهزة المحمولة .
يؤدي إدخال عنوان URL لصفحة ويب متوافقة مع الأجهزة المحمولة إلى ظهور النتيجة التالية:
ستظهر الصفحات التي تفشل في هذا الاختبار مع عدد من خيارات الإصلاح التي يمكن اتباعها. سنتناول هذه الخيارات لاحقًا.
يعد التحقق مما إذا كان موقعك الإلكتروني يتمتع باتصال آمن عملية بسيطة للغاية، تتضمن فتح متصفحك والنظر إلى الرمز الموجود على يسار عنوان URL في شريط العناوين.
في متصفح كروم، يتم الإشارة إلى الاتصال الآمن عبر رمز قفل مغلق كما يلي:
سيظهر رمز المعلومات على الاتصال غير الآمن كما يلي:
إن تحديد ما إذا كانت إعلاناتك البينية متطفلة أم لا ليس بالأمر البسيط مثل إدخال موقعك الإلكتروني في أداة عبر الإنترنت وانتظار ظهور علامة صح أو خطأ.
يتطلب ذلك دراسة الإعلانات البينية ومربعات الحوار على موقعك الإلكتروني وتحديد ما إذا كانت تستوفي معايير معينة.
فكّر في هذه المعايير على أنها أسئلة، على سبيل المثال:
إذا أجبت بنعم على أي من هذه الأسئلة، فمن المحتمل أن يكون ذلك مؤشراً على أن الإعلان أو مربع الحوار متطفل.
الآن وقد أصبح لدينا فهم راسخ للمكونات المختلفة للمكونات الأربعة التي تؤثر على تجربة الصفحة، بالإضافة إلى وسائل مراقبة أدائها، فلننتقل إلى استكشاف كيفية تحسين إشارات تصنيف مواقعنا الإلكترونية
سنلقي نظرة على CWVs أولاً، لأن تصحيح أخطاء LCP وCLS وFID وتحسينها سيكون له التأثير الأكبر على قدرتك على المنافسة على المراكز الأولى في تصنيفات SERP المتنازع عليها بشدة.
في حين أن سهولة الاستخدام على الأجهزة المحمولة مهمة للغاية للمواقع التي تستهدف مستخدمي الأجهزة المحمولة، فإن تحسين CWVs سيعزز أداء الصفحة للمواقع بغض النظر عما إذا كانت تُعرض على الأجهزة المحمولة أو أجهزة الكمبيوتر المكتبية.
تم تأجيل معالجة بروتوكول HTTPS والإعلانات البينية المتطفلة إلى النهاية لأنها أسهل وأقل جدوى.
هناك عدد من الخيارات عندما يتعلق الأمر بتحسين أداء CWV، والتي قمنا بتقسيمها حسب ترتيب الأهمية التي نعتقد أنها تستحقها.
إن تحسين مؤشرات الأداء الرئيسية لأي صفحة ويب هو عبارة عن مجموعة من الإجراءات، ومن المهم معرفة من أين تبدأ لتحقيق أقصى استفادة من مواردك.
كما ذكرنا سابقًا، فإن أكبر عنصر محتوى مرئي (LCP) يقيس المدة التي يستغرقها تحميل أكبر نص أو صورة مرئية أعلى الصفحة بالكامل.
استخدم أداة PSI لتحديد محتوى الصفحة الذي يُفعّل اختبار LCP، وذلك بالانتقال إلى قسم التشخيص في التقرير والنقر على "أكبر عنصر عرض محتوى". إليك ما رأيناه على الصفحة الرئيسية لـ SODP:
يمكن عادةً حصر درجة LCP المنخفضة إما في أوقات استجابة الخادم البطيئة، أو JavaScript وCSS التي تعيق العرض، أو أوقات تحميل الموارد أو العرض من جانب العميل، أو حتى مزيج من كل هذه العوامل الأربعة.
تتضمن عملية تحسين صفحتك في الواقع تحسين أربعة أجزاء فرعية مختلفة من عملية تحميل LCP:
يجب تحسين جميع هذه الخطوات لتحقيق تحسن في نتيجة اختبار LCP. مع ذلك، لا يعني هذا أن جميع الأجزاء الفرعية متساوية في الأهمية.
اقترحت جوجل أن يتم تقسيم إجمالي وقت LCP بحيث يمثل كل من TTFB ووقت تحميل الموارد حوالي 40٪، بينما يجب أن يمثل كل من تحميل الموارد وتأخيرات عرض العناصر أقل من 10٪.
من الناحية المثالية، يجب أن تكون هاتان المرحلتان الأخيرتان أقرب ما يمكن إلى الصفر وأن تحظى بالأولوية على المرحلتين الأخريين.
هناك طريقتان للمساعدة في تقليل تأخير تحميل الموارد إلى أدنى حد ممكن:
ننصحك بالتشاور مع مطور موقعك الإلكتروني قبل البدء في هذه الإصلاحات. فهذه عملية خلفية تتطلب خبرةً واسعةً لضمان عملها بالشكل المطلوب.
اكتشاف الموارد
يأتي كل متصفح ويب مزودًا بماسح ضوئي للتحميل المسبق، وتتمثل مهمته في مساعدة محلل HTML الأساسي للمتصفح في اكتشاف محتوى الصفحة.
بينما يقوم محلل HTML الأساسي بمعالجة الترميز الخام حتى يصطدم بمورد مانع - مثل نص برمجي لا يحتوي على async أو defer ، فإن الماسح الضوئي للتحميل المسبق يشغل دورًا أكثر تخمينًا.
بمعنى آخر، يبحث ماسح التحميل المسبق عن الموارد لجلبها قبل أن يصل إليها محلل HTML الرئيسي، ويستمر في العمل حتى لو كان المحلل متوقفًا. يمكن استخدام ماسح التحميل المسبق للعثور على LCP وتحميله في أقرب وقت ممكن من طلب الصفحة الأولي.
لضمان إمكانية اكتشاف مورد LCP من مصدر HTML، يتوفر للمطورين خيارات خاصة بالأصول.
على سبيل المثال، إذا كان عنصر LCP عبارة عن صورة، فيجب تضمين سمات src أو srcset في ترميز HTML أو في رأس الصفحة. وأخيرًا، يمكن تحميل الخطوط بطريقة مماثلة عبر .
تجدر الإشارة إلى أن استخدام التحميل المسبق لتقليل أوقات تحميل LCP قد يُسبب مشاكل جديدة، مثل تقليل غير المتزامنة . لذا ننصح بالتحدث مع مطور البرامج لديك حول هذا الأمر.
للحصول على مزيد من المعلومات حول هذا الموضوع، اطلع على تحليلات جوجل المتعمقة لكل من تحسين LCP وماسح التحميل المسبق .
أولوية الموارد
تحاول المتصفحات تنزيل ملفات CSS والخطوط والبرامج النصية والصور وعناصر iframe بأفضل طريقة ممكنة من خلال تحديد أولوياتها. تتميز المتصفحات بقدرتها الفائقة على تحديد أولويات هذه العناصر، ولكن هذا لا يعني أنها خالية من العيوب.
لتحسين ترتيب أولويات الأصول، يمكن للمطورين استخدام تلميحات الأولوية المستندة إلى لغة الترميز لإعلام المتصفحات بالأصول ذات الأولوية الأعلى. على سبيل المثال، يمكن للمطور استخدام جافا سكريبت وواجهة برمجة تطبيقات Fetch لوضع علامة على صورة LCP باستخدام fetchpriority="high" ، مما يُسرّع من أداء هذا المقياس المحدد في CWV.
تجدر الإشارة إلى أن تلميحات الأولوية تعمل فقط على المتصفحات المستندة إلى Chromium ، مثل Google Chrome و Microsoft Edge.
قد يكون مطور البرامج الخاص بك قد قام بالفعل بتطبيق التحميل الكسول للأصول الموجودة أسفل الجزء المرئي من الصفحة، تحقق معه للتأكد، ولكن من المفيد أيضًا أن تطلب منه استخدام تلميحات الأولوية للأصول الموجودة أعلى الجزء المرئي من الصفحة.
للحصول على مزيد من المعلومات حول التحميل ذي الأولوية، نوصي بشدة بالاطلاع على دليل جوجل لتحميل الموارد .
تمكن فريق تطوير عملاق البحث من استخدام تلميحات الأولوية لتحسين LCP من 2.6 ثانية إلى 1.9 ثانية في اختبار لـ Google Flights.
يتتبع FID المدة التي يستغرقها متصفح المستخدم لبدء معالجة الإدخال الأول - باستثناء التمرير والتكبير.
يهدف هذا المقياس إلى رصد تجربة المستخدم في التفاعل مع صفحة الويب، ما يعني أن صفحات الويب البطيئة ستحصل على تقييم منخفض. والهدف هو الحفاظ على زمن استجابة الصفحة (FID) أقل من 100 مللي ثانية.
يعود ضعف الاستجابة بشكل عام إلى الاستخدام المفرط لـ JavaScript، والذي تقوم المتصفحات بمعالجته قبل المدخلات.
يُطلق على الشيفرة التي تستهلك تركيز المتصفح لمدة 50 مللي ثانية أو أكثر اسم "المهمة الطويلة"، وتُعتبر مؤشراً على تضخم حجم جافا سكريبت. ويمكن معالجة بطء الأداء وتحسين معدل نقل البيانات (FID) بتقسيم هذه المهام الطويلة إلى أجزاء أصغر من الشيفرة.
لكن هذا ليس المجال الوحيد الذي يستحق النقاش مع مطوّر موقعك. من المهم مناقشة كيفية تأثير تنفيذ البرامج النصية، سواءً من طرف أول أو من طرف ثالث، على إبطاء موقعك. يمكن للتحميل التدريجي للبرامج والميزات أن يساعد في معالجة مشاكل التحميل التدريجي، بينما يساعد التحميل عند الطلب وتحديد أولويات التحميل في معالجة مشاكل التحميل عند الطلب.
خيار آخر هو استخدام عمال الويب لتشغيل جافا سكريبت في الخلفية ومنع متصفحك من التباطؤ في معالجة البرامج النصية.
يُعدّ مؤشر CLS مقياسًا لاستقرار موقعك الإلكتروني بصريًا. فإذا فقد زوارك مكانهم في الصفحة بسبب تغيير موضع المحتوى لإفساح المجال لتحميل الإعلانات والصور، فسيحصل موقعك على تقييم منخفض.
كلما قلّ ارتداد تصميم صفحتك، كان تقييم CLS الخاص بك أفضل. تُقيّم جوجل المواقع الإلكترونية بناءً على مدى التشويش داخل نافذة العرض، بالإضافة إلى مدى قفز العناصر بالنسبة لها.
إن تقليل التغييرات غير المتوقعة في تصميم الصفحة يتمحور أساساً حول تخصيص مساحة للإعلانات والصور ومقاطع الفيديو المضمنة.
هل تتذكر src أو srcset التي نظرنا إليها عند الحديث عن اكتشاف الموارد؟ حسنًا، هذا أمر محوري إلى حد كبير لتحسين درجات CLS.
بالنسبة للصور الثابتة، قم بتعيين العرض والارتفاع باستخدام src لإخبار المتصفح بحجز مساحة للأصول التي يتم تحميلها ببطء، وبالتالي تجنب تغييرات التخطيط.
انظر إلى مثال الكود من جوجل أدناه:
تتطلب الصور المتجاوبة استخدام خاصية srcset لتحديد أقصى عرض وارتفاع يمكن للمتصفح تحديدهما. تأكد من استخدام صور بنفس نسبة العرض إلى الارتفاع.
إليك مثال آخر:
عند التعامل مع الإعلانات، هناك بعض الخطوات التي يمكنك اتخاذها:
يُنصح أيضًا بحجز مساحة ثابتة إذا كنت تنوي تنفيذ الإطارات المضمنة والمحتوى المضمن والمحتوى الديناميكي، مثل عبارات الحث على اتخاذ إجراء (CTAs).
عندما تقوم المتصفحات بتنزيل وعرض خطوط الويب، قد يحدث إما وميض نص غير منسق (FOUT) أو وميض نص غير مرئي (FOIT). يحدث الأول عند استبدال الخط الاحتياطي بخط جديد، بينما ينتج الثاني عن تأخير في عرض الخط الجديد.
يمكنك حل كلتا المشكلتين باستخدام لإخبار الماسح الضوئي للتحميل المسبق بتحميل خطوط الويب في وقت أقرب. الخطوط المحملة مسبقًا لديها فرصة أكبر للظهور عند أول عملية رسم.
توجد حلول أخرى في دليل استكشاف أخطاء CLS بالإضافة إلى شرحه المتعمق لاستخدام التحميل المسبق لمنع FOIT .
إذا كنت تبحث عن تحسينات في سرعة الموقع وما زلت تستخدم خيار استضافة تقليدي بخادم واحد، فربما حان الوقت للتفكير في التحول إلى شبكة توصيل المحتوى (CDN).
تتألف شبكة توصيل المحتوى (CDN) من شبكة خوادم موزعة في مراكز بيانات مختلفة حول العالم، تقوم بتوزيع محتوى المواقع الإلكترونية لتحسين الأداء. وبينما يقدم كل من خيار الخادم الواحد - المعروف أيضًا بالاستضافة المحلية - وشبكة توصيل المحتوى (CDN) محتوى المواقع الإلكترونية للزوار، فإن شبكة توصيل المحتوى (CDN) وحدها هي التي تأخذ الموقع الجغرافي للمستخدم في الاعتبار، ثم تختار أقرب خادم لتقليل أوقات التحميل.
لكن الموقع الجغرافي ليس الميزة الوحيدة، حيث أن شبكات توصيل المحتوى (CDNs) مجهزة بشكل أفضل لإدارة الارتفاعات المفاجئة في حركة المرور بالإضافة إلى موارد الخادم الجذر مثل النطاق الترددي.
في نهاية المطاف، تُرسل تجربة تصفح أسرع إشارة قوية إلى جوجل. ورغم أن كلاود فلير تُعدّ من أشهر مزودي خدمات شبكات توصيل المحتوى (CDN) في السوق، إلا أن هناك عددًا من المنافسين الجادين الذين يجب أخذهم في الاعتبار .
بغض النظر عن مزود خدمة الاستضافة الذي تستخدمه، فإن خوادمهم ستكون مقيدة بقيود معينة على مستوى الأجهزة.
تحتوي الخوادم في الغالب على نفس المكونات الأساسية التي تُمكّن حاسوبك المحمول أو المكتبي من العمل، وهي وحدة المعالجة المركزية (CPU) وذاكرة الوصول العشوائي (RAM)، والتي تتولى جميع مهام حسابك. يمكنك استخدام لوحة تحكم مزود خدمة الاستضافة للتحقق من وحدة المعالجة المركزية وذاكرة الوصول العشوائي المثبتة على خادمك، بل ويمكنك أيضًا طلب موارد إضافية لتحسين أداء موقعك.
إذا كنت تفحص معالج خادمك، فمن المهم أن تفهم أن نواة واحدة فقط تُستخدم لتلبية طلب الزائر لصفحة ويب. هذا يعني أن سرعات الساعة الأسرع للنواة الواحدة تُعدّ ميزة. أما المعالجات متعددة النوى، فهي قادرة على معالجة عدة صفحات وخدمات خادم أخرى.
هذا طلب آخر لمطور البرامج لديك.
راجع قاعدة بياناتك بشكل دوري للتأكد من عدم تراكم الصور والملفات غير المستخدمة فيها. سيؤدي حذف الملفات غير الضرورية إلى تنظيمها، مما يُسرّع من متوسط أوقات تحميل الصفحات.
استخدام صور كبيرة الحجم قد يُبطئ موقعك الإلكتروني. ما هو الحجم المناسب؟ أي صورة تتجاوز 1 ميجابايت تُعتبر كبيرة جدًا.
وكما نعلم بالفعل، فإن أوقات التحميل الأبطأ ستؤدي إلى ارتفاع معدلات الارتداد وإرسال إشارات غير مرغوب فيها إلى جوجل.
بالنسبة لمستخدمي ووردبريس، تتوفر العديد من إضافات تحسين الصور التي تُسهّل هذه المهمة اليدوية الشاقة. علاوة على ذلك، يأتي العديد منها مزودًا بميزات أخرى مثل التحميل الكسول وتغيير الحجم التلقائي.
يعتمد مدى ملاءمة الموقع للأجهزة المحمولة على ما إذا كنت قد قمت بتبسيط موقعك وتحسينه لتجربة تصفح مريحة عبر الأجهزة المحمولة.
يتفاعل مستخدمو الهواتف المحمولة مع الصفحات بطريقة مختلفة، ولديهم صبر أقل بكثير على بطء التحميل وصعوبة تصفح المواقع. إذا لم يجتز موقعك اختبار التوافق مع الهواتف المحمولة المذكور أعلاه، أو حتى إذا اجتازه ولكنك مهتم بتحسينه أكثر، فلنستعرض بعضًا من أفضل الممارسات.
ينبغي أن يكون هذا هو الشغل الشاغل لكل ناشر. ومن الطرق البسيطة لتحسين سهولة الاستخدام أن تطرح على نفسك أسئلة مثل:
ستساهم هذه الإجابات بشكل كبير في تحديد المشكلات التي يواجهها المستخدمون. على سبيل المثال، لا تريد أن تُجبر المستخدمين على تعديل شاشاتهم لعرض المحتوى. يمكنك أن ترى ما نعنيه في المثال أدناه.
لتحسين محتواك للأجهزة المحمولة، هناك ثلاثة خيارات تطوير:
لقد رتبناها حسب سهولة التنفيذ ونوصي باعتماد تصميم متجاوب، لأنه الأقل تطلبًا من بين الخيارات الثلاثة.
يقوم المطورون ببساطة بإضافة meta name=”viewport” إلى الكود الحالي لصفحة الويب
الميزة هنا هي أنك تحتاج فقط إلى صيانة موقع ويب واحد، يمكن عرضه بسهولة على أي نوع من أنواع الشاشات.
على النقيض من ذلك، تعمل التصاميم الديناميكية عن طريق عرض أكواد HTML مختلفة بناءً على جهاز المستخدم. يجب أن تستخدم الصفحات ترويسة HTTP Vary لمنع عرض الكود الخاطئ على الجهاز الخاطئ.
أخيرًا، هناك النطاقات الفرعية المخصصة للأجهزة المحمولة، والتي لا ننصح بها نظرًا لحجم الموارد المطلوبة لتنفيذها بفعالية. تُعدّ النطاقات الفرعية المخصصة للأجهزة المحمولة مواقع منفصلة تمامًا، ما يستلزم احتياجات استضافة منفصلة. ولضمان فهم برامج الزحف للعلاقة بين النطاق الرئيسي والنطاق الفرعي، ستحتاج إلى إضافة rel="canonical" .
لأن التصميمات المتجاوبة هي الخيار الأبسط، فهي التي نوصي بها للناشرين. للاطلاع على المزيد حول التصميمات المتجاوبة، راجع دليل التنفيذ من جوجل .
إليكم قائمة سريعة بالاعتبارات التقنية لأي تصميم:
تُعد هذه الخطوة الأخيرة أبسط طريقة لتحسين تجربة الصفحة، ولكنها تُساهم بشكل كبير في تحسين راحة بال المستخدم.
يُساهم التحوّل إلى بروتوكول HTTPS في حماية معلومات المستخدمين وتشفيرها، كما يُساعد في منع هجمات الوسيط (MitM). إضافةً إلى ذلك، يُزيل وجود شهادة SSL تحذيرات المتصفح بشأن نقص الأمان.
ينبغي أن يكون مزود خدمة الاستضافة لديك قادرًا على توفير أمان HTTPS، وإذا لم يكن كذلك، فقد يكون من المفيد التفكير في الانتقال إلى مزود يوفر هذه الخدمة. يوجد بالفعل العديد من مزودي خدمات الاستضافة البارزين الذين يقدمون HTTPS مجانًا . علاوة على ذلك، يستخدم مزودو خدمات الاستضافة الذين يقدمون شهادات SSL خدماتهم الخاصة بدلًا من الخدمات الخارجية، مما يجعل عملية التفعيل أسهل وأسرع.
إذا كنت ترغب في طلب وتثبيت شهادة SSL من جهات إصدار الشهادات (CAs)، فهناك أربع خطوات عليك اتباعها. وهي:
من المهم التأكد عند نقل موقعك إلى بروتوكول HTTPS من أن ذلك لا يؤثر على استراتيجية عائدات الإعلانات الخاصة بك. تكمن المشكلة في أن بروتوكول HTTPلن يعمل على موقع يستخدم بروتوكول HTTPS.
ننصح بالتشاور مع شركائك في مجال تكنولوجيا الإعلانات قبل إجراء أي تغييرات على موقعك.
للمزيد من التفاصيل ، اطلع على دليل جوجل الشامل حول هذا الموضوع.
تؤدي الإعلانات البينية المتطفلة وصناديق الحوار إلى صعوبة فهم محركات البحث لمحتوى صفحة الويب، مما قد يؤدي إلى تقويض أداء نتائج البحث.
سيكون من الرائع لو وُجدت طريقة لإنشاء إعلانات بينية لا تُؤثر سلبًا على تجربة المستخدم، ولكن هذا هو الهدف الأساسي من هذه الإعلانات. فهي تستحوذ على الشاشة بأكملها عند فواصل المحتوى لجذب انتباه المستخدم.
لذا، من الأفضل للناشرين استخدام إعلانات البانر بدلاً من الإعلانات البينية، لأنها لا تشغل سوى مساحة صغيرة من الشاشة. من الأفضل تجنب إحباط المستخدمين بدلاً من المخاطرة بتجاهل إعلانات البانر.
يمكن للناشرين استخدام اللافتات المدعومة من المتصفح أو لافتات HTML البسيطة التي ترتبط بصفحة الوجهة الخاصة بدعوة المستخدم لاتخاذ إجراء.
يمكن استخدام مربعات الحوار أيضًا في الحملات الترويجية، ولكن يمكن تصميمها بحيث لا تُسبب إزعاجًا. يجب التأكد من قدرة المستخدمين على الوصول إلى المحتوى دون انقطاع.
لا توجد طرق مختصرة لتحسين تجربة المستخدم على صفحتك، ومن الضروري معالجة النقاط المذكورة أعلاه. مع ذلك، تجدر الإشارة إلى أنه على الرغم من أن ووردبريس هي منصة النشر الأكثر شيوعًا في العالم، إلا أن هذا لا يعني بالضرورة أنها أفضل نظام إدارة محتوى لتحسين أداء صفحات الويب.
يُظهر الاطلاع على تقرير تكنولوجيا CWVs أن حوالي 29% فقط من مواقع WordPress لديها CWVs جيدة، بينما تحصل 41% من مواقع Wix على علامة الصح الخضراء.
يجدر التفكير ملياً فيما إذا كان التحول إلى نظام إدارة محتوى متخصص يمكن أن يحسن من أداء CWVs بشكل أصلي.
هناك الكثير مما يجب القيام به لتحسين تجربة المستخدم على صفحات الويب، وقد تبدو البداية صعبة بعض الشيء. مع ذلك، من المهم أن نتذكر أن الهدف هو إنجاز المهمة خطوة بخطوة.
ليس من الضروري السعي للحصول على تقييم "جيد" في جميع مقاييس CWV لتحسين ترتيب موقعك في نتائج محركات البحث. بل على العكس، قد يكون وضع أهداف طموحة كهذه مُحبطاً، بل قد يأتي بنتائج عكسية.
بدلاً من ذلك، ركّز على تحقيق مكاسب صغيرة في تقييمات الأداء، واهتم بمعالجة النتائج "الضعيفة" دون القلق المفرط بشأن مستوى "بحاجة إلى تحسين". يمكن معالجة هذا المستوى لاحقاً، عندما يتوفر لديك المزيد من الوقت والموارد لتخصيصها لهذه العملية.
لقد تحدثنا بالفعل عن تحسن درجة CLS لموقع Yahoo! JAPAN، فلنلق نظرة على موقعين آخرين يمكننا أن نتعلم منهما بعض الدروس.
صحيفة "ذا إيكونوميك تايمز" الهندية اليومية، التي تخدم أكثر من 45 مليون مستخدم نشط شهريًا، درجة CLS الخاصة بها بنسبة 250٪ من 0.25 إلى 0.09 ووقت LCP بنسبة 80٪ من 4.5 ثانية إلى 2.5 ثانية.
بين أكتوبر 2020 ويوليو 2021، خفّضت دار النشر درجات LCP في النطاق "الضعيف" بنسبة 33%، بينما انخفضت قيم CLS في النطاق "الضعيف" بنسبة 65%. وقد مكّنت هذه التحسينات صحيفة "إيكونوميك تايمز" من تجاوز عتبات CWV في جميع مواقعها الأصلية مع خفض معدلات الارتداد الإجمالية بنسبة 43%.
حقق الناشر ذلك بعدة طرق، أولها تحديد أولويات تنزيل الأصول باستخدام تلميحات الأولوية. كما عالج المهام الطويلة، بتقسيم أجزاء من التعليمات البرمجية لضمان تحميل الموارد الضرورية لعرض الصفحة الرئيسية أولاً.
موقع الأخبار البريطاني درجة CLS الخاصة به من 0.25 إلى 0.1 ، بينما زاد عدد عناوين URL التي حصلت على درجة النجاح من 57٪ إلى 72٪.
استخدمت صحيفة التلغراف أدوات مطوري Chrome لتحديد الحالات الفردية لتغيير التخطيط.
قبل ذلك، استخدم WebPageTest للعثور على مكان حدوث تغيير التخطيط في الجدول الزمني.
وبعد الحصول على هذه البيانات، بدأ الفريق بالتركيز على تقليل تغييرات التخطيط من خلال معالجة هذه المجالات
بدأت صحيفة التلغراف بتخصيص مساحة للإعلانات، واستخدمت الحجم الأكثر شيوعًا لتحديد أبعادها. وقد ساعد ذلك أيضًا في منع الإعلانات من الانكماش عند عرضها على الأجهزة اللوحية.
عالج الفريق مشكلة مماثلة تتعلق بالصور المضمنة في أعلى المقالات، والتي لم تكن لها أبعاد محددة.
أجرت صحيفة التلغراف تعديلات أخرى، مثل نقل العنوان إلى أعلى الترميز واستخدام عناصر نائبة لمقاطع الفيديو المضمنة، لكنها وصفت العملية في النهاية بأنها "سهلة للغاية" مع أنها لا تزال ذات تأثير كبير.
تحسين تجربة المستخدم على الصفحة ليس بالأمر الصعب. قِسْ أركان تجربة المستخدم الأربعة، ثم حدد الموارد التي يمكنك تخصيصها لتحسين نتائجك.
إذا كنت ناشرًا صغيرًا، فسيكون تحقيق التوازن في الموارد أمرًا بالغ الأهمية، ونوصي بتحديد الفرص السهلة نسبيًا لمشروعك الأول.
بالنظر إلى نهج صحيفة التلغراف، نجد أنها ركزت على جانب واحد من جوانب القيم المشتركة بين الكومنولث بدلاً من الجوانب الثلاثة جميعها، وحققت تحسينات ملحوظة. أما صحيفة إيكونوميك تايمز، فقد ركزت على جانبين من الجوانب الثلاثة وحققت نتائج مبهرة.
