Menu
- دسته‌بندی: سئو بهینه سازی
- زمان مطالعه: 13 دقیقه
نحوه خواندن waterfall به چه صورت است؟
برای خیلی از افراد در حوزه بهینه سازی و سئو سایت ، سوال این است که نحوه خواندن waterfall در جی تی متریکس چیست و چگونه است؟ مسلما شمایی که وب سایت دارید و یا در این حوزه فعالیت هایی دارید که باعث شده در مورد این موضوع در گوگل سرچ کنید. دلیل اینکه افراد به دنبال نحوه خواند waterfall هستند این است که بتوانند موارد مهمی ، لینک های فراخوانی ، درخواست ها ، دامین ها ، کد های اعلام وضعیت و … در مدت زمان ها و معیار های تعریف شده به شما نشان دهد.
در واقع با واترفال خوانی ، تمام موارد مهمی را که در طول لود وب سایت شما صورت می گیرد را در قالب یک نمودار چارت واترفال به شما نمایش می دهد؛ نحوه خواندن waterfall ، در جدوالی ساده قرار گرفته است که شما نسبت به رنگ های تعیین شده برای هر کدام از آن ها می توانید به راحتی کل مراحل و فراخوانی های وب سایت مورد نظر را مورد بررسی قرار دهید.
کل پروسه و نحوه خواندن waterfall به این دلیل است تا بتوانیم با آن تمام موارد و معیار هایی که در لود وب سایت ما تاثیر گذار است و آن را کند کرده است ، شناسایی کرده و آن را نسبت به مهارت و رفتار های موجود مرتبط به آن ، بهینه سازی را انجام دهید.
در این مقاله به تمام موارد مهم اینکه واترفال چیست و نحوه خواندن واترفال به چه شکل است پرداخته ایم؛ در ضمن برای یادگیری بهتر این مبحث می توانید خودتان لینک یک وب سایت و یا صفحه ای از آن را در وب سایت جی تی متریکس وارد کنید تا همزمان با این مقاله ، سربرگ واترفال را به خوبی یاد بگیرد. با این مقاله پویا وب همراه باشید.
پادکست :
قبل از یادگیری نحوه خواندن waterfall چکار باید بکنیم؟
اولیم مرحله از نحوه خواندن waterfall آشنایی با خود آن است که بدانیم اصلا چه چیزی است و چه کاری با آن می توان انجام داد؛ اولین کار شما برای اینکه به واترفال وب سایت مورد نظر دسترسی پیدا کنید ، این است که لینک سایت مورد نظر یا صفحه ای از آن را کپی کرده و به وب سایت جی تی متریکس وارد کنید.
در قسمت فیلد خالی که برای وارد کردن url مربوطه است آدرس کپی کرده را پیست می کنیم و گزینه test your site را کلیک می کنیم. پس از گذشت چند ثانیه ، نتیجه تست وب سایت توسط جی تی متریکس در اطلاعاتی جامع با سربرگ های متفاوت به شما ارائه داده خواهد شد.
بعد از به نمایش گذاشته شدن اطلاعات ، سربرگ های زیادی را با نام های summary ، performance ، structure ، waterfall ، video و history برخواهیم خورد. در بین این سربرگ ها گزینه waterfall را انتخاب می کنیم و با کمی اسکرول به پایین آیتمی به روایت عکس زیر میبیند.
این همان پنل واتر فال است که در آن اطلاعاتی جامع از آدرس های فراخوانی شده ، وضعیت های لایت هاوس و سرور ، دامین های فراخوانی شده ، سایز فایل های فراخوانی و بارگیری شده و مهم ترین قسمت آن که تایم لاین نام دارد ، در آن به صورت یک نمودار چارت واترفال آماده شده است.
این نمودار جدای اینکه خودش از قسمت های متفاوتی ایجاد شده ، موارد مهم آن به صورت یک جدول آیتم بندی شده و شما می توانید نسبت به هر آدرس url که در حین لود ، تاثیر گذار بوده و شناسایی شده را ببینید.
با کلیک روی هر کدام از این موارد به اطلاعات جامع دیگری خواهید رسید که در آن ها باید نسبت به task و رنگ هایی که در قسمت timeline به نمایش گذاشته شده است ، بتوانید آن ها را بشناسید و بخوانید. اما نحوه خواندن waterfall به چه شکل است؟
شروع به یادگیری نحوه خواندن waterfall
در این قسمت از مقاله که میخواهیم به نحوه خواندن waterfall بپردازیم ، باید این را بدانید که دسته بندی خوبی برای شما در این قسمت تهیه شده تا بتوانید تمام آیتم هایی که در لود وب سایت تاثیر گذار و ثابت هستند را جدا کنید و هر کدام را به صورت یک دسته اطلاعات یکسان بررسی کنید. این اطلاعات شامل فایل های :
- Html
- CSS
- JS
- XHR
- Font
- Image
- Other …
این آیتم ها در تمام مراحل لود سایت ثابت هستند و میتوانید تمام task ها و تمام اطلاعات آن را به صورت جدا و یا یک جا بررسی کنید.
با انتخاب هر کدام از این موارد و یا کل گزینه ها ، در قست زیر این که چارت ها قرار دارد تغییر خواهد کرد که به بررسی کل آن ها خواهیم پرداخت.
نحوه خواندن waterfall به صورت گام به گام
با دقت در نمودار چارت واتر فال متوجه می شویم که از 5 قسمت جدا در آن طبقه بندی شده است که به ترتیب آن ها را نام می بریم و هر کدام را مختصر توضیح می دهیم.
url یا نام و آدرس فایل : این قسمت از واترفال در واقع به این اشاره دارد که مرورگر شما چه فایل و منبع را در حال بارگیری است. این اطلاعات که در سمت چپ نمودار قرار دارد ، معمولا به دو متد مختلف اطلاعات را نمایش می دهد که get و یا post نام دارد. این دو متد هر دو از پروتکل http هستند؛ با کلیک بر روی یکی از این موارد ، کشویی از اطلاعات باز خواهد شد که منبعی را به شما در قالب یک لینک نشان خواهد داد و سایر اطلاعات موجود در منوی باز شده ، مطالب تخصصی هستند که زیاد کاربرد ندارد. تنها لینک مورد نظر کاربرد دارد که در صورت مشکل داشتن می توانید با کلیک بر روی آن به آیتم و فایلی که مشکل دارد هدایت شوید؛ این اطلاعات می تواند در قالب فایل های jpg ، png ، کد های css و js باشد.
Status یا وضعیت آدرس : این مورد همان کد های اعلام وضعیت هر لینک ، آیتم و سایر المان هایی که از یک منبع در حال لود هستند را برای ما به نمایش می گذارد؛ معمولا این قسمت از سری کد های اعلام وضعیت 200 باید باشد تا نشان دهد آیتم مورد نظر مشکل ندارد ، به درستی در حال اجرا و ارسال اطلاعات از جانب سرور است؛ به صورت بهتر می توان گفت که این ردیف از اطلاعات واترفال جی تی متریکس ، اشاره به این دارد که صفحه و آیتم مورد نظر که شامل آدرس و منبعی است ، آیا به درستی از سمت سرور مذکور ، اطلاعات را ارسال و به کاربر در مرورگر به نمایش گذاشته می شود یا خیر؟ می توان به همان دسته کد های 404 و یا 301 اشاره کرد که معمولا با ریدایرکت کردن و آنالیز درست هر کدام از این موارد می توان در سئوی سایت تاثیر گذار بود.
اگر بخواهیم نحوه خواندن waterfall و این کد ها را به صورت خلاصه وار معرفی کنیم به شرح زیر می شود :
دسته کد های سری 100 : این نوع کد ها به معنی انتقال دسته اطلاعاتی است که معمولا در واتر فال جی تی متریکس کلا کم دیده می شوند.
دسته کد های سری 200 : این دسته از کد های اعلام وضعیت به معنی درخواست و دریافت اطلاعات به درست ترین و موفقیت آمیز ترین حالت خود است. به طور کلی این مورد همواره باید در بیشترین حالت خود در این نمودار دیده شود تا سایر کد های اعلام وضعیت.
دسته کد های سری 300 : این کد اعلام وضعیت همان کد ریدایرکت یا تغییر مسیر است که نشان می دهد لینک و منبع ما ، در حال تغییر مسیر دادن به لینکی مشابه و یا متفاوت دیگری است.
دسته کد های سری 400 : به موفقیت آمیز نبودن معروف هستند و بیشتر به دلایل مختلفی چون در دسترس نبودن اطلاعات ، مشکل در ارسال درخواست ، مشکل در دریافت درخواست ، مشکل در سرور و … می باشد.
دسته کد های سری 500 : این کد های به صورت اختصاصی تمام مشکلات ناموفق از جانب سرور است. حال می تواند سرور down شده باشد و یا در off time قرار گرفته باشد؛ و یا در مواقعی امنیتی ممکن است وب سایت و سرور مذکور دچار حملات دیداس شده باشد.
- Domain منبع فایل و اطلاعات : به طور کلی تمام اطلاعات یک صفحه باید از منبعی و بانک اطلاعاتی نشات گرفته باشند. در نحوه خواند waterfall به این دقت کنید که در ستون مربوطه چه آدرسی نوشته شده است؛ شاید ویدیو آیتم سنگینی دارید که آن را از یک هاست ابری یا همان cdn فراخوانی می کنید. بدین ترتیب در این قسمت از سربرگ واترفال که domain نام دارد ، آدرس و نام منبعی که اطلاعات و آیتم های نشات گرفته اند می آید.
- Size یا حجم : خیلی ساده و خلاصه وار واضح است که کل این داستان چیست و اشاره به حجم منابع که قرار است توسط سرور ارسال و در مرورگر دانلود شود است. در این قسمت فایل ها به چند مدل حجم آن ها نشان داده می شود که در آن مدت زمان کمپرس آن حجم و حتی آنکمپرس آن نیز قابل مشاهده است.
- Time line یا خط زمانی : مهم ترین بخش نحوه خواندن waterfall این قسمت است. این قسمت از ماجرا ، تمام تایم هایی که در آن درخواست به سرور ارسال می شود را محاسبه می کند و نسبت به معیار های کلی که از پردازش در سرور تا رندرینگ در کلاینت انجام می شود را محاسبه می کند؛ این قسمت از خطوط و نوار های رنگی متعددی ایجاد شده که در نحوه خواندن waterfall به آن خواهیم پرداخت.
با کلیک بر روی یکی از عناوین و آیتم های جدول ، اطلاعاتی برای شما به نمایش گذاشته می شود که همگی از اطلاعات header فایل ها در اجرا پروتکل http است. این اطلاعات منابع اصلی فراخوانی و بارگذاری داده ها را بر عهده دارد؛ با داشتن اطلاعات کافی میتوانید تمام مشکلاتی که در این قسمت از یک وب سایت رخ می دهد ، آن ها را تغییرات اعمال کنید و مشکل را برطرف کنید.
رنگ های تایم لاین در نحوه خواندن waterfall چیست؟
به ترتیب تمام رنگ ها را نسبت به این که چه معیار هایی را نسبت به چه میزان زمان صرف شده نشان می دهد بررسی می کنیم.
رنگ قهوه ای : این رنگ شامل محاسبه و تحلیل مدت زمانی است که مرورگر ما در ویتینگ روم (waiting room) منتظر مانده تا پردازش و دریافت اطلاعات صورت گیرد؛ عواملی که در مدت زمان این مورد تاثیر گذار هستند را می توان به این مورد اشاره کرد که شما ، بیش از حد مجاز هاست وب سایت مذکور ، درخواست کانکشن کردید؛ و یا اینکه دانلود فایل هایی که شامل رسانه ها و کد های js و css هستند باعث شده تا مسدود سازی و در نهایت پردازش قطع شود. البته زمانی که برای خود اتصال امن ssl و همچنین اعتبار سنجی پروتکل http گرفته می شود نیز در این روند و task آن تاثیر گذار هستند.
رنگ فیروزه ای : این رنگ برای مدت زمانی است که در آن اتصالات و کانکشن های dns صورت می گیرد. به عنوان مثال شما وقتی یک وب سایت را با لینک اصلی آن وارد می شوید ، باید بدانید که این دامین مربوطه به آیدی تبدیل شده. این مدت زمان صرف شده dns lockup گفته می شود. این مورد با هر آی پی جدید که سرچ و ایندکس شود؛ جداگانه کش می شود. یعنی اگر شما یک صفحه ای را دوباره از جی تی متریکس تست بگیرید. بار دوم task فیروزه ای کوتاه تر خواهد بود.
رنگ سبز : از عواملی است که در آن مدت زمان معیاری را نشان می دهد که کاربر اتصال و کانکشن امن یا همان کانکشن با پروتکل https از ssl داشته باشد. این نوع از اتصال مدت زمان کانکشن ssl یک دامین و پروتکل را محاسبه می کند. همانطور که می دانید ssl در واقع یک نوع سیستم رمزنگاری شده اتصال کلاینت به سرور است که امنیت را بالا برده و در نتیجه خطوط پردازی برنامه بیشتری خواهیم داشت.
رنگ قرمز : در نحوه خواندن waterfall به این معنی است که در آن چه مقدار طول کشیده تا درخواست ما به سرور مربوطه ارسال شود؛ این اطلاعات نسبت به متودی که در آن توسط پروتکل تعیین می شود ، عددی را تشکیل می دهد که مدت زمان این پروسه را مشخص می کند.
رنگ بنفش : حال رنگ بنفش همان مدت زمان مرورگر ما در ویتینگ روم است. به روایتی وقتی ما درخواست به سرور مورد نظر ارسال کردیم باید منتطر باشیم تا سرور مذکور ، اطلاعات را پردازش کند و به ما در مرورگر به نمایش گذارد؛ حال این مدت زمان که باید منتظر به ری اکشن سرور بمانیم را در نحوه خواندن waterfall ، با رنگ بنفش نشان می دهد.
از مهم ترین رنگ هایی که متخصصین سئو با آن سر و کار دارند ، رنگ خاکسری است؛ در واقع رنگ خاکستری همان مدت زمانی است که باید منتظر ماند تا فایل های ارسالی توسط سرور در مروگر ما دانلود و سپس پردازش شود تا در صورت داشتن محتوای مربوطه و قالب درک ، مرورگر شروع به رندرینگ آن کند.
زمان رویداد ها در واترفال چه هستند؟
در قسمت قبل از این که رنگ ها چه تاثیری در نحوه خواندن waterfall دارند صحبت کردیم. حال در طول این درخواست ها که در جدول و نمودار چارت آن قرار دارد ، خطوطی عمودی در رنگ های متنوع دیده می شود. این موارد همان زمان رویداد های اصلی در طول لود سایت است که باید با هر کدام از آن ها آشنایی کافی داشته باشید.
- خط عمودی سبز
- خط عمودی آبی
- خط عمودی قرمز
- خط عمودی بنفش
این خطوط از اصلی ترین عوامل زمان رویداد های در واتر فال هستند. حال به بررسی هر کدام از این خطوط به ترتیب در قسمت زیر پرداخته ایم.
اولین رویدادی که در هر صفحه ای از سایت در حین لود رخ می دهد ، همان محتوا های قابل درک اولی هستند که نسبت به بهینه سازی که صورت گرفته اجرا و به نمایش گذاشته می شوند. این محتوا های میتواند یک عکس خیلی بزرگ یا کوچک باشد ، و یا یک فایل تصویر از لوگوی سایت باشد.
البته نوشته و متون از این آیتم های غافل نیستند؛ به طور کلی آیتم های قابل درک محتوای اولیه هر سای را ، در نحوه خواندن waterfall ، در زمان رویداد آن با خطی سبز رنگ به صورت عمودی در نمودار چارت آن قالب مشاهده است.
خطوط آبی در نمودار به این معنی است که در حین لود مرورگر وب سایت را با dom آماده حاضر می کند. به طور کلی این بخش از منابع و اطلاعات واترفال بسیار تخصصی بوده و در بیشتر مواقع نیاز به دستکاری و بهینه سازی آن نمی کنید.
خط قرمز یکی از مهم ترین عناصر نمودار waterfall است. درواقع این خط نشان دهنده این است که دانلود محتوا ها ، آیتم ها و فایل ها به اتمام رسیده و در این حالت مرورگر در حال آخرین منابع و فایل هایی است که قرار است دانلود شود. معمولا در این مرحله تمام اطلاعات مربوطه دانلود شده اند و در قالب محتوای قابل درک در صفحه مورد نظر به نمایش گذاشته شده اند.
بعد از رنگ قرمز نوبت به اتمام کار یعنی رنگ بنفش می رسد. این خط نشان دهند دانلود کامل اطلاعات و منابع دانلود است تا تمام آن به نمایش گذاشته شدن است؛ درواقع این خط این را می گوید که به مدت زمانی که من اعلام می کنم ، تمام اطلاعات و محتوای قالب درک شما رندر شده اند و به نمایش گذاشته شده اند و در حال حاضر ، رم و سی پی یو ما بیکار هستند.
اهمیت نحوه خواندن waterfall چیست؟
در واقع یادگیری و نحوه خواندن waterfall به این دلیل است که شما از طریق آن رفتار های کاربر و خودتان را بهتر شناسایی کنید تا رفتار بهتری در جهت بهینه سازی و افرایش لود سایت داشته باشید.
از طرفی این کار باعث می شود تا شما تمام دیتیل ها و موارد مهمی چون تمام فراخوانی ها ، ریدایرکت ها ، وضعیت ها ، منابع و … را تحت نظر داشته باشید تا بدانید دقیقا اتفاقات درون وب سایت به چه شکل است؛ اگر در قسمت مشکلی وجود دارد و یا موردی تاثیر گذار است ن را سریعا شناسایی کنید و مشکل را بر طرف کنید.
از طریق مواردی که در بالا برای شما توضیح دادیم (همون رنگ ها و task تایم لاین ها) می تونید تمام زمان های صرف شده در جهت درخواست ، فراخوانی ، دریافت و دانلود ، بارگذاری و مسدود سازی ها را شناسایی کنید و برنامه خود را بهتر و استراتژیک تر برای انجام مراحل بهینه سازی کنید.
آیا یادگیری واترفال خوانی روی سئو سایت تاثیر دارد؟
همانطور که خودتان نیز می دانید ، سئو به مجموعه رفتار ها و کار هایی گفته می شود که در راستای بهینه سازی و دریافت رتبه خوب در نتایج اولی صفحات و serp گوگل است؛ حال هر چقدر ما آنالیز دقیق تری از فاکتور ها و دیتیل ها وب سایتمان داشته باشیم ، مسلما می توانیم ، بهتر ، حرفه ای تر ، سریعتر و هوشمندانه تر وارد عمل شویم و ری اکشن به این ماجرا نشان دهیم.
پس کامل ملتفت هستیم که یادگیری نحوه خواندن waterfall هیچ تاثیر مستقیمی روی سئو ندارد و می تواند یک آنالیز بسیار دقیق تر از مراحل لود وب سایت ما باشد تا بتوانیم یک تجربه کاربری بهترین را افراد در حین بازدید از آن بدهیم.
بهترین کار برای مبحث واترفال چیست؟
اولین و بهترین کاری که می توان در راستای این موضوع داشت همان یادگیری نحوه خواندن waterfall به بهترین شکل است؛ سپس نسبت به مهارت موجود برای بهینه سازی وب سایت و اطلاعات دریافتی از آنالیز واتر فال ، شروع به سئو کردن وب سایتمان از بابت مراحل لود سایتی کنیم.
شما می توانید نسبت به اطلاعاتی که در بالا برای شما توضیح دادیم ، شروع به آنالیز کردن آیتم ها و معیار های مهم در واتر فال کنید تا نسبت به مهارت ها و رفتار های موجود برای سئو بهینه سازی ، یک سرعت خوب را به وب سایت خود ببخشید.
تیم ما یعنی تیم پویا وب با داشتن سابقه بیشینه در حوزه طراحی ، امنیت و سئو سایت ، همواره چند قدم از سایر رقبا خود جلو تر است ، شما می توانید از طریق اطلاعات تماس درج شده با ما تماس بگیرد.
از همراهی شما تا انتهای این مقاله سپاس گذاریم.
آژانس طراحی سایت پویا وب با طراحی وب سايت حرفه‌ای و طراحی فروشگاه اینترنتی بيش از پانصد شرکت و ميزبانی بيش از هزار وب سايت، فعاليت رسمی خود را از تابستان سال 1395 آغاز کرده و همواره می‌کوشد خدمات خود را با بالاترين کيفيت ممکن و با بهره‌گيری از جدیدترین متدها به شما ارائه دهد.
- © 1399 | تمام حقوق مادی و معنوی سایت متعلق به آژانس طراحی سایت پویا وب است.