آرش منطقی،

طراح و توسعه‌دهنده رابط کاربری

بهینه سازی و افزایش سرعت بارگذاری سایت

شاید برای شما هم این سؤال بوجود اومده باشه که برای افزایش سرعت بارگذاری سایت توجه به چه بایدها و نبایدهایی لازم هست. از طرفی کمتر بودن زمان لود سایت یکی از پارامترهای مثبتی هست که موتورهای جستجو به اون توجه می‌کنند. جدای این مسئله سرعت مناسب برای جابجایی بین صفحات تجربه لذت بخشی برای کاربر به ارمغان میاره. بنابراین چکیده‌ای تهیه کردم که هرچند کامل نیست، اما میتونه مفید واقع شه. پس در ادامه مطلب با من همراه باشید.

به حداقل رساندن درخواست‌های اچ‌تی‌تی‌پی
حدود ۸۰٪ از زمان پاسخ به کاربرای نهایی در بخش جلویی(front-end) میگذره. بیشترین مقدار از این زمان هم صرف دانلود کردن اجزاء صفحه از جمله عکس‌ها، استایل‌شیت‌ها، اسکریپت‌ها و … میشه. تعداد اجزاء صفحه رو کم کنید تا تعداد درخواست‌های اچ‌تی‌تی‌پی که برای رندنر شدن صفحه‌ای که لازم هست رو کم کرده باشین. این رمز دستیابی به صفحات سریع‌تر هست. از طرفی برای اینکه مؤلفه‌های صفحه کمتر باشه باید صفحه‌ی ساده‌ای طراحی کنیم، اما باید راه‌هایی برای دستیابی به صفحات غنی و در عین حال سریع هم باشه. من چندتا راه به شما پیشنهاد میدم.

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

css sprites تکنیکی هست برای ترکیب کردن عکس‌های پس زمینه و نتیجه این کار چیزی نیست جز کاهش تعداد درخواست‌های عکس. معمولا از این تکنیک برای استفاده از آیکون‌ها در صفحات استفاده میشه اما محدودیتی در استفاده از اون وجود نداره. در این تکنیک شما تمام عکس‌های پس‌زمینه رو در یک فایل عکس ترکیب میکنید و در هنگام استفاده، با تنظیم موقعیت مکانی عکس پس زمینه، آن قسمتی از عکس که مایل به نمایش آن هستید رو به نمایش میذارید. به این ترتیب به جای اینکه به عنوان مثال برای 30 عکس کوچک 30بار درخواست به سرور بفرستید، فقط یک درخواست آن هم فقط برای یک عکس میفرستید.

Image maps تکنیک دیگه‌ای در رابطه با ترکیب کردن عکس هاست، که البته کارکردی متفاوت داره. این تکنیک هنگامی قابل استفاده هست که عکس‌ها علاوه بر پیوسته بودن، در یک صفحه هم باشند. به عنوان مثال یکی از موارد استفاده در منوهای ناوبری هست. البته تعریف مختصات در این شیوه هم میتونه خسته کننده باشه و هم میتونه خطاهایی رو در بر داشته باشه. با توجه به موارد استفاده کمی که داره و دقت و زمان‌بر بودن، استفاده از این روش چندان توصیه نمیشه.
این تکنیک سرعت لود صفحات شما رو برای اون دسته از بازدید کننده‌هایی که برای اولین بار به سایت شما مراجعه می‌کنند به شدت افزایش میده. از این رو به حداقل رسوندن درخواست‌های اچ‌تی‌تی‌پی از کلیدی ترین روش‌های افزایش سرعت محسوب میشه.

