خرده فروش لوکس Farfetch نرخ تبدیل بالاتری را برای Core Web Vitals بهتر می بیند

چگونه خرده فروش مد تجارت الکترونیک Core Web Vitals و معیارهای عملکرد را با معیارهای کسب و کار مرتبط کرد، شاهد افزایش KPI ها بود و یک "محاسب موردی تجاری عملکرد" ​​برای هدایت تصمیمات محصول و فرهنگ عملکرد ایجاد کرد.

دیکلا کوهن
Dikla Cohen
پاتریشیا کوتو نتو
Patrícia Couto Neto
روی سانتوس
Rui Santos

در داخل بسیاری از شرکت‌ها، عملکرد سرعت وب‌سایت و Core Web Vitals هنوز عمدتاً به عنوان مسئولیت تیم‌های مهندسی دیده می‌شود. اگر ارزش کسب و کار و تجربه مشتری درک نشود، سرعت سایت می تواند برای سایر حوزه های کسب و کار نامرئی شود. این می تواند باعث شود که هنگام تصمیم گیری های کلیدی و تعریف نقشه راه، عملکرد نادیده گرفته شود.

برای بهبود فرهنگ عملکرد در بین تیم ها و ایجاد پیشرفت های قابل توجه در تجربه وب آنها، خرده فروش مد تجارت الکترونیک لوکس Farfetch پروژه ای را برای تعریف و استفاده از معیارهای عملکرد مشتری محور واقعی راه اندازی کرد. آنها قصد داشتند اینها را با معیارهای تجاری به عنوان راهی برای روشن کردن چگونگی تأثیر عملکرد بر KPIهای شرکت مرتبط کنند.

با این حال، جاه طلبی های آنها به همین جا ختم نشد. در نهایت، هدف این پروژه تغییر فرهنگی در مقیاس بود - شکستن سیلوهای درون سازمان و معرفی یک زبان جدید تجاری-محور برای ارائه یک راه مشترک به همه برای صحبت در مورد آنچه قبلاً به عنوان موضوعات فنی در نظر گرفته می شد. Farfetch می خواست عملکرد سرعت وب سایت را به عنوان یک مسئولیت مشترک داشته باشد، تصمیم گیری آگاهانه را تسهیل کند و آن را به عنوان ستون اصلی چیزی که یک تجربه وب خوب را ایجاد می کند، تثبیت کند.

نمودار متضاد سرعت به عنوان مسئولیت توسعه دهنده در مقابل سرعت به عنوان مسئولیت مشترک. در حالت اول، هر فاز سیلو شده است، در حالی که در حالت دوم، هر فاز در همان سیلو رخ می دهد.

برای شروع، Farfetch متوجه شد که یک بخش واحد نمی تواند مانند قبل به این مهم دست یابد و یک تیم اصلی از متخصصان از حوزه های مختلف در شرکت - مهندسی، زیرساخت، معماری و محصول - گرد هم آورد که یک استراتژی گام به گام برای اصلاح نحوه نگاه شرکت به این موضوع ایجاد کردند.

مرحله 1: تعریف، اندازه گیری و نظارت بر معیارها

اول از همه، Farfetch نیاز داشت که ابزارهای نظارتی مناسب برای درک وضعیت فعلی و انحرافات در نقاط تماس و برنامه‌های کاربردی سفر داشته باشد.

آنها از داده های آزمایشگاهی و نظارت واقعی کاربر (داده های میدانی) برای ردیابی Core Web Vitals و معیارهای عملکرد کاربر محور اضافی برای تجزیه و تحلیل وضعیت فعلی عملکرد سرعت استفاده کردند. آن‌ها از جاوا اسکریپت و کتابخانه web-vitals.js برای جمع‌آوری داده‌ها استفاده کردند، که به تیم تجزیه و تحلیل محصول اجازه داد تا معیارهای عملکرد را در کنار معیارهای تجاری در همان جلسه مشاهده کنند و در نتیجه شروع به بررسی چگونگی تأثیر یکی بر دیگری کنند.

گروه چند رشته‌ای شروع به درک این موضوع کردند که کدام معیارها برای کسب‌وکار اهمیت بیشتری دارند. برای انجام این کار، آنها به مسیر حیاتی سفر کاربران Farfetch نگاه کردند و سعی کردند آن سفر را با نشانگرهای عملکرد مرتبط کنند. علاوه بر معیارهای Core Web Vitals که Google تشریح کرده است، که هر کدام جنبه مشخصی از تجربه کاربر را نشان می‌دهند، آنها همچنین از جاوا اسکریپت سفارشی برای ردیابی زمان تا اولین بایت (TTFB) ، First Contentful Paint (FCP) ، First Paint و Time to Interactive (TTI) استفاده کردند.

معیارها با استفاده از چندین روش Performance API ، Long Tasks API و polyfills Google جمع آوری می شوند. جزئیات بیشتر را می توان در این پست بلاگ فناوری Farfetch در اواسط 2020 توسط مانوئل گارسیا، مهندس اصلی ارشد وب، یافت.

در بخش تجزیه و تحلیل داده ها، Farfetch راه حل ردیابی چند کاناله خود را دارد که توسط برنامه های کاربردی به نام Omnitracking استفاده می شود. رویدادهای ایجاد شده توسط بازدیدهای صفحه، اقدامات کاربر و اقدامات سیستم را ردیابی می کند. مدل داده Omnitracking راه حل Farfetch برای موارد تحلیلی، کاوش داده و گزارش است که در بالای رویدادهای تولید شده توسط ردیاب ها ساخته شده است. هدف مدل داده کمک و حمایت از هر کسی است که نیاز به درک موارد زیر دارد:

  • رفتار کاربر
  • تجربه کاربری در برنامه های Farfetch
  • استفاده از برنامه ها
  • تبدیل های ماکرو و میکرو
  • تجزیه و تحلیل کانال متقاطع و قیف

سپس ایده این بود که داده های عملکرد هر صفحه نمایش در farfetch.com را که توسط جاوا اسکریپت گرفته شده است به این لایه داده اضافه کنیم. پیروی از این مدل تطابق بین داده‌های عملکرد و معیارهای قیف تبدیل اصلی را برای هر جلسه و مبنایی برای کاوش تحلیلی در مورد موضوع تضمین می‌کند.

سرانجام، Farfetch بودجه‌های عملکرد مبتنی بر زمان را برای هر معیار در صفحات سفر اصلی و یک فرآیند حاکمیتی برای رسیدگی به تخلفات بودجه ایجاد کرد. آنها همچنین شروع به ترکیب معیارهای عملکرد در خطوط لوله CI برای درک انحرافات بودجه در سریع ترین زمان ممکن در جریان توسعه کرده اند.

مرحله 2: برقراری ارتباط از طریق زبان تجاری

با داده‌های عملکردی که اکنون در مجموعه داده‌های هوش تجاری داخلی Farfetch موجود است، تیم تحلیلی شروع به بررسی مدل‌ها و الگوهای ریاضی در داده‌ها کرد که می‌توانست ارتباط بین معیارهای عملکرد و KPIهای تجاری را نشان دهد (به عنوان مثال، نرخ تبدیل و درصد بازدیدهای تک صفحه‌ای)، که اجازه می‌دهد دید جدیدی از تأثیر مالی سرعت سایت و UX برای کسب‌وکار داشته باشد. این امر باعث شد که عملکرد به زبان مشترک با تصمیم گیرندگان تجاری مورد بحث قرار گیرد. تجزیه و تحلیل شامل تمام Core Web Vitals و سایر معیارهایی بود که Farfetch ارزشمند می دانست. بینش های واقعاً تأثیرگذاری را نشان داد.

با در نظر گرفتن اینکه گوگل بزرگترین رنگ محتوایی (LCP) را برای ارائه یک تجربه کاربری بهینه در کمتر از 2.5 ثانیه توصیه می کند، Farfetch این آستانه را به دقت مطالعه کرد و نتایج معنی داری پیدا کرد.

تحلیل همبستگی آماری Farfetch نشان داد که فراتر از آن نقطه، نرخ تبدیل شروع به کاهش می‌کند و همچنین نرخ خروج افزایش می‌یابد. این نشان می‌دهد که کاربران واقعاً شروع به احساس ضعف در بارگذاری کند صفحه می‌کنند و نرخ تبدیل با هر ۱۰۰ میلی‌ثانیه بیشتر LCP به طور متوسط ​​۱.۳ درصد کاهش می‌یابد.

نموداری از LCP که در آن محور Y نرخ تبدیل و درصد بازدید از صفحه و محور X زمان LCP است. همانطور که LCP سریعتر است، درصد بازدیدهای یک صفحه کاهش می یابد و نرخ تبدیل افزایش می یابد.

