بررسی سرعت سایت

معیارتون چیه، چه سایتی سریع هست و چه سایتی رو کند میدونید؟

چه کارهایی باید انجام بدیم که سرعت سایتمون افزایش پیدا کنه؟

قراره فقط درمورد سرور صحبت کنیم.


اول کمی درمورد معیارهای سرعت سایت صحبت کنیم، مثلا زمانی که میگیم سایت کند شده با چه معیاری کندی سایت رو می‌سنجیم؟

من همیشه سرعت سایت رو به ۳ بخش تقسیم میکنم (شاید استاندارد باشه شاید هم نباشه)

  • سرعت یا زمان اتصال اولین درخواست TTFB که میشه Time to first byte
  • سرعت نمایش محتوای استاتیک
  • سرعت نمایش محتوای داینامیک یا CGI

داخل این تست ها پارامتر دیگه ای هم وجود داره که معمولا از کنترل ما خارج هست، اون هم اینترنت کاربره که ممکنه برای یک تست ثابت نتایج مختلفی ارایه کنه.

برای کنترل این بخش پیشنهاد میکنم از جاهای مختلف تست بشه و البته نتیجه تست ها هم بصورت میانگین محاسبه بشه.

TTFB

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

برای این تست میشه از سایت های آنلاین مثل https://performance.sucuri.net استفاده کرد، انصافا سایت خوبی هم هست.

ولی من ابزارهای دستوری رو بیشتر ترجیح میدم، با curl هم میشه این زمان رو بدست آورد.

با دستور زیر دارم چک میکنم سرعت اتصال به سایت ویرگول چقدر هست:

curl -L -o /dev/null -w "Connect: %{time_connect} TTFB: %{time_starttransfer} Total time: %{time_total} \n" https://virgool.io/

خروجی این دستور به اینصورت هست:

Connect: 0.060190 TTFB: 1.496674 Total time: 1.654540 
  • Connect: %{time_connect}
  • TTFB: %{time_starttransfer}
  • Total time: %{time_total}
  • زمان اتصال TCP و البته DNS
  • زمان پاسخگویی وب سرور
  • مجموع زمان دریافت پاسخ

سرعت اتصال به سایت ویرگول از روی اون سایت های آنلان هم این شکلی هست:

https://performance.sucuri.net/domain/virgool.io
https://performance.sucuri.net/domain/virgool.io

میشه سرعت اتصال رو افزایش داد و درمجموع این زمان رو کم کرد؟

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

  • استفاده از DNS سرورهای بهتر
  • افزایش منابع سرور مثل رم
  • بهبود اتصال شبکه (استفاده از سرویس دهنده هایی که شبکه داخلی و اتصال اینترنت بهینه و سریعی دارند)
  • بهبود پارامترهای کرنل و Performance Tuning
  • بهبود تنظیمات وب سرور


بهینه سازی محتوای استاتیک

تست این بخش خیلی ساده است، از روی سایتتون یک تصویر رو انتخاب کنید و اون رو دانلود کنید.

با این کار مجموع TTFB و سرو فایل رو تست کردید، البته که این تست هم شامل اون قاعده کیفیت اینترنت کاربر هست.

curl -o /dev/null -w "Total time: %{time_total} \n" https://files.virgool.io/upload/users/38106/posts/ihpkxqooh5r3/rsppmtuhzcd9.jpeg

با این درخواست یک تصویر رو مستقیم از روی سرور دانلود میکنم و خوبه که حواسمون باشه درخواست ما به جای دیگه ریدایرکت نشه و مستقیم بریم لینک نهایی رو تست کنیم.

100  106k  100  106k    0     0   122k      0 --:--:-- --:--:-- --:--:--  122k
Total time: 0.871299

خروجی دستور نشون میده که فایل 106k رو در مدت 0.8 ثانیه دریافت کردم.

چطور میشه این زمان رو بهبود داد؟

  • بهینه سازی تصاویر مثل کوچک کردن یا تبدیل به فرمت های وب بصورت استاتیک
  • بهینه سازی نمایش تصاویر بصورت دایانامیک
  • استفاده از CDN
  • بهبود پرفرمنس وب سرور
  • افزایش کیفیت و ظرفیت پهنای باند سرور

