چگونه سرعت وب سایت را افزایش دهیم؟

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

برای سایت های پر بازدید، بهینه بودن سایت از اهمیت زیادی برخوردار است. بهینه بودن بدین معناست که سایت در کمترین زمان ممکن بارگذاری (load) شود و همچنین مصرف منابع سرور نیز به حداقل مقدار ممکن برسد. بررسی ها نشان داده که کمتر از ۲۰ درصد از زمان بارگذاری سایت صرف لود شدن html و مابقی یعنی بیش از ۸۰ درصد از زمان، صرف بارگذاری آنچه درون صفحه است می شود.

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

کاهش تعداد درخواست های 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 ای‌ مرتب و بهینه استفاده نموده اید، می‌توان از وب سایت cleancss استفاده کنید تا بخش ‌های شبیه به هم را ادغام، کدهای بی‌استفاده را شناسایی و فواصل اضافی از بین کدهای شما را حذف نماید. در خصوص جاوا اسکریپت ها، برخی دیگر از سرویس های بهینه سازی عبارتند ازJSMIN ،YUI Compressor و JavaScript Code Improver. ضمنا شما می توانید از  ابزارهای درون مرورگری مانند Firebug برای دیدن نسخه فرمت شده کد خود استفاده کنید. به طور کلی با حذف کد های اضافه و یا انتقال انها به فایل های دیگر می توانید صفحات خود را سبک تر نمایید، همچنین استفاده از کلاس های شبکه ای می تواند حجم کد ها را تا ۵۰% کاهش دهد.

استفاده از ابزارهای فشرده سازی جهت کاهش حجم فایل ها :

فشرده سازی اشیاء صفحه در عمل شبیه به زیپ کردن فایل های بزرگ می باشد. این کار موجب می‌شود که فایلهای متنی (html, js, css) به صورت فشرده و zip شده به سمت کاربر ارسال شوند و حجم آنها گاهی تا یک دهم حجم اولیه تقلیل یابد. در نتیجه علاوه بر بالا بردن سرعت لود وب سایت، موجب کاهش پهنای باند مصرفی سرور می‌گردد. روش های فشرده سازی معمول عبارتند از Deflate و gzip. تقریبا اکثر مرورگرها از gzip پشتیبانی می کنند. فشرده سازی gzip بر روی محتوای متنی نظیر css ها و اسکریپت ها و html کارایی خوبی دارد و بیش از ۵۰ درصد حجم درخواست ها را کاهش می دهد.

استفاده از 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 هستند استفاده کند که باعث می شود چندین درخواست از طریق یک کانکشن صورت گیرد.

استفاده از شبکه های انتقال داده (CDN) :

معمولاً شبکه‌های تحویل محتوا دارای سرورهایی است که در نقاط مختلف مستقر هستند و به صورت جغرافیایی توزیع شده‌اند. شبکه های انتقال داده موارد استاتیک سایت شما به مانند تصاویر و اسکریپت ها را در نزدیکترین فاصله سروری در اختیار کاربران قرار می دهند.

سرویس هایی همانند Amazon CloudFront، Cloudflare و Max CDN Content Delivery Network سرویس های کارامدی در این خصوص می باشند، که با استفاده از آن هامی توانید سرعت لود وب سایت خود را به میزان قابل توجهی بالا ببرید.

طراحی بهینه پایگاه داده :

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

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