راهنمای فنی SEO برای معیارهای عملکرد فانوس دریایی

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

هر یک گزینه عالی است. خوش آمدی!

برای این ماجراجویی جالب و شفاف در جهت پاک کردن اسناد توسعه دهنده ، من SEO SEO و Google Data Studio را استخدام کرده ام راشل اندرسون.

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

ما می خواهیم موارد زیر را بررسی کنیم:

  • فانوس دریایی چیست؟ (درصورتی که نمی دانستید و از پرسیدن ترس داشتید.)
  • به روزرسانی های نحوه محاسبه امتیاز عملکرد (نسخه های 6 و 7).
  • نحوه تست عملکرد با استفاده از فانوس دریایی.
  • چه معیارهایی شامل امتیاز عملکرد Lighthouse است.
  • معنای آن معیارها.
  • چگونه آنها را بهبود ببخشیم

فانوس دریایی چیست؟

Lighthouse یک ابزار حسابرسی منبع باز است که امتیازات استاندارد را در پنج زمینه ارائه می دهد:

  • کارایی.
  • برنامه وب پیشرو.
  • بهترین روش ها
  • دسترسی.
  • سئو.

تبلیغات

ادامه مطلب را در زیر بخوانید

برای اهداف این مقاله ، ما قصد داریم با استفاده از نام Lighthouse به مجموعه آزمایشات انجام شده توسط repo مشترک Github ، صرف نظر از روش اجرا ، اشاره کنیم.

فانوس دریایی با استفاده از داده های شبیه سازی شده ، که به آن داده های آزمایشگاهی نیز می گویند ، تست های عملکردی را اجرا می کند.

این داده های عملکردی است که در یک محیط کنترل شده با تنظیمات از پیش تعیین شده دستگاه و شبکه جمع آوری می شود.

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

به روزرسانی های Lighthouse: Web Core Vital

در تاریخ 5 مه 2020 ، پروژه Chromium مجموعه ای از سه معیار را اعلام کرد که مرورگر منبع باز با پشتیبانی Google از طریق آنها عملکرد را اندازه گیری می کند.

معیارهای اندازه گیری ، معروف به Web Vital ، بخشی از ابتکار عمل Google است که برای ارائه راهنمایی واحد برای سیگنال های کیفیت طراحی شده است.

هدف این معیارها اندازه گیری عملکرد وب به روشی کاربر محور است.

ظرف دو هفته ، Lighthouse v6 با نسخه اصلاح شده Web Core Vital در قلب به روزرسانی عرضه شد.

تبلیغات

ادامه مطلب را در زیر بخوانید

در ژوئیه 2020 با انتشار Chrome 84 ، معیارهای واحد Lighthouse v6 در سراسر محصولات Google پذیرفته شد.

پنل حسابرسی Chrome DevTools به Lighthouse تغییر نام یافت. بینش Pagespeed و Google Search Console نیز به این معیارهای واحد اشاره می کنند.

Web Core Vital 55٪ نمره عملکرد وزنی Lighthouse را تشکیل می دهد. این تغییر در تمرکز اهداف جدید و پالایشی را تعیین می کند.

به طور کلی ، بیشتر صفحات کمترین تأثیر را داشتند که 83.32٪ از آزمایش ها با تغییر ده امتیاز یا کمتر در تغییر به v6 ، کمترین تأثیر را داشتند.

نسخه 7 در حال حاضر در Github منتشر نشده و قرار است با عرضه پایدار کروم 89 در مارس 2021 عرضه شود.

نحوه تست عملکرد با استفاده از فانوس دریایی

موضوعات روش شناسی

خارج از جعبه ، Lighthouse همزمان یک صفحه را کنترل می کند.

نمره یک صفحه سایت شما را نشان نمی دهد و صفحه اصلی سریع به معنای سایت سریع نیست.

چندین نوع صفحه را در سایت خود آزمایش کنید.

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

نمونه موجودی تست صفحه

آدرس اینترنتی نوع صفحه
/ صفحه نخست
/ ابزارها الگوی دسته بندی
/ ابزار / پیچ گوشتی الگوی صفحه لیست محصولات
/ acme / deluxe-anvil الگوی جزئیات محصول
/ گاری سبد خرید
/وارسی وارسی
/تایید سفارش تایید سفارش
/وبلاگ ریشه وبلاگ
/ وبلاگ / roadrunners-101 الگوی وبلاگ

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