از سایت های آنلاین هم میشه استفاده کرد، مثلا این سایت تحلیل خوبی ارایه میکنه.
ضمنا برای تست زمان لود سایت از نقاط مختلف دنیا، این سایت رو پیشنهاد میکنم.

بهینه سازی استاتیک

کم هزینه ترین کار همین بهینه سازی تصاویر هست، مثلا ممکنه شما تصویری با اندازه 1017 × 1589 داشته باشید ولی داخل سایت تصویر رو با تگ HTML یا CSS کوچکتر نمایش بدید، نتیجه این هست که تصویر بزرگ باید توسط کاربر دانلود بشه ولی زمان نمایش تصویر کوچکتر نمایش داده میشه.

با اصلاح اندازه تصاویر و تبدیل به فرمت های بهینه وب میتونیم سرعت سایت رو افزایش بدیم.

روش بعدی بهینه سازی تصاویر بصورت داینامیک هست، این کار رو به روش های مختلفی میتونیم پیاده سازی کنیم.

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

این کار هزینه زیادی داره و ممکنه برخی از اندازه ها اصلا دیده نشدند درحالی که شما از پیش با هزینه CPU تصاویر رو Resize کردید.

بهینه سازی داینامیک

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

تصویر زیر مربوط به Object Storage ویرگول هست که از همین روش استفاده میکنه:

https://files.virgool.io/upload/users/38106/posts/ihpkxqooh5r3/rsppmtuhzcd9.jpeg

تصویر اصلی 106k هست ولی زمانی که میخواد بخشی رو نمایش بده، از این آدرس استفاده میکنه:

https://files.virgool.io/upload/users/38106/posts/ihpkxqooh5r3/rsppmtuhzcd9.jpeg?x-oss-process=image/resize,w_700/crop,h_250,g_center/quality,q_80

درواقع داره تصویر رو Crop میکنه و البته کیفیت رو هم پایین میاره، اندازه این تصویر فقط 12k هست.

خب این کار معمولا در لحظه هزینه بر هست که با اضافه کردن مکانیزم های لایه کش میانی میتونه بهینه عمل کنه.

روش دیگه ای هم هست که اتوماتیک این کار رو انجام میده، ماژولی برای Nginx و Apache هست به نام PageSpeed، این هم آدرس سایت.
با این روش میتونید تصاویر، JS و CSS ها رو روی سرور بهینه کنید و با اندازه بسیار کمتری به کاربر نمایش بدید.

این تصویر در اندازه واقعی و بدون ماژول PageSpeed نمایش داده میشه که حدود 1.8M هست:

curl -L -o /dev/null -w "Connect: %{time_connect} TTFB: %{time_starttransfer} Total time: %{time_total} \n" https://SITE/kratos_atreus_in_god_of_war-hd_wallpapers.jpg
100 1829k  100 1829k    0     0   551k      0  0:00:03  0:00:03 --:--:--  551k
Connect: 0.157250 TTFB: 0.280794 Total time: 3.327236 

حالا همین تصویر و با ماژول فعال PageSpeed بصورت اتوماتیک میشه 425k:

100  425k  100  425k    0     0   487k      0 --:--:-- --:--:-- --:--:--  487k
Connect: 0.077811 TTFB: 0.179278 Total time: 0.874382 

خیلی ساده خود وب سرور تصویر رو کوچکتر و کیفیت اون رو کاهش میده تا کاربر در زمان کمتری تصویر رو دریافت کنه، این کار هم خوبه و هم بده!

اگر ماژول PageSpeed رو به خوبی تنظیم کرده باشید و یا با اطلاع کامل فایلی رو با اندازه بزرگ بخواهید که نمایش بدید خوبه ولی اگه فقط ماژول رو نصب کنید و تنظیمات دقیقی روش انجام ندید همین میتونه کیفیت سایت شما رو کم کنه.