Farfetch همچنین کاهش نرخ خروج از -3.1٪ را برای هر 0.01 کمتر در امتیاز تغییر چیدمان تجمعی (CLS) تأیید کرد، که مجدداً تأثیر ثبات صفحه را برای حفظ کاربران در یک وب سایت تأیید کرد.

نموداری از CLS که در آن محور Y نرخ تبدیل و درصد بازدید از صفحه است و محور X امتیاز CLS است. پایین‌ترین امتیازات CLS بیشترین درصد بازدیدهای تک صفحه‌ای را نشان می‌دهد، در حالی که تبدیل‌ها در امتیازات CLS پایین‌تر افزایش می‌یابد.

با توجه به تعامل و روان بودن صفحه، اگرچه تاخیر ورودی اول (FID) به طور مداوم ردیابی و تجزیه و تحلیل می شود، Farfetch همچنین TTI را اندازه گیری می کند، که ثابت کرد یک معیار بسیار تاثیرگذار برای قیف تبدیل تجاری Farfetch است.

برای این کار، آنها پلی‌فیل TTI گوگل را برای ذخیره این معیار به وب‌سایت تزریق کردند. استفاده از Long Tasks API برای گزارش کارهای طولانی (کارهایی که بیش از 50 میلی ثانیه در رشته اصلی مرورگر طول می کشد).

سپس تیم تجزیه و تحلیل توانست متوجه شود که نرخ تبدیل به ازای هر ثانیه کاهش در TTI 2.8 درصد افزایش می‌یابد، که دلیل محکمی برای کارایی بهتر کد و رفع گرفتگی رشته اصلی مرورگر است.

نمودار TTI که در آن محور Y نرخ تبدیل و درصد بازدیدهای تک صفحه است و محور X زمان TTI است. با بالا رفتن زمان TTI، نرخ تبدیل کاهش می‌یابد و درصد بازدیدهای تک صفحه افزایش می‌یابد.

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

مرحله 3: تعبیه تغییرات فرهنگی

نمایش بینش های بالا در کنار تحقیقات کیفی کاربر در مورد درک کاربر از سرعت سایت، برای ایجاد همسویی با اهداف شرکت، آگاهی سطح اجرایی ایمن و تصمیم گیری مبتنی بر عملکرد در سراسر نقشه راه محصول، بسیار مهم بود. اکنون می توان ثابت کرد که عملکرد Farfetch چقدر ارزش دارد.

برای ساده‌سازی اولویت‌بندی، Farfetch یک ابزار سلف‌سرویس ایجاد کرد که آن را Site Speed ​​Business Case Calculator نامیدند که از ماشین‌حساب تأثیر سرعت Google الهام گرفت. این به هر مدیر محصول اجازه می دهد تا با محاسبه تأثیر تجاری در پرواز، یک مورد تجاری از بهبود عملکرد ایجاد کند. با استفاده از مدل داده‌ای که از همبستگی بین معیارهای نرخ تبدیل و تجربه کاربر استفاده می‌کند، برای انطباق با حوزه‌های مختلف محصول، دستگاه‌ها و نقاط لمس سفر کاربر انعطاف‌پذیر است.

اسکرین شات از ماشین‌حساب کیس تجاری سرعت سایت Farfetch.

در همین حال، مجموعه ای از داشبوردهای تحلیلی سلف سرویس، دید گسترده ای از شاخص های عملکرد زمان واقعی و تأثیر آنها بر کسب و کار ایجاد کرده است. عملکرد در حال حاضر به طور کامل در توسعه محصول گنجانده شده است و تیم های محصول از دسترسی آسان به معیارها، ابزارهای حسابرسی و نظارت بر بودجه عملکرد لذت می برند. علاوه بر این، به دلیل ادغام لایه داده، معیارهای عملکرد نیز در ابزار تست Farfetch A/B در دسترس هستند که به مدیران محصول اطلاعات قدرتمند دیگری از بینش را می‌دهند.

در ماه‌های اخیر، تیم اصلی نیز در مسیر ایجاد این فرهنگ نه تنها در تیم‌های توسعه فرانت‌اند بلکه در حوزه پلتفرم، با استفاده از روش‌های مشابه برای نظارت و اثبات تأثیر خدمات و تراکنش‌های خرد اصلی است.

تعدادی از ارائه‌های مبتنی بر Farfetch در مورد این موضوع، اما همچنین اشاره‌های خارجی وجود داشته است. به عنوان مثال، اشاره ای به یک سخنرانی Google I/O در سال 2021 درباره تأثیر تجاری Core Web Vitals . این همچنین به ارتباط مستمر با موضوع کمک کرد و استراتژی تیم را در مورد فرهنگ مستحکم کرد.

مرحله 4: بهبود معیارها

در پایان، همه این کارها باید به فارفچ کمک کند تا معیارهای سرعت وب‌سایت خود را به طور عینی بهبود بخشد، و تضمین کند که تیم‌هایشان بهترین روش‌های کلاس را دنبال می‌کنند و فرصت‌های بهبود را دنبال می‌کنند.

یکی از فرصت‌های اصلی شناسایی شده در سال 2021، نیاز به بهبود LCP در دو نوع صفحه اصلی Farfetch-صفحه‌های محصول و صفحات فهرست محصولات- بود.

تیم ها به نحوه بارگذاری محتوای اصلی آن صفحات پرداختند. مسلح به یک پرونده تجاری که تأثیر تعقیب این فرصت را نشان می داد، آنها توانستند:

  • مولفه بارگیری تصویر محصول را از یک راه حل مبتنی بر جاوا اسکریپت با یک پیاده سازی بومی تطبیق دهید.
  • اولویت تصاویر را تعریف کنید و آنها را به دارایی های مهم و غیر بحرانی تقسیم کنید.
  • تصاویر مهم را زودتر بارگیری کنید، با منبع از قبل در HTML و با استفاده از <link rel="preload"> تا در اسرع وقت دانلود شوند.
  • از ویژگی <img loading="lazy"> برای تصاویر غیر بحرانی استفاده کنید، با یک polyfill با استفاده از Intersection Observer در مرورگرهای پشتیبانی نشده، مانند Safari.

با این کار، آنها توانستند سوزن را حرکت دهند و از طریق تست A/B فرضیه و تاثیر تجاری را ثابت کنند. برای مثال، در صفحات محصول، این تلاش بیش از 600 میلی‌ثانیه کاهش یافت و تست A/B افزایش نرخ تبدیل را در محدوده 1 تا 5 درصد با سطح اطمینان تعریف‌شده شرکت نشان داد.

در زیر، بهبودهایی را که تیم توانسته است از نظر درصد بازدید از صفحه انجام دهد، وجود دارد که بر اساس تعریف Google برای امتیاز LCP، «خوب»، «نیاز به بهبود» و «ضعیف» در نظر گرفته می‌شوند.

نمودار میله‌ای انباشته شده از LCP میانه در آستانه‌های Core Web Vitals برای صفحات فهرست Farfetch. صفحات در آستانه "خوب" از 37٪ به 53٪ افزایش یافته است.
نمودار میله‌ای انباشته شده از LCP میانه در آستانه‌های Core Web Vitals برای صفحات فهرست Farfetch. صفحات در آستانه "خوب" از 36٪ به 48٪ افزایش یافته است.

پاداش یک سایت سریعتر و شیوه های کاری بهتر

ایجاد یک فرهنگ حول عملکرد و ابزارهایی مانند ماشین حساب کسب و کار به همه این امکان را می دهد که به زبان مشترکی صحبت کنند که برای مدیران محصول، سهامداران و مهندسان به طور یکسان قابل درک باشد. این موضوع بحث‌های جاری را در مورد چگونگی اولویت‌بندی ابتکارات جدید و بهبود عملکرد تسریع کرده است.

Rui Santos، مدیر ارشد محصول کانال‌های وب Farfetch، توضیح می‌دهد: «ما می‌خواستیم چرخه عملکرد را بشکنیم که فقط یک نگرانی فنی است، چیزی که فقط متعلق به تیم مهندسی برای رسیدگی و رفع آن است. "اتصال معیارهای عملکرد با معیارهای کسب و کار به طرز شگفت انگیزی برای انتقال پیام بسیار بسیار سریع موثر بود. کسب و کار شرکت را هدایت می کند، و اتصال موفقیت آن به معیارهای سرعت، مجموعه گسترده تری از سهامداران را تشویق کرد تا تصمیمات مبادله ای را درک کنند و هدایت کنند."

