تجزیه و تحلیل آبشاری (Waterfall Analysis) با ابزار Devtools گوگل کروم

تحلیل عملکرد وب سایت، یکی از کارهای اساسی است که ما در پروژه های افزایش سرعت سایت انجام می‌دهیم. یکی از راه‌های ارزیابی و کشف کندی وب سایت، بررسی تک تک درخواست ها است که به اصطلاح به آن تجزیه و تحلیل آبشاری یا به انگلیسی Waterfall Analysis گفته می‌شود. ابزارهای فراوانی برای این امر وجود دارند که از جمله آن‌ها می‌توان به Chrome DevTools ، WebPage Tools ، Pingdom و GTmetrix اشاره کرد که استفاده از این ابزارهای سئو در درک و نحوه کارکرد سایت در دقیق مشخص کردن مشکلات  می‌تواند بسیار کارگشا باشد چرا که این نمودار آگاهی ارزشمندی درباره چگونگی تاثیر گذاری فایل‌های پیوست شده (asset) روی سرعت صفحات و تجربه کاربری به شما می‌دهند. درواقع تجزیه و تحلیل آبشاری همان تجزیه و تحلیل سرعت سایت می‌باشد.

البته ما در سایت میزفا بارها از تجزیه و تحلیل آبشاری در ابزارهای آنلاین مختلف استفاده کرده‌ایم، در پست بررسی سرعت با ابزار Pingdom درباره تجربه و تحلیل آبشاری (چارت آبشاری) این ابزار به خوبی اشاره شد، در دوره جامع بهینه سازی سرعت سایت به شکل بسیار جامع درباره تجربه و تحلیل آبشاری سایت Gtmetrix کار شد و همچنین در این پست قصد داریم به تجزیه و تحلیل آبشاری موجود در Chrome DevTools بپردازیم.

تجزیه و تحلیل آبشاری (Waterfall Analysis)

نمودار آبشاری که به عنوان گراف آبشاری و هم چارت آبشاری نیز شناخته می‌شود، ارائه بصری از نحوه بارگذاری عناصر در وب سایتتان ارائه می‌دهد. این عناصر شامل CSS، JavaScript، HTML، تصاویر، پلاگین ها، فونت‌ها و … می‌شوند. نکته مهم دیگر این است که نمودارهای آبشاری به شما اجازه مشاهده ترتیب رندر شدن عناصر در مرورگر را می‌دهند. از آن جا که این عناصر می‌توانند شامل موارد مختلفی باشند از جمله بلاک های CSS تا مشکلات FOIT ، ترتیب بارگذاری از اهمیت زیادی برخوردار است که در ادامه به آن اشاره خواهیم کرد.

ابزارهای تست آنلاین سرعت سایت بسیاری وجود دارند که می‌توانید برای ایجاد نمودار آبشاری از آن ها استفاده کنید. در زیر یک نمودار آبشاری معمولی را مشاهده می‌کنید که با ابزار خوده گوگل کروم یعنی Chrome DevTools ایجاد شده است. می‌توانید ببینید که زمان کلی بارگیری سایت میزفا 2.97 ثانیه می‌باشد، 31 درخواست HTTP وجود دارد و در مجموع 966 کیلو بایت داده منتقل شده است.

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

1 – DNS Lookup / DNS

هنگام دسترسی به یک صفحه وب، مرورگر تمام منابعی که نیازمند DNS Lookup هستند و باید تا زمان تکمیل lookup منتظر بمانند را شناسایی می‌کند. DNS lookup مبتنی بر hostname ها می باشد. به عنوان مثال، اگر Google Analytics را در وب سایتتان اضافه کنید، نه تنها برای دامنه شما DNS lookup انجام می دهد بلکه برای google-analytics.com نیز این کار را انجام می‌دهد. (اگر اطلاعی درباره DNS Lookup ندارد این قسمت را بخوانید)

پست ما درباره چگونگی کاهش DNS lookup را حتما مشاهده کنید چرا که در این قسمت به شکل کامل به DNS Lookup پ نحوه کاهش آن بحث کردیم.

