راهکارهایی جهت کاهش زمان لود وب سایت

راهکارهایی جهت کاهش زمان لود وب سایت

سرعت لود وب سایت ها یکی از مشخصه های اصلی و مهم در رابطه با کیفیت یک سایت می باشد. بنابراین در صورتی که می خواهید بازدیدکنندگان سایت خود را راضی نگاه دارید، باید سرعت بالا آمدن وب سایت خود را به حداقل میزان ممکن برسانید. برای سایت های پر بازدید، بهینه بودن سایت از اهمیت زیادی برخوردار است. بهینه بودن بدین معناست که سایت در کمترین زمان ممکن بارگزاری (load) شود و همچنین مصرف منابع سرور نیز به حداقل مقدار ممکن برسد. بررسی ها نشان داده که کمتر از 20 درصد از زمان بارگزاری سایت صرف لود شدن html و مابقی یعنی بیش از 80 درصد از زمان، صرف بارگزاری آنچه درون صفحه است می شود.
در ادامه به معرفی راهکارهایی جهت بهینه سازی وب سایت و کاهش زمان لود آن می پردازیم.
 
کاهش تعداد درخواست های HTTP :
بیشتر زمان کاربر نهایی صرف دانلود کامپونت های یک صفحه مانند عکسها، فایلهای JavaScript و CSS و فلش و . . . می شود. کاهش تعداد کامپونت ها به معنای کاهش درخواستهای HTTP و در نتیجه سرعت بارگذاری بالاتر صفحه وب است. یکی از راههای کاهش تعداد کامپونت ها طراحی ساده صفحه وب است ، اما افزایش تعداد تقاضای http به وسیله ی اسکریپت یا عوامل دیگر باعث کاهش سرعت لود صفحه می شود.
موارد زیر راهکارهایی کلی در خصوص کاهش درخواست های HTTP می باشد :
  • استفاده از تکنیک CSS Sprites که موجب کاهش تعداد تصاویر استفاده شده در CSS می شود. بدین ترتیب که تصاویر را در یک CSS Sprite ترکیب کرده تا تعداد درخواست های HTTP برای لود تصاویر کمتر شود. در واقع با استفاده از این تکنیک یک تصویر بزرگ تر دارید که از تصاویر کوچک تشکیل شده است.برخی از ابزارهای مفید در این خصوص spritepad , instantsprite , spritegen , spriteme می باشند.
  • الحاق فایلهای CSS به یکدیگر و همچنین اسکریپت ها
  • استفاده از تکنیک inline image
 
عدم استفاده از تعداد زیاد تصاویر :
بالا آمدن یک وب سایت با تعداد عکس های زیاد یکی از مواردی است که موجب کندی وب سایت می گردد و حتی گاهی اوقات باعث می شود که برخی از عکس های سایت باز نگردند که در این صورت نیز ظاهر سایت شما زیبا نخواهد بود. در نتیجه  استفاده از تعداد عکس کمتر یکی از اولویت ها در کاهش سرعت بارگزاری وب سایت می باشد.
 
بهینه سازی تصاویر :
تصاویر یکی دیگر از عوامل تاثیر گزار در سرعت بارگزاری صفحات می باشد. هرچند شما می توانید در html سایز عکس را تغییر دهید اما هیچ گاه از عکس ها با ابعادی بزرگتر از آنچه نیازدارید استفاده نکنید (scale نمودن تصاویر) ، زیرا با این کار عکسی بزرگ توسط کاربر دانلود می گردد. همیشه از گزینه save for web برای کم کردن حجم عکس‌های وب استفاده کنید. این گزینه را می توانید در برنامه‌هایی مانند فتوشاپ مشاهده کنید. اگر در سایت خود مقدار زیادی تصویر دارید، ضروری است فرمت بهینه برای هر تصویر در نظر بگیرید .معمولا فرمت JPEG را برای عکس ها واقعی با گرادینت نرم و رنگ های معمولی و فرمت GIF یا PNG برای تصاویری که رنگ های جامد و تخت دارند (مانند لوگو ها ، دگمه ها ، نمودار ها و آرم ها) استفاده میگردد.به صورت کلی GIF و PNG مشابه هستند ، اما PNG  به طور معمول سایز فایل کمتری دارد.
همچنین فشرده سازی تصاویر با استفاده از قابلیت image compressor نیز می تواند سبب بهبود کارایی وب سایت گردد.
 
استفاده از CSS و بهینه کردن CSS :
CSS می تواند نقش مهمی را در زمان لود صفحات داشته باشد. مرورگر می‌تواند تمامی فرمت‌ها و استایل‌های صفحات شما را ذخیره کند و بارها و بارها آنها را نخواند.جهت اطمینان از این که CSS ای‌ مرتب و بهینه استفاده نموده اید ، می‌توان از وب سایت www.cleancss.com استفاده کنید تا بخش‌های شبیه به هم را ادغام، کدهای بی‌استفاده را شناسایی و فواصل اضافی از بین کدهای شما را حذف نماید. در خصوص جاوا اسکریپت ها، برخی دیگر از سرویس های بهینه سازی عبارتند از JSMIN ، YUI Compressor,  و  JavaScript Code Improver. ضمنا شما می توانید از  ابزارهای درون مرورگری مانند Firebug  برای دیدن نسخه فرمت شده کد خود استفاده کنید. به طور کلی با حذف کد های اضافه و یا انتقال انها به فایل های دیگر می توانید صفحات خود را سبک تر نمایید ، همچنین استفاده از کلاس های شبکه ای می تواند حجم کد ها را تا 50% کاهش دهد .
 
