بایگانی

روش های افزایش سرعت وب سایت(قسمت اول)

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

تحقیقات انجام شده توسط Akamai نشان می دهد که ۴۷ درصد از مردم انتظار دارند که یک صفحه وب در کمتر از ۲ ثانیه بارگذاری شود و اگر بارگذاری صفحات سایت بیش از ۳ ثانیه طول بکشد، ۴۰ درصد از بازدیدکنندگان، وب سایت شما را ترک کنند.

همچنین تحقیقات اخیر نیز نشان می دهد درصورتی که زمان بارگذاری وب سایت بهردلیل، از ۲ ثانیه به ۱۰ ثانیه افزایش یابد، میزان  ۳۸٪ به آمار بازدیدکنندگانی که سایت شما را ترک می کنند، افزوده خواهد شد.
از طرفی دیگر در زمان اوج ترافیک ورودی سایت، بیش از ۷۵ درصد از بازدیدکنندگان به جای اینکه صبر کنند تا صفحه وب سایت شما با تاخیر باز شود، به سایت سایر رقبا، مراجعه خواهند نمود.

همچنین از نظر موتور های جستجو و نیز سئوی سایت(SEO)، فاکتور سرعت بسیار موثر بوده و کندشدن سرعت سایت، باعث کاهش آمار بازدید سایت و در نتیجه کاهش رتبه سایت شما خواهد شد.

به طور خلاصه، داشتن یک وب سایت با سرعت لود پایین، بر روی موارد زیر تأثیر منفی خواهد گذاشت:

  • ترافیک و آمار بازدید سایت
  • میزان تعامل کاربران با سایت
  • میزان فروش آنلاین محصولات
  • تاثیر منفی در ذهن بازدیدکنندگان
  • تاثیر منفی در سئو سایت و رتبه سایت

لذا با توجه به موارد ذکر شده و ضرورت افزایش سرعت وب سایت، در ادامه روش هایی موثر جهت افزایش سرعت وب سایت آورده شده است.

 

پیش نیاز تغییرات:

قبل از هر اقدامی جهت بهینه سازی وب سایت خود برای بارگیری سریع در جهت افزایش سرعت آن، دو مورد را باید در نظر داشته باشید:

ابتدا زمان بارگذاری وب سایت فعلی خود را از طریق ابزارهای آنلاین نظیر  GTmetrix ، Pingdom یا Google PageSearch Insights  بررسی کنید.  این ابزار آنلاین سرعت فعلی وب سایت شما را نمایش داده و امکان مقایسه سرعت بارگذاری صفحات را پس از اعمال تغییرات فراهم میکند.

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

مراحل افزایش سرعت در وب سایت :

– حذف افزونه های غیر ضروری و پلاگین ها

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

افزونه های غیر ضروری(Add-ons) و پلاگین ها(Plugins) می توانند سرعت وب سایت شما را بشدت کاهش دهند. همچنین اگر شما از CMS های وبلاگ نویسی مانند  WordPress، Joomla  ویا دروپال استفاده می کنید، این مرحله بسیار مهم است.

تحقیقات اخیر در رابطه با میزان تاثیر پلاگین ها روی سرعت سایت نشان میدهد که چگونه با بازنگری پلاگین ها می توان سرعت بارگزاری وب سایت خود را از ۴٫۲۳ ثانیه به ۱٫۳۳ ثانیه کاهش دهیم؛ همچنین نتیجه این تحقیق نشان میدهد که پلاگین ها حدود ۸۶% از سرعت سایت را به خود اختصاص می دهند.

نکته بسیار مهم اینست که تعداد افزونه هایی که در وب سایت خود نصب کرده اید، در سرعت سایت تاثیر ندارد، بلکه در مورد کیفیت و نحوه عملکرد این پلاگین ها می باشد. یک وب سایت با ۵۰ پلاگین می تواند بسیار سریعتر از یک وب سایت شامل ۱۰ پلاگین بی کیفیت، بارگذاری شود.

به طور کلی، سه نوع از پلاگین ها به شرح زیر باعث کندی وب سایت خواهند شد:

  • پلاگین هایی را که تعداد نسبتا زیادی اسکریپت ها و style ها را اجرا می کنند،
  • پلاگین هایی که تعداد زیادی درخواست به سایتهای خارجی ارجاع میدهند،
  • ونیز پلاگین هایی که بار اضافی روی دیتابیس شما ایجاد می کنند.

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

در صورتی که از وردپرس استفاده میکنید، پیشنهاد میشود از پلاگین P3 (Plugin Performance Profiler) استفاده کنید.