در بخش تجارت الکترونیک لوکس، سریع یا کند بودن سایت شما می تواند تعیین کند که مشتریان چگونه برند شما و کیفیت خدمات شما را به طور کلی ببینند. برای کاربران، کیفیت برابر با تجمل است - و این برای هر جنبه ای از تجربه آنها، از جمله نحوه عملکرد وب سایت شما، صدق می کند. با توجه به اینکه سرعت سایت اثر ثابت شده ای بر نرخ تبدیل ایجاد می کند، عملکرد اکنون در Farfetch جایگاه امنی را در برنامه ریزی آینده اشغال می کند.

،

چگونه خرده فروش مد تجارت الکترونیک Core Web Vitals و معیارهای عملکرد را با معیارهای کسب و کار مرتبط کرد، شاهد افزایش KPI ها بود و یک "محاسب موردی تجاری عملکرد" ​​برای هدایت تصمیمات محصول و فرهنگ عملکرد ایجاد کرد.

دیکلا کوهن
Dikla Cohen
پاتریشیا کوتو نتو
Patrícia Couto Neto
روی سانتوس
Rui Santos

در داخل بسیاری از شرکت‌ها، عملکرد سرعت وب‌سایت و Core Web Vitals هنوز عمدتاً به عنوان مسئولیت تیم‌های مهندسی دیده می‌شود. اگر ارزش کسب و کار و تجربه مشتری درک نشود، سرعت سایت می تواند برای سایر حوزه های کسب و کار نامرئی شود. این می تواند باعث شود که هنگام تصمیم گیری های کلیدی و تعریف نقشه راه، عملکرد نادیده گرفته شود.

برای بهبود فرهنگ عملکرد در بین تیم ها و ایجاد پیشرفت های قابل توجه در تجربه وب آنها، خرده فروش مد تجارت الکترونیک لوکس Farfetch پروژه ای را برای تعریف و استفاده از معیارهای عملکرد مشتری محور واقعی راه اندازی کرد. آنها قصد داشتند اینها را با معیارهای تجاری به عنوان راهی برای روشن کردن چگونگی تأثیر عملکرد بر KPIهای شرکت مرتبط کنند.

با این حال، جاه طلبی های آنها به همین جا ختم نشد. در نهایت، هدف این پروژه تغییر فرهنگی در مقیاس بود - شکستن سیلوهای درون سازمان و معرفی یک زبان جدید تجاری-محور برای ارائه یک راه مشترک به همه برای صحبت در مورد آنچه قبلاً به عنوان موضوعات فنی در نظر گرفته می شد. Farfetch می خواست عملکرد سرعت وب سایت را به عنوان یک مسئولیت مشترک داشته باشد، تصمیم گیری آگاهانه را تسهیل کند و آن را به عنوان ستون اصلی چیزی که یک تجربه وب خوب را ایجاد می کند، تثبیت کند.

نمودار متضاد سرعت به عنوان مسئولیت توسعه دهنده در مقابل سرعت به عنوان مسئولیت مشترک. در حالت اول، هر فاز سیلو شده است، در حالی که در حالت دوم، هر فاز در همان سیلو رخ می دهد.

برای شروع، Farfetch متوجه شد که یک بخش واحد نمی تواند مانند قبل به این مهم دست یابد و یک تیم اصلی از متخصصان از حوزه های مختلف در شرکت - مهندسی، زیرساخت، معماری و محصول - گرد هم آورد که یک استراتژی گام به گام برای اصلاح نحوه نگاه شرکت به این موضوع ایجاد کردند.

مرحله 1: تعریف، اندازه گیری و نظارت بر معیارها

اول از همه، Farfetch نیاز داشت که ابزارهای نظارتی مناسب برای درک وضعیت فعلی و انحرافات در نقاط تماس و برنامه‌های کاربردی سفر داشته باشد.

آنها از داده های آزمایشگاهی و نظارت واقعی کاربر (داده های میدانی) برای ردیابی Core Web Vitals و معیارهای عملکرد کاربر محور اضافی برای تجزیه و تحلیل وضعیت فعلی عملکرد سرعت استفاده کردند. آن‌ها از جاوا اسکریپت و کتابخانه web-vitals.js برای جمع‌آوری داده‌ها استفاده کردند، که به تیم تجزیه و تحلیل محصول اجازه داد تا معیارهای عملکرد را در کنار معیارهای تجاری در همان جلسه مشاهده کنند و در نتیجه شروع به بررسی چگونگی تأثیر یکی بر دیگری کنند.

گروه چند رشته‌ای شروع به درک این موضوع کردند که کدام معیارها برای کسب‌وکار اهمیت بیشتری دارند. برای انجام این کار، آنها به مسیر حیاتی سفر کاربران Farfetch نگاه کردند و سعی کردند آن سفر را با نشانگرهای عملکرد مرتبط کنند. علاوه بر معیارهای Core Web Vitals که Google تشریح کرده است، که هر کدام جنبه مشخصی از تجربه کاربر را نشان می‌دهند، آنها همچنین از جاوا اسکریپت سفارشی برای ردیابی زمان تا اولین بایت (TTFB) ، First Contentful Paint (FCP) ، First Paint و Time to Interactive (TTI) استفاده کردند.

معیارها با استفاده از چندین روش Performance API ، Long Tasks API و polyfills Google جمع آوری می شوند. جزئیات بیشتر را می توان در این پست بلاگ فناوری Farfetch در اواسط 2020 توسط مانوئل گارسیا، مهندس اصلی ارشد وب، یافت.

در بخش تجزیه و تحلیل داده ها، Farfetch راه حل ردیابی چند کاناله خود را دارد که توسط برنامه های کاربردی به نام Omnitracking استفاده می شود. رویدادهای ایجاد شده توسط بازدیدهای صفحه، اقدامات کاربر و اقدامات سیستم را ردیابی می کند. مدل داده Omnitracking راه حل Farfetch برای موارد تحلیلی، کاوش داده و گزارش است که در بالای رویدادهای تولید شده توسط ردیاب ها ساخته شده است. هدف مدل داده کمک و حمایت از هر کسی است که نیاز به درک موارد زیر دارد:

  • رفتار کاربر
  • تجربه کاربری در برنامه های Farfetch
  • استفاده از برنامه ها
  • تبدیل های ماکرو و میکرو
  • تجزیه و تحلیل کانال متقاطع و قیف

سپس ایده این بود که داده های عملکرد هر صفحه نمایش در farfetch.com را که توسط جاوا اسکریپت گرفته شده است به این لایه داده اضافه کنیم. پیروی از این مدل تطابق بین داده‌های عملکرد و معیارهای قیف تبدیل اصلی را برای هر جلسه و مبنایی برای کاوش تحلیلی در مورد موضوع تضمین می‌کند.

سرانجام، Farfetch بودجه‌های عملکرد مبتنی بر زمان را برای هر معیار در صفحات سفر اصلی و یک فرآیند حاکمیتی برای رسیدگی به تخلفات بودجه ایجاد کرد. آنها همچنین شروع به ترکیب معیارهای عملکرد در خطوط لوله CI برای درک انحرافات بودجه در سریع ترین زمان ممکن در جریان توسعه کرده اند.

مرحله 2: برقراری ارتباط از طریق زبان تجاری

با داده‌های عملکردی که اکنون در مجموعه داده‌های هوش تجاری داخلی Farfetch موجود است، تیم تحلیلی شروع به بررسی مدل‌ها و الگوهای ریاضی در داده‌ها کرد که می‌توانست ارتباط بین معیارهای عملکرد و KPIهای تجاری را نشان دهد (به عنوان مثال، نرخ تبدیل و درصد بازدیدهای تک صفحه‌ای)، که اجازه می‌دهد دید جدیدی از تأثیر مالی سرعت سایت و UX برای کسب‌وکار داشته باشد. این امر باعث شد که عملکرد به زبان مشترک با تصمیم گیرندگان تجاری مورد بحث قرار گیرد. تجزیه و تحلیل شامل تمام Core Web Vitals و سایر معیارهایی بود که Farfetch ارزشمند می دانست. بینش های واقعاً تأثیرگذاری را نشان داد.

با در نظر گرفتن اینکه گوگل بزرگترین رنگ محتوایی (LCP) را برای ارائه یک تجربه کاربری بهینه در کمتر از 2.5 ثانیه توصیه می کند، Farfetch این آستانه را به دقت مطالعه کرد و نتایج معنی داری پیدا کرد.

