آپدیت جدید جی تی متریکس + آموزش کامل رفع ایرادات | بر اساس گوگل لایت هاوس

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

آپدیت جدید جی تی متریکس با گوگل لایت هاوسبا اعلام رسمی گوگل مبنی بر اهمیت داشتن PX یا همان page experience در رتبه بندی وبسایت ها، وبسایت GTmetrix نیز که نامی آشنا برای تمامی وبمستر ها و سئو کاران ایرانی و همینطور بین المللی است، سیستم آنالیز سرعت وب سایت خود را با استفاده از API های Lighthouse بروزرسانی کرده و اکنون آنالیز وبسایت ها را بر اساس متغیر های لایت هاوس انجام می دهد. به همین دلیل بسیاری از وبسایت ها که پیش از این با استفاده از الگوریتم قبلی سنجش و رفع اشکال شده بودند، اکنون دچار مشکل شده و مجددا نیازمند بروزرسانی و رفع خطاهای مشخص شده ذر روش جدید می باشند.

محتوا پنهان
1 نحوه آنالیز GTmetrix بر اساس آنالیز PX چه تفاوتی با روش قدیمی دارد؟

نحوه آنالیز GTmetrix بر اساس آنالیز PX چه تفاوتی با روش قدیمی دارد؟

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

نحوه آنالیز وبسایت توسط Gtmetrix در روش قدیمی
نحوه آنالیز وبسایت توسط Gtmetrix در روش قدیمی

و گزارش جدید جی تی متریکس:

آپدیت جدید جی تی متریکس + آموزش کامل رفع ایرادات | بر اساس گوگل لایت هاوس 1
نحوه گزارش آنالیز GTmetrix  بر اساس API های لایت هاوس

الگوریتم Page Experience گوگل چیست؟

فاکتور جدید رتبه بندی گوگل

آپدیت جدید جی تی متریکس

چه تغییراتی به وجود آمده است؟

همانطور که مشاهده می کنید، performance scores جای خود را به GTmetrix grade داده است در نتیجه دیگر اثری از pagespeed score و Yslow score وجود ندارد و Performance و Structure جای آنها را گرفته اند. همچنین در کادر WEB Vitals گزینه های LCP ، TBT و CLS جایگزین Page load Time ،  Total Page Size  و request در کادر  page ditailsشده اند. پس در ادامه لازم است که با هرکدام از این موارد در گزارش های جدید GTmetrix آشنا شویم.

Performance چیست؟

Performance به معنی عملکرد و کارایی وبسایت مورد نظر شما می باشد. که بر اساس الگوریتم لایت هاوس سنجیده شده و نتایج آن به درصد پیش روی شما قرار میگیرد.

Structure چیست؟

Structure به معنی ساختار بود و منظور جی متریکس سنجش ساختار وبسایت شما بوده که بر اساس الگوریتم PX بررسی شده و نتایج آن به درصد نمایش داده می شود.

WEB vitals چیست؟

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

Web Vital مجموعه کوچکی از معیارهای اصلی است که نشان می دهد آیا شما یک تجربه سریع مطابق آنچه که گوگل انتظار دارد را به بازدید کنندگان خود ارائه می دهید یا خیر؟گوگل مفهوم جدیدی را در سال ۲۰۲۰ با عنوان “WEB Vitals” معرفی کرد که بر روی مجموعه کوچکی از معیارهای اصلی برای ارزیابی تجربه صفحه شما متمرکز است. با توجه به زمان بندی و ممیزی های فراوان برای ارزیابی عملکرد صفحه ، این مجموعه کوچک نشان دهنده تأثیرگذارترین معیارها برای تمرکز است که به منظور ساده سازی دنیای عملکرد وب است.

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

آپدیت جدید جی تی متریکس + آموزش کامل رفع ایرادات | بر اساس گوگل لایت هاوس 2Web Vital اساساً صفحه شما را برای ۳ معیار اصلی اندازه گیری می کند که یک صفحه با عملکرد سریع را تعریف می کند. اهمیت وب ویتالز از این جهت که نیمی از معیارهای محاسبه امتیاز عملکرد را تشکیل می دهند ، بیشتر مورد تأکید قرار می گیرد.

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

Web Vital های مختلف کدامند؟

Web Vital ها در GTmetrix روی سه معیار امتیاز عملکرد متمرکز هستند:

  • Largest Contentful Paint (LCP)
  • Total Blocking Time (TBT)
  • Cumulative Layout Shift (CLS)

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

