چارت آبشاری
و بالاخره، چارتهای آبشاری ساخته شده از هر درخواست میباشد که در زیر مشاهده میکنید. شما توسط این چارت میتوانید تمامی درخواستهایی که باعث کاهش سرعت و ایجاد مشکل در عملکرد وب سایت شما شده اند را مشاهده کنید. این دقیقا همان تحلیل آبشاری است که قبلا در رابطه با آن صحبت میکردیم. (روندسافت)
DNS (صورتی)
DNS چیست؟ خب، فکر کنم شبیه یک دفتر تلفن بتوانیم آن را بیان کنیم. در شبکه به آن نام سرور دامنه (Domain Name Server) میگویند که در خود تمامی اطلاعات مربوط به سرور وب سایت و آی پی سرور را در خود نگهداری میکند. هنگامی که شما در Pingdom وب سایت خود را بررسی میکنید، این وب سایت در ابتدا به سرعت شروع به بررسی DNS وب سایت شما میکند و کوئریهای مربوط به دریافت اطلاعات IP شما را ایجاد میکند. این بررسی در بعضی اوقات طولانی مدت طول میکشد و این به فرآیند DNS lookups گویند.
هنگامی که وب سایت خود را چند بار توسط Pingdom بررسی میکنید، این ابزار DNS شما را در خود کش کرده و به علت اینکه IP شما ثابت است دیگر نیازی ندارد که دوباره DNS شما را بررسی کند. به همین دلیل است که هنگامی که شما چندین بار وب سایت خود را بررسی میکنید افزایش سرعت را مشاهده میکنید. همانطور که در تصویر زیر مشاهده میکنید ما بعد از انجام آزمایش دوم از وب سایت دیگر لود شدن DNS را مشاهده نمیکنیم و زمان لود DNS به 0 میلیثانیه تغییر کرده است که قبلا ۳۳ میلیثانیه بود. این یکی از موردهاییست که بعضی از افراد اشتباه تفسیر میکنند و احساس میکنند که اصلا DNS لود نشده است درحالی که اینطور نیست و DNS به صورت کش شده لود شده است.
دلایل دیگری نیز وجود دارد که ممکن است وب سایت شما پس از چند بار آزمایش سریعتر لود شود و یکی از آنها استفاده از CDN میباشد. برای آن دسته از کاربرانی که با CDN آشنا نیستند پیشنهاد میشود که مقاله ما در رابطه با CDN را مطالعه کنند. هنگامی که برای بار اول توسط Pingdom وب سایت را بررسی میکنید اطلاعات توسط CDN بررسی میشوند و سپس CDN دقیقا همانند DNS اطلاعات را کش میکند و در بار دوم دیگر سرعت به خاطر لود اطلاعات درون CDN پایین نمیآید.
همچنین راه دیگری نیز برای لود سریع وب سایت از طریق DNS میباشد که از متد DNS prefetching استفاده کنید. با اینکار DNS های وب سایت شما در پسزمینه لود میشوند. شما میتوانید با اضافه کردن چند خط به بخش Header پوسته وردپرس خود این متد را فعال کنید. به کدهای زیر توجه فرمایید :
<!-- 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">
یا اگر از نسخه وردپرس بالای ۴.۶ استفاده میکنید، میتوانید از ترفندهای منابع منتشر شده کمک بگیرید. توسعه دهندگان با استفاده از متد wp_resource_hints میتوانند با اضافه کردن دامنهها و لینکهای جدید، dns-prefetch، preconnect، prefetch و یا prerender را در پسزمینه وردپرس لود کنند.
SSL (بنفش)
رنگ وضعیت بنفش زمانی ظاهر میشود که شما در وب سایت خود از SSL/TLS handshake استفاده کرده باشید. وقتی شما وب سایتی را با پروتکل HTTPS لود میکنید متوجه میشوید که آن وب سایت گواهینامه SSL دارد و برای کدگذاری اطلاعات شما و حفظ امنیت شخصی شما زمانی را صرف میکند. در تست زیر ما هم در سرور خود و هم در CDN از گواهینامه SSL استفاده میکنیم. بنابراین زمانی را در ابتدا برای کدگذاری اطلاعات شما بر روی سرور برای جلوگیری از دزدی اطلاعات، به زمان لود صفحه اضافه میشود.
در گذشته اگر وب سایتی از گواهینامه SSL استفاده میکرد و باید برای ورود از پروتکل HTTPS استفاده میکردیم، لود آن وب سایت عذاب آور میشد ولی حالا خوشبختانه با وارد شدن نسل جدیدی از پروتکل به نام پروتکل HTTP/2 زمان لود صفحات HTTPS ناچیز شده است. در حال حاضر بیشتر مرورگرها از پروتکل HTTP/2 پشتیبانی میکنند و از نظر من با توجه به پیشرفت روز به روز اطلاعات تعداد کاربرانی که از آخرین نسخه مرورگرها استفاده نمیکنند ناچیز است پس این پروتکل HTTP/2 کمک موثری به لود وب سایت شما میکند. همچنین باید توجه داشته باشید که همه ارائه دهندگان میزبانی و CDN از پروتکل HTTP/2 پشتیبانی نمیکنند و شما باید توجه فرمایید، در صورتی که به HTTPS نیازمندید باید به دنبال ارائه دهندگانی باشید که از پروتکل HTTP/2 پشتیبانی میکنند.
توجه داشته باشید که پروتکل HTTP/2 از نسخه ۴۹ به بعد کروم فعالسازی شده است و نسخه کرومی که Pingdom برای تست استفاده میکند ۳۹ میباشد، بنابر این درصورتی که از این ابزار برای بررسی سرعت لود وب سایت خود استفاده میکنید ممکن است نتایج نمایشی تمامی تاثیرات پروتکل HTTP/2 را به شما نمایش ندهد ولی مطمئن باشی، در صورتی که کاربران از نسخه بروز کروم استفاده کنند، سرعت قابل ملاحظهای را احساس خواهند کرد.
اتصال – Content (فیروزهای)
زمان اتصال در Pingdom به اتصال TCP یا کل زمان لازم برای ایجاد اتصال TCP مربوط میشود.شما نیازی نیست که خیلی در این رابطه اطلاعات داشته باشید ولی به صورت خیلی ساده این بخش مربوط به سرعت اتصال کاربر به سرور شما میباشد.
وقفه – TTFB (زرد)
زمان انتظار به مدت زمان لازم برای دسترسی مرورگر کاربر به اولین بایت از صفحه شما گفته میشود و در اصطلاح به آن TTFB نیز میگویند. (اطلاعات و نکات بسیار جالب درباره TTFB را میتوانید در مقاله بهبود زمان TTFB مطالعه نمایید) TTFB نوعی اندازهگیری از واکنشپذیری سرور ویا دیگر شبکهها میباشد.به طور کلی، هر زمانی زیر 200 میلیثانیه برای TTFB عالی است. اگر به بالای 800 میلیثانیه رسیدید، باید در کانفیگ سرور خود مراجعه کنید و آن را بروزرسانی کنید و ومشکلات را حل کنید زیرا صد در صد مشکل در پیکربندی سرور میباشد و این چنین نتیجهای غیرعادی میباشد.
بهترین راه برای کاهش زمان TTFB چیست؟ یکی از بهترین راههای کاهش زمان TTFB استفاده از CDN میباشد. در زیر سرعت وب سایت را با فعالسازی و غیرفعالسازی CDN بررسی کردیم تا نتیجه مطلوبی بدست آید.
TTFB بدون CDN
در ابتدا بدون اتصال CDN به وبسایت، وب سایت را تست کردیم و TTFB وب سایت 136 میلیثانیه طول میکشد و وب سایت نیز در 1.45 ثانیه لود میشود.
TTFB به همراه CDN
سپس ما CDN را متصل کردیم و دوباره آزمایش را انجام دادیم. زمان لود وب سایت به 788 ثانیه و زمان TTFB نیز 37 میلیثانیه شده است. در رابطه با TTFB و CDN ها در مقاله CDN چیست و دلایل استفاده از CDN در وب سایت به طور کامل بحث کرده ایم .
البته علاوه بر CDN، داشتن یک هاست میزبانی خوب نیز در کاهش این زمان موثر است و پیشنهاد میشود علاوهبر تهیه CDN، یک هاست میزبانی خوب نیز تهیه کنید که این مشکل را نداشته باشید.
ارسال (نارنجی) و دریافت (سبز)
با توجه به اطلاعات بالا شما عزیزان فکر نکنم توضیحات زیادی برای توجیح دو وضعیت دریافت و ارسال نیاز باشد. به طور کلی وضعیت ارسال(Send) به معنای زمان لازم برای ارسال درخواست از مرورگر به سرور میباشد. همچنین دریافت(receive) نیز زمان لازم برای دریافت اطلاعات توسط مرورگر از سرور میباشد. هردوی اینها زمان خیلی کمی لازم دارند و تاثیر زیادی بر روی آزمایش شما نمیگذارد.
مطالب خواندنی: بهینه سازی و رفع خطای Reduce the number of DOM elements
درخواست HTTP Headers
هنگامی که در حال بررسی چارت آبشاری هستید، میتوانید هر یک از دادههای جدول را نسبت به پاسخهای سربرگ HTTP (یا همان درخواست HTTP Headers) بررسی کنید.
در این بخش اطلاعات ارزشمندی قرار دارد. در نمونه زیر شما متوجه میشوید که محتوا توسط متد فشردهسازی gzip بهینه سازی شدهاند، کش در وب سایت فعال است (HIT به معنای فعال و Miss به معنای غیر فعال) ، نوع محتوا از نوع html و یونیکد از نوع UTF-8 میباشد و غیره…
اطلاعات پیکربندی وب سایت مورد مطالعه
معماری
- وب سایت مورد مطالعه وب سایت (perfmatters.io) در سروری در امریکا میزبانی میشود. این سرور از پروتکل HTTP/2 ، وب سرور Nginx و پایگاهداده MariaDB پشتیبانی میکند که همه اینها با هم وب سایتی پر سرعت را برای کاربر ایجاد میکند.
- سرور وب سایت از ماشین مجازی HHVM استفاده میکند. ترکیب HHVM و PHP7 وب سایتی پرقدرت را برای کاربر ایجاد میکند.
- وب سایت از هیچ نوع افزونه کش استفاده نمیکند، زیرا تمامی اطلاعات وب سایت توسط سرور کش میشود.
مطالب خواندنی: ارزیابی دقیق سرعت لود وب سایت با ابزار Pingdom (بخش اول)
افزونههای وردپرس
در زیر تمامی افزونههای استفاده شده در این وب سایت را مشاهده میکنید که بیشتر آنها به صورت رایگان از مخزن وردپرس قابل دریافت میباشند.
- افزونه رایگان CDN Enabler plugin برای فعالسازی CDN
- افزونه رایگان CAOS plugin برای فعالسازی گوگل آنالیز
- افزونه رایگان Disable Embeds plugin برای جلوگیری از ایجاد درخواستهای HTTP اضافه
- افزونه رایگان Disable Emojis plugin برای جلوگیری از ایجاد درخواستهای HTTP اضافه برای لود ایموجیها
- افزونه رایگان Disqus Conditional Load plugin برای لود تنبل بخش نظرات
- افزونه تجاری Imagify plugin برای فشردهسازی تصاویر
- افزونه تجاری Gonzalez plugin برای غیرفعالسازی اسکریپتها زمان لود وب سایت
نکته : بعضی از افزونههایی که در وب سایت استفاده شده است خیلی کوچک بوده و با چند کد جاوااسکریپت هم میشود که آنها را فعال کرد ولی با توجه به سادگی و حجم کم از این افزونه استفاده شده است.