سرعت لود وب سایت ها یکی از مشخصه های اصلی و مهم در رابطه با کیفیت یک سایت می باشد. بنابراین در صورتی که می خواهید بازدیدکنندگان سایت خود را راضی نگاه دارید، باید سرعت بالا آمدن وب سایت خود را به حداقل میزان ممکن برسانید. برای سایت های پر بازدید، بهینه بودن سایت از اهمیت زیادی برخوردار است. بهینه بودن بدین معناست که سایت در کمترین زمان ممکن بارگذاری (load) شود و همچنین مصرف منابع سرور نیز به حداقل مقدار ممکن برسد. بررسی ها نشان داده که کمتر از ۲۰ درصد از زمان بارگزاری سایت صرف لود شدن html و مابقی یعنی بیش از ۸۰ درصد از زمان، صرف بارگزاری آنچه درون صفحه است می شود.
در ادامه به معرفی راهکارهایی جهت بهینه سازی وب سایت و کاهش زمان لود آن می پردازیم.
بیشتر زمان کاربر نهایی صرف دانلود کامپوننت های یک صفحه مانند عکسها، فایلهای 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 ای مرتب و بهینه استفاده نموده اید، میتوان از وب سایت www.cleancss.com استفاده کنید تا بخش‌های شبیه به هم را ادغام، کدهای بی‌استفاده را شناسایی و فواصل اضافی از بین کدهای شما را حذف نماید. در خصوص جاوا اسکریپت ها، برخی دیگر از سرویس های بهینه سازی عبارتند از JSMIN ، YUI Compressor, و JavaScript Code Improver. ضمناً شما می توانید از ابزارهای درون مرورگری مانند Firebug برای دیدن نسخه فرمت شده کد خود استفاده کنید. به طور کلی با حذف کد های اضافه و یا انتقال انها به فایل های دیگر می توانید صفحات خود را سبک تر نمایید، همچنین استفاده از کلاس های شبکه ای می تواند حجم کد ها را تا ۵۰% کاهش دهد.
فشرده سازی اشیاء صفحه در عمل شبیه به زیپ کردن فایل های بزرگ می باشد. این کار موجب می‌شود که فایلهای متنی (html, js, css) به صورت فشرده و zip شده به سمت کاربر ارسال شوند و حجم آنها گاهی تا یک دهم حجم اولیه تقلیل یابد. در نتیجه علاوه بر بالا بردن سرعت لود، موجب کاهش پهنای باند مصرفی سرور میگردد. روش های فشرده سازی معمول عبارتند از Deflate و gzip. تقریبا اکثر مرورگرها از gzip پشتیبانی می کنند. فشرده سازی gzip بر روی محتوای متنی نظیر css ها و اسکریپت ها و html کارایی خوبی دارد و بیش از ۵۰ درصد حجم درخواست ها را کاهش می دهد.
با استفاده از این قابلیت مرورگر، منابع سایت را به صورت نسخه های cache شده در خود نگهداری می کند. برای مثال می توان css , javascript و.. را در مرورگر کاربر کش نمایید تا از لود مجدد آن جلوگیری شود. این کار باعث کاهش وقفه های سرور شده و در نتیجه به افزایش سرعت کمک می کند. اما باید دقت داشته باشید Cache نادرست می تواند متن های صفحه سایت را نیز در بر گیرد که این امر کاملاً اشتباه می باشد.
باتوجه به اینکه مرورگرها می توانند پاسخ درخواست های HTTP را کش کنند. با ارسال هدر Expires میتوان به مرورگر اعلام کرد که پاسخ را تا چه زمانی کش کند. برای مثال برای محتوای استاتیک میتوان این مقدار را بر روی یکسال قرار تا در درخواست های بعدی مرورگر از کش استفاده نماید.
HTTP Cookie برای اهداف مختلفی مانند شخصی سازی یک صفحه وب و یا تعیین اعتبار کاربر استفاده می شوند. اطلاعات cookie در HTTP header بین وب سرور و مرورگر کاربر رد و بدل می شود. پس پایین نگه داشتن حجم اطلاعات cookie به منظور کاهش زمان پاسخ به کاربر مفید است.
انتقال فایل های CSS در بالای صفحه <head> باعث می شود صفحه سریعتر بارگذاری شود. این به این دلیل است که صفحه به تدریج render می شود. زیرا CSS ها ابتدا load شده اند، صفحه به تدریج شروع به باز شدن می کند و به همان ترتیب نمایش داده خواهد شد. یکی از مشکلات قراردادن CSS در پایین صفحه این است که برخی مرورگرها مانند IE تا زمان load شدن CSS و مشخص شدن محل المانها هیچ چیزی به کاربر نشان نمی دهند و کاربر یک صفحه سفید را خواهد دید که به یک باره کل سایت load می شود.
یکی از مشکلات ناشی از اسکریپت ها این است که آنها دانلود موازی را مسدود می کنند. در بسیاری موارد برای اجرا شدن یک اسکریپت نیاز است به یک المان DOM دسترسی داشته باشیم پس باید آن المان لود شده باشد. در نتیجه عملاً تا load شدن المان DOM مورد نظر اسکریپت اجرا نخواهد شد. هنگامی که اسکریپت را در پایین سایت قرار دهیم، مطمئن هستیم که المان DOM مورد نظر load شده است. به طور کلی قرار دادن اسکریپت ها در ابتدای صفحه باعث می گردد جلوی رندر شدن و دانلود شدن سایر محتویات صفحه تا اتمام لود شدن اسکریپت گرفته شود. و اما قرار دادن اسکریپت ها در انتهای صفحه باعث می شود ابتدا محتوا رندر و سپس سایر ملحقات و اسکریپت ها در پس زمینه لود شوند.
مرورگرها برای ارتباط با سرورها از IP آنها استفاده می کنند، بنابراین مجبورند به ازای هر Hostname ابتدا یک درخواست به DNS سرور ارسال کنند و IP را به دست بیاورند. پس بهتر است محتویات سایت تان از Hostname های مختلف نباشد. (دقت کنید که www.example.com و example.com دو Hostname متفاوت هستند)
ضمنا مرورگر می تواند از قابلیت Keep-Alive در مورد درخواست هایی که مربوط به یک Hostname هستند استفاده کند که باعث می شود چندین درخواست از طریق یک کانکشن صورت گیرد.