این پلاگین، تمام پلاگین های نصب شده در سایت وردپرس را جهت یافتن مواردی که باعث کندی سرعت سایت می شوند، اسکن نموده و به شما گزارشی کامل ارائه می دهد که چگونه هر افزونه /پلاگین بر عملکرد وب سایت شما تاثیر می گذارد.

– تاثیر قابل توجه محدودیا حذف کردن شبکه های اجتماعی

در صورتی که تصور می کنید میبایست تعداد ۱۰۰ مورد از شبکه های اجتماعی در وبسایت خود داشته باشید، کاملا در اشتباهید!

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

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

راه حل اینست که استفاده از شبکه های احتماعی را در سایت محدود کرده و یا تنها آندسته را استفاده نمایید که تاثیر چندانی روی سرعت سایت نداشته باشند و یا از آنها در صفحاتی غیر از صفحه اول و نیز صفحات اصلی سایت (بطور مثال در صفحه تماس با ما) استفاده کنید.

– کدهای ارزیابی Analytics  و تحلیل تبلیغات غیر همزمان

کدهای مربوط به ارزیابی فعالیت مشتریان در سایت (Analytics tracking codes) و نیز تجزیه و تحلیل نتایج تبلیغات اینترنتی روی برند شما، می تواند به طور قابل توجهی باعث کاهش سرعت وب سایت شوند، به خصوص زمانیکه سرعت سرور مقصد نیز کند باشد.

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

– فعال کردن  Expires Header

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

Expires Header برای مرورگر بازدید کننده مشخص می کند که چه زمانی نیاز هست درخواستی جدید به سرور و یا کش مرورگر(Browser) ارسال شود.

 Expiry Headers زمانی استفاده می شود که شما نمی خواهید کاربران برای هر بررسی فایل و بروزرسانی آنها یک درخواست به سمت سرور ارسال کنند، به عبارتی سرور زمان انقضای اطلاعات یک فایل را میداند و در بازه ای که زمان آن منقضی شده است برای بروزرسانی فایل های کش شده در سیستم کاربر اقدام میکند، به همین دلیل پروکسی/کش بار زیادی برای هر بار چک کردن بروزرسانی ها روی سرور ایجاد نخواهد کرد.

بعنوان مثال اگر Expires Header  را طوری تنظیم نمایید که مرورگر بازدید کننده، تنها یک بار در ماه درخواست به سمت سرور ارسال کند، فایل مربوطه پس از دریافت از سرور، در حافظه کش (cache) مرورگر کاربر به مدت یکماه ذخیره شده و با هر بار فراخوانی کاربر، درخواست جدید به سرور ارسال نمیشود.

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

 

– فعال کردن Cache

Caching یا استفاده از قابلیت کش مرورگر، راه حل مناسبی جهت افزایش سرعت سایت شما در مرورگر کاربران را فراهم می آورد؛ با استفاده از قابلیت کش می توانید نسخه فعلی وب سایت خود را در مرورگر کاربران ذخیره نموده وتا زمانی که وب سایت شما به روز شود و یا تا زمانی که شما دستور به روز رسانی نسخه جدید وب سایت خود را ارسال نمایید، محتویات همان نسخه کش شده به کاربر نمایش داده می شود.

فعال کردن ذخیره سازی برای وب سایت شما می تواند سرعت سایت را به میزان قابل توجهی افزایش دهد، و تحقیقات نشان می دهد که فعال سازی یک حافظه کامل برای یک وب سایت می تواند زمان بارگذاری وب سایت را از ۲٫۴ ثانیه تا ۰٫۹ ثانیه کاهش دهد.

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

همچنین در لینک زیر می توانید آموزش نحوه تعریف کش را ملاحظه فرمایید:

بهینه سازی سایت با استفاده از HTTP Caching

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

قابلیت ذخیره سازی(Caching) یک روش عالی جهت صرفه جویی در زمان بازدیدکنندگان و نیز کاهش بار ترافیک (Bandwidth) سایت شما می باشد.
در مورد وب سایت ها، مرورگر می تواند یک کپی از تصاویر، stylesheets ها، جاوا اسکریپت یا کل صفحه را در سیستم کاربر ذخیره کند بدین ترتیب در بازدید‌های بعدی که کاربر به آن منابع نیاز دارد (مانند یک اسکریپت یا لوگو که در هر صفحه سایت نمایش داده می شود)، مرورگر مجبور نیست که آن را مجدد دانلود کند.