امتیازات و لیست پیشرفت های خود را ثبت کنید.

با ذخیره نتایج JSON و استفاده از Lighthouse Viewer در صورت نیاز به اطلاعات دقیق ، از اتلاف داده جلوگیری کنید.

با استفاده از بازگشت سرمایه بازگشت سرمایه خود را به عقب بردارید

جلب منابع توسعه برای اقدام به توصیه های SEO سخت است.

یک SEO داخلی می تواند با داشتن یک کیک تولد برای هر روز تولد بلیط عقب مانده ، پانکراس آنها را از بین ببرد. یا حداقل بیاموزید که از کیک متنفر باشید.

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

این داده های شروع به نشانه های دلار تبدیل می شوند که در خدمت توجیه و پاداش دادن به تلاش های توسعه است.

به احتمال زیاد بیش از یک منطقه در هنگام آزمایش پرچم گذاری خواهید کرد. مشکلی نیست!

اگر نمی دانید کدام تغییرات بیشترین ضربه را به شما وارد می کند ، ماشین حساب امتیاز دهی فانوس دریایی را ببینید.

نحوه اجرای تست های فانوس دریایی

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

تبلیغات

ادامه مطلب را در زیر بخوانید

آیا می خواهید تست های SEO را در روند انتشار ادغام کنید؟ زمان یادگیری برخی از NPM است.

کمتر از پنج دقیقه فرصت دارید تا برای جلسه مشتری احتمالی آماده شوید؟ چند گزارش یکبار مصرف باید کلاهبرداری را انجام دهند.

به هر روشی که اجرا کنید ، به طور پیش فرض در تلفن همراه قرار دهید ، مگر اینکه مورد استفاده خاصی برای دسک تاپ داشته باشید.

برای گزارش های یکبار مصرف: Chrome Devtools

هر بار یک صفحه را با پنل Lighthouse در Chrome DevTools آزمایش کنید. از آنجا که گزارش از تجربه کاربر با استفاده از مرورگر شما الگوبرداری می کند ، از یک نمونه ناشناس با همه برنامه های افزودنی استفاده کنید و حافظه پنهان مرورگر غیرفعال شود.

نکته حرفه ای: برای آزمایش یک نمایه Chrome ایجاد کنید. آن را محلی نگه دارید (بدون همگام سازی ، صرفه جویی در گذرواژه یا ارتباط با یک حساب Google موجود) و برنامه های افزودنی را برای کاربر نصب نکنید

مقاله پیشنهادی  صفحات فیس بوک دوباره طراحی شد ، 5 ویژگی جدید اضافه شد

نحوه اجرای فانوس دریایی آزمایشی با استفاده از Chrome DevTools

    1. نمونه ناشناس Chrome را باز کنید.
    2. به پنل شبکه Chrome Dev Tools (Command + Option + I در Mac یا Control + Shift + I در Windows و Linux) بروید.
    3. برای غیرفعال کردن حافظه پنهان ، جعبه را علامت بزنید.
    4. به پنل Lighthouse بروید.
    5. روی ایجاد گزارش کلیک کنید.
    6. پرونده را ذخیره کنید.

تبلیغات

ادامه مطلب را در زیر بخوانید

جوانب مثبت اجرای فانوس دریایی از DevTools

منفی اجرای فانوس دریایی از DevTools

  • هر بار یک گزارش.
  • شما را ملزم به ذخیره دستی نتایج می کند.

برای آزمایش صفحات مشابه به طور مکرر: web.dev

این دقیقاً مانند DevTools است اما لازم نیست به یاد داشته باشید که همه آن برنامه های افزودنی مزاحم را غیرفعال کنید!

  1. از web.dev/measure/ دیدن کنید.
  2. با استفاده از حساب Google خود وارد سیستم شوید.
  3. URL خود را وارد کنید.
  4. روی اجرای حسابرسی کلیک کنید.

جوانب مثبت اجرای فانوس دریایی از web.dev

  • یک جدول زمانی خوب از نتایج را می گیرد! (تا زمانی که وارد سیستم شده باشید)

