10 راه برای بهبود کارآیی وب سایت شما

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

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

چرا تاکید ما بر روی عملکرد پیش روی کاربر است؟

بخش جلویی و پیش روی کاربر (به عنوان مثال کدهای صفحه وب با  HTML ، CSS ، جاوا اسکریپت ، و تصاویر) در دسترس ترین بخش وب سایت شما و پیش روی بازدید کننده می باشد. اگر شما مشترک برنامه میزبانی وب هستید ، ممکن است دسترسی ریشه ای (یا ریشه مانند) به سرور نداشته و در نتیجه نمی توانید تغییری در تنظیمات سرور بدهید. و حتی اگر شما دارای مجوز دسترسی مناسبی باشد، وب سرور و مهندسی پایگاه داده نیاز به دانش تخصصی و تجاربی دارد که برای بدست آوردن منافع فوری  در زمینه سایت خود به دانستن آن اطلاعات نیاز دارید.

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

با در نظر گرفتن این موارد، در ادامه چند راه ساده برای بهبود سرعت بارگذاری وب سایت شما را خدمتتان معرفی می کنیم.

1-صفحات وب خود پروفایل بندی کنید تا موارد مقصر را آسانتر پیدا کنید!

این که صفحه وب خود را پروفایل بندی کنید کمک موثری در پیدا کردن اجزا و عناصری که لازم ندارید و یا اجزایی که می توان بهینه شان کرد می کند. پروفایل بندی یک صفحه وب معمولا عبارت است از استفاده از ابزاری مانند Firebug برای تعیین اجزاء (به عنوان مثال اجزا تصاویر هستند یا فایل های CSS ، یا اسناد HTML ، و یا فایلهای جاوا اسکریپت) که قرار است توسط کاربر  درخواست شود، تعیین مدت بارگذاری هر جز، و سایز و بزرگی جزء. یک اصل کلی این است که باید سعی کنید اجزا صفحه خود را تا حدی که ممکن است کوچک و با حجم فایل کم نگه دارید. (مثلا حجم هر جز کمتر از 25 کیلوبایت، می تواند عالی باشد)

زبانه Net tab در ابزار Firebug  (در بالا نشان داده شده) می تواند به شما کمک کند فایل های بزرگی را که سبب دیر لود شدن وب سایت شما می گردند را شناسایی و در صورت عدم نیاز آنها را حذف کنید. در مثال فوق ، ملاحظه می کنید که ابزار به خوبی تجزیه و تحلیلی از تمامی اجزای مورد نیاز برای رندر کردن یک صفحه وب از جمله : نام و جزئیات اجزا، محل هر جز، سایز اجزا ، و مدت زمان لازم برای بارگذاری اجزا را پیش روی شما قرار داده است.

بر روی وب نیز ابزار های بسیاری برای کمک به پروفایل بندی صفحه وب شما وجود دارند- برای دریافت راهنمایی در این زمینه می توانید این مقاله را بررسی کنید که در آن چند ابزار اضافی که می توانید مورد استفاده قرار دهید آورده شده است.

2- به منظور کاهش حجم فایلها، تصاویر را به فرمت مناسب ذخیره کنید.

اگر در سایت خود مقدار زیادی تصویر دارید، ضروری است در مورد فرمت بهینه برای هر تصویر مطالبی را بیاموزید. همانطور که می دانید سه فرمت رایج برای تصاویر قرار گرفته در وب وجود دارد : JPEG, GIF  و  PNG. به طور کلی ، شما باید فرمت JPEG را برای عکس ها واقعی با گرادینت نرم و رنگ های معمولی استفاده کنید. همچنین باید فرمت GIF  یا  PNG را برای تصاویری به کار ببرید که رنگ های جامد و سالید دارند (مانند نمودار ها و آرم ها)

GIF  و  PNG مشابه هستند ، اما PNG  به طور معمول سایز فایل کمتری دارد. برای کسب اطلاعات بیشتر بد نیست مقاله: «نگرانی ها درباره حجم برنامه نویسی: استفاده از PNG   به جای GIF»  را بخوانید.

3- برای اندک صرفه جویی در اندازه، اسناد سی اس اس و جاوا اسکریپت خود را کوچک کنید

«کوچک سازی» به مراحلی گفته می شود که طی آن کاراکترهای غیر ضروری (مانند تب ها ، فضاها ، کد کامنت های منبع) از کد سورس برنامه نویسی برای کاهش حجم فایل آن حذف می گردند. به عنوان مثال :

این قطعه کدCSS  :

می تواند تبدیل به این کد شود :

… و خیلی خوب و بدون مشکل هم عمل کند.