تحلیل همبستگی آماری Farfetch نشان داد که فراتر از آن نقطه، نرخ تبدیل شروع به کاهش می‌کند و همچنین نرخ خروج افزایش می‌یابد. این نشان می‌دهد که کاربران واقعاً شروع به احساس ضعف در بارگذاری کند صفحه می‌کنند و نرخ تبدیل با هر ۱۰۰ میلی‌ثانیه بیشتر LCP به طور متوسط ​​۱.۳ درصد کاهش می‌یابد.

نموداری از LCP که در آن محور Y نرخ تبدیل و درصد بازدید از صفحه و محور X زمان LCP است. همانطور که LCP سریعتر است، درصد بازدیدهای یک صفحه کاهش می یابد و نرخ تبدیل افزایش می یابد.

Farfetch همچنین کاهش نرخ خروج از -3.1٪ را برای هر 0.01 کمتر در امتیاز تغییر چیدمان تجمعی (CLS) تأیید کرد، که مجدداً تأثیر ثبات صفحه را برای حفظ کاربران در یک وب سایت تأیید کرد.

نموداری از CLS که در آن محور Y نرخ تبدیل و درصد بازدید از صفحه است و محور X امتیاز CLS است. پایین‌ترین امتیازات CLS بیشترین درصد بازدیدهای تک صفحه‌ای را نشان می‌دهد، در حالی که تبدیل‌ها در امتیازات CLS پایین‌تر افزایش می‌یابد.

با توجه به تعامل و روان بودن صفحه، اگرچه تاخیر ورودی اول (FID) به طور مداوم ردیابی و تجزیه و تحلیل می شود، Farfetch همچنین TTI را اندازه گیری می کند، که ثابت کرد یک معیار بسیار تاثیرگذار برای قیف تبدیل تجاری Farfetch است.

برای این کار، آنها پلی‌فیل TTI گوگل را برای ذخیره این معیار به وب‌سایت تزریق کردند. استفاده از Long Tasks API برای گزارش کارهای طولانی (کارهایی که بیش از 50 میلی ثانیه در رشته اصلی مرورگر طول می کشد).

سپس تیم تجزیه و تحلیل توانست متوجه شود که نرخ تبدیل به ازای هر ثانیه کاهش در TTI 2.8 درصد افزایش می‌یابد، که دلیل محکمی برای کارایی بهتر کد و رفع گرفتگی رشته اصلی مرورگر است.

نمودار TTI که در آن محور Y نرخ تبدیل و درصد بازدیدهای تک صفحه است و محور X زمان TTI است. با بالا رفتن زمان TTI، نرخ تبدیل کاهش می‌یابد و درصد بازدیدهای تک صفحه افزایش می‌یابد.

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

مرحله 3: تعبیه تغییرات فرهنگی

نمایش بینش های بالا در کنار تحقیقات کیفی کاربر در مورد درک کاربر از سرعت سایت، برای ایجاد همسویی با اهداف شرکت، آگاهی سطح اجرایی ایمن و تصمیم گیری مبتنی بر عملکرد در سراسر نقشه راه محصول، بسیار مهم بود. اکنون می توان ثابت کرد که عملکرد Farfetch چقدر ارزش دارد.

برای ساده‌سازی اولویت‌بندی، Farfetch یک ابزار سلف‌سرویس ایجاد کرد که آن را Site Speed ​​Business Case Calculator نامیدند که از ماشین‌حساب تأثیر سرعت Google الهام گرفت. این به هر مدیر محصول اجازه می دهد تا با محاسبه تأثیر تجاری در پرواز، یک مورد تجاری از بهبود عملکرد ایجاد کند. با استفاده از مدل داده‌ای که از همبستگی بین معیارهای نرخ تبدیل و تجربه کاربر استفاده می‌کند، برای انطباق با حوزه‌های مختلف محصول، دستگاه‌ها و نقاط لمس سفر کاربر انعطاف‌پذیر است.

اسکرین شات از ماشین‌حساب کیس تجاری سرعت سایت Farfetch.

در همین حال، مجموعه ای از داشبوردهای تحلیلی سلف سرویس، دید گسترده ای از شاخص های عملکرد زمان واقعی و تأثیر آنها بر کسب و کار ایجاد کرده است. عملکرد در حال حاضر به طور کامل در توسعه محصول گنجانده شده است و تیم های محصول از دسترسی آسان به معیارها، ابزارهای حسابرسی و نظارت بر بودجه عملکرد لذت می برند. علاوه بر این، به دلیل ادغام لایه داده، معیارهای عملکرد نیز در ابزار تست Farfetch A/B در دسترس هستند که به مدیران محصول اطلاعات قدرتمند دیگری از بینش را می‌دهند.

در ماه‌های اخیر، تیم اصلی نیز در مسیر ایجاد این فرهنگ نه تنها در تیم‌های توسعه فرانت‌اند بلکه در حوزه پلتفرم، با استفاده از روش‌های مشابه برای نظارت و اثبات تأثیر خدمات و تراکنش‌های خرد اصلی است.

تعدادی از ارائه‌های مبتنی بر Farfetch در مورد این موضوع، اما همچنین اشاره‌های خارجی وجود داشته است. به عنوان مثال، اشاره ای به یک سخنرانی Google I/O در سال 2021 درباره تأثیر تجاری Core Web Vitals . این همچنین به ارتباط مستمر با موضوع کمک کرد و استراتژی تیم را در مورد فرهنگ مستحکم کرد.

مرحله 4: بهبود معیارها

در پایان، همه این کارها باید به فارفچ کمک کند تا معیارهای سرعت وب‌سایت خود را به طور عینی بهبود بخشد، و تضمین کند که تیم‌هایشان بهترین روش‌های کلاس را دنبال می‌کنند و فرصت‌های بهبود را دنبال می‌کنند.

یکی از فرصت‌های اصلی شناسایی شده در سال 2021، نیاز به بهبود LCP در دو نوع صفحه اصلی Farfetch-صفحه‌های محصول و صفحات فهرست محصولات- بود.

تیم ها به نحوه بارگذاری محتوای اصلی آن صفحات پرداختند. مسلح به یک پرونده تجاری که تأثیر تعقیب این فرصت را نشان می داد، آنها توانستند:

  • مولفه بارگیری تصویر محصول را از یک راه حل مبتنی بر جاوا اسکریپت با یک پیاده سازی بومی تطبیق دهید.
  • اولویت تصاویر را تعریف کنید و آنها را به دارایی های مهم و غیر بحرانی تقسیم کنید.
  • تصاویر مهم را زودتر بارگیری کنید، با منبع از قبل در HTML و با استفاده از <link rel="preload"> تا در اسرع وقت دانلود شوند.
  • از ویژگی <img loading="lazy"> برای تصاویر غیر بحرانی استفاده کنید، با یک polyfill با استفاده از Intersection Observer در مرورگرهای پشتیبانی نشده، مانند Safari.

با این کار، آنها توانستند سوزن را حرکت دهند و از طریق تست A/B فرضیه و تاثیر تجاری را ثابت کنند. برای مثال، در صفحات محصول، این تلاش بیش از 600 میلی‌ثانیه کاهش یافت و تست A/B افزایش نرخ تبدیل را در محدوده 1 تا 5 درصد با سطح اطمینان تعریف‌شده شرکت نشان داد.

در زیر، بهبودهایی را که تیم توانسته است از نظر درصد بازدید از صفحه انجام دهد، وجود دارد که بر اساس تعریف Google برای امتیاز LCP، «خوب»، «نیاز به بهبود» و «ضعیف» در نظر گرفته می‌شوند.

نمودار میله‌ای انباشته شده از LCP میانه در آستانه‌های Core Web Vitals برای صفحات فهرست Farfetch. صفحات در آستانه "خوب" از 37٪ به 53٪ افزایش یافته است.
نمودار میله‌ای انباشته شده از LCP میانه در آستانه‌های Core Web Vitals برای صفحات فهرست Farfetch. صفحات در آستانه "خوب" از 36٪ به 48٪ افزایش یافته است.

پاداش یک سایت سریعتر و شیوه های کاری بهتر

ایجاد یک فرهنگ حول عملکرد و ابزارهایی مانند ماشین حساب کسب و کار به همه این امکان را می دهد که به زبان مشترکی صحبت کنند که برای مدیران محصول، سهامداران و مهندسان به طور یکسان قابل درک باشد. این موضوع بحث‌های جاری را در مورد چگونگی اولویت‌بندی ابتکارات جدید و بهبود عملکرد تسریع کرده است.