منفی های اجرای فانوس دریایی از web.dev

  • هر بار یک گزارش.
  • باید به یاد داشته باشید که با گذشت زمان کدام URL ها را ردیابی می کنید.

برای تست در مقیاس (و عقل): خط فرمان گره

  1. npm را نصب کنید.
    (نکته Mac Pro: برای جلوگیری از مشکلات وابستگی ناپسند ، از آب خانگی استفاده کنید.)
  2. ماژول گره Lighthouse را با نصب کنید
    npm install -g lighthouse
  3. اجرای یک متن واحد با
    lighthouse 
  4. با اجرای برنامه ای آزمون ها ، لیست ها را با استفاده از تست ها اجرا کنید.

جوانب مثبت اجرای فانوس دریایی از گره

تبلیغات

ادامه مطلب را در زیر بخوانید

  • بسیاری از گزارش ها را می توان به طور هم زمان اجرا کرد.
  • می توان تنظیم کرد که به طور خودکار اجرا شود تا تغییرات در طول زمان پیگیری شود.

منفی اجرای فانوس دریایی از گره

  • به دانش رمزگذاری نیاز دارد.
  • تنظیم زمان بیشتر

معیارهای عملکرد فانوس دریایی توضیح داده شده است

معیارهای عملکرد فانوس دریایی برای سئو های فنی

در نسخه های 6 و 7 ، امتیاز عملکرد Lighthouse از هفت معیار ساخته شده است که هر یک از آنها درصدی از نمره عملکرد کل را شامل می شود.

نام متریک وزن
بزرگترین رنگ محتوای (LCP) 25٪
زمان مسدود کردن کل (TBT) 25٪
اولین رنگ محتوایی (FCP) 15٪
شاخص سرعت (SI) 15٪
Time To Interactive (TTI) 15٪
تغییر چیدمان تجمعی (CLS)

بزرگترین رنگ محتوای (LCP)

آنچه نمایندگی می کند: برداشت کاربر از تجربه بارگیری.

وزن دهی به نمره عملکرد فانوس دریایی: 25٪

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

تبلیغات

ادامه مطلب را در زیر بخوانید

چگونه اندازه گیری می شود: Lighthouse داده های LCP را از ابزار ردیابی Chrome استخراج می کند.

آیا بزرگترین رنگ محتوای یک وب حیاتی است؟ آره!

امتیازدهی LCP

هدف: رسیدن به LCP در <2.5 ثانیه

زمان LCP
(در میلی ثانیه)
کدگذاری رنگی
0–2،500 سبز (سریع)
2،501-4،000
بیش از 4000 قرمز (آهسته)

چه عناصری می توانند بخشی از LCP باشند؟

  • پیامک
  • تصاویر.
  • فیلم های.
  • تصاویر پس زمینه

چه چیزهایی به عنوان LCP در صفحه شما حساب می شوند؟

بستگی دارد! LCP معمولاً براساس الگوی صفحه متفاوت است.

این بدان معنی است که شما می توانید تعداد انگشت شماری از صفحات را با استفاده از همان الگو اندازه گیری کرده و LCP را تعریف کنید.

تبلیغات

ادامه مطلب را در زیر بخوانید

نحوه تعریف LCP با استفاده از Chrome Devtools

  1. صفحه را در Chrome باز کنید.
  2. به پانل عملکرد Dev Tools (فرمان + گزینه + I در Mac یا Control + Shift + I در ویندوز و لینوکس) بروید.
  3. روی نشانگر LCP در بخش Timings بروید.
  4. عناصر (عناصر) مربوط به LCP به طور دقیق در قسمت گره های مرتبط وجود دارد.

معیارهای عملکرد فانوس دریایی: بازاریابی LCP در DevTools برجسته سازی و اعلام گره برای LCP

چه عواملی باعث ضعف LCP می شود؟

LCP ضعیف معمولاً از چهار مسئله ناشی می شود:

  1. زمان پاسخ سرور آهسته است.
  2. جاوا اسکریپت و CSS را مسدود کنید.
  3. زمان بارگذاری منابع.
  4. ارائه در سمت مشتری.

چگونه LCP ضعیف را برطرف کنیم