و نگران نباشید – شما مجبور به فرمت دوباره کد های خود به صورت دستی نخواهید بود. مجموعه ای از ابزارهای رایگان موجود و در اختیار شماست برای مینیم سازی فایل های سی اس اس و جاوا اسکریپت. برای CSS ، شما می توانید یک دسته ابزارهای با استفاده آسان از این لیست ابزار های بهینه سازی CSS پیدا کنید. برای جاوا اسکریپت، برخی از گزینه های کوچک سازی محبوب عبارتند از JSMIN ، YUI Compressor,  و  JavaScript Code Improver. یک نرم افزار کوچک ساز خوب به شما می دهد توانایی کوچک سازی معکوس برای زمانی که شما در حال توسعه وب سایت خود هستید را نیز می دهد. متناوبا ، شما می توانید از  ابزارهای درون مرورگری مانند Firebug  برای دیدن نسخه فرمت شده کد خود استفاده کنید.

4- فایل های CSS  و جاوا اسکریپت را برای کاهش درخواست های HTTP با هم ترکیب کنید.

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

برای آگاهی از این روش می توانید مقاله نیلس لینر را با عنوان «نحوه ترکیب فایل های CSS  و  JS با استفاده از PHP » (که می تواند به زبان های دیگر نیز تغییر دهید.) را مطالعه کنید. SitePoint نیز بحث مشابهی در مورد شیوه بسته بندی CSS  و  JavaScript دارد؛ با استفاده از این روش ها قادر به حداقل 6/1 ثانیه بهبود در زمان پاسخ دهی خواهیم بود، در نتیجه زمان پاسخ دهی نسبت به زمان اصلی 76 ٪ کاهش می یابد.

در غیر این صورت ، شما می توانید فایلهای  CSS  و  JavaScript  را با استفاده از روش خوب و قدیمی «کپی-پِیست »کردن با هم ترکیب کنید. (به طرز معجز آسایی این روش جواب می دهد!)

5- از CSS Sprite برای کاهش درخواست های HTTP استفاده کنید

یک CSS Sprite ترکیب کننده تصاویر کوچک تشکیل دهنده یک تصویر بزرگ است. برای نمایش تصویر به درستی و کامل، شما باید ویژگی CSS  در موقعیت پس زمینه را تنظیم کنید. ترکیب تصاویر مختلف به این شیوه موجب کاهش درخواست های HTTP می شود.

به عنوان مثال ، در Digg (در بالا نشان داده شده) ، شما می توانید آیکون های مختلفی را در زمان تعامل کاربران با هم ببینید. برای کاهش بار درخواست های روی سرور ، Digg چند آیکون را در یک تصویر بزرگ تر با هم ترکیب  کرده و سپس از  CSS  برای قرار دادن آیکون ها در محل مناسب استفاده می کند.

شما می توانید این کار را به طور دستی انجام دهید، اما یک ابزار مبتنی بر وب به نام CSS Sprite Generator وجود دارد که به شما امکان آپلود تصاویر برای ترکیب همه انها در یک CSS sprite  و سپس دریافت کد خروجی CSS (ویژه قرار گرفتن در موقعیت پس زمینه) برای رندر تصاویر با سرعت بیشتر را می دهد .

6- از فشرده سازی سمت سرور برای کاهش اندازه فایل ها استفاده کنید

اگر شما از یک میزبان وب اشتراکی استفاده می کنید که قبلا از فشرده سازی سمت سرور در آن استفاده نشده انجام این مورد می تواند مشکل باشد، اما برای بهینه سازی کامل اجزای صفحه آنها باید فشرده شوند. فشرده سازی اشیاء صفحه در عمل شبیه به زیپ کردن فایل های بزرگی است که شما از طریق ایمیل می فرستید: شما (یا وب سرور) به عنوان مثال فایل های عکس های خانوادگی بزرگ را فشرده می کنید (یا هر جز دیگری در صفحه) و آن را برای دوست خود (مرورگر) ایمیل می کنید- او نیز به نوبه خود  فایل تصویرهای زیپ شده شما باز می کند تا تماشا کند. روش های فشرده سازی معمول برای مقصود ما عبارتند از Deflate و gzip.

اگر هم سرور اختصاصی خود را اجرا کرده یا اگر از یک سرور خصوصی مجازی (VPS) استفاده می کنید- خوش شانس هستید – اگر مجبور نباشید فشرده سازی را فعال کنید ، یا نرم افزاری نصب کنید که مسئولیت رسیدگی به فشرده سازی را با سهولت بر عهده بگیرد. در هر حال لطفا این راهنمایی در مورد نحوه نصب mod_gzip در آپاچی را بخوانید تا این گام نیز انجام شود.

7- از CSSو JavaScriptخطی اجتناب کنید