تنظیمات PageSpeed مفصل و متعدد هست، توی مقاله دیگه ای نصب و تنظیمات رو براتون کامل توضیح میدم.


استفاده از CDN

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

شیوه بهینه جدا کردن سرور فایل های استاتیک هست که بهترین روش اجرا پیاده سازی CDN هست، ولی راه اندازی CDN هزینه بر هست و البته کمی هم نیاز به دانش و تجربه داره.

معمول ترین روش استفاده از Cloudflare هست، البته استفاده از CDN های خارجی معمولا به دلیل اتصال به اینترنت خارج از کشور و کیفیت اینترنت ممکنه بهینه نباشه و سرعت رو هم کاهش بده.

** دارم مسیر اتصال به یکی از سرورهای Cloudeflare رو بررسی میکنم که نشون بدم اتصال کند هست و خوب نیست، ولی دارم میبینم که چقدر خوب مسیر روتینگ بهینه شده و حتی از بعضی سایت های داخلی هم سرعت بهتری داره!

همین مثال files.virgool.io رو ببینیم که از Cloudflare سرویس میگیره:

dig files.virgool.io +short
104.27.173.131
104.27.172.131
whois 104.27.173.131 | grep NetName
NetName:        CLOUDFLARENET
mtr 104.27.173.131
mtr 104.27.173.131

نمیگم خیلی خوبه ولی قابل قبوله!

بجز سرویس دهنده های خارجی، CDN های داخلی هم داریم که به نظر میرسه کیفیت خوبی دارند و اگر هم ایرادی بهشون گرفته میشه، تلاش میکنند تا رفع بشه، مثل ابرآروان یا خلاق (البته نمیدونم پابلیک هست یا نه).

*(اگر ارایه دهنده ایرانی دیگه ای سراغ دارید بگید تا اضافه کنم)


بهبود پرفرمنس وب سرور

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

مثلا بهینه سازی وب سروری که فایل های بزرگ سرو میکنه با سروری که فایل های کم حجم ولی با تعداد بالا سرو میکنه متفاوت هست، البته بخش هایی از بهینه سازی مشترک هستند و همواره باید انجام بشه.

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

افزایش کیفیت و ظرفیت پهنای باند سرور

این کار خیلی سخت هست! درواقع شما باید سرویس دهنده تون رو قانع کنید که کیفیت شبکه و یا اینترنت سرور خوب نیست.

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

  • قانع کردن سرویس دهنده برای تغییر مسیر ارتباطی یا جابجا کردن سرورها
  • تغییر سرویس دهنده (مثلا مهاجرت به دیتاسنتر دیگه یا استفاده از خدمت دهنده زیرساخت دیگه)
  • استفاده از سرویس های CDN با امکان Dynamic Website Acceleration


بهینه سازی محتوای داینامیک

برای بهینه سازی این بخش باید موارد متعددی رو در نظر گرفت و انصافا کار زمانبر و سختی هست:

  • تعداد درخواست هایی که به اپلیکیشن سرور میرسه (فرض میکنم وب سرور به اندازه خوبی بهینه شده)
  • افزایش تعداد اپلیکیشن سرورها و بالانس کردن لود روی اون ها
  • بهینه سازی سرور و سرویس دیتابیس
  • شارد و Replicate کردن دیتا روی دیتابیس
  • بهینه سازی ریکوئست هایی که به دیتابیس میرسند
  • اضافه کردن لایه Cache (خیلی کار خطرناکی هست ولی اگر پترن مناسبی برای کش تنظیم بشه، نتیجه عالی میشه)
  • و کلی کار دیگه که بر حسب نوع سرویس متفاوت هست

همونطور که گفتم این بخش کمی پیچیده است و باید بصورت گام به گام انجام بشه،


جمع بندی

بهینه سازی و افزایش سرعت سایت موارد متعددی داره که سعی کردم مختصری به اون ها اشاره کنم، مواردی مثل بهینه سازی وب سرور Nginx و استفاده از PageSpeed رو بعدا منتشر میکنم.

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


موفق باشید

مسعود یوسف پور