خرید گوشی اورجینال تصویر بنر
سئو وردپرس

وردپرس تم | جلسه ۱۱ – معیارهای موجود در Browser Timings

وردپرس تم | جلسه ۱۱ – معیارهای موجود در Browser Timings

در این آموزش قصد داریم به زبان ساده بگیم معیارهای موجود Browser Timings داخل ابزار Gtmetrix چیست و با این خطاها چه کنیم؟ چطور بهبود بدیم؟

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

در مرورگرها مخصوصا کروم یک سری زمان بندی های مهم و نقاط عطفی وجود داره که معنایی دارن و در مرورگرها گزارش داده میشن و اکثر این موارد در Browser Timings هست و البته مهم‌ترین این زمان‌بندی ها در گزارش Performance ابزار GTmetrix گفته شد، به ترتیب از مهم شروع می‌کنیم:

  • معیار Largest Contentful Paint با ۲۵ درصد اهمیت
  • معیار Total Blocking Time با ۲۵ درصد اهمیت
  • معیار Time to Interactive با ۱۵ درصد اهمیت
  • معیار First Contentful Paint با ۱۵ درصد اهمیت
  • معیار Speed Index با ۱۵ درصد اهمیت
  • معیار Cumulative Layout Shift با ۵ درصد اهمیت

سرفصل‌های پست

    • 0.1 بررسی Browser Timings در گزارش Performance
      • 0.1.1 Redirect Duration چیست
      • 0.1.2 Connection Duration چیست
      • 0.1.3 Backend Duration چیست
      • 0.1.4 TTFB چیست
      • 0.1.5 First Paint چیست
      • 0.1.6 DOM Interactive Time چیست
      • 0.1.7 DOM Content Loaded Time چیست
      • 0.1.8 Onload Time چیست
      • 0.1.9 Fully Loaded Time چیست
    • 0.2 جمع بندی Browser Timings
  • 1 لیست آموزش های جدید GTmetrix:

بررسی Browser Timings در گزارش Performance

لازمه بدونید هیچ کدوم از زمان‌های این قسمت مربوط به آپدیت GTmetrix نیستن و تو نسخه قبلی این ابزار در سربرگ Timings همه این موارد قابل مشاهده بودن.

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

Browser Timings در GTmetirx جدید
Browser Timings در GTmetirx جدید

Redirect Duration چیست

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

Redirect Duration چیست
Redirect Duration در Waterfall ابزار GTmetrix

یک اشتباهی که دوستان میکنن سایت خودشون رو دقیق در ابزارهای تست سرعت سایت مثل gtmetrix وارد نمیکنن. مثلا سایت میزفا به صورت https و بدون www هست یعنی https://mizfa.com و بهتره سایتم رو با http وارد نکنم چون خود این موضوع باعث ریدایرکت ۳۰۱ میشه و چرا من باعث به وجود اوردن ریدایرکت ۳۰۱ بشم درحالی که میتونم با https مستقیم وارد سایتم بشم؟ ریدایرکت برای سئو خوبه ولی باعث کندی میشه.

در عکس بالا درخواست سوم ما کد ۲۰۰ خورده و ok هست و این نشون میده که ریدایرکت نداریم ولی درخواست اول ۳۰۱ هست و move خورده.

Connection Duration چیست

Connection Duration : بعد از انجام ریدایرکت (در صورت وجود)، مدت زمانی که صرف اتصال به سرور برای ایجاد درخواست میشه، Connection Duration نامیده میشه. تو این مدت، هنوز صفحه خالیه و چیزی نمایش داده نشده. در این حالت DNS Lookup داریم، یعنی باید IP سرور در این مرحله پیدا بشه تا زمینه ساز ارسال اطلاعات باشه.

درباره بهبود DNS lookups یک مقاله جامع داریم پیشنهاد میشه بخونید براتون مفیده.

Connection Duration در Waterfall ابزار GTmetrix
Connection Duration در Waterfall ابزار GTmetrix

مورد بالا نشون میده که اگر شما ریدایرکت نداشته باشید یعنی Redirect Duration صفر باشه یک مرحله جلو هستی و در مرحله Connection Duration هستی.

زمان Connection Duration همون بخش سبز رنگ در Waterfall هست که به اسم Connecting نام برده میشه.

همینطور هر چیزی که در حالت Sending و SSL باشه مربوط به تایم Connection هست. Sending مخصوصا وقتی زمانش بیشتر میشه که منبع ما (CSS یا JS یا عکس) با خطای ۴۰۴ روبه‌رو بشه.