استفاده از ابزارهای فشرده سازی جهت کاهش حجم فایل ها :
فشرده سازی اشیاء صفحه در عمل شبیه به زیپ کردن فایل های بزرگ می باشد. این کار موجب می‌شود که فایلهای متنی (html, js, css) به صورت فشرده و zip شده به سمت کاربر ارسال شوند و حجم آنها گاهی تا یک دهم حجم اولیه تقلیل یابد. در نتیجه علاوه بر بالا بردن سرعت لود، موجب کاهش پهنای باند مصرفی سرور می‌گردد. روش های فشرده سازی معمول عبارتند از Deflate و gzip . تقریبا اکثر مرورگرها از gzip پشتیبانی می کنند. فشرده سازی gzip بر روی محتوای متنی نظیر css ها و اسکریپت ها و html کارایی خوبی دارد و بیش از 50 درصد حجم درخواست ها را کاهش می دهد.
 
استفاده از caching :
با استفاده از این قابلیت مرورگر , منابع سایت رو به صورت نسخه های cache شده در خود نگهداری می کند.برای مثال می توان css , javascript و.. را در مرورگر کاربر کش نمایید تا از لود مجدد آن جلوگیری شود. این کار باعث کاهش وقفه های سرور شده و در نتیجه به افزایش سرعت کمک می کند.اما باید دقت داشته باشید Cache نادرست می تواند متن های صفحه سایت را نیز در بر گیرد که این امر کاملا اشتباه می باشد.
باتوجه به اینکه مرورگرها می توانند پاسخ درخواست های HTTP را کش کنند. با ارسال هدر Expires میتوان به مرورگر اعلام کرد که پاسخ را تا چه زمانی کش کند. برای مثال برای محتوای استاتیک میتوان این مقدار را بر روی یکسال قرار تا در درخواست های بعدی مرورگر از کش استفاده نماید.
 
کاهش حجم فایلهای cookie :
HTTP Cookie برای اهداف مختلفی مانند شخصی سازی یک صفحه وب و یا تعیین اعتبار کاربر استفاده می شوند. اطلاعات cookie در HTTP header بین وب سرور و مرورگر کاربر رد و بدل می شود. پس پایین نگه داشتن حجم اطلاعات cookie به منظور کاهش زمان پاسخ به کاربر مفید است.
 
قراردادن فایلهایCSS در بالای صفحه :
انتقال فایلهای CSS در بالای صفحه <head>  باعث می شود صفحه سریعتر بارگذاری شود. این به این دلیل است که صفحه به تدریج render می شود. زیرا CSS ها ابتدا load شده اند، صفحه به تدریج شروع به باز شدن می کند و به همان ترتیب نمایش داده خواهد شد. یکی از مشکلات قراردادن CSS در پایین صفحه این است که برخی مرورگرها مانند IE تا زمان load شدن CSS و مشخص شدن محل المانها هیچ چیزی به کاربر نشان نمی دهند و کاربر یک صفحه سفید را خواهد دید که به یک باره کل سایت load می شود.
 
قرار دادن جاوا اسکریپت ها در پایین صفحه :
یکی مشکلات ناشی از اسکریپت ها این است که آنها دانلود موازی را در مسدود می کنند. در بسیاری موارد برای اجرا شدن یک اسکریپت نیاز است به یک المان DOM دسترسی داشته باشیم پس باید آن المان load شده باشد. در نتیجه عملاً تا load شدن المان DOM مورد نظر اسکریپت اجرا نخواهد شد. هنگامی که اسکریپت را در پایین سایت قرار دهیم، مطمئن هستیم که المان DOM مورد نظر load شده است.به طور کلی قرار دادن اسکریپت ها در ابتدای صفحه باعث می گردد جلوی رندر شدن و دانلود شدن سایر محتویات صفحه تا اتمام لود شدن اسکریپت گرفته شود. و اما قرار دادن اسکریپت ها در انتهای صفحه باعث می شود ابتدا محتوا رندر و سپس سایر ملحقات و اسکریپت ها در پس زمینه لود شوند.
 
کاهش مراجعات DNS :
مرورگرها برای ارتباط با سرورها از IP آنها استفاده می کنند ، بنابراین مجبورند به ازای هر Hostname ابتدا یک درخواست به DNS سرور ارسال کنند و IP را بدست بیاورند. پس بهتر است محتویات سایت تان از Hostname های مختلف نباشد. (دقت کنید که www.example.com و example.com دو Hostname متفاوت هستند)
ضمنا مرورگر می تواند از قابلیت Keep-Alive در مورد درخواست هایی که مربوط به یک Hostname هستند استفاده کند که باعث می شود چندین درخواست از طریق یک کانکشن صورت گیرد

آیا این پاسخ به شما کمک کرد؟

 پرینت این مقاله

در همین زمینه

ایجاد یک Site Map ساده برای وب سایت های تحت ASP.NET با استفاده از فایل (Web.sitemap)

کنترلر چیست ؟  کنترلر یک ابزار برای راهنمائی بازدیدکنندگان وب سایت شما می باشد. با استفاده از...

تغییر فرکانس ایندکسینگ روبات های موتور جستجوگر Google جهت بهینه سازی مصرف پهنای باند

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

معرفی و کاربرد فایل Robots.txt

 امروزه،تعداد بازدید و ترافیک دریافتی هر وب سایت تا مقدار زیادی محتاج موتور های جستجو می باشد....

راهکارهای افزایش رتبه ی سایت در گوگل

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

راهنمای استفاده از ابزار تحلیل و آمارگیری Clicky

پس از Google Analytics یکی از قویترین سایت های ارائه دهنده اطلاعات آماری و بازدید کنندگان...