همچنین یکی از مواردی که در سایت gtmetrix ، در جهت بالارفتن سرعت سایت نیز توصیه میگردد، فعال نمودن قابلیت Cashing می باشد.

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

  • مرورگر: من درجستجوی فایل html هستم. آیا در سرور موجود است؟
  • سرور: در حال جستجوی آن…، بله موجود است.
  • مرورگر: بسیار عالی، من آن را دانلود کرده و به کاربر نشان می دهم.از طرفی دیگر زمانی که مرورگر کپی از یک فایل/عکس (مانند یک تصویر لوگو) را روی سیستم کاربر، ذخیره می کند؛ در هر صفحه ای که به لوگو نیاز دارد، همان نسخه ذخیره شده را نمایش میدهد. حال چه اتفاقی می افتد زمانی که فایل مربوطه / لوگو شرکت در سایت تغییر کند؟
    بنابراین، می بایست راهی وجود داشته باشد که مرورگر متوجه شود که آیا آپدیت جدید برای اون فایل/تصویر وجود دارد و در صورت وجود نسخه جدید، فایل یا تصویر جدید را بجای قبلی، ذخیره نماید و در بازدید بعدی کاربر فایل جدید را نمایش دهد.
     

    روش های ایجاد caching:

    • روش Last-Modified

    در این روش سرور به مرورگر اعلام کند که چه نسخه ای از فایل را قبلا ارسال کرده است. در این روش سرور می تواند تاریخ آخرین اصلاح مربوطه را با عنوان Last-modified همراه فایل برای مرورگر ارسال کند. بطور مثال:
    Last-modified: Fri, 16 Mar 04:00:25 GMT File Contents (could be an image, HTML, CSS, Javascript…)
    به این ترتیب مرورگر متوجه میشود که فایل مربوطه در چه تاریخی ایجاد شده است. دفعه بعد که مرورگر به logo.png نیاز دارد، می تواند یک بررسی ویژه با سرور انجام دهد:
    در تصویر زیر  مرورگر می داند که فایل آن (logo.png) در تاریخ ۱۶ مارس ایجاد شده است. دفعه بعد که مرورگر به logo.png نیاز دارد، می تواند یک بررسی ویژه با سرور انجام دهد:

مرورگر: سرور لطفا فایل مربوطه را در صورتی که پس از تاریخMar 16  تغییرات داشته است، ارسال کن.

سرور: در حال بررسی تاریخ آخرین تغییرات…

سرور: فایل مربوطه از این تاریخ به بعد تغییری نداشته است.

مرورگر: پس من نسخه کش شده را به کاربر نمایش می دهم.

  • روش ETag

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

لذا در روش دوم استفاده از ETags  پیشنهاد میگردد. ETag شناسه منحصر به فردی است که به هر فایل داده می شود. در نتیجه مانند روش کدگزاری اطلاعات از طریق hash  یا اثر انگشت افراد متفاوت می باشد. هر فایل دارای یک شناسه منحصر به فرد است و اگر فایل را تغییر دهید (حتی در یک بایت)، شناسه آن نیز تغییر می کند.

در نتیجه به جای ارسال زمان آخرین تغییرات فایل، سرور می تواند ETag مربوط به آن فایل را برای مرورگر ارسال نماید.

ETag: ead145f File Contents (could be an image, HTML, CSS, Javascript…)

ETag می تواند هر رشته ای باشد که به طور منحصر به فرد فایل مربوطه توسط آن شناسایی می شود.

مرورگر: در رابطه با فایل خاص (بعنوان مثال logo.png)، اگر برچسبی با عنوان “ead145f” در سرور موجود نیست،فایل logo.png را ارسال کن.
سرور: بررسی شناسه موردنظر فایل  logo.png
سرور: شما شانس آوردید! شناسه “ead145f” روی سرور موجود است و تغییر نکرده است.

مرورگر: بسیار خوب! من به کاربر، نسخه کش شده را نشان می دهم.

  • روش Expires

ذخیره کردن فایل در کش مرورگر و بررسی مداوم آن با سرور یک راه حل قابل قبول است، اما بهترین راه حل نیست. با بررسی تاریخ آخرین تغییرات و نیز بررسی ETag ، در هر صورت نیاز است که درخواستی به سمت سرور ارسال گردد.

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

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

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

در این صورت Header مربوطه به صورت زیر می باشد:

Expires: Tue, 20 Mar 04:00:25 GMT File Contents (could be an image, HTML, CSS, Javascript…)

لذا تا زمان انقضای فایلها نیاز به ارسال درخواست جدید به سمت سرور نمی باشد:

در این حالت ارتباطی  بین مرورگر و سرور رخ نمی دهد و تنها مرورگر با خودش مشورت می کند:

