چگونه تعهد به Core Web Vitals درآمد تبلیغاتی Netzwelt را 18 درصد افزایش داد

وب‌سایتی که راه‌اندازی مجدد شده است همچنین مشاهده‌پذیری تبلیغات را بیش از 75 درصد، نرخ پرش 50 درصد کاهش می‌یابد و بازدید از صفحه تا 27 درصد افزایش می‌یابد.

Martin Schierle

هنگامی که گوگل ابتکار Core Web Vitals را اعلام کرد، ناشر آلمانی Netzwelt به سرعت پتانسیل این معیارهای جدید را برای یک تجربه عالی از صفحه و بهبود درآمدزایی مبتنی بر تبلیغات دریافت کرد. آن‌ها برای راه‌اندازی مجدد وب‌سایت خود به سفر رفتند و بهترین شیوه‌های عملکرد رایج را به کار گرفتند و در عین حال برچسب‌های تبلیغاتی و مکان‌ها را به صورت موازی بهینه کردند. التزام به UX عالی و صفحات سریع ثابت کرده است که مسیری برای بهینه سازی تعامل و درآمد تبلیغات دست به دست هم داده است، با بازدید از صفحه تا 27٪، قابلیت نمایش تبلیغات بیش از 75٪، و درآمد تبلیغات تا 18٪ بهبود یافته است.

چالش

مانند بسیاری دیگر از ناشران اخبار، Netzwelt برای یافتن تعادل مناسب بین بهینه‌سازی تجربه کاربر و سرعت صفحه و در عین حال حفظ درآمد بالای تبلیغات تلاش کرد. چالش های اصلی که آنها با آن مواجه شدند عبارت بودند از:

• تغییر چیدمان تجمعی بالا (CLS) به دلیل تغییرات طرح‌بندی ناشی از تبلیغات، به‌ویژه از اسلات‌های چند اندازه و بنرهای بالا.
• بزرگ‌ترین رنگ محتوایی (LCP) به دلیل اینکه تبلیغات بزرگ‌ترین رنگ هستند یا با گرفتن پهنای باند از بارگذاری تصویر قهرمان، دیر عرضه می‌شود.
• تأخیر ورودی اول بالا (FID) ناشی از جاوا اسکریپت شخص ثالث که برای تبلیغات، مناقصه هدر و سایر اهداف مورد نیاز است.
• اثرات جانبی روی Core Web Vitals از گفتگوهای رضایت کنترل شده توسط فروشندگان شخص ثالث، که همچنین به تغییرات طرح اضافه شده و ممکن است به عنوان بزرگترین رنگ های اخیر شناسایی شوند.

بهینه سازی وب سایت خبری برای Core Web Vitals

هنگامی که Netzwelt شروع به کار بر روی کلیدهای اصلی وب کرد، آنها به سرعت متوجه شدند که بهینه سازی Core Web Vitals نیازی به تأثیر منفی بر تبلیغات ندارد، بلکه می تواند به عنوان فرصتی برای بهبود قابلیت مشاهده آگهی استفاده شود. بنابراین، تیم Netzwelt Core Web Vitals را بهینه کرد تا قابلیت مشاهده آگهی را به بالای 75 درصد برساند تا تبلیغات با ارزش بیشتری را جذب کند (میانگین جهانی برای تبلیغات نمایشی کمتر از 50 درصد است ).

بهینه سازی CLS

تبلیغات اغلب دیر بارگذاری می شوند (گاهی اوقات آگاهانه از طریق بارگذاری تنبل)، و اندازه واقعی آنها اغلب به دلیل قرار دادن تبلیغات چند سایز و روان از قبل مشخص نیست.

این مشکل را می توان به دو دسته تقسیم کرد: تبلیغات در بالا و پایین.

تبلیغات بالای صفحه می‌توانند به دلیل بارگذاری دیرهنگام با اندازه‌های ناشناخته، جهش‌های گسترده‌ای در طرح‌بندی ایجاد کنند. مسدود کردن بزرگ‌ترین فضایی که ممکن است به آن نیاز داشته باشند می‌تواند منجر به UX بد شود، در حالی که درخواست از تبلیغ‌کنندگان برای اندازه‌های ثابت ممکن است درآمد تبلیغات را کاهش دهد. Netzwelt این مشکل را با چسباندن آگهی بالا و حذف برخی از اندازه های بزرگتر بنرهای مجاز حل کرد. تبلیغ روکش شده از ایجاد جهش های طرح بندی برای تبلیغات در اندازه های مختلف جلوگیری می کند. اگرچه کاهش اندازه‌های واجد شرایط بر فروش تبلیغات تأثیر می‌گذارد، قابلیت مشاهده بهتر این امر را به راحتی جبران می‌کند.

