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

معرفی Redirect Duration، Connection Duration، Fully Loaded Time و ...

Browser Timings چیست

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

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

در مرورگرها مخصوصا کروم یک سری زمان بندی های مهم و نقاط عطفی وجود داره که معنایی دارن و در مرورگرها گزارش داده میشن و اکثر این موارد در Browser Timings هست و البته مهم‌ترین این زمان‌بندی ها در گزارش Performance ابزار 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 میزفا دنبال کنید. و یا اگر به سئو فنی علاقه دارید مباحث سئو فنی و تکنیکال رو دنبال کنید.

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

 

فیلم آموزشی افزایش سرعت سایت با gtmetrix
فیلم آموزشی افزایش سرعت سایت با gtmetrix
پوریا آریافر
اولین کسب و کار آنلاین خودم رو در فیسبوک راه‌اندازی کردم، سال ۲۰۱۱ یکی از پرتعامل‌ترین صفحات فارسی با ۸۰ هزار فالور فعال رو داشتم. بعد اینکه فیسبوک خالی از کاربر ایرانی شد وارد دنیای شبکه شدم و در انتهای سال ۲۰۱۲ مدرک MCSE مایکروسافت رو دریافت کردم، در حالی که نمره بالا گرفتم ولی کسی به دلیل به خطر افتادن موقعیت شغلی خودش به عنوان کارآموز منو قبول نمی‌کرد، بعدش با شروع دوران خدمت سربازی، مسئول بهینه سازی یک سایت خبری معتبر شدم و سئو یاد گرفتم. در ابتدای سال ۲۰۱۴ تونستم از رتبه ۱۵۰۰۰ به ۴۰۰ الکسا نزدیک کنم، اون زمان الکسا خیلی مهم بود. وارد دانشگاه شدم، به دلیل عدم علاقه به دانشگاه سعی کردم زودتر تمومش کنم و سه ساله در مقطع کارشناسی IT فارغ التحصیل شدم، توی دانشگاه هر کسی منو میدید یاد سئو میوفتاد، در همون سال آخر دانشگاه بزرگ‌ترین کانال تلگرامی IT با ۴۰ هزار عضو رو داشتم، که به مجتمع فنی فروختم تا بتونم تمرکز رو فقط بر روی عشق خودم یعنی سئو بذارم، وقتی کانال تلگرام فروختم حس پرواز بهم دست داد، هرچند درآمد چندین میلیون ماهانه رو از دست دادم ولی دوباره باید مثل گذشته با پوستی نو یک فصلی نو رو میساختم. در این چندین سال فعالیت‌های سئو به شکل تخصصی بنده در قالب پروژه‌های مختلف و آموزش‌های حضوری و غیرحضوری در دفتر میزفا و دانشگاه علامه طباطبایی تهران صورت ‌گرفته، تجربه بهینه سازی موفقی در بهبود UX و CRO پروژه‌های سئو کسب کردم. در اکثر ابزارهای کاربردی گوگل تسلط کاملی دارم. عاشق کسب تجربه های جدید هستم. راز پیشرفت در هر کاری رو یادگیری و یاددادن می‌دونم و میزفا که در اواخر ۲۰۱۶ راه‌اندازی شد تونست چنین بستر مناسبی رو برام فراهم کنه. همینطور در حال حاضر مدیریت یک تیم ۱۰ نفری از جوانان فعال و پرانگیزه رو در میزفا به عهده دارم. نقد و بازخوردهای سازنده شما، جوهر تلاش‌های مستمر ماست تا یک قدم خودمون بهبود بدیم. منتظریم …
لیست آموزش GTmetrix نسخه جدید

بدون نظر

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

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

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=