Backend Duration چیست

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

Backend Duration در Waterfall ابزار GTmetrix
Backend Duration در Waterfall ابزار GTmetrix

زمان Backend Duration همون بخش بنفش رنگ در Waterfall هست که به اسم Wating نام برده میشه. چطور میشه Connection Duration یا زمان Wating رو بهینه کرد؟
۱ – بهینه سازی کدهای بک‌اند سایت
۲ – کش کردن صفحات سایت و همینطور برخی اطلاعات پراستفاده در دیتابیس
۳ – افزایش منابع سخت افزار هاست و یا سروری که دارید.

اطلاعات بیشتر خواستید این لینک از سایت gtmetrix بخونید.

TTFB چیست

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

TTFB در Waterfall ابزار GTmetrix
TTFB در Waterfall ابزار GTmetrix

جمع ۳ تا مورد بالا میشه TTFB یعنی فرمول اینطوری هست:

Redirect Duration + Connection Duration + Backend Duration = TTFB

پس بهتره برای رفع TTFB سه مورد بالا رو بهبود بدید.

First Paint چیست

First Paint : درباره First Paint تو همین مقاله و هنگام بررسی First Contentful Paint صحبت کردیم و گفتیم زمانیه که مرورگر اولین Render رو در صفحه انجام میده. در این لحظه ممکنه کاربر بتونه تغییری رو در صفحه مشاهده کنه.

First Paint در Waterfall ابزار GTmetrix
First Paint در Waterfall ابزار GTmetrix

حتما حتما مقاله FCP چیست بخونید.

در نسخه جدید جی تی متریکس FC در قسمت Waterfall نیست با این حال یکی از معیارهای موجود در Browser Timings هست و اندازه گیری میکنه.

DOM Interactive Time چیست

DOM Interactive Time : این لحظه، زمانیه که مرورگر لود کردن (Loading) و تجزیه کردن (Parsing) سند HTML رو تموم کرده باشه. در نسخه جدید این مورد دیگه در قسمت Waterfall نیست با این حال یکی از معیارهای موجود در Browser Timings هست و اندازه گیری میکنه.

درباره رفع خطای Avoid an excessive DOM size که مربوط به جی تی متریکس جدید هست حتما بخونید و مطالعه کنید.

DOM Content Loaded Time چیست

DOM Content Loaded Time : این لحظه، زمانیه که DOM آماده ست و هیچ فایل CSS یا Stylesheet اجرای JavaScript رو متوقف نمی‌کنه. در نسخه جدید این مورد دیگه در قسمت Waterfall نیست با این حال یکی از معیارهای موجود در Browser Timings هست و اندازه گیری میکنه.

Onload Time چیست

Onload Time : زمانی که پردازش صفحه کامل شده و تمام منابع صفحه (مثل عکس و فایل‌های CSS) دانلود شده‌اند، Onload Time نامیده میشه.

یک معیار بسیار کاربردی هست

Onload Time در Waterfall ابزار GTmetrix
Onload Time در Waterfall ابزار GTmetrix

در این حالت DOM کاملا تموم شده و window.onload در جاوااسکریپت اجرا شده.

Fully Loaded Time چیست

Fully Loaded Time : بعد از زمان Onload امکان داره درخواست‌هایی برای دریافت منابع بیشتر ارسال بشه. مثلا ممکنه فایل‌های JavaScript شروع کنن به ارسال درخواست‌های بعدی و این مسئله باعث میشه نیاز به اندازه گیری زمان دیگه‌ای با عنوان Fully Loaded Time داشته باشیم.

Fully Loaded Time چیست
Fully Loaded Time در GTmetrix

Fully Loaded Time حاصل جمع همه موارد زیر هست:

  • First Paint
  • First Contentful Paint
  • Onload Time
  • Largest Contentful Paint
  • Total Time to Interactive
  • Last request captured

البته خیلی از این موارد در بخش Speed Visualization قیمت Summery در GTmetrix هست:

Speed Visualization در Summery در GTmetrix
Speed Visualization در Summery در GTmetrix

جمع بندی Browser Timings

 

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

 

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

نویسنده مقاله: پوریا آریافر / متخصص و مشاوره سئو

 

وردپرس تم | جلسه ۱۱ – معیارهای موجود در Browser Timings

لینک منبع

هیچ کالایی را بدون تخفیف نخرید تصویر بنر

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا