تكتيكات نمو الناشر لموسم الانتخابات | ندوة عبر الإنترنت
تكتيكات نمو الناشر لموسم الانتخابات | ندوة عبر الإنترنت
في نهاية هذه الوحدة، يجب أن يكون لديك فهم واضح للمكونات المختلفة التي تساهم في تجربة الصفحة، وسبب أهميتها وكيف يمكن تحسين كل منها لتحسين تجربة المستخدم لموقعك وتحسين محركات البحث (SEO) الخاصة به.
مدة الفيديو
17:09
الإجابة على الاختبار
خذ مسابقة الوحدة النمطية الحالية
مواد
قوالب جاهزة للاستخدام
موارد
التقارير والموارد
2.3.1 ما هي تجربة الصفحة؟
تجربة الصفحة عبارة عن مجموعة من الإشارات - بما في ذلك مؤشرات أداء الويب الأساسية (CWVs)، وملاءمة الهاتف المحمول، وHTTPS، والإرشادات البينية المتطفلة - التي تستخدمها Google لاستقراء تجربة المستخدم على موقع الويب.
تجربة الصفحة هي تقييم لأداء الموقع وليس محتواه. في حين أن Google لا يزال يعطي الأولوية لأهمية المحتوى عند الرد على استفسارات المستخدم، فإن تجربة الصفحة تعد بمثابة عامل فاصل فعال عندما تقدم العديد من المواقع مستوى مماثل من التغطية.
إشارات تجربة الصفحة الأربع هي:
تقيس CWV تجربة المستخدم من خلال التركيز على مدى سرعة تحميل الصفحة واستجابتها لإدخال المستخدم وكذلك استقرارها البصري. هناك ثلاثة مقاييس لهذا:
قدم تحديث Google April 2015 مقياس Search Giant الصديق للهاتف المحمول ، والذي يعزز تصنيف الصفحات الصديقة للهواتف المحمولة على SERPs المحمولة.
على نحو فعال ، ستعمل Google على إعطاء الأولوية لتلك المواقع التي تضمن أن محتوىها يمكن قراءته بسهولة على الأجهزة المحمولة - مما يعني أنه لا توجد حاجة للتكبير ، ولا يتم تجنب أهداف اللمس مثل أزرار تسجيل الدخول بالقرب من بعضها البعض ، ولا يوجد أي تمرير أفقي ومحتوى غير قابل للعب.
ينطبق التحديث على الصفحات الفردية ، وليس مواقع الويب بأكملها ، ولا تؤثر أيضًا على المحتوى الذي يتم عرضه على متصفحات سطح المكتب/الكمبيوتر المحمول.
HTTPS ، أو بروتوكول نقل النص التشعبي آمن ، هو نسخة آمنة من بروتوكول اتصالات الإنترنت HTTP.
يشكل HTTPS ، أو HTTP ، الجزء الأول من كل عنوان URL يعرف باسم "المخطط". يأتي هذا قبل اسم المجال ، وهو الجزء من عنوان URL المعروف باسم "السلطة".
الفرق بين HTTPS و HTTP هو أن الأول آمن بينما هذا الأخير ليس كذلك. ما يعنيه هذا في الممارسة العملية هو أن المستخدمين الذين يقومون بتسجيل الدخول إلى موقع عبر اتصال HTTP يرسلون تفاصيلهم الشخصية في نص عادي غير مشفر.
تقوم HTTPS بتأمين هذا الاتصال ، مما يعني أن أي بيانات يتم إرسالها بين متصفح المستخدم وخادم موقع الويب مشفر على طول الطريق. تحتاج المواقع التي ترغب في اتصالات آمنة إلى شهادة SSL ، والتي يتحقق وتكحف متصفح المستخدم.
الخلاليات هي تنسيق إعلان للجوال فقط لا يظهر إلا في فترات راحة طبيعية في المحتوى - مثل عندما ينتقل المستخدم من مقال إلى آخر - يغطي الشاشة في هذه العملية.
يُنظر إلى الخلاليات على أنها تدخلية عندما تمنع أو تحجب جزئيًا عرض المستخدمين للمحتوى. مربعات الحوار على مواقع الويب المحمولة التي تتصرف بالمثل تندرج أيضًا تحت هذه الفئة.
تميل أقوى مجموعات المهارات لمعظم الناشرين إلى إنشاء المحتوى والنشر والتسويق ، مما يترك مجالًا صغيرًا لفهم وأحسّن أعمدة تجربة الصفحات المختلفة.
الموارد المحدودة تعني أن الناشرين سوف يكافحون لتبرير الوقت والمال اللازمين للحفر في الواجهة الخلفية لصفحات الويب الفردية ، ناهيك عن موقع ويب بأكمله.
حتى إذا كان الناشرون قادرين على تكريس الوقت لمعالجة المشكلة ، كما نرى من أعلاه ، فإن تجربة الصفحة هي مشكلة متعددة الأوجه تتطلب اتباع نهج كلي لتحقيق مكاسب ذات معنى.
يمكن أن تكون معرفة أي من إشارات تجربة الصفحات الأربع لبدء العمل عليها بمثابة صداع في حد ذاته.
تعتبر تجربة الصفحة مهمة بشكل لا يصدق بالنسبة إلى SEO الناشر ، حيث أن المحتوى الرائع لا يكفي لضمان أعلى الموضع داخل SERPs.
لا تزال Google تقدر أفضل المعلومات قبل أي شيء آخر ، مما يعني أن المحتوى الفريد أو الأخبار "Scoops" ستعمل بشكل جيد حتى لو كانت تجربة الصفحة "Subpar" . ومع ذلك ، في الحالات التي يوفر فيها العديد من الناشرين تغطية موضعية ممتازة ، تصبح تجربة الصفحة عاملاً حاسماً مهمًا يؤثر على تصنيفات SERP.
كل من أعمدة تجربة الصفحات الأربع لها تأثير مختلف على كبار المسئولين الاقتصاديين لموقع الويب. يأتي التأثير الأكثر إلحاحًا من التركيز على CWVs ، والذي سيترجم إلى موقع ويب يتم تحميله بشكل أسرع.
لقد أظهرت العديد من الدراسات أنه كلما طال انتظار موقع الويب ، كلما كان الجمهور أسرع في الاهتمام وكلما زاد معدل الارتداد.
على سبيل المثال ، وجدت دراسة Google من عام 2018 أن احتمال الارتداد قفزت بنسبة 32 ٪ عندما ارتفعت أوقات تحميل الصفحة من ثانية إلى 3 ثوانٍ.
وجدت دراسة أخرى من Google من عام 2020 أن مواقع الأخبار التي اجتازت اختبار CWV شهدت معدل التخلي عن 22 ٪ من تلك التي فشلت. ياهو! وفي الوقت نفسه ، قامت اليابان بتحسين درجة CLS بمقدار 0.2 وشهدت ارتفاعًا بنسبة 15.1 ٪ في وجهات نظر الصفحة لكل جلسة وزيادة 13.3 ٪ في مدة الجلسة.
بينما قال Google صراحةً أنه لا يستخدم معدلات الارتداد كإشارة ترتيب ، فإن معدل الارتداد المرتفع يتحدث إلى العوامل التي تهتم بها Google - وهي سرعة تحميل الصفحة والاستجابة والاستقرار البصري.
يحتاج الناشرون الذين يستهدفون الجماهير على الأجهزة المحمولة إلى التأكد من أن موقعهم يرسل إشارات صديقة للهواتف المحمولة التي يمكن لكل من Google و Bing التقاطها. ستقوم كل من محركات البحث بإعطاء الأولوية لمواقع الويب الودية عند تقديم نتائج البحث لمستخدمي الهاتف المحمول.
بالمقارنة مع CWVs ودورة الهاتف المحمول ، سيكون لتنفيذ HTTPs تأثير أقل بكثير على كبار المسئولين الاقتصاديين للناشر. قالت Google في عام 2014 إنها ستستخدمها كإشارة تصنيف وبدأت في وضع علامة على جميع مواقع HTTP على أنها "غير آمنة" في Chrome في عام 2018. ومع ذلك ، فإن أكبر فائدة هنا هي أمن البيانات المعززة ، خاصة إذا كانت وحدة أعمالك تعتمد على إيرادات الاشتراك.
في هذه الأثناء ، يمكن أن تحد الإعلانات الخلالية المتطفلة أو مربعات الحوار من القدرة على الزحف وفهرس صفحة ، ومنع محركات البحث من أن تكون قادرة على تصنيفها ، وتركها بمفردها تتميز بنتائج البحث ..
تبدأ الخطوة الأولى نحو تحسين تجربة الصفحة بتقييم الفعالية الحالية لموقع الويب الخاص بك.
هناك مجموعة واسعة من أدوات الطرف الأول والثالث لتحقيق ذلك ، ولكن لهذا الدليل ، سننظر في أدوات الطرف الأول من Google.
نحن نعلم الآن أن CWVs عامل تصنيف مهم. ولكن كيف يتم قياسها؟ يسرد الجدول أدناه المعلمات التي يجب أن تنخفض فيها أرقام CWV المثلى للحصول على أفضل تجربة صفحة.
الآن بعد أن عرفنا ما نحتاج إلى قياسه وبموجب المبلغ ، يمكننا أن ننظر في كيفية قياس تجربة الصفحة.
فيما يلي قائمة ببعض الأساليب الأكثر شيوعًا.
الخيار الأول المفتوح للناشرين هو إلى حد بعيد الأكثر تحديًا تقنيًا وليس هناك خيار نوصي حتى بالنظر إلى ما لم يكن لديك مطور جيد للمساعدة في تنفيذه.
نحن نتحدث عن جمع بيانات المستخدم من موقعك ، وهي عملية تُعرف باسم مراقبة المستخدم الحقيقية (Rum) ، ثم تحليل النتائج في Google Analytics 4 (GA4). لدى Google أدوات أخرى ، مثل PageSpeed Insights (PSI) ، التي تستخدم أخذ عينات البيانات لتقييم موقعك. ولكن إذا كان الهدف هو الحصول على صورة كاملة من تجربة المستخدم لموقع الويب الخاص بك ، فأنت بحاجة إلى بيانات حقيقية تم جمعها من موقعك.
ننصح باستخدام GA4 لهذه المهمة لسبب بسيط هو أن Google تعتزم بدء "Sunsetting" في الجيل السابق من تحليلات Google ، Universal Analytics (UA) ، من منتصف عام 2013.
بصفتك ناشرًا ، يجب أن تكون قد قمت بالفعل بإعداد حساب GA4 تحسباً للتبديل. إذا لم تقم بذلك ، فيرجى اتباع أدلة Google حول كيفية إعدادها للمرة الأولى أو كيفية إضافتها إلى موقع يحتوي بالفعل على UA .
بمجرد الانتهاء من ذلك ، تتمثل الخطوة التالية في ربط مستودع بيانات BigQuery من Google بـ GA4 من Admintics Admin. سيسمح لك ربط BigQuery بالاستعلام عن بياناتك باستخدام SQL. إليك دليل حول كيفية ربط الاثنين .
مع هذه الخطوات خارج الطريقة التي يمكننا بها الآن إضافة مكتبة حوافز الويب إلى موقعك.
المكتبة ، وهي مكتبة JavaScript صغيرة للغاية لجمع البيانات ، متوفرة على Github.
يمكن تثبيت المكتبة إما من مستودع NPM المفتوح عبر الإنترنت عن طريق تشغيل "NPM تثبيت الحوافير على الويب" في محطة الأوامر أو عبر<script> tags on a content distribution network (CDN).
إليك مثال على هذا البرنامج النصي:
بمجرد تثبيت مكتبة الحوافير على الويب ، يمكن بعد ذلك إرسال بيانات المستخدم إلى Google Tag Manager (GTM) ، باستخدام علامة قالب مخصصة موصى بها من Google التي أنشأها Simo Ahava.
بمجرد تثبيت العلامة ، يمكن لمقاييس CWV وبيانات الإسناد المرتبطة إعادة توجيهها إلى GA4.
بمجرد إعداد Analytics لتتبع بيانات GTM ، ستتمكن من رؤية بيانات الحدث في واجهة BigQuery. يمكن بعد ذلك الاستعلام عن هذه البيانات مثل:
بمجرد إرجاع الاستعلام ، يجب أن يبدو التقرير شيئًا كهذا:
علينا حقًا أن نؤكد مرة أخرى أن هذا حل مطور وهو ، في الواقع ، أكثر تعقيدًا من هذا. ومع ذلك ، فإن تبني هذا الحل سيمنحك القراءة الأكثر دقة على أداء موقع الويب الخاص بك.
للحصول على شرح أكثر تفصيلاً لهذه العملية ، تحقق من دليل Google لعرض CWVs في GA4 .
في حين أن هذا هو النهج الأكثر دقة لمراقبة CWVs ، إلا أن هناك أساليب أبسط لمعالجة هذه المشكلة.
PSI أقل دقة من استخدام نهج GA/RUM ، ومع ذلك ، يتم الاستشهاد به في كثير من الأحيان كواحد من أهم الأدوات التي لقياس CWVs - بفضل سهولة استخدام الأداة.
على الرغم من أنه قد يستخدم فقط عينات من تجارب المستخدم الحقيقية المأخوذة من تقرير تجربة مستخدم Chrome (CRUX) خلال الفترة الـ 28 السابقة السابقة ، فإن PSI توفر واجهة المستخدم بسيطة وسهلة الفهم . هذا يعني أن تفسير البيانات هو عملية أبسط بكثير.
كما ترون في مثالنا أدناه ، يوفر فحص موقع Forbes على الفور ثروة من المعلومات في كل من سطح المكتب للناشر والموقع المحمول.
تستخدم PSI الفئات الخضراء والعنبر والأحمر من الأعلى عند تعيينهم ، وتحسين درجات التحسين وضعف الأداء.
نهج أخذ العينات من Crux أنه على الرغم من أن التقييم أعلاه لـ Forbes أخذ بعض تجارب مستخدمي العالم الحقيقي للموقع ، إلا أنه لا يمكن أن يعامل في جميع بيانات مستخدم الموقع.
يصبح نهج أخذ العينات هذا مشكلة بالنسبة للمواقع الأصغر ، والتي لن تظهر الكثير منها في بيانات حقل Crux.
ومع ذلك ، لا يزال بإمكان PSI تقديم تشخيص افتراضي لموقع الويب الخاص بك باستخدام بيانات المختبر التي تم سحبها من أداة منارة Google مفتوحة المصدر . انظر المثال أدناه:
تكمن المشكلة في هذا النهج في أن Lighthouse تجمع بياناتها باستخدام إعدادات الجهاز والشبكة المحددة مسبقًا ، والتي لن تعكس إعدادات المستخدمين الخاصة بك. هذا يعني أنه بديل فقير للشيء الحقيقي.
GSC هي أداة مصممة لتزويد الناشرين بعرض الطيور لمشكلات CWV على موقع الويب الخاص بهم ، وفتح الباب أمام نهج كلي لتحسين أداء الموقع.
يقوم بذلك عن طريق تجميع تقارير أداء عنوان URL بناءً على الحالة أو النوع المتري أو التشابه الموضعي. لا يحدد المشكلات المتعلقة بالصفحات الفردية ، مما يحرم من فرصة تنفيذ الإصلاحات على مستوى الحبيبات.
هذا هو المكان الذي يأتي فيه PSI. تجدر الإشارة إلى أن تقرير الصفحة الفردية لـ PSI قد يختلف بشكل ملحوظ عن نتائج مجموعة GSC. ذلك لأن الصفحة الفردية هي مجرد مكون واحد من نتائج المجموعة المجمعة لـ GSC.
تسجيل الدخول إلى لوحة معلومات GSC ، سيرى المستخدمون علامة التبويب Core Web Hotals على الجانب الأيسر. يعرض النقر فوق علامة التبويب هذه تقارير CWV للهاتف المحمول وسطح المكتب لمجموعات URL.
على الرغم من وجود ثلاث مقاييس CWV - LCP و FID و CLS - ستتلقى عناوين URL من الدرجة الإجمالية بناءً على أسوأ مقياس أداء لها لجهاز معين سيؤثر أيضًا على تقارير المجموعة.
على سبيل المثال ، إذا تلقى عنوان URL على الهاتف المحمول FID POR و LCP جيد ، فسيتم وصفه بأنه فقير على الهاتف المحمول.
مرة أخرى ، من المهم أن نلاحظ أن GSC ليس مخصصًا للإصلاحات الحبيبية. ومع ذلك ، من الرائع للناشرين الذين لديهم الكثير من الصفحات المماثلة. على سبيل المثال ، قد يكون لمواقع الأخبار تصميم وتخطيط قياسي نسبيًا لصفحات المقالات التي تستخدم صورة كأكبر عنصر فوق الطية. في هذه الحالة ، يمكن لـ GSC المساعدة بسرعة في تحديد مشاكل LCP عبر مجموعة من عناوين URL.
الأداة النهائية في مجموعة أدوات قياس أداء Google هي Lighthouse . تختلف هذه الأداة تمامًا عن تلك التي جاءت من قبل من قبل أنها تحاكي أداء المستخدم استنادًا إلى مجموعة ثابتة من المعلمات.
لا يستخدم بيانات الحقل وبالتالي فهو محدود من حيث الاستخدامات العملية. على سبيل المثال ، تتأثر بيانات الميدان باتصال شبكة المستخدم ومسافة خوادمها للموقع ، في حين أن Lighthouse تحاكي جهازًا متوسط المدى لجمع البيانات داخل بيئة يتم التحكم فيها.
من المهم أيضًا أن نفهم أن نقاط Lighthouse ليست مجرد دمج عشرات CWV. يستبعد FID ، نظرًا لأن بيانات المعمل بطبيعتها تستبعد تفاعلات المستخدم النهائي ، مع إضافة وقت الحظر الكلي (TBT) ، ومؤشر السرعة (SI) والوقت إلى مقاييس التفاعلية (TTI) في المزيج. بالنسبة لأولئك الذين يرغبون في محاكاة تجربة FID في المختبر ، يمكن استخدام TBT كبديل.
ومع ذلك ، فإننا نوصي بعدم استخدام Lighthouse كمورد قياس أساسي. بدلاً من ذلك ، يجب استخدامه كأداة مصاحبة إلى جانب PSI للمساعدة في استكشاف مشكلات الصفحة المحددة.
يمكن للناشرين الذين يرغبون في استخدام Lighthouse في اختباراتهم القيام بذلك عبر DevTools Chrome التي يتم خبزها مباشرة في متصفح Chrome ، أو تمديد للمتصفح المذكور أو في Web.dev/measure .
سوف تقوم Lighthouse بمراجعة صفحة الويب الخاصة بك وتقديم درجات من 100 في أربعة مجالات:
إليك ما يبدو عليه عندما نضع صفحتنا الرئيسية من خلال خيار الويب.
يختلف تصميم الويب عبر الهاتف المحمول عن تصميم مواقع سطح المكتب التقليدية في أن الأجهزة المحمولة تحتوي على شاشات أصغر ، وتتميز عمومًا بأجهزة أقل قوة وتعتمد فقط على مدخلات اللمس.
تعطي المواقع الصديقة للهاتف المحمول تجربة المستخدم من خلال اتباع مجموعة من أفضل الممارسات التي سنستكشفها بعد ذلك بقليل. في الوقت الحالي ، أفضل طريقة للتحقق مما إذا كانت صفحاتك صديقة للهاتف المحمول هي مع اختبار Google المناسب للهاتف المحمول .
إدخال عنوان URL لصفحة ويب صديقة للهاتف المحمول يرجع النتيجة التالية:
سوف تظهر الصفحات التي تفشل في هذا الاختبار بعدد من خيارات الإصلاح التي يجب متابعتها. سنصل إلى هؤلاء بعد ذلك بقليل.
إن التحقق مما إذا كان موقع الويب الخاص بك لديه اتصال آمن هو عملية بسيطة للغاية ، تتضمن فتح متصفحك والنظر إلى الرمز إلى يسار عنوان URL في شريط العناوين.
في Chrome ، سيتم الإشارة إلى اتصال آمن عبر رمز قفل مغلق مثل هذا:
سيكون للاتصال غير الآمن رمز معلومات مثل ذلك:
تحديد ما إذا كانت إعلاناتك الخلالية متطفلة أم لا ليست بسيطة مثل إدخال موقع الويب الخاص بك في أداة عبر الإنترنت وانتظار إرجاع علامة أو لا.
يتطلب دراسة مربعات الإعلانات والحوارات الخلالية على موقعك وتحديد ما إذا كانت تمرر بعض المعلمات.
فكر في هذه المعلمات كأسئلة ، على سبيل المثال:
إذا أجبت بنعم على أي من هذه الأسئلة ، فربما يكون مؤشراً على أن مربع الإعلان أو الحوار تدخلي.
الآن وبعد أن أصبح لدينا فهم قوي على المكونات المختلفة للمكونات الأربعة التي تعول على تجربة الصفحة ، وكذلك وسيلة لمراقبة أدائها ، دعنا ننتقل إلى استكشاف كيف يمكننا بالضبط تعزيز إشارات تصنيف مواقعنا
سننظر في CWVs أولاً ، حيث سيكون للتصحيح وتحسين LCP و CLS و FID التأثير الأكبر على قدرتك على التنافس على أفضل المواقع في تصنيفات SERP المتنازع عليها بشدة.
على الرغم من أن الود المتنقل مهم بشكل لا يصدق للمواقع التي تستهدف مستخدمي الأجهزة المحمولة ، فإن تحسين CWVs سيعزز أداء الصفحة للمواقع بغض النظر عما إذا كانت يتم عرضها على الأجهزة المحمولة أو سطح المكتب.
لقد تركت معالجة HTTPs والخلايا الخلالية المتطفلة حتى النهاية لأنها أسهل وأقل فوزًا مجزيًا.
هناك عدد من الخيارات عندما يتعلق الأمر بتحسين أداء CWV ، والذي قمنا بتقسيمه إلى ترتيب الأهمية التي نعتقد أنها تستحقها.
يعد تحسين الشبكات الحيوية على شبكة الإنترنت الأساسية لأي صفحة مجموعة من الإجراءات ومن المهم معرفة من أين تبدأ في زيادة مواردك إلى الحد الأقصى.
كما لاحظنا بالفعل أعلاه ، يقيس أكبر طلاء محتوى (LCP) المدة التي يستغرقها تحميل أكبر نص أو أصول صورة مرئية فوق الطية.
استخدم PSI لتحديد محتوى الصفحة الذي يؤدي إلى اختبار LCP ، من خلال التوجه إلى قسم تشخيص التقرير والنقر على "أكبر عنصر طلاء محتوى". إليك ما رأيناه من صفحة SODP الرئيسية:
عادةً ما يمكن تضييق درجة LCP الفقيرة إلى أوقات استجابة الخادم البطيئة ، مما يجعل جافا سكريبت حظر العرقلة أو CSS ، أو أوقات تحميل الموارد أو عرض من جانب العميل ، أو حتى مزيج من الأربعة.
يتضمن تحسين صفحتك بالفعل تحسين أربعة أجزاء فرعية مختلفة من عملية تحميل LCP:
يجب تحسين كل هذه الخطوات لك لرؤية تحسن في درجة LCP الخاصة بك. ومع ذلك ، فهذا لا يعني أن جميع الأجزاء الفرعية مهمة بنفس القدر.
اقترحت Google أن يتم تقسيم إجمالي وقت LCP مع TTFB ووقت تحميل الموارد لكل ما يقرب من 40 ٪ في حين أن تحميل الموارد والعناصر يجب أن يكون كل حساب أقل من 10 ٪.
من الناحية المثالية ، يجب أن يكون هذان آخران أقرب ما إلى الصفر قدر الإمكان وأن يأخذ الأولوية على المرحلتين الأخريين.
هناك طريقتان للمساعدة في خفض تأخير تحميل الموارد بأقرب من الصفر قدر الإمكان:
سنقول هذا على الفور ، نوصي بالتشاور مع مطور الويب الخاص بك قبل الغوص في هذه الإصلاحات. هذه عملية خلفية وتتطلب يد متمرسة لجعلها تعمل حسب الرغبة.
اكتشاف الموارد
يأتي كل متصفح ويب مع ماسح ضوئي مسبق ، هو وظيفته هو مساعدة محلل HTML الأساسي للمتصفح في اكتشاف محتوى الصفحة.
بينما يقوم محلل HTML الأساسي بمعالجة الترميز الخام حتى يتم تشغيله إلى مورد حظر - مثل البرنامج النصي الذي لا يحتوي على غير متزامنة أو مؤجلة ، فإن الماسح الضوئي المسبق يحتل دورًا أكثر تخمينًا.
وبعبارة أخرى ، يبحث الماسح الضوئي المسبق عن موارد لجلبها قبل أن يصل محلل HTML الأساسي لهم ويستمر في العمل حتى لو تم حظر المحلل. يمكن استخدام الماسح الضوئي المسبق للعثور على LCP وتحميله في أقرب وقت ممكن من طلب الصفحة الأولية.
لضمان اكتشاف مورد LCP من مصدر HTML ، يكون للمطورين خيارات محددة للأصول.
على سبيل المثال ، إذا كانت LCP هي صورة ، فيجب وجود سمات SRC أو SRCSET صور خلفية CSS ، في الوقت نفسه ، يمكن التحميل مسبقا من خلال تضمين في HTML علامة أو في الرأس. أخيرًا ، يمكن تحميل الخطوط بالمثل عبر .
ومع ذلك ، تجدر الإشارة إلى أن استخدام التحميل المسبق لخفض أوقات تحميل LCP يمكن أن يؤدي إلى مشكلات جديدة في هذا المزيج ، مثل إزالة غير المتزامنة . هناك سبب ندافع عن التحدث إلى مطورك حول هذا الموضوع.
لمزيد من المعلومات حول هذا الموضوع ، تحقق من الغطس العميق من Google في كل من تحسين LCP وماسح الضوئي المسبق .
أولوية المورد
تحاول المستعرضات تنزيل أصول CSS والخط والبرنامج النصي والأصول المعتادة على النصوص على النحو الأمثل قدر الإمكان من خلال تعيين الأولوية. المتصفحات ممتازة في اكتشاف أولويات الأصول ، لكن هذا لا يعني أنها خالية من العيوب.
لتحسين تحديد أولويات الأصول ، يمكن للمطورين استخدام تلميحات ذات أولوية قائمة على العلامات للإشارة إلى المتصفحات التي لها أولوية أعلى. على سبيل المثال ، يمكن للمطور استخدام JavaScript و API Fetch لوضع علامة على صورة LCP مع "HTML" ، مما يؤدي إلى تسريع مقياس CWV الخاص.
تجدر الإشارة إلى أن تلميحات الأولوية تعمل فقط على المتصفحات القائمة على الكروم ، مثل Google Chrome و Microsoft Edge.
ربما يكون المطور الخاص بك قد قام بالفعل بتنفيذ التحميل البطيء لأصوله أسفل الأصول ، تحقق معها للتأكد ، ولكن من المفيد أيضًا أن يستخدموا تلميحات ذات أولوية للأصول فوق الطية.
لمزيد من المعلومات حول تحميل الأولوية ، نوصي بشدة بمراجعة دليل Google لتحميل الموارد .
تمكن فريق Dev الخاص بـ Search Giant من استخدام تلميحات الأولوية لتحسين LCP من 2.6 ثانية إلى 1.9 ثانية في اختبار رحلات Google.
يتتبع FID المدة التي يستغرقها متصفح المستخدم للبدء في معالجة الإدخال الأول - باستثناء التمرير والتكبير.
يدور هذا الإجراء حول التقاط تجربة المستخدم للتفاعل مع صفحة ويب ، مما يعني أن صفحات الويب البطيئة ستسجل بشكل سيء. الحفاظ على درجة FID أقل من 100 مللي ثانية هو الهدف.
يعود ضعف الاستجابة بشكل عام إلى الاستخدام المفرط لجافا سكريبت ، والتي ستعامل المتصفحات قبل المدخلات.
الكود الذي يستهلك تركيز المتصفح لمدة 50 ميلي ثانية أو أكثر يطلق عليه مهمة طويلة ويُنظر إليه على أنه علامة على جافا سكريبت. يمكن أن يؤدي تقسيم هذه المهام الطويلة إلى أجزاء أصغر من الكود إلى معالجة الأداء البطيء وتحسين FID.
ولكن هذا ليس المجال الوحيد الذي يستحق المناقشة مع مطورك. من المهم مناقشة كيف يمكن أن يؤدي تنفيذ كل من طرف الطرف الأول والجهات الخارجية إلى إبطاء موقعك. يمكن أن يساعد التحميل التدريجي للرمز والميزات في مواجهة تحديات الأول ، في حين أن التحميل عند الطلب وتحديد أولويات التحميل يمكن أن يساعد في هذا الأخير.
هناك خيار آخر هو استخدام عمال الويب لتشغيل JavaScript في الخلفية ومنع المتصفح الخاص بك من نصيح معالجة البرامج النصية.
CLS هو في الأساس قياس الاستقرار البصري لموقع الويب الخاص بك. إذا فقد زوارك مكانهم على صفحة بفضل المحتوى الذي يتم نقله حوله لإفساح المجال لإعلانات وصور لتحميله ، فإن موقعك سيسجل بشكل سيء.
كلما ارتفع تخطيط صفحتك ، كلما كانت درجة CLS أفضل. مواقع Google Judge من خلال النظر في الاضطراب في مُصباح العرض وكذلك إلى أي مدى قفزت الأصول بالنسبة لها.
يدور تقليل التحولات غير المتوقعة للتخطيط بشكل أساسي حول تعيين مساحة للإعلانات والصور ومقاطع الفيديو المضمنة.
هل تتذكر SRC أو SRCST التي نظرنا إليها عند الحديث عن اكتشاف الموارد؟ حسنًا ، هذا محوري إلى حد ما لتحسين درجات CLS.
بالنسبة للصور الثابتة ، قم بتعيين العرض والارتفاع باستخدام SRC لإخبار المتصفح بحجز مساحة لأصول التحميل الأبطأ ، وبالتالي تجنب نوبات التخطيط.
انظر رمز المثال من Google أدناه:
تتطلب الصور المستجيبة SRCSET لتحديد الحد الأقصى للعرض والارتفاع الذي يمكن أن يحدده المستعرض. تأكد من استخدام الصور بنفس نسبة العرض إلى الارتفاع.
إليك مثال آخر:
عند التعامل مع الإعلانات ، هناك بعض الخطوات التي يمكنك اتخاذها:
يُنصح أيضًا بحفظ المساحة الثابتة إذا كنت تنوي تنفيذ IFRAMES والمحتوى المدمج والمحتوى الديناميكي ، مثل المكالمات إلى الإجراء (CTAS).
عندما تنزيل المتصفحات وتقديم خطوط الويب ، تكون هناك فرصة إما فلاش من النص غير المتواصل (FOUT) أو فلاش من النص غير المرئي (FOIT). يحدث الأول مع تبديل خط احتياطي بخط جديد ، في حين أن الأخير هو نتيجة تأخير في خط جديد يتم تقديمه.
يمكنك حل كلتا المشكلتين باستخدام لإخبار الماسح الضوئي المسبق للاستيلاء على خطوط الويب عاجلاً. الخطوط المحملة مسبقًا لديها فرصة أكبر لمقابلة الطلاء الأول.
هناك حلول أخرى في دليل استكشاف الأخطاء وإصلاحها من CLS وكذلك الغوص العميق في استخدام التحميل المسبق لمنع FOIT .
إذا كنت تبحث عن تحسينات سرعة الموقع ولا تزال تستخدم خيار استضافة خادم واحد تقليدي ، فمن المحتمل أن يكون الوقت قد حان للتبديل إلى شبكة توصيل المحتوى (CDN).
يتكون CDN من شبكة من الخوادم الموجودة في مراكز بيانات مختلفة في جميع أنحاء العالم تقوم بتوزيع محتوى الموقع لتحسين الأداء. على الرغم من أن كل من خيار الخادم الواحد - المعروف أيضًا باسم الاستضافة المحلية - و CDN يقدمون محتوى موقع الويب للزوار ، إلا أن CDN فقط يمكن أن يعامل في الموقع الجغرافي للمستخدم ثم اختيار أقرب خادم لتقليل أوقات التحميل.
الجغرافيا ليست هي الميزة الوحيدة ، حيث أن CDNs هي أيضًا مجهزة بشكل أفضل لإدارة طفرات حركة المرور المفاجئة وكذلك موارد خادم الجذر مثل النطاق الترددي.
في النهاية ، ترسل تجربة التصفح الأسرع إشارة CWV قوية إلى Google. على الرغم من أن CloudFlare هو واحد من أكثر مزودي CDN شهرة في السوق ، إلا أن هناك عددًا من المنافسين الجادين الذين يجب مراعاتهم .
بغض النظر عن مزود الاستضافة الذي تستخدمه ، فإن خوادمهم ستحظر عليها بعض قيود الأجهزة.
تحتوي الخوادم إلى حد كبير على نفس مكونات المفاتيح التي تسمح لمكتب الكمبيوتر المحمول/سطح المكتب بالعمل - أي وحدة المعالجة المركزية وذاكرة الوصول العشوائي - التي تتعامل مع جميع مهام حسابك. يجب أن تكون قادرًا على استخدام لوحة القيادة الخاصة بمزود الاستضافة الخاص بك للتحقق من وحدة المعالجة المركزية وذاكرة الوصول العشوائي المثبتة على الخادم الخاص بك وحتى تمكن من طلب موارد إضافية لزيادة أداء موقعك.
إذا كنت تنظر إلى وحدة المعالجة المركزية الخاصة بالخادم الخاص بك ، فمن المهم أن نفهم أنه يتم استخدام جوهر واحد فقط لتلبية طلب الزائر للحصول على صفحة ويب. هذا يعني أن سرعات الساعة الواحدة أحادية النواة هي دائما. CPU متعددة النوى قادرة على معالجة طرق عرض صفحات متعددة وخدمات الخادم الأخرى.
هذا آخر لمطورك.
راجع قاعدة البيانات الخاصة بك على أساس شبه متكرر للتأكد من أنها لم تنفجر بالصور والملفات غير المستخدمة. سيؤدي حذف الملفات غير الضرورية إلى إبطالها ، مما يؤدي إلى تسريع متوسط أوقات تحميل الصفحة.
يمكن استخدام صور كبيرة حقًا وسيؤدي إلى إبطاء موقع الويب الخاص بك. كم حجم؟ أي شيء يزيد عن 1 ميغابايت هو ببساطة أكبر من اللازم.
وكما نعلم بالفعل ، فإن أوقات التحميل الأبطأ ستؤدي إلى ارتفاع معدلات الارتداد وإرسال إشارات غير مرغوب فيها إلى Google.
بالنسبة لأولئك الموجودين في WordPress ، هناك عدد من المكونات الإضافية لتحسين الصور للاختيار من بينها يمكن أن تبسيط مهمة يدوية مملة. علاوة على ذلك ، يأتي الكثيرون أيضًا مع ميزات أخرى مثل التحميل الكسول والتوحيد التلقائي.
سواء كان الموقع صديقًا للهواتف المحمولة أم لا يدور حول ما إذا كنت قد قمت بتبسيط موقعك وتبسيطه لتجربة تصفح الهاتف المحمول.
يتفاعل مستخدمو الأجهزة المحمولة مع الصفحات بشكل مختلف ولديهم صبر أقل بكثير لأوقات التحميل البطيئة ويصعب التنقل في المواقع. إذا فشل موقعك في الاختبار الصديق للهاتف المحمول الموضح أعلاه ، أو حتى إذا تم تمريره ولكنك مهتمًا بمزيد من التحسين ، فلنذهب إلى بعض من أفضل الممارسات.
يجب أن يكون هذا الاهتمام الرئيسي لكل ناشر. طريقة بسيطة لمعالجة سهولة الاستخدام هي طرح أسئلة على نفسك مثل:
ستقطع هذه الإجابات شوطًا طويلاً نحو تحديد نقاط ألم المستخدم. على سبيل المثال ، لا ترغب في جعل المستخدمين يضبطون شاشاتهم لعرض المحتوى الخاص بك. يمكنك أن ترى ما نعنيه في المثال أدناه.
لتحسين المحتوى الخاص بك للأجهزة المحمولة ، هناك ثلاثة خيارات تطوير:
لقد طلبناهم من حيث سهولة التنفيذ ونوصي بتبني تصميم متجاوب ، لأنه أقل تطلب الخيارات الثلاثة.
يضيف المطورون ببساطة علامة meta = "Viewport" إلى الكود الموجود لصفحة الويب
الميزة هنا هي أن عليك فقط الحفاظ على موقع ويب واحد ، يمكن عرضه بسهولة عبر أي نوع شاشة.
على النقيض من ذلك ، تعمل التصميمات الديناميكية من خلال تقديم رمز HTML مختلف بناءً على جهاز المستخدم. تحتاج الصفحات إلى استخدام رأس HTTP المتغير لمنع الرمز الخاطئ الذي يتم تقديمه إلى الجهاز الخطأ.
أخيرًا ، هناك نطاقات فرعية متنقلة ، لا ننصح بها بالنظر إلى مقدار الموارد المطلوبة للتنفيذ بفعالية. النطق الفرعي للهاتف المحمول هي مواقع منفصلة تمامًا تلبية احتياجات الاستضافة. للتأكد من أن الزاحفون يفهمون العلاقة بين المجال والنطاق الفرعي ، ستحتاج إلى تضمين Rel = "Canonical" .
لأن التصميمات المستجيبة هي أبسط خيار ، فهو الخيار الذي نوصي به للناشرين. لإلقاء نظرة فاحصة على التصميم المستجيب ، تحقق من دليل تنفيذ Google .
فيما يلي قائمة سريعة بالاعتبارات الفنية لأي تصميم:
هذه الخطوة الأخيرة هي أبسط طريقة لتحسين تجربة الصفحة ، ولكنها تقطع شوطًا طويلاً في تحسين راحة البال للمستخدم.
التحول إلى HTTPS يحمي ويشفير معلومات المستخدمين الخاصة بك ، كما أنه يساعد على منع الرجل في هجمات الأوسط (MITM). علاوة على ذلك ، فإن الحصول على شهادة SSL يلغي تحذيرات المتصفح حول نقص الأمن.
يجب أن يكون مزود الاستضافة الخاص بك قادرًا حقًا على تزويدك بأمان HTTPS ، إذا لم يكن الأمر كذلك ، فقد يكون من المفيد التفكير في الانتقال إلى خطوة. يوجد بالفعل العديد من مقدمي الاستضافة البارزين الذين يوفرون HTTPS مجانًا . علاوة على ذلك ، فإن أولئك الذين يستضيفون الذين يقدمون شهادات SSL يستخدمون خدمتهم الخاصة بدلاً من الخدمة الخارجية ، مما يجعل العملية أسهل وأسرع في التنفيذ.
إذا كنت ترغب في طلب وتثبيت شهادة SSL من سلطات الشهادة (CAS) ، فهناك أربع خطوات تحتاج إلى متابعتها. هذه هي:
من المهم التأكد من ترحيل موقعك إلى HTTPs بأنه لا يؤثر على استراتيجية إيرادات الإعلانات الخاصة بك. القضية هي أن HTTPلن تعمل على موقع باستخدام HTTPS.
ننصح بالتشاور مع شركاء Tech الخاص بك قبل إجراء أي تغييرات على موقعك.
لمزيد من التفاصيل ، تحقق من دليل Google الشامل حول هذا الموضوع.
تجعل الإعلانات ومربعات الحوار الخلالية المتطفلة من الصعب على محركات البحث فهم محتوى صفحة الويب ، والتي يمكن أن تقوض الأداء SERP.
سيكون من الرائع أن تكون هناك طريقة لإنشاء خلاليات لم تعطل تجربة المستخدم ، ولكن هذا هو النقطة الكاملة لمثل هذه الإعلانات. إنهم يتولىون الشاشة بأكملها في فترات راحة من أجل انتباه المستخدم.
على هذا النحو ، سيكون الناشرون أفضل حالًا في استخدام إعلانات Banner بدلاً من الإعلانات الخلالية ، لأنهم يأخذون فقط جزءًا صغيرًا من العقارات على الشاشة. أفضل المخاطرة للعمى لافتة من إحباط المستخدم.
يمكن للناشرين استخدام لافتات مدعومة للمتصفح أو لافتات HTML البسيطة التي ترتبط بصفحة وجهة CTA.
يمكن أيضًا استخدام مربعات الحوار للحملات الترويجية ، ولكن يمكن تصميمها لتكون غير متناظرة. تحتاج إلى التأكد من أنه يمكن للمستخدمين الوصول إلى المحتوى دون انقطاع.
لا توجد اختصارات حقيقية لتحسين تجربة صفحتك ومن الأهمية بمكان أن تقوم بإصلاح النقاط المذكورة أعلاه. مع ما يقال ، تجدر الإشارة إلى أنه على الرغم من أن WordPress هو بسهولة منصة النشر الأكثر شعبية في العالم ، فإن هذا لا يعني بالضرورة أنه أفضل CMS عندما يتعلق الأمر بزيادة أداء CWV.
بالنظر إلى تقرير تقنية CWVS يوضح أن حوالي 29 ٪ فقط من مواقع WordPress لديها CWVs جيدة ، في حين أن 41 ٪ من مواقع WIX تحصل على علامة خضراء.
تجدر الإشارة إلى ما إذا كان الانتقال إلى CMS متخصصة يمكن أن يحسن CWVs أصليًا.
هناك الكثير من الأرض لتغطية عندما يتعلق الأمر بتحسين تجربة الصفحة والبدء قد يكون شاقًا بعض الشيء. ومع ذلك ، من المهم أن تتذكر أنك تأكل الفيل من خلال أخذ لدغة واحدة في وقت واحد.
إن الهدف من درجة "جيدة" في جميع مقاييس CWV الخاصة بك ليس ضروريًا لمساعدة موقعك على تسلق SERPs. أكثر من ذلك ، ومع ذلك ، يمكن أن يكون تحديد هذه الأهداف النبيلة مضادة للإنتاجية لأنه يمكن أن يكون المطاردة الإحباط.
بدلاً من ذلك ، تهدف إلى انتصارات صغيرة عندما يتعلق الأمر بـ CWVs ، ركز على معالجة النتائج "الفقيرة" دون القلق المفرط بشأن شريط "تحسين الاحتياجات". يمكن أن يأتي ذلك لاحقًا ، عندما يكون لديك المزيد من الوقت والموارد لتكريس هذه العملية.
لقد تحدثنا بالفعل عن Yahoo! نقاط CLS المحسنة في اليابان ، دعونا نلقي نظرة على مواقع أخرى يمكننا أن نتعلم بعض الدروس منها.
قامت Indian Daily The Economic Times ، التي تخدم أكثر من 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 ٪.
استخدمت Telegraph DevTools Chrome لتحديد مثيلات فردية للتخطيط المتغير.
قبل ذلك ، استخدم WebPageTest للعثور على مكان حدوث تحول التصميم في الجدول الزمني.
مع هذه البيانات في متناول اليد ، بدأ الفريق يركز على تقليل نوبات التصميم من خلال معالجة هذه المناطق
بالنسبة للإعلانات ، بدأت التلغراف في الحفاظ على المساحة لهم واستخدم حجم الإعلان الأكثر شيوعًا لتحديد الأبعاد. ساعد هذا أيضًا على منع الإعلانات من الانهيار عند عرضها على جهاز لوحي.
تعامل الفريق مع قضية مماثلة مع الصور المضمنة في الجزء العلوي من المقالات ، والتي لم يكن لها أبعاد محددة.
قامت Telegraph بإجراء تعديلات أخرى ، مثل نقل الرأس إلى الجزء العلوي من العلامات واستخدام العناصر النائبة لمقاطع الفيديو المدمجة ، ولكنها وصفت في النهاية العملية بأنها "سهلة للغاية" مع عدم وجود تأثير كبير.
تحسين تجربة الصفحة لا تحتاج إلى أن تكون ساحقة. قم بقياس الأعمدة الأربعة لتجربة الصفحة ثم حدد الموارد التي يمكنك تخصيصها لتحسين نتائجك.
إذا كنت ناشرًا أصغر ، فسيكون موازنة الموارد أمرًا بالغ الأهمية ونوصي بتحديد فاكهة معلقة بشكل معقول لمشروعك الأول.
بالنظر إلى نهج تلغراف ، ركزوا على جانب واحد من CWVs بدلاً من الثلاثة وقاموا بتحسينات كبيرة. ركزت الأوقات الاقتصادية على اثنين من الثلاثة لتقديم بعض النتائج المثيرة للإعجاب.