چرا وب ویتال اهمیت دارد؟

مجموعه ای بزرگی از معیارهای عملکرد در دسترس است و ممکن است درک اینکه کدام یک از آنها را تجزیه و تحلیل و بهینه سازی کنید دشوار برای شما دشوار باشد، مگر اینکه شما یک توسعه دهنده وب حرفه ایی باشید. بنابراین Web Vital بعنوان یک معیار ساده برای تجربه کاربر از نظر عملکرد درک شده ، تعامل و لذت بخشی عمل می کند.

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

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

منظور از LCP در جی تی متریکس چیست؟

LCP به شما میگوید که چه مدت طول می کشد تا بزرگترین عنصر محتوایی (به عنوان مثال یک تصویر اسلایدر یا تیتر اصلی) در صفحه شما برای بازدید کنندگان قابل نمایش و رویت است. به زبان ساده تر، نشان میدهد که سرعت بارگزاری صفحه شما چقدر سریع است. برای داشتن یک تجربه کاربری عالی ، باید که LCP کوچکتر یا مساوی با ۱.۲ ثانیه باشد.

بررسی اجمالی Largest Contentful Paint

Largest Contentful Paint (LCP) معیار عملکردی است که در سال ۲۰۲۰ توسط Lighthouse برای سنجش بهتر تجربه بارگیری قابل درک برای کاربران ارائه شده است. با بیان ساده تر، LCP اندازه گیری می کند که چه مدت طول می کشد تا بزرگترین “عنصر محتوا” (به عنوان مثال ، تصویر قهرمان ، متن عنوان و غیره) در صفحه شما در نمای بازدید کننده شما قابل مشاهده باشد. LCP یکی از معیارهایی است که Google’s Web Vitals را تشکیل می دهد.

LCP چه چیزی را اندازه گیری می کند؟

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

اساساً ، LCP میزان مصرف سریع محتوای قابل توجه در صفحه وب شما توسط بازدید کنندگان را اندازه گیری می کند. فرض این است که بارگذاری بزرگترین عنصر محتوای صفحه شما ، مانند یک چرخ فلک (carousel) یا تصویر قهرمان (hero image)، یک شاخص اصلی برای بارگذاری صفحه شما برای بازدید کنندگان شماست.

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

یک “عنصر محتوا” هر عنصر HTML است، مانند:

  • یک عنصر تصویر
  • یک عنصر ویدیویی
  • عنصری که تصویر پس زمینه از طریق تابع URL بارگیری می شود (به جای اعلام آن در CSS)
  • عناصر سطح بلوک مانند <h1> ، <h2> ، <div> ، <ul> ، <جدول> و غیره

برای درک کامل لیست عناصر در نظر گرفته شده برای LCP ، این مقاله را بخوانید

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

تأثیر LCP  در امتیاز عملکرد شما

LCP به عنوان یک معیار Web Vital ، ۲۵٪ از امتیاز عملکرد را به خود اختصاص داده است و این یکی از مهمترین معیارهای سئو است. در حالی که معیارهای دیگر مانند First Contentful Paint (FCP) یا Time-to-First-Byte (TTFB) همچنان در متن سرعت صفحه باقی می مانند ، LCP نمایانگر انتظارات بازدید کنندگان شما در دنیای واقعی هنگام دسترسی به وب سایت شماست.

آپدیت جدید جی تی متریکس + آموزش کامل رفع ایرادات | بر اساس گوگل لایت هاوس 4 LCP سریعتر این تصور را دارد که صفحه شما سریعتر بارگیری می شود. همانطور که مشاهده میکنید وب سایت سبز از نظر بصری با ۰.۲ ثانیه کامل تر از وب سایت قرمز به نظر می رسد. معنی آن برای شما این است که بهینه سازی LCP شما می تواند بیشترین پیشرفت را در عملکرد وب سایت شما ایجاد کند ، هم از نظر امتیاز عملکرد و هم از نظر بازدیدکنندگان از عملکرد.

آستانه بهینه عملکرد LCP

آستانه های LCP با زمان رندر (در ثانیه) بزرگترین تصویر یا بلوک متنی قابل مشاهده در ویوپورت بازدید کننده اندازه گیری می شوند.