کاهش DNS Lookup کمک بزرگی به بهبود سرعت سایت می‌کند، به همین دلیل است که همواره توصیه می‌شود عناصر واسطه بیشتری را روی CDN قرار دهید زیرا این کار درخواست های DNS lookup را کاهش می‌دهد. همچنین باید توجه داشته باشید که در ابزارهای زیاد، اگر تست های سرعت را چندین بار اجرا کنید، آن‌ها DNS را cache می کنند، به این معنی که این اطلاعات را در تست های بعدی مشاهده نخواهید کرد. اما lookup همچنان برای بازدیدکنندگان جدید که وارد سایت شما می شوند انجام می‌شود. سایت WebPageTest  که از نگاه بنده بهترین ابزار برای آنالیز درخواست های http و همینطور تجزیه و تحلیل آبشاری سایت هست، برای رفع این مشکل راه حل مناسبی به نام First View و Repeat View دارد. از این طریق می توانید تصویر کلی بهتری را مشاهده کنید.
همچنین می توانید از resource hint هایی مانند DNS prefetching استفاده کنید که به مرورگر امکان انجام DNS lookup در یک صفحه در پس زمینه در حالی که کاربر در حال استفاده از مرورگر است را می‌دهد. این امر باعث کاهش latency یا همان تاخیر در DNS lookup در زمان کلیک کاربر روی یک لینک انجام می‌شود. مثال زیر را مشاهده کنید:

<!-- Prefetch DNS for external assets -->
 <link rel="dns-prefetch" href="//fonts.googleapis.com">
 <link rel="dns-prefetch" href="//www.google-analytics.com"> 
 <link rel="dns-prefetch" href="//cdn.domain.com">

2 – Initial Connection / Connect (ارتباط اولیه یا اتصال)

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

کاهش زمان TCP کمی دشوارتر است. بهترین نقطه برای شروع این است که مطمئن شوید روی یک هاست وب سریع با تاخیر پایین سایت شما پیاده شده است. این handshake با ارسال داده از طرف کاربر در حین SYN اتفاق می‌افتد، بنابراین به ارتباط ها امکان جایگزینی در حین handshake را می‌دهد.
همچنین preconnect را فراموش نکنید که به مرورگر اجازه می‌دهد ارتباط‌های ابتدایی را قبل از ارسال واقعی درخواست HTTP به سرور ایجاد کنید. مثال زیر طرز فعال کردن preconnect را نشان میدهد.

<link href='https://cdn.mizfa.com' rel='preconnect' crossorigin>

3 – SSL / TLS

SSL، که در بعضی ابزار ها به عنوان SSL negotiation نیز معرفی می‌شود، زمان کلی مرورگر برای اجرای SSL/TLS handshake می‌باشد. مشخصاً این را زمانی مشاهده می‌کنید که CDN و یا هاست شما روی HTTPS فعال باشد.

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

1.  HSTS مخفف عبارت HTTP Strict Transport Security می‌باشد، یک تقویت کننده امنیت است که صرفاً دسترسی مرورگرها فقط از طریق HTTPS محیا می‌کند. این ابزار با حذف redirect های HTTP و HTTPS غیر ضروری باعث کمک به عملکرد سرعت وب سایت شما می‌شود.
2. خاتمه دادن زودهنگام در کاهش تاخیر SSL/TLS handshake بسیار مهم است. با توزیع محتوا به کمک CDN تاخیر هر رفت و برگشت بین کاربر و سرور را کاهش می‌دهید. یک CDN به شما اجازه می دهد ارتباط نزدیکتر به کاربر را برقرار کنید.
3. OCSP stapling رویکردی جایگزین برای تعیین معتبر بودن یا نبودن یک سند SSL است. این رویکرد به وب سرور اجازه می‌دهد تا معتبر بودن گواهینامه ها را بررسی کند و نیاز به درخواست صدورگواهی از جانب کاربر را حذف کند و درخواست دیگر را کاهش دهد. هنگامی که با HTTPS سروکار دارید، OCSP به طور خودکار فعال می‌شود.
4. و البته HTTP/2 را داریم که دومین به روز رسانی عمده پروتکل HTTP از زمان HTTP1.1 می‌باشد. ویژگی های عملکردی HTTP/2 شامل بهبود سرعت مرور وب و همچنین افزایش امنیت می‌باشد.

4 – TTFB / Waiting

TTFB که خلاصه time to first byte است، مقدار زمانی است که طول می‌کشد تا یک کاربر یک درخواست HTTP ایجاد کرده و اولین بایت داده را از وب سرور دریافت کند. در Pingdom این مورد به عنوان زمان انتظار یا wait time شناخته می شود. TTFB یک جنبه مهم از بهینه سازی وب سایت است زیرا هرچه TTFB سریع‌تر باشد، منبع درخواستی سریع‌تر به مرورگر ارسال می‌شود. به طور میانگین هر چیزی با TTFB کمتر از 100 میلی ثانیه فوق العاده است. هرچیزی با میانگین TTFB 200 تا 500 میلی ثانیه استاندارد است و بین 500 میلی ثانیه تا 1 ثانیه کمتر از ایده آل و هرچیزی با TTFB بزرگتر از 1 ثانیه احتمالاً باید مورد بررسی قرار گیرد. نکات تکمیلی و جالب درباره TTFB را حتما در مقاله TTFB چیست بخوانید.

