سلام
درمورد هر وبسایت حرفه ای یا هر وب اپلیکیشنی که بخوایم صحبت کنیم سرعت سایت یکی مهم ترین فاکتور های برای ارزیابی حساب میشه و اگر دارین این مطلب رو میخونید پس به نظرم لازم نیست درمورد اهمیت سرعت سایت در موارد مختلف صحبت کنم.
پس یه راست میرم سراغ اصل مطلب و موارد مهم در این زمینه رو به صورت تیتر وار و با یک توضیح کوچیک ذکر میکنم:
از هر تکنولوژی ای که برای وبسایت یا وب اپتون استفاده میکنید مهم ترین نکته برای سرعت وبسایتتون اینه که کد های وبساییتون استاندارد باشه و کار های اضافه انجام ندین و با توجه به لایف سایکل های تکنولوژی تون حواستون به سرعت باشه.
(البته این مورد چون خیلی به تکنولوژی وبسایت یا وب اپتون داره توضیحش یکم سخته و بسته به کار خودتون باید تحقیق کنید)
در هنگام طراحی رابط کاربری وبسایت خود حتما سرعت وبسایت رو هم در نظر داشته باشید و دیتا های خیلی زیادی در یک صفحه قرار ندهید (البته بیشتر منظور دیتا های داینامیک هستش)
به داده هایی که از سمت سرور می آیند و داخل خود کد قرار ندارند دیتای استاتیک میگویند.سعی کنید غیر از موارد واقعا مهم از دیتای استاتیک استفاده کنید.
اگر عکس یا هر داده ای در پروژتون وجود داره که اصلا ازش استفاده نکردید یا قبلا قرار بوده استفاده کنید و دیگه لازمش ندارید لزومی نداره داخل پروژه تون باشه
دقت کنید که اگر کدی قبلا نوشتید که الان دیگه بود و نبودش مهم نیست پس باید حذف بشه:)
حتما این فایل هارو minify ینی داخل فایل خط فاصله و فضای خالی و .. نباشه برای اینکار میتونید به لینک زیر مراجعه کنید :
یا درمورد نحوه minify کردن در تکنولوژی مورد استفادتون تحقیق کنید(برای cms های مختلف پلاگین های زیادی وجود داره).
اگر شما عکسی داشته باشید که برای مثال 1000px*600px باشد اما قرار است 100px*60px نمایش داده شود حتما باید آن را اول به 100px*60px تبدیل کنید سپس از آن استفاده کنید.
به هیج وجه از تصاویر با حجم بالا استفاده نکنید چرا که برروی سرعت وبسایت شما تاثیر مستقیم دارد.
برای کاهش حجم تصاویرتان می توانید از سایت زیر استفاده کنید:
با توجه به اینکه این مورد تاثیر خیلی زیادی دارد حتما بودجه مناسبی برای آن در نظر بگیرید.
سعی کنید وب سرورتان در صورت امکان(فقط اگر با این موضوع مشکلی ندارید) لایت اسپید باشد.
درصورت امکان میتوانید از cdn ها یا همان content delivery system ها استفاده کنید برای اینکه بدانید کار cdn چیست به یکی از لینک های زیر مراجعه کنید:
با توجه به این که از چه تکنولوژی استفاده میکنیدمیتوانید یک cache مناسب پیاده سازی کنید تا سرور شما هر بار که یک کاربر یک دیتا را درخواست می دهد زیر بار نرود (برای cms هایی همچون وردپرس پلاگین های زیادی همچون W3 total cache وجود دارند)
با این روش وقتی کاربر وارد وبسایت شما می شود تمام تصاویر آن صفحه بارگیری نمی شود و وقتی کاربر اسکرول کرده و به آن تصویر نزدیک می شود آن عکس برای کاربر بارگیری میشود
تا جایی که می توانید موارد را خودتان پیاده سازی کنید و از کتابخانه ها استفاده نکنید تا فایل حجیم آن ها سرعتتان را کاهش ندهند.(در صورت استفاده از یک کتابخانه حجم آن را بررسی کنید)
مزیت استفاده از Gzip compression این است که فشرده سازی فایل های HTML و CSS شما با gzip معمولا حدود پنجاه تا هفتاد درصد حجم فایل را ذخیره می کند.
فعال سازی gzip در وب سرور های مختلف دستورالعمل های مختلفی دارند.
اگر چیزی در سایت شما از منابع (برای مثال api آنها) سایت های دیگر استفاده می کند سرعت آن سایت های دیگر برروی سرعت سایت شما تاثیر خواهد گذاشت.
برای مثال کدهای مشابه کد زیر نباید داخل کد های وبسایت شما وجود داشته باشد:
<html manifest=""> <a src=""> <object data="">
اگر سایت شما به host های مختلفی ریکوست بزند برای هر کدام از آن ها 20 تا 120 میلی ثانیه زمان لازم است تا ip address آن ها به دست آید.پس بهتر است به تعداد host محدودی ریکوست بزنید
استفاده از این مورد باعث می شود که مرورگر بفهمد که یک فایل را کی از سرور و کی از cache مرورگر بگیرد.
پریلودینگ به شما اجازه میدهد که به مرورگر بگویید منابع ای که به زودی استفاده خواهند شد را لود کنید
برای مثال کد زیر را ببینید:
<head> <link rel="preload" href="style.css" as="style"> <link rel="stylesheet" href="style.css"> </head>
این مورد به مرورگر می گوید که در آینده یک سری منابع از host غیر از هاست ما مورد نیاز هست.اینکار باعث میشود که در آینده ما به DNS lookup و (اتلاف وقت) نیازی نداشته باشیم و سرعت سایت بالا برود. مثال DNS prefetching را میتونید در کد زیر ببینید:
<link rel="dns-prefetch" href="//example.com">
این مورد شبیه preloading است اما prefetching میتواند توسط مرورگر نادیده گرفته شود یعنی ممکن است ما گفته باشیم که یک فونت با حجم زیاد را prefetch کن اما مرورگر اینکار را برای یک کاربر با اتصال اینترنت ضعیف انجام نمیدهد چرا که درکل به نفعش نیست
اگر در یک صفحه مطمئن هستید که کاربر به صفحه خاص دیگری خواهد رفت میتوانید آن صفحه را قبل از اینکه کاربر کلیک کند Prerender کنید یعنی درواقع به طور پنهان کل آن صفحه را رندر کنید تا به سرعت قابل دسترسی باشد. کد نمونه:
<link rel="prerender" href="https://css-tricks.com">
خب تا اینجا به یک سری موارد اشاره کردیم اما یک نکته مهم وجود دارد:
اگر که نمیتونی اون رو اندازه گیری کنی پس نمی تونی ارتقاش بدی !
برای اندازه گیری و بررسی سرعت وبسایتتون می تونید از لینک های زیر کمک بگیرید
خب در افزایش سرعت وبسایت یک نکته خیلی مهم دیگه هم وجود داره:
افزایش سرعت وبسایت شما تا یک حدی به نفع شما خواهد بود و بعد از آن باعث اتلاف وقت شما خواهد شد چرا که ممکن است تلاش خیلی زیادی بکنید و فقط بتوانید چند میلی ثانیه افزایش سرعت داشته باشید.یا ممکنه شما افزایش سرعت ساییتون رو فدای یک سری ویژگی ها بکنید و از خیلی چیز ها خودتون محروم کنید.
پس پیشنهاد من برای شما اینه که:
اگر تونستید ساییتون رو به یک سرعت مطلوب و قابل قبول برسونید در این مورد وسواس به خرج ندید تا از سایر موارد مهم درمورد وبسایتتون غافل نشید
درضمن من مرتضی شجاعی هستم و اینجا درمورد چیز هایی که یاد میگیرم مینویسم و ادعایی هم در مورد نوشته هام ندارم و میدونم داخلش اشتباهاتی وجود داره و ممنون میشم در اصلاحشون به من کمک کنید.
اگر دوست داشتید میتونید من رو دنبال کنید. :))))