آستانه LCP به شرح زیر است:

  • خوب – اینجا کاری برای انجام دادن نیست = LCP 1200 میلی ثانیه یا کمتر.
  • قابل قبول ، اما بهبود را در نظر بگیرید = LCP بین ۱۲۰۰ تا ۱۶۶۶ میلی ثانیه.
  • بیشتر از حد توصیه شده = LCP بین ۱۶۶۶ تا ۲۴۰۰ میلی ثانیه.
  • خیلی بیشتر از حد توصیه شده = LCP بالاتر از ۲۴۰۰ میلی ثانیه.

بزرگترین عنصر محتوای رنگ (LCP) در برگه ساختار

آنچه را GTmetrix به عنوان بزرگترین عنصر محتوای صفحه خود شناسایی کرده است ، می توانید در برگه ساختار (Structure tab)  گزارش مشاهده کنید. در فهرست ممیزی “بزرگترین عنصر محتوای رنگی (Largest Contentful Paint Element)” ذکر شده است.

چگونه می توان LCP را بهبود بخشید؟

ممیزی های خاص ذکر شده در زیر بیشترین کمک را به LCP شما می کنند. با این حال ، ممکن است زمان بندی LCP صفحه شما تحت تأثیر بهینه سازی های دیگری باشد که در اینجا ذکر نشده است.

با استفاده از روشهای خوب توسعه وب، از جمله موارد زیر زمان LCP خود را بهبود ببخشید:

  • کاهش زمان پاسخ سرور

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

  1. کاهش زمان پاسخ اولیه سرور
  2. استفاده از شبکه تحویل محتوا (CDN)
  3. استفاده از کش
  4. برقراری ارتباط سریعتر با لینک های سوم شخص
  • حذف رفتار انسداد رندر (Eliminating render-blocking behavior)

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

  • بهینه سازی تصاویر و فیلم ها

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

دوره آنلاین سئو تخصصی

هر آنچه درباره بهینه سازی سایت برای موتورهای جستجو (سئو یا SEO) باید بدانید

معیار TBT چیست و حداقل قابل قبول آن چقدر است؟

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

در یک برداشت کلی از منظر lighthouse، Total Blocking Time (TBT) یک معیار سنجش عملکرد لایت هاوس است که در سال ۲۰۲۰ معرفی شده و میزان پاسخگویی بار صفحه شما به ورودی کاربر را از نظر کمی ارزیابی میکند. به عبارت دیگر، TBT کل زمان مسدود شدن صفحه وب شما را که از تعامل کاربر با آن جلوگیری میکند، را اندازه گیری میکند. این یکی از برنامه های Vital Web است که جایگزینی برای معیار تأخیر(FID) برای PageSpeed Insights در نظر گرفته شده است.

زمان مسدود کردن کل (TBT) چیست؟

به گفته گوگل، “TBT زمان کلی بین First Contentful Paint (FCP) و Time to Interactive را اندازه گیری می کند که در آن قسمت اصلی برای جلوگیری از پاسخگویی ورودی مسدود شده باشد.”

اساساً، مرورگر از آنچه رشته اصلی نامیده می شود ، برای تجزیه HTML ، ساخت DOM ، اجرای CSS و JavaScript ، پردازش رویدادهای کاربر و انجام سایر کارهای مهم استفاده می کند. وقتی هر یک از این کارها بیش از ۵۰ میلی ثانیه اجرا شود (همچنین به عنوان یک وظیفه طولانی شناخته شود) ، موضوع اصلی “مسدود” در نظر گرفته می شود زیرا مرورگر نمی تواند یک کار در حال انجام را قطع کند.

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

آپدیت جدید جی تی متریکس + آموزش کامل رفع ایرادات | بر اساس گوگل لایت هاوس 5هر کاری که بیش از ۵۰ میلی ثانیه باشد ، یک وظیفه طولانی محسوب می شود. مثال فوق دارای ۳ وظیفه طولانی (با رنگ قرمز) است.

به عنوان مثال در تصویر بالا  ۵ وظیفه در موضوع اصلی وجود دارد که ۳ مورد از آنها Long Tasks هستند ، زیرا مدت زمان فردی آنها بیش از ۵۰ میلی ثانیه است. زمان مسدود کردن هر یک از کارهای طولانی به شرح زیر است:

  • وظیفه A – 220 میلی ثانیه
  • وظیفه B – 70 میلی ثانیه
  • وظیفه E – 145 میلی ثانیه

TBT در این سناریو ۴۳۵ میلی متر است. اگر با این وجود ، رشته اصلی فقط یک کار داشت که ۵۰۰ میلی ثانیه طول می کشید ، TBT 500 میلی ثانیه خواهد بود.