یکی از راه های ساده بهبود TTFB پیاده سازی caching روی سرور است. به عنوان مثال، اگر از وردپرس استفاده می کنید، پلاگین WordPress Cache Enabler می تواند یک فایل Cache استاتیک در قالب HTML روی سرور شما ایجاد کند. این مورد به کاربران اجازه می‌دهد تا از فرایند فشرده سازی منابع جلوگیری کنند، بنابراین صفحه با TTFB سریع‌تری تحویل داده می‌شود.
و البته استفاده از CDN نیز به شدت می تواند TTFB شما را بهبود دهد. از مقاله دلایل استفاده از CDN به شکل کاملی فواید CDN تشریح کردیم.

TTFB قبل از CDN

در اینجا مثالی از آزمایش TTFB بدون استفاده از CDN را مشاهده می‌کنید.

TTFB با CDN

در ادامه مثال قبل را با استفاده از CDN تکرار کردیم.

همانطور که مشاهده می کنید، با استفاده از CDN مقدار TTFB به نصف کاهش پیدا کرد. البته بسته به موقعیت سرور و POP ها این موارد متفاوت خواهند بود. از جمله راه های دیگر برای افزایش سرعت TTFB می توان به روز بودن Nginx و Apache و همچنین مدیریت منابع سرور از جمله CPU و IO و همینطور اسکریپت و پلاگین‌های نصب شده اشاره کرد.

5 – دانلود محتوا (Content Download)

دانلود محتوا دقیقاً به همان صورتی است که از اسمش به نظر می‌آید، این مورد مدت زمانی است که طول می‌کشد تا محتوای مورد نظرتان را دانلود کنید. هرچه asset ها و اندازه فایل ها بزرگتر باشند، زمان بیشتری طول خواهد کشید.

هنگامی که درباره زمان دانلود محتوا صحبت می‌کنیم فشرده سازی تصویر نقش بزرگی در این مورد ایفا می کند. طبق HTTP Archive، از ژوئن 2017 تصاویر به طور متوسط 61% از حجم وب سایت ها را به خود اختصاص می دهند. مقالات جامع ما درباره بهینه سازی عکس می‌تواند بسیار به شما کمک کند

و البته استفاده از CDN می تواند یکی از آسان ترین راه ها به منظور کاهش زمان دانلود محتوا باشد، زیرا از این طریق محتوا را از POP های نزدیک به کاربران به آن ها عرضه می کنید. استفاده از CDN باعث کاهش TTFB نیز می شود.
از راه های دیگر به منظور کاهش زمان دانلود می توان به استفاده از javascript و css تنها در موارد مورد نیاز و فشرده سازی با Gzip اشاره کرد. برای فشرده سازی فایل‌ها توسط سرور به مقاله جامع ما درباره نحوه فعال سازی gzip مراجعه نمایید.

6 – محتوای بارگذاری شده DOM

DOM مخفف Document Object Model می باشد. هنگامی که از inspector کروم یا فایرفاکس استفاده می‌کنید تبی دارد به نام elements در واقع این تب در حال مشاهده نمایه بصری از DOM هست، Chrome DevTools پس از دستکاری در صفحه DOM را با HTML یا javascript نمایش می‌دهد. همچنین می توانید به آن به عنوان HTML تجزیه شده نیز نگاه کنید.
هنگامی که به بررسی سرعت صفحات وب سایت می پردازیم، همواره باید مواردی که ممکن است DOM را مسدود کنند و باعث ایجاد تاخیر در زمان بارگذاری می‌شوند را در نظر داشته باشید. این موارد به عنوان render blocking resources در نظر گرفته می‌شوند، مانند HTML، CSS و جاوا اسکریپت. بیشتر ابزارهای تست سرعت سایت مجموع محتوای DOM را نمایش می دهند در حالیکه این زمان با زمان کلی بارگذاری متفاوت است.

7 – زمان بارگذاری (Load Time) / بارگذاری کامل (Fully Loaded)

Load Time که با عنوان Fully Loaded نیز در بعضی ابزار ها شناخته می‌شود، زمان کلی پایان دانلود، رندر و نمایش به کاربر است. این مورد از معیارهای بسیار مهم است که باید مورد توجه قرار گیرد چرا که این زمان در Devtools واقعی تر از ابزارهای تست آنلاین است، به این علت که ابزارهای تست سرعت سایت لوکیشن ایران را ندارند و شما می‌توانید با مرورگر خود یک ابزار تست سرعت سایت در ایران باشید.

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