اضافه کردن تاریخ انقضا یا کنترل حافظه نهان
امروزه طراحی وب‌سایت از هر موقعی غنی‌تر شده و تعداد کامپوننت‌های اضافه شده به صفحات روز به روز در حال افزایش هست. اگر قرار باشه هر بار که کاربر قصد داره صفحه‌ای رو لود کنه، برای تمام مولفه‌های صفحه درخواستی به سرور فرستاده شه و کاربر منتظر لود شدن آنها باشه پروسه ای زمان‌بر طی میشه که واقعاً بهینه نیست. تصور کنید آیکون‌ها و اسکریپت‌هایی که در صفحه‌ی قبل یک بار لود شده بودند، برای مشاهده صفحه‌ای دیگر دوباره باید لود شن و از اون بدتر باز هم باید درخواستی به وب سرور فرستاده شه. اینجاست که شما میتونید از قابلیت کش کردن مؤلفه‌های صفحه استفاده کنید. مرورگرهای وب حافظه نهانی به نام کش دارند که میتونند داده‌هایی رو موقتاً در اونجا ذخیره کنند. اگر شما عکس‌ها و اسکریپت‌های صفحه خود رو برای مدتی(محدود یا نامحدود) در کش مرورگر ذخیره کنید، با این حساب تنها در اولین درخواست بازدید از صفحه سایت شما، اون مؤلفه‌ها از وب سرور لود میشن. با استفاده از این روش، وقتی کاربر نهایی در صفحات سایت شما پرسه میزنه به ازای هر تعویض صفحه، اجزاء صفحه مرتباً لود نمیشن، در واقع لود میشن اما از کش مرورگر خیلی سریع و کم هزینه. شما میتونید با تعریف مدت انقضای کش، کاری کنید که کاربر در بازدیدهای روزهای آینده هم از حافظه کش مرورگر، مولفه‌های صفحه رو بخونه. به این ترتیب سرعت لود صفحات بعدی سایت شما به شدت افزایش پیدا میکنه، چرا که این در این روش هم شما به نوعی تعداد درخواست‌های اچ‌تی‌تی‌پی رو کاهش میدین.
اما دقت کنید که وقتی از این تکنیک استفاده می‌کنید، چنانچه تصمیم به تغیراتی گرفتید، به عنوان مثال فایل استایل‌شیت صفحه رو ویرایش کردید، تا زمانی که به تاریخ انقضای کش نرسیم، کاربر نهایی صفحه شما رو با استایل‌شیت قبلی مشاهده میکنه. اون موقع در واقع کاربر مؤلفه‌هایی که شما در وب سرور ویرایش کردید رو لود نمیکنه، بلکه مولفه‌های قدیمی‌ای که در کش مرورگر از قبل مونده رو لود میکنه. به همین خاطر پیشنهاد میکنم هیچ‌وقت صفحات سایت رو کش نکنید، و نام اجزاء صفحه رو هم در هنگام ویرایش، تغییر بدین. به عنوان مثال در هر ویرایش، نسخه ویرایش شده رو به اینگونه در نام ذکر کنید: style_v1.css و یا plugin1.2.js.

استایل شیت‌ها رو در بالا قرار بدین
در زمان تحقیق برای افزایش سایت یاهو، مهندسین این شرکت فهمیدن وقتی استایل شیت‌ها در بالای صفحات قرار دارن، صفحه مربوطه سریع تر بارگذاری میشه. از طرفی مرورگرها صفحات رو به تدریج لود می‌کنند؛ هدر، منوهای ناوبری، سایدبار و … یکی پس از دیگری لود میشن و حالا تصور کنید اگر استایل شیت صفحه کسری دیرتر از محتوای صفحه لود شه (که اگر در پایین صفحه باشه ممکنه این اتفاق بیوفته) چه افتضاحی به بار میاد. این یک تجربه کاربری بد به بازدیدکننده ارائه میده. از این رو سعی کنید همیشه استایل شیت‌ها رو در هدر فراخوانی کنید.

جاوا اسکریپت‌ها رو در پایین قرار بدین
مشکل ناشی از اسکریپت‌ها اینه که مانع از دانلود موازی در مرورگرها میشن. مرورگرها در هر لحظه از یک نام دامنه بیش از یک مؤلفه دانلود نمی‌کنند. برای حل این مشکل معمولاً عکس‌ها رو از چند دامنه دیگه و یا چند زیر دامنه لود میکنند تا دانلود موازی انجام شه و سرعت صفحه افزایش پیدا کنه. اما تا مادامی که اسکیریپتی در حال دانلود هست، مرورگر هیچ عمل دانلود دیگه‌ای انجام نمیده، حتی از نام دامنه‌های متفاوت و این مشکل تمام پنبه‌ها رو رشته میکنه. از طرفی، معمولاً کدهای جاوا ساکریپت برای برقرار تعامل با کاربر در صفحه اعمال میشه. مطمئنناً تعامل باید بعد از لود شدن کامل صفحه صورت بگیره، پس چه بهتر که این کدها رو به انتهای صفحه منتقل کنید.

فشرده سازی با Gzip
اگر چه مدت زمان دریافت پاسخ درخواست‌هایی که به سرور فرستاده می‌شه، ارتباط مستقیمی با سرعت و پهنای باند سرویس اینترنت کاربر نهایی داره، اما با استفاده از تکنیک‌های فشرده سازی میشه حجم اطلاعات مورد انتقال رو کاهش داد که نتیجه اون افزایش سرعت در دریافت پاسخ هاست. gzip از محبوب ترین و مؤثر ترین روش‌های فشرده سازی هست که توسط گنو توسعه داده میشه. با استفاده از این متد، حجم پاسخ‌ها تا حدود ۷۰٪ کاهش پیدا میکنه و این فوق‌العاده هست. شما میتونید اسناد اچ‌تی‌ام‌ال، اسکریپت‌ها، استایل شیت‌ها و فایل‌های xml رو با استفاده از این روش فشرده کنید. اما یادتون باشه هیچ وقت عکس‌ها و اسناد پی‌دی‌اف رو فشرده نکنید؛ اونها خودشون فشرده هستند. سعی در فشرده‌سازی اونها نه تنها فایده‌ای نداره بلکه ممکنه حتی حجم اونها رو بیشتر هم بکنه. در ضمن هدر دادن وقت و انرژی منابع سخت افزاری رو در این فشرده سازیه بیهوده فراموش نکنید. برای تست اینکه بدانید آیا سایت خاصی از gzip استفاده میکنند یا نه این سرویس رو امتحان کنید.

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