کل زمان مسدود کردن در مقابل زمان تعاملی

Time to Interactive (TTI) معیار دیگری است که به تعامل صفحه شما مربوط می شود. TBT و TTI مکمل یکدیگر هستند اما در عین حال دیدگاه های کاملاً متفاوتی از تجربه صفحه شما ارائه می دهند. در واقع TTI وقتی صفحه شما کاملاً تعاملی باشد ، سیگنال می دهد اما TBT به طور خاص به شما می گوید که کدام یک از کارهای جاوا اسکریپت طولانی ترین زمان را داشته است.

معیار TTI اگر موضوع اصلی حداقل ۵ ثانیه از انجام کارهای طولانی خالی باشد ، یک صفحه را کاملاً تعاملی می داند.

برای توضیح بیشتر سناریوهای زیر را در نظر بگیرید:

  • سه کار ۶۰ میلی ثانیه ای در یک دوره ۵ ثانیه ای پخش می شوند.
  • یک کار طولانی ۵ ثانیه ای.
آپدیت جدید جی تی متریکس + آموزش کامل رفع ایرادات | بر اساس گوگل لایت هاوس 6
سناریوی A در طول بارگذاری صفحه تا حد زیادی تعاملی است زیرا هیچ کار طولانی مدت زمان مرورگر را نمی گیرد

هر دو سناریوی فوق TTI را به همان اندازه عقب می اندازند.

با این حال ، هر دو سناریو از نظر کاربر بسیار متفاوت هستند زیرا سناریوی اول فقط ۳۰ میلی ثانیه TBT دارد در حالی که سناریوی دوم ۴۹۵۰ میلی ثانیه است. سناریو A در طول بارگذاری صفحه عمدتا تعاملی است ، زیرا هیچ کار طولانی مدت زمان مرورگر را نمی گیرد ، در حالی که سناریو B در حالی که مرورگر مشغول انجام کار طولانی است ، به هیچ وجه تعامل ندارد.

مقایسه کل زمان مسدود کردن در مقابل تأخیر ورودی اول

همانطور که قبلاً اشاره شد ، TBT جایگزینی برای تأخیر ورودی اول (FID)  است که یکی از برنامه های Vital Web است اما FID فقط معیاری برای فیلد است که برای اندازه گیری نیاز به داده های کاربر واقعی دارد. این داده های واقعی کاربر به صورت گزارش های تجربه کاربری Chrome (CrUX) است – پایگاه داده رفتار مرورگر Chrome که از کاربران دنیای واقعی کروم جمع آوری شده است ، چیزی که GTmetrix در آزمایش خود نمتواند استفاده کند.

GTmetrix زمان مسدود کردن کل را به جای تأخیر ورودی اول گزارش می کند.
GTmetrix زمان مسدود کردن کل را به جای تأخیر ورودی اول گزارش می کند

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

میزان تأثیر TBT در امتیاز عملکرد وب سایت شما

TBT به عنوان یک معیار Web Vital ، ۲۵٪ از امتیاز عملکرد را به خود اختصاص داده و آن را به عنوان یک شاخص برتر برای بهینه سازی تبدیل کرده است. معنی این برای شما این است که بهینه سازی TBT شما می تواند یکی از تأثیرگذارترین پیشرفت ها را در پاسخگویی وب سایت شما ایجاد نماید.

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

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

آستانه های TBT به شرح زیر است:

  • خوب – اینجا کاری برای انجام دادن نیست = TBT 150 میلی ثانیه یا کمتر.
  • قابل قبول است اما بهبود را در نظر بگیرید = TBT بین ۱۵۰ تا ۲۲۴ میلی ثانیه.
  • بیشتر از حد توصیه شده = TBT بین ۲۲۴ تا ۳۵۰ میلی ثانیه.
  • خیلی بیشتر از حد توصیه شده = TBT بالاتر از ۳۵۰ میلی ثانیه.

چگونه می توان TBT را بهبود بخشید؟

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

زمان مسدود کردن کل با عملکرد جاوا اسکریپت ارتباط زیادی دارد و هرگونه پیشرفت در اجرای جاوا اسکریپت (به طور کلی ، بهینه سازی هایی که باعث بهبود TTI می شوند) احتمالاً TBT شما را کاهش می دهد. اگر وبسایت شما وردپرسی است با استفاده از افزونه JS minify می توانید آن را کاهش دهید.