اگر علت کند بودن زمان پاسخ سرور است:

  • سرور خود را بهینه کنید.
  • کاربران را به CDN نزدیک هدایت کنید.
  • دارایی های حافظه پنهان
  • ابتدا صفحات HTML را به صورت cache سرو کنید.
  • ارتباطات شخص ثالث را زودهنگام برقرار کنید.

اگر علت انسداد JavaScript و CSS باشد:

  • CSS را کم کنید.
  • CSS غیر انتقادی را به تعویق بیندازید.
  • درون خطی CSS.
  • پرونده های جاوا اسکریپت را کوچک و فشرده کنید.
  • جاوا اسکریپت استفاده نشده را به تعویق بیندازید.
  • پلی پرک های استفاده نشده را به حداقل برسانید.

اگر علت زمان بارگذاری منابع است:

  • بهینه سازی و فشرده سازی تصاویر.
  • منابع مهم را از قبل بارگیری کنید.
  • فشرده سازی فایل های متنی.
  • دارایی های مختلف را بر اساس اتصال شبکه (ارائه خدمات سازگار) تحویل دهید.
  • با استفاده از کارگر خدماتی دارایی ها را ذخیره کنید.

اگر علت ارائه مشتری است:

  • جاوا اسکریپت مهم را به حداقل برسانید.
  • از استراتژی رندر دیگری استفاده کنید (تجزیه و تحلیل گزینه های رندر را در راهنمای Angular بررسی کنید).

منابع برای بهبود LCP

زمان مسدود کردن کل (TBT)

آنچه نمایندگی می کند: پاسخگویی به ورودی کاربر.

تبلیغات

ادامه مطلب را در زیر بخوانید

وزن دهی به نمره عملکرد فانوس دریایی: 25٪

اندازه گیری آن: TBT زمان بین اولین محتوای رنگ آمیزی و زمان تا تعاملی را اندازه گیری می کند. TBT معادل آزمایشگاه تأخیر ورودی اول (FID) است – داده های فیلدی که در گزارش تجربه کاربر Chrome و سیگنال رتبه بندی آینده صفحه Google در آینده استفاده می شود.

چگونه اندازه گیری می شود: کل زمانی که رشته اصلی توسط کارهایی که بیش از 50 میلی متر طول می کشد انجام می شود. اگر یک کار 80 میلی ثانیه طول بکشد ، 30 میلی ثانیه از آن زمان در TBT محاسبه می شود. اگر یک کار 45 میلی ثانیه طول بکشد ، 0ms به TBT اضافه می شود.

آیا زمان مسدود کردن کل یک وب هسته حیاتی است؟ آره! این معادل داده آزمایشگاهی تأخیر ورودی اول (FID) است.

امتیازدهی TBT

هدف: رسیدن به امتیاز TBT کمتر از 300 میلی ثانیه.

زمان TBT
(در میلی ثانیه)
کدگذاری رنگی
0–300 سبز (سریع)
301-600
بیش از 600 قرمز (آهسته)

تأخیر ورودی اول ، داده های میدان معادل TBT ، آستانه های مختلفی دارد.

تبلیغات

ادامه مطلب را در زیر بخوانید

زمان FID
(در میلی ثانیه)
کدگذاری رنگی
0–100 سبز (سریع)
101-300
بیش از 300 قرمز (آهسته)

کارهای طولانی و زمان مسدود کردن کل

TBT کارهای طولانی را اندازه گیری می کند – کسانی که بیش از 50 میلی متر طول می کشد.

وقتی یک مرورگر سایت شما را بارگیری می کند ، اساساً یک صف از صفحات اسکریپت منتظر اجرا است.

هر ورودی از کاربر باید در همان صف قرار بگیرد.

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

اساساً کارهای طولانی مانند آن شخصی است که در کافی شاپ موردعلاقه شماست و سفارش نوشیدنی بیش از حد طول می کشد.

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

کارهای طولانی منبع اصلی تجربه ضعیف کاربری است.

چه عواملی باعث TBT بالا در صفحه شما می شود؟

تبلیغات

ادامه مطلب را در زیر بخوانید

جاوا اسکریپت سنگین

خودشه.