Rui Santos، مدیر ارشد محصول کانال‌های وب Farfetch، توضیح می‌دهد: «ما می‌خواستیم چرخه عملکرد را بشکنیم که فقط یک نگرانی فنی است، چیزی که فقط متعلق به تیم مهندسی برای رسیدگی و رفع آن است. "اتصال معیارهای عملکرد با معیارهای کسب و کار به طرز شگفت انگیزی برای انتقال پیام بسیار بسیار سریع موثر بود. کسب و کار شرکت را هدایت می کند، و اتصال موفقیت آن به معیارهای سرعت، مجموعه گسترده تری از سهامداران را تشویق کرد تا تصمیمات مبادله ای را درک کنند و هدایت کنند."

در بخش تجارت الکترونیک لوکس، سریع یا کند بودن سایت شما می تواند تعیین کند که مشتریان چگونه برند شما و کیفیت خدمات شما را به طور کلی ببینند. برای کاربران، کیفیت برابر با تجمل است - و این برای هر جنبه ای از تجربه آنها، از جمله نحوه عملکرد وب سایت شما، صدق می کند. با توجه به اینکه سرعت سایت اثر ثابت شده ای بر نرخ تبدیل ایجاد می کند، عملکرد اکنون در Farfetch جایگاه امنی را در برنامه ریزی آینده اشغال می کند.

،

چگونه خرده فروش مد تجارت الکترونیک Core Web Vitals و معیارهای عملکرد را با معیارهای کسب و کار مرتبط کرد، شاهد افزایش KPI ها بود و یک "محاسب موردی تجاری عملکرد" ​​برای هدایت تصمیمات محصول و فرهنگ عملکرد ایجاد کرد.

دیکلا کوهن
Dikla Cohen
پاتریشیا کوتو نتو
Patrícia Couto Neto
روی سانتوس
Rui Santos

در داخل بسیاری از شرکت‌ها، عملکرد سرعت وب‌سایت و Core Web Vitals هنوز عمدتاً به عنوان مسئولیت تیم‌های مهندسی دیده می‌شود. اگر ارزش کسب و کار و تجربه مشتری درک نشود، سرعت سایت می تواند برای سایر حوزه های کسب و کار نامرئی شود. این می تواند باعث شود که هنگام تصمیم گیری های کلیدی و تعریف نقشه راه، عملکرد نادیده گرفته شود.

برای بهبود فرهنگ عملکرد در بین تیم ها و ایجاد پیشرفت های قابل توجه در تجربه وب آنها، خرده فروش مد تجارت الکترونیک لوکس Farfetch پروژه ای را برای تعریف و استفاده از معیارهای عملکرد مشتری محور واقعی راه اندازی کرد. آنها قصد داشتند اینها را با معیارهای تجاری به عنوان راهی برای روشن کردن چگونگی تأثیر عملکرد بر KPIهای شرکت مرتبط کنند.

با این حال، جاه طلبی های آنها به همین جا ختم نشد. در نهایت، هدف این پروژه تغییر فرهنگی در مقیاس بود - شکستن سیلوهای درون سازمان و معرفی یک زبان جدید تجاری-محور برای ارائه یک راه مشترک به همه برای صحبت در مورد آنچه قبلاً به عنوان موضوعات فنی در نظر گرفته می شد. Farfetch می خواست عملکرد سرعت وب سایت را به عنوان یک مسئولیت مشترک داشته باشد، تصمیم گیری آگاهانه را تسهیل کند و آن را به عنوان ستون اصلی چیزی که یک تجربه وب خوب را ایجاد می کند، تثبیت کند.

نمودار متضاد سرعت به عنوان مسئولیت توسعه دهنده در مقابل سرعت به عنوان مسئولیت مشترک. در حالت اول، هر فاز سیلو شده است، در حالی که در حالت دوم، هر فاز در همان سیلو رخ می دهد.

برای شروع، Farfetch متوجه شد که یک بخش واحد نمی تواند مانند قبل به این مهم دست یابد و یک تیم اصلی از متخصصان از حوزه های مختلف در شرکت - مهندسی، زیرساخت، معماری و محصول - گرد هم آورد که یک استراتژی گام به گام برای اصلاح نحوه نگاه شرکت به این موضوع ایجاد کردند.

مرحله 1: تعریف، اندازه گیری و نظارت بر معیارها

اول از همه، Farfetch نیاز داشت که ابزارهای نظارتی مناسب برای درک وضعیت فعلی و انحرافات در نقاط تماس و برنامه‌های کاربردی سفر داشته باشد.

آنها از داده های آزمایشگاهی و نظارت واقعی کاربر (داده های میدانی) برای ردیابی Core Web Vitals و معیارهای عملکرد کاربر محور اضافی برای تجزیه و تحلیل وضعیت فعلی عملکرد سرعت استفاده کردند. آن‌ها از جاوا اسکریپت و کتابخانه web-vitals.js برای جمع‌آوری داده‌ها استفاده کردند، که به تیم تجزیه و تحلیل محصول اجازه داد تا معیارهای عملکرد را در کنار معیارهای تجاری در همان جلسه مشاهده کنند و در نتیجه شروع به بررسی چگونگی تأثیر یکی بر دیگری کنند.

گروه چند رشته‌ای شروع به درک این موضوع کردند که کدام معیارها برای کسب‌وکار اهمیت بیشتری دارند. برای انجام این کار، آنها به مسیر حیاتی سفر کاربران Farfetch نگاه کردند و سعی کردند آن سفر را با نشانگرهای عملکرد مرتبط کنند. علاوه بر معیارهای Core Web Vitals که Google تشریح کرده است، که هر کدام جنبه مشخصی از تجربه کاربر را نشان می‌دهند، آنها همچنین از جاوا اسکریپت سفارشی برای ردیابی زمان تا اولین بایت (TTFB) ، First Contentful Paint (FCP) ، First Paint و Time to Interactive (TTI) استفاده کردند.

معیارها با استفاده از چندین روش Performance API ، Long Tasks API و polyfills Google جمع آوری می شوند. جزئیات بیشتر را می توان در این پست بلاگ فناوری Farfetch در اواسط 2020 توسط مانوئل گارسیا، مهندس اصلی ارشد وب، یافت.

در بخش تجزیه و تحلیل داده ها، Farfetch راه حل ردیابی چند کاناله خود را دارد که توسط برنامه های کاربردی به نام Omnitracking استفاده می شود. رویدادهای ایجاد شده توسط بازدیدهای صفحه، اقدامات کاربر و اقدامات سیستم را ردیابی می کند. مدل داده Omnitracking راه حل Farfetch برای موارد تحلیلی، کاوش داده و گزارش است که در بالای رویدادهای تولید شده توسط ردیاب ها ساخته شده است. هدف مدل داده کمک و حمایت از هر کسی است که نیاز به درک موارد زیر دارد:

  • رفتار کاربر
  • تجربه کاربری در برنامه های Farfetch
  • استفاده از برنامه ها
  • تبدیل های ماکرو و میکرو
  • تجزیه و تحلیل کانال متقاطع و قیف

سپس ایده این بود که داده های عملکرد هر صفحه نمایش در farfetch.com را که توسط جاوا اسکریپت گرفته شده است به این لایه داده اضافه کنیم. پیروی از این مدل تطابق بین داده‌های عملکرد و معیارهای قیف تبدیل اصلی را برای هر جلسه و مبنایی برای کاوش تحلیلی در مورد موضوع تضمین می‌کند.

سرانجام، Farfetch بودجه‌های عملکرد مبتنی بر زمان را برای هر معیار در صفحات سفر اصلی و یک فرآیند حاکمیتی برای رسیدگی به تخلفات بودجه ایجاد کرد. آنها همچنین شروع به ترکیب معیارهای عملکرد در خطوط لوله CI برای درک انحرافات بودجه در سریع ترین زمان ممکن در جریان توسعه کرده اند.

مرحله 2: برقراری ارتباط از طریق زبان تجاری

با داده‌های عملکردی که اکنون در مجموعه داده‌های هوش تجاری داخلی Farfetch موجود است، تیم تحلیلی شروع به بررسی مدل‌ها و الگوهای ریاضی در داده‌ها کرد که می‌توانست ارتباط بین معیارهای عملکرد و KPIهای تجاری را نشان دهد (به عنوان مثال، نرخ تبدیل و درصد بازدیدهای تک صفحه‌ای)، که اجازه می‌دهد دید جدیدی از تأثیر مالی سرعت سایت و UX برای کسب‌وکار داشته باشد. این امر باعث شد که عملکرد به زبان مشترک با تصمیم گیرندگان تجاری مورد بحث قرار گیرد. تجزیه و تحلیل شامل تمام Core Web Vitals و سایر معیارهایی بود که Farfetch ارزشمند می دانست. این بینش واقعاً تأثیرگذار را نشان داد.