برخی از این بهینه سازی ها عبارتند از:

  1. کاهش زمان اجرای جاوا اسکریپت
  2. به حداقل رساندن کار موضوع اصلی
  3. حذف جاوا اسکریپت استفاده نشده
  4. کاهش تأثیر کد های third-party
  5. جایگزینی کتابخانه های بزرگ JavaScript با گزینه های کوچکتر

CLS یا تغییر چیدمان تجمعی چیست و حداقل نمره قابل قبول آن چند است؟

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

Cumulative Layout Shift (CLS) معیار عملکردی است که در سال ۲۰۲۰ توسط Lighthouse برای اندازه گیری ثبات بصری درک شده از بار صفحه معرفی شده است. به زبان ساده ، CLS تغییر مکان غیرمنتظره عناصر وب را هنگام ارائه صفحه اندازه گیری می کند. این اندازه گیری سپس به عنوان یک امتیاز کلی از همه تغییرات چیدمان جداگانه در صفحه شما تعیین می شود. CLS همچنین یکی از معیارهایی است که ‘s WEB vitals Google را تشکیل می دهد. درباره عملکرد  Google WEB Vital در اینجا بیشتر بیاموزید.

Cumulative Layout Shift چه چیزی را اندازه گیری می کند؟

به گفته گوگل: “CLS یک معیار مهم و کاربر محور برای اندازه گیری ثبات بینایی است زیرا به شما در تعیین تعداد دفعات تغییر چیدمان غیر منتظره در نظر کاربران کمک می کند یک امتیاز CLS کم به شما اطمینان می دهد که صفحه خوشایند است.”

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

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

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

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

کاهش CLS صفحه بسیار مهم است زیرا صفحاتی که عناصر آنها تا زمان بارگزاری کامل به اطراف می روند می تواند منجر به تجربه منفی کاربر شود (به ویژه در دستگاه های تلفن همراه).

تغییر چیدمان غیرمنتظره اغلب باعث کلیک / ضربه زدن غیر عمدی بر روی محتوای ناخواسته می شود.

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

تفاوت بین آنچه انتظار داریم در مقابل آنچه که به دلیل تغییر غیر منتظره رخ می دهد

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

GTmetrix به استثنای شیفت های چیدمان که در عرض ۰.۵ ثانیه از ورود کاربر رخ می دهد ، بین شیفت های چیدمان مورد انتظار و غیر منتظره تفاوت قائل می شود.

تأثیر CLS در امتیاز عملکرد شما

حتی اگر تأثیر مستقیم CLS در امتیاز عملکرد نسبتاً کم باشد (۵٪). این یک کمک عمده به “لذت کاربر” است – یعنی تجربه ای روان و بدون تأخیر را به بازدیدکنندگان خود ارائه می دهد. در حالی که برخی دیگر از معیارهای امتیاز عملکرد مستقیماً با سرعت بارگیری صفحه ارتباط دارند ، CLS بر اندازه گیری تجربه صفحه بازدید کننده شما متمرکز است. با گنجانده شدن آن در مجموعه وب ویتال ، اهمیت این موضوع بیشتر اثبات می شود.

آستانه تغییر چیدمان تجمعی CLS چقدر است؟

توجه به این نکته مهم است که CLS یک امتیاز است – نه زمان بندی در میلی ثانیه یا ثانیه. این با استفاده از جا به جایی های شناسایی شده در مرورگر محاسبه می شود و در نتیجه عدد نهایی بین ۰ تا ۱ است.

آستانه امتیازات CLS به شرح زیر است:

  • خوب – اینجا کاری برای انجام دادن نیست = CLS 0.1 یا کمتر.
  • قابل قبول ، اما بهبود را = CLS بین ۰.۱ تا ۰.۱۵ در نظر بگیرید.
  • بیشتر از حد توصیه شده = CLS بین ۰.۱۵ تا ۰.۲۵.
  • خیلی بیشتر از حد توصیه شده = CLS 0.25 یا بالاتر.

جی تی متریکس قبل از آپدیت

 GTMetrix ورژن قدیم

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

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

نمره CLS خود را با درج روش های خوب در روند کار توسعه سایت خود بهبود بخشید ، مانند:

  • تعیین ابعاد تصویر

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

  • کاهش جا به جایی های پوسته ناشی از تبلیغات، جاسازی ها و بازنمایی ها