به طور پیش فرض، فایل های خارجی CSS  و  JavaScript توسط مرورگر کاربر (cache) ذخیره می شود. هنگامی که یک کاربر بیش از یک بار به یک صفحه وب وارد شده و در آن پیمایش می کند، مرورگر رایانه او قبلا استایل شیت ها و فایل های جاوا اسکریپت را در اختیار دارد که به نوبه خود موجب صرفه جویی در نیاز به دانلود سبک ها و اسکریپت ها برای بار دیگر می شود. اگر شما در صفحه وب خود  از اسناد CSS و جاوا اسکریپت زیادی استفاده کنید، خواه ناخواه  از ویژگی های ذخیره سازی و کش مرورگر وب به خوبی استفاده نمی کنید.

8-امکانات و ویژگی های سنگین را از روی سرور خود به جای دیگری انتقال دهید

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

شما می توانید از Feedburner برای سپردن مسئولیت رسیدگی به فیدهای RSS خود استفاده کنید یا از فلیکر برای پشتیبانی از تصاویری که قبلا مجبور بودید در سرور خود آپلود کنید(البته قبل از این کار از پیامدهای تخلیه تصاویر خود از سایت آگاهی کامل داشته باشید) ، و همین طور از کتابخانه آژاکس گوگل (AJAX Libraries) برای سرویس دهی به چارچوب ها/ کتابخانه های جاوا اسکریپت محبوب مانند MooTools ، jQuery ، و Dojo استفاده نمایید.

به عنوان مثال، وب سایت Six Revisions از «سرویس ذخیره سازی ساده»  آمازون (به طور خلاصه Amazon S3) استفاده می کند، که مسئول رسیدگی به تصاویری است که شما در این سایت ملاحظه می کنید، و همچنین Feedburner که مسئول رسیدگی به فیدهای آر اس اس است. این مسئله به مسئولان سایت اجازه می دهد تا تنها مسئولیت رسیدگی به HTML, CSS و تصاویر پس زمینه CSS را داشته باشند. نه تنها این راه حل مقرون به صرفه است ، بلکه به شدت زمان پاسخ دهی و بارگذاری صفحات وب را کاهش می دهد.

9- از Cuzillion برای برنامه ریزی یک ساختار صفحه وب بهینه استفاده کنید

Cuzillion یک نرم افزار تحت وب است که توسط استیو سودرز (Steve Souders) ( مهندس  فعلی گوگل پس از ترک یاهو به عنوان رئیس دپارتمان فنی) ایجاد شده برای کمک به شما در امر آزمایش تنظیمات مختلف به منظور بهینه سازی ساختار یک صفحه وب و حصول یک ساختار مطلوب. اگر شما پیش از این یک یا چند صفحه وب طراحی کرده اید، می توانید از Cuzillion برای شبیه سازی ساختار صفحه وب خود و سپس دستکاری آن به صورتی که بتوانید عملکرد را بهبود ببخشد بهره ببرید.

می توانید جهت کسب اطلاعات بیشتر ویدئوی مصاحبه تصویری InsideRIA  با استیو سودرز که بحثی است در مورد نحوه کار Cuzillion و راهنمایی که به شما را برای شروع سریع کار با آن کمک می کند را تماشا نمایید.

10- عملکرد وب سرور را زیر نظر داشته باشید و به طور منظم معیار های را مورد استفاده قرار گیرید.

وب سرور مغز عملیات ماست – این واحد مسئول ارسال / دریافت تقاضا / پاسخ های HTTP  به کاربران مناسب و خدمت رسانی به همه اجزای صفحه وب است. اگر وب سرور شما به درستی وظیفه خود را انجام ندهد، شما حداکثر منفعت را از تلاش خود برای بهینه سازی نخواهید برد.

ضروری است که شما دائما سرور وب خود را برای مسائل عملکردی و کارآیی مناسب چک کنید. در صورتی که دسترسی ریشه مانند به ان دارید و می تواند چیزهایی بر روی سرور نصب کنید ، برنامه ab– را که ابزاری محک زنی آپاچی برای وب سرور است یا Httperf محصول آی بی ام را بررسی کنید.

اگر هم دسترسی به سرور وب خود ندارید (یا هیچ نشانه ای از چیزی که من در مورد صحبت کردنش هستم ندارید) شما می بایست از یک ابزار از راه دور مانند Fiddler یا HTTPWatch برای تجزیه و تحلیل و نظارت بر ترافیک HTTP استفاده کنید.آنها هر دو کار با مسائلی را آسان می کنند که می تواند برای شما بررسی دستی اش مشکل تلقی شود.

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

برای مطالعه بیشتر

بهینه سازی زمان بارگذاری صفحه نوشته آرون هاپکینز.

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

درک اهمیت کارامدی ظاهری با مطالعه مطلب: قانون 20/80 به ما در مورد کاهش درخواست های HTTP در رابط کاربری وبلاگ یاهو چه می گوید؟

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

هنر طراحی وب با روش نصب افزونه برای بسته بندی CSS  و  JS در Rails

راهنمایی بیشتر؟

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

منبع: sixrevisions