نحوه مشاهده TBT با استفاده از Chrome Devtools

  1. صفحه را در Chrome باز کنید.
  2. به پانل عملکرد Dev Tools (فرمان + گزینه + I در Mac یا Control + Shift + I در ویندوز و لینوکس) بروید.
  3. برای شروع ردیابی عملکرد ، روی دکمه بارگیری مجدد کلیک کنید.
  4. در گوشه سمت راست کارها به دنبال نشانگرهای قرمز بگردید. اینها کارهای طولانی را نشان می دهد که بیش از 50 میلی متر طول کشیده است.

راهنمای فنی SEO برای معیارهای عملکرد فانوس دریایی

چگونه TBT ضعیف را برطرف کنیم

  • کارهای طولانی را از بین ببرید
  • صفحه خود را برای آمادگی برای تعامل بهینه کنید.
  • از یک وب کارگر استفاده کنید.
  • زمان اجرای جاوا اسکریپت را کاهش دهید.

منابع برای بهبود TBT

اولین رنگ محتوایی (FCP)

آنچه نمایندگی می کند: FCP زمان نقاشی اولین متن یا تصویر را نشان می دهد (قابل مشاهده است).

وزن دهی به نمره عملکرد فانوس دریایی: 15٪

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

تبلیغات

ادامه مطلب را در زیر بخوانید

چگونه اندازه گیری می شود: امتیاز FCP شما در Lighthouse با مقایسه زمان FCP و FCP صفحه شما برای داده های وب سایت واقعی ذخیره شده توسط بایگانی HTTP اندازه گیری می شود. FCP شما اگر سریعتر از سایر صفحات بایگانی HTTP باشد ، افزایش می یابد.

آیا اولین محتوای رنگ آمیزی یک وب هسته حیاتی است؟ نه

امتیازدهی FCP

هدف: دستیابی به FCP در <2 ثانیه

زمان FCP

(در چند ثانیه)

کدگذاری رنگی امتیاز FCP (درصد بایگانی HTTP)
0–2 سبز (سریع) 75-100
2-4 نارنجی (متوسط) 50-74
4 قرمز (آهسته) 0-49

چه عناصری می توانند بخشی از FCP باشند؟

زمانی که برای ارائه اولین عنصر قابل مشاهده به DOM لازم است FCP است. هر اتفاقی که قبل از اینکه یک عنصر محتوای غیر سفید به صفحه ارائه دهد (به استثنای iframes) اتفاق می افتد ، در FCP محاسبه می شود.

از آنجا که iframes بخشی از FCP محسوب نمی شود ، اگر اولین محتوای ارائه شده باشد ، FCP تا زمان بارگیری اولین محتوای غیر iframe به شمارش ادامه می دهد ، اما زمان بارگذاری iframe در FCP محاسبه نمی شود.

تبلیغات

ادامه مطلب را در زیر بخوانید

اسناد و مدارک پیرامون FCP همچنین فراخوانی می شوند که اغلب تحت تأثیر زمان بارگذاری قلم قرار می گیرند و نکاتی در مورد بهبود بارهای قلم وجود دارد.

نحوه تعریف FCP با استفاده از Chrome Devtools

  1. صفحه را در Chrome باز کنید.
  2. به پنل عملکرد Dev Tools (فرمان + گزینه + I در Mac یا Control + Shift + I در ویندوز و لینوکس) بروید.
  3. بر روی نشانگر FCP در بخش Timings کلیک کنید.
  4. برگه خلاصه دارای یک مهر زمان با FCP بر حسب میلی ثانیه است.

چگونه FCP را بهبود بخشیم

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

سریعترین راه برای دور زدن تأخیر منابع خارجی ، استفاده از سبکهای درون خطی برای محتوای فراتر از حد است.

برای اینکه سایت شما به طور پایدار مقیاس پذیر باشد ، از ابزاری خودکار مانند پنت هاوس و Apache’s mod_pagespeed استفاده کنید. این راه حل ها با برخی محدودیت ها در عملکرد ، نیاز به آزمایش دارند و ممکن است برای همه مناسب نباشد.

به صورت جهانی ، همه ما می توانیم با کاهش دامنه و پیچیدگی محاسبات سبک ، زمان سایت خود را برای First Contentful Paint بهبود بخشیم.

تبلیغات

ادامه مطلب را در زیر بخوانید