داده‌های تاریخی و تست‌های A/B به Netzwelt کمک کردند تا اندازه و موقعیت مناسب را برای دستگاه‌ها و اندازه‌های مختلف صفحه نمایش پیدا کند و قوانین رسانه CSS برای رزرو فضا استفاده شود.

آگهی‌های زیر تاپیک اتاقی برای بهبود قابل توجه ارائه می‌دهند:

• بنری که دیده نمی‌شود اما بارگذاری می‌شود، مشاهده‌پذیری آگهی ضعیفی ایجاد می‌کند و تجربه صفحه را بدتر می‌کند.
• بنری که در زمانی که کاربر روی آن پیمایش می‌کند بارگذاری می‌شود، می‌تواند جهش محتوای اضافی را معرفی کند.

Netzwelt برای حفظ تجربه صفحه خوب و قابلیت مشاهده تبلیغات بالا، بارگذاری تنبل را پیاده سازی کرد و فضایی را برای اندازه کمترین مخرج مشترک اختصاص داد. در یک منطقه چند سایز، بنرهای درخواستی در اندازه‌های 300x250 تا 300x600، رزرو شده در ارتفاع 250 پیکسل. این تغییر چیدمان برای اندازه های کوچکتر را حذف کرد. و آنها را به شدت برای بنرهای بزرگتر کاهش داد. این رویکرد بهینه نیست، اما یک شروع و یک سازش خوب است.

برای بهینه‌سازی بیشتر، Netzwelt از Intersection Observer و Network Information API برای کنترل مکان‌های تبلیغاتی و کاهش تغییرات طرح‌بندی استفاده کرد. بسته به موقعیت اسکرول و کیفیت اتصال شبکه، از موقعیت‌های تبلیغاتی مختلف و استراتژی‌های بارگذاری تنبل استفاده می‌شود، و تبلیغات ممکن است از چند اندازه به اندازه ثابت تغییر کند. هدف این الگوریتم همیشه به حداکثر رساندن قابلیت مشاهده آگهی و در عین حال به حداقل رساندن تغییرات طرح است. مرورگرهایی که از NetworkInfo API پشتیبانی نمی کنند، از یک مقدار پراکسی بر اساس ترکیبی از دستگاه و نوع شبکه مشتق شده از IP استفاده می کنند. این استراتژی بارگیری تطبیقی ​​به ویژه CLS را برای کاربرانی که اتصالات اینترنت آهسته دارند کاهش می دهد.

بهینه سازی FID

به نظر می رسد تاخیر ورودی اول برای ناشران اخبار مشکل ساز باشد، زیرا تبلیغات اغلب با بسیاری از کتابخانه های جاوا اسکریپت اضافی همراه است. و به نظر می رسد وقتی به داده های آزمایشگاهی مانند Lighthouse نگاه می کنیم، تأثیر منفی وجود دارد. با این حال، با نگاهی به داده های میدانی در سالنامه وب 2020 ، بسیاری از وب سایت ها به اندازه کافی سریع پاسخ می دهند. بخشی از این امر به دلیل بارگذاری دیرهنگام جاوا اسکریپت (بعد از اولین ورودی)، ذخیره سازی خوب (به عنوان مثال دریافت روش ذخیره کد v8 )، یا بهینه سازی خوب توسط فروشندگان تبلیغات است. ردیاب‌های قابلیت مشاهده فروشنده مطمئن می‌شوند که از انجام کارهای طولانی اجتناب می‌کنند—بنابراین حتی زمانی که مجموع زمان اجرا طولانی است ، زمان مسدود کردن کل (TBT) و FID تحت تأثیر قرار نمی‌گیرند. در حالی که FID برای Netzwelt مشکل بزرگی نبود، هنوز برخی بهینه‌سازی‌ها وجود داشت:

• کاهش اسکریپت های تبلیغاتی و ارائه دهندگان، تمرکز بر روی یک پشته واحد در صورت امکان.
• بارگیری همه اسکریپت ها با defer یا async.
• استفاده از پک وب یا فناوری های مشابه برای درخت تکانی و جداسازی.
• استفاده از قوانین ساده BEM مانند CSS.
• اجتناب از کارهای طولانی مدت و استفاده از الگوی بیکار تا فوری .
• کار با RequestAnimationFrame در هر جایی که چیدمان تحت تأثیر قرار می گیرد.