8 – Data Transferred / Bytes In / Page Size

Data Transferred در Devtools کروم (دیتا انتقال داده شده)، که در WebPageTest به عنوان Bytes In شناخته می‌شود، و در Pingdom به عنوان Page Size، اندازه کلی تمامی asset ها (تمام فایل‌های پیوست شده در سند html) در صفحه وب می باشد. هرچه این مقدار کوچکتر باشد، بهتر است. توصیه های ما درباره کاهش زمان بارگذاری محتوا که در بالا آورده شد را دنبال کنید و در عوض Data Transfered وب سایت شما کاهش پیدا می‌کند.

تا سال 2016 متوسط اندازه صفحه، کمی بیشتر از 2 مگابایت بود که بسیار بزرگ است. اندازه صفحه وب از سال 2010 تا 2016 317% افزایش یافته و به مقدار 1530 کیلو بایت رسیده است. پیشنهاد می کنیم حداقل 1 مگابایت یا کمتر برای اندازه صفحه وب سایت خود در نظر بگیرید. اگرچه این امر در تمام محیط ها امکان پذیر نیست.

9 – درخواست های HTTP

درخواست‌ها مجموع کلی درخواست های HTTP تولید شده در وب سایت شما را نشان می دهند. هر فایل پیوست شده (CSS، JavaScript، Image) درخواست مربوط به خود را تولید می‌کند. در مجموع هرچه درخواست های HTTP صفحه شما بیشتر باشد، زمان بارگذاری هم طبیعتا بیشتر می‌شود.

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

• قرار دادن کدهای کوچک جاوا اسکریپت به صورت درون خطی
• کاهش asset هایی مانند اسکریپت های واسطه و پلاگین هایی که درخواست های خارجی زیادی تولید می کنند.
• استفاده نکردن از framework های واسطه که به آن ها نیاز ندارید.
• کم کردن کد.
• ترکیب فایل های css و javascript.

ولی اگر قصد دارید اطلاعات بیشتر و کامل تری درباره درخواست های http و نحوه کاهش این درخواست ها کسب کنید مقاله رفع خطای Make fewer HTTP requests ما را حتما مطالعه نمایید.

10 – کدهای وضعیت (Status Codes)

کدهای وضعیت یا همان Status Codes ، که با عنوان کدهای خطا (Error) و کدهای پاسخ سرور (Server Response Codes) نیز شناخته می‌شوند، پیام هایی هستند که شامل اطلاعات کامل وضعیت ها درخواست بین کاربر و سرور می باشند. کاربر درخواست خود را به یک سرور HTTP ارسال می کند که میزبان یک وب سایت است، سپس سرور پیام پاسخ را در قالب یک کد بازمی گرداند.

اگر مشکلی در یک درخواست HTTP باشد، لیستی از کدهای وضعیت وجود دارد که مرورگر شما را با استفاده از آن مطلع می سازد تا بتوانید منبع مشکل را پیدا کنید. روشی که مرورگر پاسخ را مدیریت می‌کند بسته به کد و فیلد header پاسخ دارد. به عنوان مثال، خطای Not Found 404 بدان معناست که محتوا دیگر وجود ندارد یا حذف شده است.

در پایان

همانطور که مشاهده می کنید، ابزارهایی مانند Chrome DevTools، WebPageTest ، Pingdom و GTmetrix انواع مختلفی از اطلاعات ارزشمند درباره چگونگی بارگذاری صفحات و دلایل تاخیرها فراهم می‌کنند. درک معنای هر قسمت از داده ها می تواند در عیب یابی و تشخیص مشکلات اجرایی سایت کمک کند. توجه داشته باشید که بهینه سازی سرعت سایت تاثیری مستقیم بر روی افزایش رتبه سایت در گوگل و سایر موتورهای جستجو دارد و جدا از این مورد اثری حیاطی بر روی تجربه کاربری و رضایت بازدیدکنندگان نیز دارد.
امیدواریم این مقاله برای شما مفید بوده باشه و دفعات دیگری که تجزیه و تحلیل آبشاری (Waterfall Analysis) انجام می‌دهید، خوشبختانه بعضی از نکته های ذکر شده در بالا می توانند به شما کمک کنند.

تهیه شده در سایت میزفا
برخی از تصاویر و متن‌ها برگرفته شده از سایت keycdn می‌باشد.