مرورگر: تاریخ امروز قبل از تاریخ انقضاء (یعنی بطور مثال ۲۰ مارس) است؟
مرورگر: بله هنوز مهلت هست، در نتیجه به کاربر نسخه کش را  نشان می دهم.

  • روش Max-Age حداکثر سنروش تاریخ انقضا Expiresروش خوبی است، اما بهینه نیست زیرا در هر صورت می بایست تاریخ هرروز محاسبه شود. اما در روشmax-age header به مرورگر اعلام می کند که این فایل ظرف ۱ هفته از تاریخ امروز منقضی می شود، که ساده تر از تنظیم تاریخ انفضا می باشد.Max-Age برحسب ثانیه اندازه گیری می شود. در زیر چندین تبدیل واحد سریع آورده شده است:۱ روز در ثانیه = ۸۶۴۰۰
    ۱ هفته در ثانیه = ۶۰۴۸۰۰
    ۱ ماه در ثانیه = ۲۶۲۹۰۰۰
    ۱ سال در ثانیه = ۳۱۵۳۶۰۰۰ (به معنای زمان بی نهایت در اینترنت می باشد.)

  • روش Bonus Header عمومی و خصوصی

cache headers هرگز متوقف نمی شوند. گاهی اوقات سرور نیاز دارد بداند که چه زمانی منابع خاصی روی کش ذخیره شده است.

  • Cache-controlعمومی : به این معنی است که نسخه ذخیره شده توسط پروکسی ها و سایر سرورهای میانجی و هر کس می تواند آن را ببیند، ذخیره می شود.
  •  Cache-controlخصوصی : به این معنی است که نحوه نمایش فایل برای کاربران مختلف متفاوت است (مانند صفحه شخصی). مرورگر خصوصی کاربر میتواند آن را ذخیره کند، اما پراکسی نمی تواند.
    Cache-control عدم کش: به این معنی است که فایل نمی بایست ذخیره شود. این مورد برای نتایج جستجو مفید است که در آن URL به همان شکل ظاهر می شود اما محتوای صفحه ممکن است تغییر کند.

نکاتی از فعال سازی کش :

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

ابتدا اطمینان حاصل کنید که روی آپاچی دو مورد mod_headers  و mod_expires  فعال باشد:

… list your current modules…

apachectl -t -D DUMP_MODULES

… enable headers and expires if not in the list above…

a2enmod headers

a2enmod expires

فرمت عمومی برای تنظیم هدر هاست:

–     نوع فایل
–          Header / Expiration to set

منابع/فایل هایی که تغییرات کمتر دارند(تصاویر، پی دی اف و غیره) می بایست مدت زمان بیشتری ذخیره شوند. اگر فایلی نظیر لوگوی شرکت هرگز تغییر نکند، تاریخ انقضای آن را به مدت طولانی نظیر یک سال تعریف نمایید.
فایل لودر (index.html) را ذخیره نکنید، اما مواردی را که به صورت دائمی ذخیره می شوند را روی آن تعریف نمایید. کاربر همیشه فایل لودر را از سرور دریافت می کند، اما ممکن است قبلا منابع و فایل های مورد نظر خود را ذخیره کرده باشد.

نمونه هایی از کدهای cache در آپاچی:

Caching با روش  mod_expires + mod_headers

# Turn on Expires and set default to 0
ExpiresActive On
ExpiresDefault A0
# Set up caching on media files for 1 year (forever?)
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A29030400
Header append Cache-Control "public"
</FilesMatch>
# Set up caching on media files for 1 week
<FilesMatch "\.(gif|jpg|jpeg|png|swf)$">
ExpiresDefault A604800
Header append Cache-Control "public"
</FilesMatch>
# Set up 2 Hour caching on commonly updated files
<FilesMatch "\.(xml|txt|html|js|css)$">
ExpiresDefault A7200
Header append Cache-Control "proxy-revalidate"
</FilesMatch>
# Force no caching for dynamic files
<FilesMatch "\.(php|cgi|pl|htm)$">
ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</FilesMatch>
  • Caching با روش  mod_headers:

 

# ۱ YEAR
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# ۱ WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# ۳ HOUR
<FilesMatch "\.(txt|xml|js|css)$">
Header set Cache-Control "max-age=10800"
</FilesMatch>
# NEVER CACHE
<FilesMatch "\.(html|htm|php|cgi|pl)$">
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
</FilesMatch>

 

  • Caching با روش mod_expires

 

ExpiresActive On
ExpiresDefault A0
# ۱ YEAR
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A29030400
</FilesMatch>
# ۱ WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
ExpiresDefault A604800
</FilesMatch>
# ۳ HOUR
<FilesMatch "\.(txt|xml|js|css)$">
ExpiresDefault A10800"
</FilesMatch>