با توجه به اینکه گوگل بزرگترین رنگ محتوا (LCP) را توصیه می کند تا زیر 2.5 ثانیه بماند تا یک تجربه کاربر بهینه ارائه شود ، Farfetch این آستانه را با دقت مورد مطالعه قرار داد و نتایج معنی داری پیدا کرد.

تجزیه و تحلیل همبستگی آماری Farfetch نشان داد که فراتر از آن نقطه ، نرخ تبدیل شروع به کاهش می کند و همچنین نرخ خروج افزایش می یابد. این نشان می دهد که کاربران واقعاً احساس نزولی درک بار صفحه را احساس می کنند و میزان تبدیل به طور متوسط ​​-1.3 ٪ با هر 100ms بیشتر از LCP کاهش می یابد.

نمودار LCP ، که در آن محور y نرخ تبدیل و درصد بازدید از صفحه است و محور x زمان LCP است. از آنجا که LCP سریعتر است ، درصد بازدید از صفحه یک صفحه کاهش می یابد و میزان تبدیل افزایش می یابد.

Farfetch همچنین کاهش نرخ خروج -3.1 ٪ برای هر 0.01 کمتر در نمره تغییر چیدمان تجمعی (CLS) را تأیید کرد و تأثیرات ثبات صفحه را برای نگه داشتن کاربران در یک وب سایت تأیید کرد.

نمودار CLS ، که در آن محور y نرخ تبدیل و درصد بازدید از صفحه است ، و محور x نمره CLS است. کمترین نمرات CLS بالاترین درصد از بازدیدهای صفحه را نشان می دهد ، در حالی که تبدیل ها در نمرات CLS پایین تر افزایش می یابد.

با توجه به تعامل و سیالیت صفحه ، اگرچه اولین تأخیر ورودی (FID) به طور مداوم ردیابی و مورد تجزیه و تحلیل قرار می گیرد ، Farfetch همچنین TTI را اندازه گیری می کند ، که ثابت شد یک متریک بسیار تأثیرگذار برای قیف تبدیل تجارت Farfetch است.

برای این کار ، آنها TTI Polyfill Google را به وب سایت تزریق کردند تا این متریک را ذخیره کنند. با استفاده از API کارهای طولانی برای گزارش کارهای طولانی (وظایف بیش از 50 میلی ثانیه در موضوع اصلی مرورگر).

تیم تحلیلی پس از آن توانست دریابید که نرخ تبدیل برای هر کاهش دوم در TTI 2.8 ٪ افزایش یافته است ، و یک مورد قوی برای راندمان کد بهتر و عدم توجه به موضوع اصلی مرورگر ایجاد می کند.

نمودار TTI ، که در آن محور y نرخ تبدیل و درصد بازدید از صفحه واحد است و محور x زمان TTI است. با افزایش زمان TTI ، میزان تبدیل کاهش می یابد و درصد بازدیدهای صفحه یک صفحه افزایش می یابد.

در پایان ، این تجزیه و تحلیل همچنین نشان داد که برخی از معیارها تأثیر قابل توجهی در KPI های تجاری ندارند ، یا برخی از آنها در مراحل مختلف سفر کاربر اهمیت بیشتری دارند. این امر امکان درک کامل از فرصت های موجود در هر نقطه از قیف تبدیل را فراهم می کند.

مرحله 3: تعبیه تغییر فرهنگی

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

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

تصویری از ماشین حساب پرونده سرعت سایت Farfetch.

در همین حال ، مجموعه ای از داشبوردهای تحلیلی سلف سرویس باعث ایجاد دید در سطح تجارت از شاخص های عملکرد در زمان واقعی و تأثیر آنها بر تجارت شده است. اکنون عملکرد به طور کامل در توسعه محصول تعبیه شده است و تیم های محصول از دسترسی آسان به معیارها ، ابزارهای حسابرسی و نظارت بر بودجه عملکرد برخوردار هستند. علاوه بر این ، به دلیل ادغام لایه داده ، معیارهای عملکرد در ابزار تست A/B Farfetch نیز موجود است و به مدیران محصول وکتور قدرتمند دیگری از بینش ها می دهد.

در ماه های اخیر ، تیم اصلی نیز در مسیر ایجاد این فرهنگ نه تنها در تیم های توسعه مقدماتی بلکه در حوزه پلتفرم ، با استفاده از روشهای مشابه برای نظارت و اثبات تأثیر خدمات اصلی و معاملات خرد است.

تعدادی از ارائه های محور Farfetch در مورد این موضوع وجود داشته است ، اما همچنین ذکرهای خارجی نیز وجود دارد. به عنوان مثال ، ذکر در مورد بحث در مورد Google I/O 2021 در مورد تأثیر تجارت ویتامان اصلی وب . این امر همچنین به ارائه ارتباط مداوم به موضوع و تقویت استراتژی تیم در مورد فرهنگ کمک کرده است.

مرحله 4: بهبود معیارها

در پایان ، تمام این کارها برای کمک به Farfetch به طور عینی در بهبود معیارهای سرعت وب سایت خود نیاز داشتند و تضمین می کنند که تیم های آنها در شیوه های کلاس از بهترین ها پیروی می کنند و فرصت های پیشرفت را دنبال می کنند.

یکی از اصلی ترین فرصت های شناسایی شده در سال 2021 ، نیاز به بهبود LCP در دو صفحه اصلی صفحات Farfetch - محصولات و صفحات لیست محصول بود.

تیم ها به نحوه بارگیری محتوای اصلی آن صفحات پرداختند. مسلح به یک مورد تجاری که تأثیر تعقیب این فرصت را نشان می داد ، آنها توانستند:

  • مؤلفه بارگیری تصویر محصول را از یک راه حل مبتنی بر JavaScript برای اجرای بومی سازگار کنید.
  • اولویت تصاویر را تعریف کرده و آنها را به دارایی های بحرانی و غیر بحرانی تقسیم کنید.
  • تصاویر بحرانی را زود بارگیری کنید ، با منبع در حال حاضر در HTML و با استفاده از <link rel="preload"> بنابراین آنها در اسرع وقت بارگیری می کنند.
  • برای تصاویر غیر بحرانی از ویژگی <img loading="lazy"> استفاده کنید ، با یک پلی فیل با استفاده از ناظر تقاطع در مرورگرهای پشتیبانی نشده مانند سافاری.

با این کار ، آنها توانستند سوزن را جابجا کنند و از طریق آزمایش A/B فرضیه و تأثیر تجاری را اثبات کنند. به عنوان مثال ، در صفحات محصول ، این تلاش بیش از 600ms تراشیده شده است ، و آزمون A/B میزان افزایش نرخ تبدیل را در محدوده 1-5 ٪ با سطح اطمینان مشخص شرکت نشان داد.

در زیر پیشرفت هایی که تیم از نظر درصد صفحه نمایش های "خوب" ، "نیاز به بهبود" و "ضعیف" در نظر گرفته شده است ، بر اساس تعریف گوگل برای نمره LCP انجام داده است.

نمودار نوار انباشته شده از LCP متوسط ​​در آستانه های اصلی وب ویتام برای صفحات لیست Farfetch. صفحات در آستانه "خوب" از 37 ٪ به 53 ٪ افزایش یافته است.
نمودار نوار انباشته شده از LCP متوسط ​​در آستانه های اصلی وب ویتام برای صفحات لیست Farfetch. صفحات در آستانه "خوب" از 36 ٪ به 48 ٪ افزایش یافته است.

پاداش یک سایت سریعتر و شیوه های بهتر کار

ایجاد فرهنگ پیرامون عملکرد و ابزارهایی مانند ماشین حساب پرونده تجاری به همه اجازه می دهد تا با یک زبان مشترک صحبت کنند که توسط مدیران محصول ، ذینفعان و مهندسان قابل درک است. این بحث در مورد نحوه اولویت بندی ابتکارات جدید و پیشرفتهای عملکرد را تشدید کرده است.

Rui Santos ، مدیر ارشد اصلی محصول Farfetch توضیح می دهد: "ما می خواستیم چرخه عملکرد را به عنوان یک نگرانی تکنیکی بشکنیم ، چیزی که فقط توسط تیم مهندسی برای مقابله و رفع آن وجود دارد." "اتصال معیارهای عملکرد با معیارهای تجاری به طرز شگفت آور مؤثر بود تا پیام را خیلی سریع منتقل کند. تجارت این شرکت را هدایت می کند و موفقیت آن را برای سرعت بخشیدن به معیارها متصل می کند ، مجموعه گسترده تری از ذینفعان را برای درک و حرکت در تصمیمات معامله ترغیب می کند."