اگر از سبکی استفاده نمی شود ، آن را حذف کنید. می توانید CSS بلااستفاده را با قابلیت داخلی Code Coverage Chrome Dev Tool شناسایی کنید.

برای تصمیم گیری بهتر از داده های بهتر استفاده کنید.

مشابه TTI ، می توانید معیارهای کاربر واقعی برای FCP را با استفاده از Google Analytics برای مرتبط سازی بهبودها با KPI ثبت کنید.

شاخص سرعت

آنچه نمایندگی می کند: چه مقدار در یک بار در هنگام بار قابل مشاهده است.

وزن دهی به نمره عملکرد فانوس دریایی: 15٪

اندازه گیری آن: شاخص سرعت متوسط ​​زمانی است که قسمتهای قابل مشاهده صفحه نمایش داده می شود.

چگونه اندازه گیری می شود: اندازه گیری شاخص سرعت Lighthouse از یک ماژول گره به نام Speedline حاصل می شود.

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

شاخص سرعت

آیا سرعت شاخص یک هسته وب حیاتی است؟ نه

تبلیغات

ادامه مطلب را در زیر بخوانید

امتیازدهی SI

هدف: رسیدن به SI در <4.3 ثانیه

زمان SI

(در چند ثانیه)

کدگذاری رنگی امتیاز FCP (درصد بایگانی HTTP)
0–4.3 سبز (سریع) 75-100
4.4-5.8 نارنجی (متوسط) 50-74
5.8+ قرمز (آهسته) 0-49

چگونه SI را بهبود بخشیم

نمره سرعت نشان دهنده مسیر رندر بحرانی سایت شما است. منبع “حیاتی” به این معنی است که منبع برای اولین رنگ مورد نیاز است یا برای عملکرد اصلی صفحه بسیار مهم است.

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

چگونه مسیر بحرانی روی ارائه تأثیر می گذارد

نحوه تأثیرگذاری مسیر حساس بر ارائه - بصری

توصیه های فانوس دریایی که معمولاً با یک مسیر رندر انتقادی آهسته همراه است عبارتند از:

تبلیغات

ادامه مطلب را در زیر بخوانید

  • کار با موضوع اصلی را به حداقل برسانید.
  • زمان اجرای جاوا اسکریپت را کاهش دهید.
  • عمق درخواستهای بحرانی را به حداقل برسانید.
  • منابع مسدود کننده رندر را حذف کنید.
  • تصاویر خارج از صفحه را به تعویق بیندازید.

زمان تعاملی

آنچه نمایندگی می کند: پاسخگویی بار شناسایی مکانی که یک صفحه پاسخگو به نظر می رسد اما هنوز پاسخگو نیست.

وزن دهی به نمره عملکرد فانوس دریایی: 15٪

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

چگونه اندازه گیری می شود: TTI اندازه گیری چه مدت طول می کشد تا صفحه شود کاملاً در ارتباط بودن. یک صفحه کاملاً تعاملی در نظر گرفته می شود:

  • این صفحه محتوای مفیدی را نشان می دهد که با استفاده از First Contentful Paint اندازه گیری می شود.
  • گردانندگان رویداد برای بیشتر عناصر صفحه قابل مشاهده ثبت شده اند.
  • این صفحه به تعاملات کاربر در عرض 50 میلی ثانیه پاسخ می دهد.

تبلیغات

ادامه مطلب را در زیر بخوانید

آیا زمان تعاملی یک هسته وب مهم است؟ نه

امتیازدهی TTI

هدف: رسیدن به امتیاز TTI کمتر از 3.8 ثانیه.

امتیاز TTI

(در چند ثانیه)

کدگذاری رنگی
0–3.8 سبز (سریع)
3.8 – 7.3 نارنجی (متوسط)
7.3+ قرمز (ضعیف)

تغییر چیدمان تجمعی (CLS)

آنچه نمایندگی می کند: درک کاربر از ثبات بصری یک صفحه.

وزن دهی نمره عملکرد فانوس دریایی: 5٪ *

* انتظار می رود CLS با برطرف شدن اشکالات ، وزن خود را افزایش دهد. شرط بندی هوشمند می گوید Q4 2021.

اندازه گیری آن: این تغییر عناصر صفحه از طریق پایان بارگذاری صفحه را کمی می کند.