بهینه سازی LCP

بزرگترین رنگ محتوایی را می توان به دو طریق تحت تأثیر تبلیغات قرار داد - به طور صریح با تشخیص یک تبلیغ به عنوان بزرگترین رنگ، و به طور غیرمستقیم با ازدحام پهنای باند شبکه یا تأثیرگذاری بر مسیر بحرانی به طوری که بزرگترین رنگ واقعی (مثلاً یک تصویر قهرمان) نتواند بارگذاری شود. به اندازه کافی سریع

Netzwelt قبلاً تبلیغات مستطیلی متوسط ​​را در حین بهینه سازی برای CLS از جایگاه های تبلیغاتی برتر حذف کرده بود. این مزیت اضافی را داشت که تبلیغات به بزرگترین عنصر تبدیل نشد.

Netzwelt از یک سیاست سختگیرانه برای اولویت بندی محتوای بالاتر از تبلیغات پیروی می کند. Netzwelt تصاویر قهرمان و فونت های مورد استفاده در بالای صفحه را در اولویت قرار داد و مسیر حیاتی را برای اولویت دادن به اسکریپت های تبلیغاتی و تبلیغات بهینه کرد. این اولویت بندی به LCP کمک کرد تا تحت تأثیر تبلیغات قرار نگیرد.

علاوه بر این بهینه سازی ها، Netzwelt بهترین شیوه های دیگر را دنبال کرد:

• CSS را برای مسیر رندر بحرانی جدا کرده و در هدر قرار دهید.
• مهم‌ترین فونت‌ها، اسکریپت‌ها و تصاویر را از قبل بارگذاری کرد.
• از بارگذاری تنبل تصاویر در بالای صفحه جلوگیری کرد.
• از font-display="swap" استفاده شده است.

رضایت GDPR و Core Web Vitals

گفتگوهای رضایت اغلب بر Core Web Vitals تأثیر منفی می‌گذارند. همانند تبلیغات، دو راه وجود دارد که گفتگوی رضایت می‌تواند بر Core Web Vitals تأثیر بگذارد:

• صراحتاً اگر به عنوان بزرگترین رنگ تشخیص داده شود یا باعث تغییر طرح شود.
• به طور ضمنی، با سرقت پهنای باند از بزرگترین رنگ واقعی، مسدود کردن مسیر حیاتی برای رسیدن به بزرگترین رنگ، یا به تاخیر انداختن تبلیغات تا زمانی که رضایت ارائه شود، که به نوبه خود می‌تواند باعث تغییر طرح‌بندی شود.

Netzwelt با ارائه‌دهنده رضایت شخص ثالث کار می‌کند که بهینه‌سازی‌ها را نیز پیاده‌سازی کرده است. اول نتزولت اطمینان حاصل کرد که از دام های ساده جلوگیری می کند:

• اسکریپت‌های رضایت به‌صورت ناهمگام بارگذاری می‌شوند تا منابع مهم را مسدود نکنند.
• رضایت به گونه ای قالب بندی شده است که عناصر بزرگ به عنوان بزرگترین عنصر در LCP واجد شرایط نیستند.
• همپوشانی رضایت از position: fixed .
• در حالی که تبلیغات فقط پس از دادن رضایت نشان داده می‌شوند، فضای خالی کافی از قبل حفظ می‌شود تا هنگام بارگیری آگهی‌ها از تغییر طرح‌بندی جلوگیری شود.
• اطمینان حاصل کنید که نمایش و موقعیت گفتگوی رضایت باعث تغییر چیدمان نمی شود. یکی از مشکلاتی که در اینجا یافت شد و رفع شد، گزینه قفل پیمایش ارائه‌دهنده خدمات بود که با جابجایی محتوای اصلی مقاله در اسکرول، پیمایش را در حین نمایش رضایت غیرفعال کرد و باعث تغییر طرح‌بندی شد.

پس از این کار، هنوز اختلافات زیادی بین CLS میدانی و آزمایشگاهی وجود داشت. در حالی که CLS آزمایشگاهی نزدیک به صفر بود، مقادیر میدان به طور قابل توجهی بالاتر از آستانه بود. پس از بررسی، مقصر تغییرات طرح‌بندی در iframe رضایت بود که در حال حاضر تنها به درستی در داده‌های میدانی ثبت می‌شوند. Netzwelt به همکاری با ارائه دهنده رضایت شخص ثالث برای بهبود این مشکل ادامه می دهد.