در بخش تجارت الکترونیکی لوکس ، چه سایت شما سریع باشد یا کند می تواند دیکته کند که مصرف کنندگان چگونه برند و کیفیت خدمات شما را به طور کلی می بینند. برای کاربران ، کیفیت برابر با لوکس است - و این مربوط به هر جنبه ای از تجربه آنها ، از جمله نحوه عملکرد وب سایت شما است. با وجود سرعت سایت تأثیر اثبات شده بر میزان تبدیل ، عملکرد اکنون موقعیتی ایمن در برنامه ریزی رو به جلو در Farfetch دارد.

،

چگونه خرده فروش مد تجارت الکترونیکی با ویتامین های اصلی وب و معیارهای عملکرد با معیارهای تجاری ارتباط داشت ، شاهد افزایش KPI ها بود و "ماشین حساب موردی برای عملکرد عملکرد" ​​را برای هدایت تصمیمات محصول و فرهنگ عملکرد ایجاد کرد.

دیکلا کوهن
Dikla Cohen
Patrícia Couto Neto
Patrícia Couto Neto
روی سانتوس
Rui Santos

در داخل بسیاری از شرکت ها ، عملکرد سرعت وب سایت و وب ویتای اصلی هنوز بیشتر به عنوان مسئولیت تیم های مهندسی دیده می شوند. در صورت عدم درک ارزش تجارت و تجربه مشتری ، سرعت سایت می تواند برای سایر زمینه های تجارت نامرئی شود. این می تواند باعث شود که هنگام تصمیم گیری های کلیدی و نقشه راه ، عملکرد را نادیده گرفته شود.

برای بهبود فرهنگ عملکرد در بین تیم ها و پیشرفت های چشمگیر در تجربه وب آنها ، خرده فروش لوکس تجارت الکترونیکی Farfetch پروژه ای را برای تعریف و استفاده از معیارهای عملکرد واقعی مشتری محور راه اندازی کرد. آنها با هدف همبستگی اینها با معیارهای تجاری به عنوان راهی برای روشن کردن نحوه تأثیر عملکرد بر KPI های شرکت.

جاه طلبی های آنها به همین جا ختم نشد. در نهایت ، هدف این پروژه تغییر فرهنگی در مقیاس بود-شکستن سیلوهای در سازمان و معرفی یک زبان جدید با تجارت گرا برای همه به همه می دهد تا در مورد آنچه قبلاً مباحث فنی در نظر گرفته می شد ، صحبت کنند. Farfetch می خواست عملکرد سرعت وب سایت را به عنوان یک مسئولیت مشترک داشته باشد ، تصمیم گیری آگاهانه را تسهیل کند و آن را به عنوان ستون اصلی آنچه که یک تجربه وب خوب را ایجاد می کند ، ایجاد کند.

سرعت متضاد نمودار به عنوان مسئولیت یک توسعه دهنده در مقابل سرعت به عنوان یک مسئولیت مشترک. در مورد قبلی ، هر مرحله خاموش می شود ، در حالی که در حالت دوم ، هر مرحله در همان سیلو اتفاق می افتد.

برای شروع کار ، Farfetch متوجه شد که یک بخش واحد نمی تواند مانند گذشته به این هدف دست یابد و یک تیم اصلی از متخصصان مناطق مختلف شرکت-مهندسی ، زیرساخت ها ، معماری و محصول-جمع آوری کرد و این یک استراتژی گام به گام را برای بازسازی نحوه نگاه شرکت به این موضوع ایجاد کرد.

مرحله 1: معیارهای تعریف ، اندازه گیری و نظارت

اول از همه ، Farfetch برای درک وضعیت فعلی و انحرافات در نقاط لمسی و برنامه های کاربردی نیاز به ابزارهای نظارت مناسب داشت.

آنها از داده های آزمایشگاهی و نظارت بر کاربر واقعی (داده های فیلد) برای ردیابی وب ویتای اصلی و معیارهای اضافی عملکرد کاربر محور برای تجزیه و تحلیل وضعیت فعلی عملکرد سرعت استفاده کردند. آنها برای ضبط داده ها از JavaScript و web-vitals.js استفاده کردند ، که به تیم تحلیلی محصول اجازه می داد تا در همان جلسه ، از معیارهای عملکرد در کنار معیارهای تجاری استفاده کنند و از این طریق شروع به بررسی چگونگی تأثیر دیگری بر دیگری می کنند.

گروه چند رشته ای برای درک اینکه کدام معیارها برای تجارت مهم است ، تصمیم گرفتند. برای انجام این کار ، آنها به مسیر سفر بحرانی کاربران Farfetch نگاه کردند و سعی کردند آن سفر را با نشانگرهای عملکرد پیوند دهند. علاوه بر معیارهای اصلی وب ویتالز که Google بیان کرده است ، هر یک از جنبه های مشخصی از تجربه کاربر ، آنها همچنین از JavaScript سفارشی برای ردیابی زمان به بایت اول (TTFB) ، اولین رنگ محتوا (FCP) ، رنگ اول و زمان تعاملی (TTI) استفاده می کنند.

این معیارها با استفاده از چندین روش API عملکرد ، API Tasks Long و Polyfills Google جمع آوری می شوند. جزئیات بیشتر را می توان در این پست وبلاگ فناوری Farfetch در اواسط سال 2020 توسط مانوئل گارسیا ، مهندس ارشد اصلی وب یافت.

از طرف تجزیه و تحلیل داده ها ، Farfetch راه حل ردیابی چند کانال مخصوص به خود را که توسط برنامه های انتهایی جلو به نام omnitracking استفاده می شود ، دارد. این رویدادهای ایجاد شده توسط صفحه نمایش ، اقدامات کاربر و اقدامات سیستم را ردیابی می کند. مدل داده OmniTracking راه حل Farfetch برای موارد تحلیلی ، اکتشاف داده ها و گزارش ها است که در بالای رویدادهای ایجاد شده توسط ردیاب ها ساخته شده است. هدف مدل داده کمک و پشتیبانی از هر کسی است که باید درک کند:

  • رفتار کاربر
  • تجربه کاربر در برنامه های Farfetch
  • استفاده از برنامه ها
  • تبدیل کلان و میکرو
  • تجزیه و تحلیل کانال و قیف

سپس ایده اضافه کردن داده های عملکرد هر صفحه در Farfetch.com ، ضبط شده توسط JavaScript ، به این لایه داده اضافه شد. به دنبال این مدل ، تطابق بین داده های عملکرد و معیارهای اصلی قیف تبدیل برای هر جلسه و پایه برای اکتشاف تحلیلی در مورد موضوع تضمین می شود.

سرانجام ، Farfetch بودجه عملکرد مبتنی بر زمان را برای هر متریک در صفحات اصلی سفر و یک روند حاکمیتی برای رسیدگی به نقض بودجه ایجاد کرد. آنها همچنین شروع به ترکیب معیارهای عملکرد در خطوط لوله CI کرده اند تا در اسرع وقت در جریان توسعه ، انحراف بودجه را درک کنند.

مرحله 2: برقراری ارتباط از طریق زبان تجاری

با استفاده از داده های عملکردی که اکنون در مجموعه داده های هوش داخلی تجاری Farfetch موجود است ، تیم تحلیلی شروع به کاوش در مدل ها و الگوهای ریاضی در داده هایی کرد که می تواند همبستگی بین معیارهای عملکرد و KPI های تجاری (به عنوان مثال ، نرخ تبدیل و درصد ویزیت های تک صفحه ای) را نشان دهد ، و اجازه می دهد تا از تأثیر مالی سرعت سایت و UX برای تجارت استفاده کند. این عملکرد را قادر به بحث در یک زبان مشترک با تصمیم گیرندگان تجارت می کند. این تجزیه و تحلیل شامل کلیه ویتامین های اصلی وب و معیارهای دیگر Farfetch با ارزش تلقی می شد. این بینش واقعاً تأثیرگذار را نشان داد.

با توجه به اینکه گوگل بزرگترین رنگ محتوا (LCP) را توصیه می کند تا زیر 2.5 ثانیه بماند تا یک تجربه کاربر بهینه ارائه شود ، Farfetch این آستانه را با دقت مورد مطالعه قرار داد و نتایج معنی داری پیدا کرد.

تجزیه و تحلیل همبستگی آماری Farfetch نشان داد که فراتر از آن نقطه ، نرخ تبدیل شروع به کاهش می کند و همچنین نرخ خروج افزایش می یابد. این نشان می دهد که کاربران واقعاً احساس نزولی درک بار صفحه را احساس می کنند و میزان تبدیل به طور متوسط ​​-1.3 ٪ با هر 100ms بیشتر از LCP کاهش می یابد.