برای کاهش تغییرات چیدمان ناشی از تبلیغات ، جاسازی ها و بازنمایی ها ، مواردی مانند این را انجام دهید:

  1. قبل از بارگذاری کتابخانه تبلیغات ، اندازه شیار تبلیغات (ترجیحاً بزرگترین) را رزرو کنید.
  2. تبلیغات را به پایین یا خارج از ویوپورت انتقال دهید.

می توانید وقتی هیچ تبلیغی برای نمایش در دسترس نیست ، از متغیرهایی استفاده کنید. برای کسب اطلاعات بیشتر ، این مقاله را بخوانید

  • جلوگیری از درج مطالب جدید بالاتر از مطالب موجود

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

  • جلوگیری از درخشش متن نامرئی (FOIT)

مسئله Flash of Invisible Text (FOIT) همچنین می تواند CLS صفحه شما را تحت تأثیر قرار دهد. با بارگیری مجدد فونتهای وب و یا استفاده از ویژگی نمایش قلم ، اطمینان حاصل کنید که متن شما هنگام بارگیری فونت وب قابل مشاهده است. در اینجا درباره این بیشتر بدانید.

  • پرهیز از انیمیشن های غیرمرکب

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

یک ترفند مناسب برای رهایی از دشواری های رفع خطاهای جدید GTmetrix

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

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

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

درباره نویسنده

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

۱۱ دیدگاه دربارهٔ «آپدیت جدید جی تی متریکس + آموزش کامل رفع ایرادات | بر اساس گوگل لایت هاوس»

  1. ممنونم بابت این راهنمای خوبی که در خصوص آپدیت جدید gtmetrix ارائه کردید. واقعا تغییرات جدید این سایت بسیار گیج کننده بود و من نمیتونستم رتبه نتایج تست سایت خودم رو بهبود بدم. اگر ممکنه بگبد که علت استفاده از لایت هاوس توسط gtmetrix چی هستش؟

    1. مجید نوروزی

      اخیرا گوگل اهمیت بیشتری برای page experience یا همان PX قائل شده و این موضوع رو با استفاده لایت هاوس سنجش میکنه در نتیجه جی تی متریکس هم برای نزدیک کردن بررسی های خودش به گوگل تصمیم به استفاده از الگوریتم لایت هاس گرفته. پیشنهاد میکنم برای برا کسب اطلاعات بیشتر در خصوص پیج اکسپرینس این مقاله هم مطالعه کنید.

  2. سلام. سپاس بابت توضیحات خوبتون.

    الان جی تی متریکس جدید، سرعت سایت منو خیلی پایین نشون میده. یعنی قبلا که امتیاز سایت A یا B بود، الان شده F. قبلاً افزونه WP Fastest Cache Premium برای بهینه سازی سرعت سایت استفاده می کرد. آیا با توجه به تغییرات جی تی متریکس، افزونه جدیدی ارائه خواهد شد که بتوان سایت را بهینه سازی کرد. (البته خب میدونم که لازمه یه سری تغییراتی هم رو سایت ایجاد کنم).
    ممنون میشم پاسخگو باشید.

    1. سلام و درود
      الان هم افزونه wp fastest cache مناسب هستش و تا حدودی بهتون میتونه کمک کنه. اما بخش زیادی از الگوریتم جدید نیازمند تغییرات در کدهای css و js سایت شما می باشد. در واقع بهینه سازی سرعت تبدیل به یک کار تخصصی شده است. همچنین بخش تیم سئو آکادمی دیجیتال می توانند اینکار را برای شما بعهده بگیرند.

  3. میتونم بگم که این آموزش جی تی متریکس بهترین و کاملترین آموزشی بود که تو گوگل پیدا کردم اما متاسفانه من نمیتونم تغییرات زیادی روی سرعت سایتم ایجاد کنم. آیا شما دوره آموزشی هم برای انجام بهینه سازی سرعت سایت برگزار می کنید؟ همچنین اینکه خدمت بهینه سازی سرعت سایت هم انجام میدید؟

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

  4. از آموزش جدید Gtmetrix بسیار استفاده کردم واقعا بعد از تغییرات جدید gtmetrix نمیدونستم که هر کدوم از آنالیز ها مربوط به چه چیزی هستند و من برای حل کردن خطاهای جدید چکاری باید انجام بدم

  5. عالی بود ممنون از اطلاعات خوبتون فقط ای کاش برای بهتر شدن webvitals افزونه های وردپرس هم معرفی می کردید

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

موضوعات دیگر