پیش بارگذاری مؤلفه‌ها
با استفاده از پیش بارگذاری میتونید از فرصتی که در زمان بیکار بودن مرورگر بوجود میاد برای لود کردن مؤلفه‌هایی که در آینده به اونها نیاز پیدا می‌کنید، استفاده کنید. به این ترتیب وقتی کاربر صفحه دیگری از سایت رو درخواست میکنه، شما اجزاء اون صفحه رو در کش ذخیره کردین و در نتیجه صفحه بعدی به سرعت بارگذاری میشه. بزارید یه مثال بزنم؛ حتماً دقت کردین وقتی تو موتور جستجوی گوگل عبارتی رو برای جستجو تایپ میکنید، صفحه نتایج جستجو به سرعت بارگذاری میشه. در واقع اون عناصری که در صفحه نتایج نیاز هست، در زمانی که شما در حال تایپ متن مورد جستجو هستید پیش بارگذاری میشه. این مسئله در صفحه نخست فیسبوک هم اتفاق میوفته، وقتی کاربر در حال تایپ نام کاربری و رمز عبور خودش هست، بسیاری از مؤلفه‌هایی که در بخش کاربری نیاز هست پیش بارگذاری میشن. اگر تا به حال طراحی جدیدی برای سایت خود رو لانچ کرده باشین، ممکنه بازدید کننده‌ها به شما گفته باشن که طراحی قبلی سرعت بیشتری داشت. این برمیگرده به این قضیه که طرح قبلی از کش برای افزایش سرعت لود استفاده میکرد، در حالی که طرح جدید برای لود اولیه نمیتونه از کش استفاده کنه. شاید خودتون هم وقتی طرح جدیدی از یک سایت رو برای اولین بار میبینید همین کند بودن صفحه رو حس کنید. خب حالا در نظر بگیرید اگر قبل از لانچ کردن طرح جدیدتون، اون مؤلفه‌های لازمه رو پیش بارگذاری کنید، بعد از لانچ کردن طرح جدید، کاربر تو اولین بازدید هم با سرعت خوبی صفحه رو مشاهده میکنه.

پس بارگذاری مؤلفه‌ها
پس بارگذاری به نوعی مخالف پیش بارگذاری هست. اگر با این دید به صفحه نگاه کنید که در ابتدا برای رندر شدن صفحه، به چه مؤلفه‌هایی نیاز دارید باید به نتایجی برسید. در واقع شما باید نیاز‌های اساسی و مقدماتی صفحه رو بشناسید و بگید: خب بقیه مؤلفه‌ها میتونند صبر کنند و بعد از مؤلفه‌های اساسی لود شن. به این ترتیب صفحه شما از دید کاربر با محتوای اولیه و مطلوب به سرعت لود میشه، و در پس زمینه مابقی اجزاء در بی‌خبریه کاربر لود میشن. در این مورد هم اگر یک مثال بخوام بزنم توییتر نمونه‌ی خوبیه، باکس‌های نیو توییت و یا پنل دایرکت‌ها که قابل جابه‌جایی هم هستند از مواردی به شمار میان که میشه پس بارگذاری در مورد اون‌ها اعمال شه که احتمالاً هم همینطوره.

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

استفاده از لینک به جای ایمپورت در ضمیمه کردن سی‌اس‌اس
قبلاً گفتم که فایل‌های سی‌اس‌اس رو در بالای صفحات اضافه کنید، اما اگر شما حتی این کار رو با ایمپورت کردن انجام بدین و تصادفاً کاربرِ شما از مرورگر اینترنت اکسپلورر استفاده کنه، برای او به مانند این هست که شما استایل شیت رو در پایین صفحه ضمیمه کرده باشین. پس بهتره که همیشه از لینک کردن استفاده کنید.

بهینه سازی عکس‌ها
بهینه سازی عکس‌ها جزء آخرین مراحل طراحی یه سایت هست که قبل از آپلود، نباید فراموش شه. شاید باور نکنید اما شما میتونید عکس‌های صفحات وب خودتون رو طوری بهینه کنید که درصد زیادی از حجم اونها کم شه. از طرفی حجم قابل توجهی از یک صفحه رو حجم عکس‌های اون صفحه شامل میشه و این روش تأثیر به سزایی در افزایش سرعت لود سایت داره. برای بهینه سازی عکس‌های jpeg به سایت jpeg-optimizer و برای فایل‌های png به سایت punypng مراجعه و تأثیر این عملکرد رو مشاهده کنید.

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