10 نکته برای افزایش سرعت بارگزاری صفحات وب

[tnt6667 14]

اگر طراح وب سایت هستید ، اگر قصد دارید سایتی طراحی کنید یا اگر سایت یا وبلاگی دارید ، این مطلب برای شماست .

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

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

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

1.بررسی سرعت بارگذاری فعلی صفحات

اولین کاری که باید انجام دهید ، آنالیز سرعت کنونی صفحه می باشد . این به شما کمک می کند تا بـا تغییرات از بهبود سرعت بارگزاری مطمئن شوید .ابزارهای بسیاری برای چک کردن اینکه چه مدت بارگذاری صفحه شما به طول می انجامد وجود دارد که در اینجا چند نمونه را مشاهده میکنید :

- Pingdom وب سایت عالی با کاربری آسان برای آنالیز بارگزاری بخش های مختلف سایت شامل ، صفحات ، فایل های جاواسکریپ ، CSS ، عکس ها ، فایل های XML و ارائه زمان بارگزاری تک تک موارد بر روی نمودار و حجم و زمان کلی بارگزاری آبجکت های صفحه . این ابزار گزارش ارائه شده را ذخیره کرده و لینک ثابت آنرا در صورت تمایل به ایمیل ، Facebook و یا توییتر شما ارسال میکند . بدین ترتیب شما میتوانید در هر زمان به این گزارش دسترسی داشته باشید و نتایج تغییراتی را که در جهت بهبود سرعت بارگزاری انجام داده اید با گزارش قبلی مقایسه نمایید.

- Page Speed یک افزونه متن باز فایرفاکس می باشد که توسط آن میتوانید به اطلاعات کارایی سایت خود دسترسی داشته باشید .همچنین این افزونه به شما راهکارهایی برای حل مشکلات کارایی و سرعت به شما پیشنهاد می دهد.

- Web Page Test یکی دیگر از ابزارهای بسیار کامل جهت نمایش کارایی و سرعت وب سایت شما در مرورگرهای گوناگون و ختی مناطق مختلف جهان می باشد . این ابزار فوق العاده کارایـی و سرعت صفحه وب شما در اولین اجرا بر روی کامپیوتر و دومین فـراخوانی صفحه نشان میدهد که سرعت بارگزاری در دفعات بعدی به مراتب بیشتر از بار اول می باشد . اجرای دوم 30 ثانیه پس از نمایش اولین گزارش با Refresh شدن گزارش اول انجام و در پایان گزارش کامل نشان داده خواهد شد .

2.بهینه سازی عکس ها و تصاویر

دانستن اینکه چه موقع از چه فرمت فایلی استفاده کنیم بسیار مهم است . تغییر فرمت تصاویر حجم آنها را به طور چشم گیری کاهش میدهد . برای اینکار میتوانید از فتوشاپ استفاده نمایید . کافیست تصویر مورد نظر را در فتوشاپ باز کرده و از منوی فایل گزینه Save For Web را انتخاب نمایید و یا اینکه دکمه های Alt+Ctrl+Shift+S را همزمان فشار دهید . در صفحه ظاهر شده انواع فرمت ها را با تنظیمات مختلف تست کنید و گوشه پایین سمت چپ حجم آنرا در هر لحظه مشاهده نمایید . هنگامی که به کیفیت و حجم مناسب دست یافتید آنرا ذخیره کنید.

- GIF فرمتی مناسب برای تصاویری با چند رنگ محدود مانند برخی از لوگوها .

- JPEG فرمتی مناسب برای تصاویر با تعداد رنگ های بالا و دارای جزئیات مانند عکس های یادگاری .

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

3.عدم نمایش تصاویر بزرگ در مقیاس کوچک

از تصاویر بزرگ فقط زمانی استفاده کنید که می خواهید در همان سایز نشان داده شود . مثلا" شما میتوانید با تنظیم خصیصه width و height یک عکس با سایز 500x500 را در مقیاس کوچکتر با سایز 100x100 نشان دهید. اما برای اینکار با استفاده از نرم افزار فتوشاپ و یا هر ادیتور دیگری ابتدا سایز آنرا به میزانی که می خواهید نمایش داده شود کاهش دهید . این کاهش سایز باعث افزایش سرعت بارگزاری خواهد.در فروشگاه های آنلاین معمولا 2 تصویر برای یک محصول ذخیره میکنند و در صورت لزوم تصویر بزرگتر را نشان میدهند و در سایر مواقع از تصویر کوچک همان محصول استفاده میکنند .

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

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

5.ارجاع به فایل های Stylesheet در بالای صفحه

گذاشتن دستور ارجاع به فایل های استایل در بالای صفحه در تگ <head> باعث بارگزاری سریعتر آیتم های نمایشی در صفحه شده و بیننده صفحه را سریعتر دریافت و مشاهده میکند چرا که دستوراتی که برای ظاهر صفحه در فایل های استایل قرار دارند زودتر در اختیار مرورگر قرار گرفته و اجرا میشوند. همچنین این مورد یکی از استاندارهای W3C نیز می باشد که میتوانید در اینجا مشاهده کنید .

6.ارجاع به فایل های Script در پایین صفحه

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

7.قرار دادن کدهای javaScript و CSS در فایل های خارجی

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

8.به حداقل رساندن تعداد درخواست های HTTP

منظور از تعداد درخواست های HTTP ، تعداد فایل هایی است که بعد از درخواست یک بازدیدکننده مبنی بر نمایش یک وب سایت ، از سروری که سایت روی آن قرار دارد دانلود میشود. فایل هایی مانند CSS ، javaScript ،HTML ، عکس ها و ... . هنگامی که یک سایت برای بازدیدکننده باز می شود ، دانلود این فایل ها بیشترین زمان بارگزاری را به خود اختصاص میدهند . با کم کردن تعداد این فایل ها ، تعداد درخواست ها کاهش پیدا کرده و در نتیجه سایت سریعتر بارگزاری میشود . برای کاهش درخواست های HTTP برای عکس های وب سایت ، یکی از راه ها استفاده از CSS sprites می باشد .CSS sprites تکنیکی است که در آن چند عکس را که قرار است جداگانه به نمایش در آیند را در فتوشاپ به یکدیگر میچسبانیم و تبدیل به یک عکس میکنیم . حال برای نمایش هر کدام از آنها در محل خود با تنظیم مقدار background-position فقط بخشی از آن عکس را که می خواهیم نمایش داده شود ، به نمایش در می آوریم و مابقی آنرا مخفی میکنیم. بدیت ترتیب فقط یک عکس هنگام فراخوانی سایت دانلود میشود. همچنین اگر شما فایل های CSS و جاوااسکریپت چندگانه دارید ، می توانید با ترکیب آنها تعداد درخواست های HTTP را کاهش دهید .

9.Cache کردن صفحات

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

10.عدم استفاده از Redirects 301

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