چگونه اندازه گیری می شود: برخلاف سایر معیارها ، CLS در زمان اندازه گیری نمی شود. درعوض ، این یک معیار محاسبه شده است که براساس تعداد فریم هایی که عناصر در آن حرکت می کنند و کل فاصله پیکسل عناصر منتقل شده است.

معیارهای عملکرد فانوس دریایی: امتیاز طرح بندی CLS

امتیاز CLS

تبلیغات

ادامه مطلب را در زیر بخوانید

هدف: دستیابی به نمره CLS کمتر از 0.1.

امتیاز CLS کدگذاری رنگی
0–0.01 سبز (خوب)
0.1-0.25 نارنجی (نیاز به بهبود دارد)
0.25+ قرمز (ضعیف)

چه عناصری می تواند بخشی از CLS باشد؟

هر عنصر بصری که در بخشی از بار در بالای چین ظاهر شود.

درست است – اگر ابتدا پاورقی خود و سپس محتوای قهرمان صفحه را بارگیری کنید ، CLS شما آسیب خواهد دید.

علل CLS ضعیف

  • تصاویر بدون ابعاد.
  • تبلیغات ، جاسازی ها و فریم های بدون ابعاد.
  • محتوای تزریق پویا.
  • قلم های وب باعث ایجاد FOIT / FOUT.
  • اقدامات منتظر پاسخ شبکه قبل از به روزرسانی DOM.

نحوه تعریف CLS با استفاده از Chrome Devtools

  1. صفحه را در Chrome باز کنید.
  2. به پانل عملکرد Dev Tools (فرمان + گزینه + I در Mac یا Control + Shift + I در ویندوز و لینوکس) بروید.
  3. بر روی عکسهای صفحه بارگیری کنید و از چپ به راست بروید (مطمئن شوید که کادر تأیید عکس ها انتخاب شده باشد).
  4. مراقب باشید که عناصر پس از اولین رنگ به اطراف پرش می شوند تا عناصر ایجاد کننده CLS را شناسایی کنند.

چگونه CLS را بهبود بخشیم

تبلیغات

ادامه مطلب را در زیر بخوانید

به محض شناسایی عنصر (ها) در خطا ، باید آنها را به روز کنید تا در هنگام بارگذاری صفحه پایدار باشند.

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

برخی از روش های معمول برای بهبود CLS عبارتند از:

  • همیشه ویژگی های اندازه عرض و ارتفاع را روی تصاویر و عناصر ویدئو قرار دهید.
  • فضا را برای اسلات تبلیغات ذخیره کنید (و آن را جمع نکنید).
  • از درج مطالب جدید بالاتر از مطالب موجود خودداری کنید.
  • هنگام قرار دادن تبلیغات غیر چسبنده در بالای بالای ویور دقت کنید.
  • پیش بارگذاری قلم ها.

منابع CLS

تبلیغات

ادامه مطلب را در زیر بخوانید

نتیجه

پیچیدگی معیارهای عملکرد نشان دهنده چالش های پیش روی همه سایت ها است.

ما از معیارهای عملکرد به عنوان پروکسی برای تجربه کاربر استفاده می کنیم – این به معنای فاکتور گرفتن در برخی از شاخ های تک شاخ است.

ابزارهایی مانند Google’s Test My Site و سایت من چه هزینه ای دارد؟ می تواند به شما در بحث تبدیل و مشتری مداری درمورد دلیل اهمیت عملکرد کمک کند.

امیدوارم ، هنگامی که پروژه شما مورد توجه قرار گرفت ، این تعاریف به شما کمک می کند معیار عملکرد منفی Lighthouse را به یک بلیط عملیاتی برای یک تیم مهندسی ماهر و مشترک ترجمه کنید.

داده های خود را پیگیری کنید و آنها را از پشت بام ها فریاد بزنید.

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

آنچه را یاد می گیرید تست کنید ، تکرار کنید و به اشتراک بگذارید! من مشتاقانه منتظر دیدن آنچه شما قادر هستید ، یک شاخ زیبا است.

منابع بیشتر:

تبلیغات

ادامه مطلب را در زیر بخوانید


اعتبار تصویر

تمام تصاویر صفحه گرفته شده توسط نویسنده ، ژانویه 2021