مدل‌های اشتراک اخبار و Core Web Vitals

ناشران اخبار برای تأمین مالی روزنامه‌نگاری به سراغ مدل‌های اشتراکی می‌روند. این مدل برای Core Web Vitals مرتبط است زیرا افراد در وب سایت هایی با تجربه کاربری ضعیف مشترک نمی شوند. علاوه بر این، مشترکین انتظار ندارند تبلیغات را در محتوای پولی ببینند، اما پنهان کردن تبلیغات ممکن است باعث تغییر طرح شود. وب سایت باید بررسی کند که آیا کاربران حق مشاهده محتوا و نمایش تبلیغات را دارند یا خیر. این بررسی‌ها ممکن است باعث تأخیر بیشتری شود که منجر به جابجایی محتوا یا تجربه کاربری ضعیف شود.

Netzwelt از مدلی استفاده می کند که در آن محتوا همیشه رایگان است، اما مشترکین تبلیغات را نمی بینند. آنها روش‌های مختلفی را برای پرس و جو و ذخیره حقوق برای کاهش تأخیرها و تغییرات طرح‌بندی بررسی کردند.

یک پرس و جو اولیه حق همیشه باعث تأخیر می شود و بنابراین اگر پرس و جوی حق ها بیش از حد طول بکشد، سایت آخرین حالت کش را نمایش می دهد. برای مشترکین جدید، این به معنای خطر کوچکی است که یک کاربر پولی یک بار تبلیغات را مشاهده کند. کاربرانی که به تازگی اشتراک خود را پایان می دهند ممکن است قبل از به روز رسانی حقوق ذخیره شده محلی، یک بار بدون تبلیغات را مشاهده کنند. هنگامی که حق‌ها شناخته شدند، با استفاده از LocalStorage API به صورت محلی ذخیره می‌شوند تا از تأخیرهای اضافی و تغییر طرح‌بندی در طول مسیریابی آینده جلوگیری شود.

نتایج بهینه سازی

نتایج بهینه‌سازی‌های Netzwelt خود گویای این موضوع است. امتیاز PageSpeed ​​Insights آنها در بین ناشران خبری در سراسر جهان بی رقیب است:

بهینه‌سازی‌ها تجربه صفحه را بهبود بخشیدند، اما با در نظر گرفتن کسب‌وکار و افزایش تجربه تبلیغات، قابلیت مشاهده آگهی و درآمد ایجاد شدند. پس از راه‌اندازی مجدد صفحه بهینه‌سازی شده، Netzwelt شاهد افزایش CPM 20-30 درصدی با قابلیت مشاهده آگهی بالای 75 درصد بود. با این حال، Netzwelt افزایش درآمد کلی را حتی بیشتر فرض می‌کند. ترافیک از زمان راه‌اندازی مجدد افزایش یافته است که احتمالاً به دلیل تعامل بیشتر کاربر و نرخ پرش پایین‌تر به دلیل UX بهبود یافته است. این اثرات به سختی قابل اندازه‌گیری هستند و در رابطه علی با راه‌اندازی مجدد تنظیم می‌شوند، زیرا ترافیک به طور طبیعی در نوسان است و همچنین اثراتی از همه‌گیری جهانی وجود دارد. این اثرات غیرمستقیم یکی از دلایلی است که Netzwelt همیشه هنگام بررسی سایت خود به همه اعداد نگاه می کند، نه فقط CPM، که ممکن است گمراه کننده باشد. معیارهای Core Web Vitals و UX، در ترکیب با تمام معیارهای مربوط به تبلیغات، تصویر واقعی را ارائه می دهند.

نگاه به آینده

Netzwelt معتقد است که در آینده بدون کوکی‌های شخص ثالث، هدف‌گیری متنی از طریق محتوا، همراه با تجربه کاربری خوب و صفحه (از جمله قابلیت مشاهده آگهی)، کلید موفقیت به عنوان یک ناشر خبر است.

بنابراین Netzwelt با Core Web Vitals متوقف نمی‌شود، بلکه با پیاده‌سازی بسیاری از قابلیت‌های وب مدرن مانند برنامه‌های وب پیشرو (PWA)، محتوای آفلاین، حالت تاریک، API اشتراک‌گذاری وب و فعالیت‌های وب مورد اعتماد (TWA) قدم‌های بیشتری را طی می‌کند. API محصولات دیجیتال جدید.