نمودار LCP ، که در آن محور y نرخ تبدیل و درصد بازدید از صفحه است و محور x زمان LCP است. از آنجا که LCP سریعتر است ، درصد بازدید از صفحه یک صفحه کاهش می یابد و میزان تبدیل افزایش می یابد.

Farfetch همچنین کاهش نرخ خروج -3.1 ٪ برای هر 0.01 کمتر در نمره تغییر چیدمان تجمعی (CLS) را تأیید کرد و تأثیرات ثبات صفحه را برای نگه داشتن کاربران در یک وب سایت تأیید کرد.

نمودار CLS ، که در آن محور y نرخ تبدیل و درصد بازدید از صفحه است ، و محور x نمره CLS است. کمترین نمرات CLS بالاترین درصد از بازدیدهای صفحه را نشان می دهد ، در حالی که تبدیل ها در نمرات CLS پایین تر افزایش می یابد.

با توجه به تعامل و سیالیت صفحه ، اگرچه اولین تأخیر ورودی (FID) به طور مداوم ردیابی و مورد تجزیه و تحلیل قرار می گیرد ، Farfetch همچنین TTI را اندازه گیری می کند ، که ثابت شد یک متریک بسیار تأثیرگذار برای قیف تبدیل تجارت Farfetch است.

برای این کار ، آنها TTI Polyfill Google را به وب سایت تزریق کردند تا این متریک را ذخیره کنند. با استفاده از API کارهای طولانی برای گزارش کارهای طولانی (وظایف بیش از 50 میلی ثانیه در موضوع اصلی مرورگر).

تیم تحلیلی پس از آن توانست دریابید که نرخ تبدیل برای هر کاهش دوم در TTI 2.8 ٪ افزایش یافته است ، و یک مورد قوی برای راندمان کد بهتر و عدم توجه به موضوع اصلی مرورگر ایجاد می کند.

نمودار TTI ، که در آن محور y نرخ تبدیل و درصد بازدید از صفحه واحد است و محور x زمان TTI است. با افزایش زمان TTI ، میزان تبدیل کاهش می یابد و درصد بازدیدهای صفحه یک صفحه افزایش می یابد.

در پایان ، این تجزیه و تحلیل همچنین نشان داد که برخی از معیارها تأثیر قابل توجهی در KPI های تجاری ندارند ، یا برخی از آنها در مراحل مختلف سفر کاربر اهمیت بیشتری دارند. این امر امکان درک کامل از فرصت های موجود در هر نقطه از قیف تبدیل را فراهم می کند.

مرحله 3: تعبیه تغییر فرهنگی

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

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

تصویری از ماشین حساب پرونده سرعت سایت Farfetch.

در همین حال ، مجموعه ای از داشبوردهای تحلیلی سلف سرویس باعث ایجاد دید در سطح تجارت از شاخص های عملکرد در زمان واقعی و تأثیر آنها بر تجارت شده است. اکنون عملکرد به طور کامل در توسعه محصول تعبیه شده است و تیم های محصول از دسترسی آسان به معیارها ، ابزارهای حسابرسی و نظارت بر بودجه عملکرد برخوردار هستند. علاوه بر این ، به دلیل ادغام لایه داده ، معیارهای عملکرد در ابزار تست A/B Farfetch نیز موجود است و به مدیران محصول وکتور قدرتمند دیگری از بینش ها می دهد.

در ماه های اخیر ، تیم اصلی نیز در مسیر ایجاد این فرهنگ نه تنها در تیم های توسعه مقدماتی بلکه در حوزه پلتفرم ، با استفاده از روشهای مشابه برای نظارت و اثبات تأثیر خدمات اصلی و معاملات خرد است.

تعدادی از ارائه های محور Farfetch در مورد این موضوع وجود داشته است ، اما همچنین ذکرهای خارجی نیز وجود دارد. به عنوان مثال ، ذکر در مورد بحث در مورد Google I/O 2021 در مورد تأثیر تجارت ویتامان اصلی وب . این امر همچنین به ارائه ارتباط مداوم به موضوع و تقویت استراتژی تیم در مورد فرهنگ کمک کرده است.

مرحله 4: بهبود معیارها

در پایان ، تمام این کارها برای کمک به Farfetch به طور عینی در بهبود معیارهای سرعت وب سایت خود نیاز داشتند و تضمین می کنند که تیم های آنها در شیوه های کلاس از بهترین ها پیروی می کنند و فرصت های پیشرفت را دنبال می کنند.

یکی از اصلی ترین فرصت های شناسایی شده در سال 2021 ، نیاز به بهبود LCP در دو صفحه اصلی صفحات Farfetch - محصولات و صفحات لیست محصول بود.

تیم ها به نحوه بارگیری محتوای اصلی آن صفحات پرداختند. مسلح به یک مورد تجاری که تأثیر تعقیب این فرصت را نشان می داد ، آنها توانستند:

  • مؤلفه بارگیری تصویر محصول را از یک راه حل مبتنی بر JavaScript برای اجرای بومی سازگار کنید.
  • اولویت تصاویر را تعریف کرده و آنها را به دارایی های بحرانی و غیر بحرانی تقسیم کنید.
  • تصاویر بحرانی را زود بارگیری کنید ، با منبع در حال حاضر در HTML و با استفاده از <link rel="preload"> بنابراین آنها در اسرع وقت بارگیری می کنند.
  • برای تصاویر غیر بحرانی از ویژگی <img loading="lazy"> استفاده کنید ، با یک پلی فیل با استفاده از ناظر تقاطع در مرورگرهای پشتیبانی نشده مانند سافاری.

با این کار ، آنها توانستند سوزن را جابجا کنند و از طریق آزمایش A/B فرضیه و تأثیر تجاری را اثبات کنند. به عنوان مثال ، در صفحات محصول ، این تلاش بیش از 600ms تراشیده شده است ، و آزمون A/B میزان افزایش نرخ تبدیل را در محدوده 1-5 ٪ با سطح اطمینان مشخص شرکت نشان داد.

در زیر پیشرفت هایی که تیم از نظر درصد صفحه نمایش های "خوب" ، "نیاز به بهبود" و "ضعیف" در نظر گرفته شده است ، بر اساس تعریف گوگل برای نمره LCP انجام داده است.

نمودار نوار انباشته شده از LCP متوسط ​​در آستانه های اصلی وب ویتام برای صفحات لیست Farfetch. صفحات در آستانه "خوب" از 37 ٪ به 53 ٪ افزایش یافته است.
نمودار نوار انباشته شده از LCP متوسط ​​در آستانه های اصلی وب ویتام برای صفحات لیست Farfetch. صفحات در آستانه "خوب" از 36 ٪ به 48 ٪ افزایش یافته است.

پاداش یک سایت سریعتر و شیوه های بهتر کار

ایجاد فرهنگ پیرامون عملکرد و ابزارهایی مانند ماشین حساب پرونده تجاری به همه اجازه می دهد تا با یک زبان مشترک صحبت کنند که توسط مدیران محصول ، ذینفعان و مهندسان قابل درک است. این بحث در مورد نحوه اولویت بندی ابتکارات جدید و پیشرفتهای عملکرد را تشدید کرده است.

Rui Santos ، مدیر ارشد اصلی محصول Farfetch توضیح می دهد: "ما می خواستیم چرخه عملکرد را به عنوان یک نگرانی تکنیکی بشکنیم ، چیزی که فقط توسط تیم مهندسی برای مقابله و رفع آن وجود دارد." "اتصال معیارهای عملکرد با معیارهای تجاری به طرز شگفت آور مؤثر بود تا پیام را خیلی سریع منتقل کند. تجارت این شرکت را هدایت می کند و موفقیت آن را برای سرعت بخشیدن به معیارها متصل می کند ، مجموعه گسترده تری از ذینفعان را برای درک و حرکت در تصمیمات معامله ترغیب می کند."

در بخش تجارت الکترونیکی لوکس ، چه سایت شما سریع باشد یا کند می تواند دیکته کند که مصرف کنندگان چگونه برند و کیفیت خدمات شما را به طور کلی می بینند. برای کاربران ، کیفیت برابر با لوکس است - و این مربوط به هر جنبه ای از تجربه آنها ، از جمله نحوه عملکرد وب سایت شما است. با وجود سرعت سایت تأثیر اثبات شده بر میزان تبدیل ، عملکرد اکنون موقعیتی ایمن در برنامه ریزی رو به جلو در Farfetch دارد.