بهینه سازی کدهای سایت … مزایا ، روش ها ، سختی ها و تاثیر آن بر سرعت سایت

بهینه سازی کدهای سایت می‌تونه باعث افزایش سرعت سایت وردپرس بشه؟ به نظرتون همچین چیزی مهمه؟ خب حالا فرض کنیم که این یه مورد مهم نیست! فقط با یک ثانیه تاخیر در زمان لود صفحه یعنی:

• ۱۱% بازدید کمتر از صفحه
• ۱۶% کاهش رضایت مشتری
• ۷% ضرر در نرخ تیدیل یا Conversion Rate

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

تاثیر بهینه سازی کدهای سایت روی نرخ تبدیل

سایتی که سرعت کمی داشته باشه باعث کشتن تبدیل‌ها یا Conversion میشه! و سرعت کم سایت ناشی از بهینه نکردن کدهای سایت شماست. در حقیقت ۴۷% از مصرف کنندگان انتظار دارن وب سایت ها سر دو ثانیه یا حتی کمتر بارگذاری بشن!

اگه بارگذاری سایت شما بیشتر از سه ثانیه طول بکشه تقریباً نیمی از بازدیدکنندگان خودتون رو از دست میدین. این یه ضربه بزرگ برای تبدیل های احتمالی شماست و برای بازدید کنندگانی که وب گردی می‌کنند، سرعت آهسته سایت شما می‌تونه مانع از برگشتن دوباره اون‌ها به سایت شما در آینده بشه، جالبه بدونین که ۷۹% از افراد گفتن که هرگز به سایتی که عملکرد و سرعت ضعیفی داشته برنخواهند گشت!

سایت Walmart

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

پس با این حساب هرچی سایت سریع‌تر باشه درآمد بیشتری سراغتون میاد! Walmart در پایان بهینه سازی سرعت سایت خود این نتایج رو ارائه داد:

• برای هر ثانیه ثبات سرعت، افزایش ۲ درصدی نرخ تبدیل رو تجربه کردیم.
• به ازای هر ۱۰۰ میلی ثانیه بهبود سرعت، افزایش یک درصدی درآمد داشتیم.

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

پس با این حساب حتی یک ثانیه زمان کمتر می‌تونه باعث بهبود در نرخ تبدیل و درآمد شما بشه!!

تاثیر سرعت سایت بر Visibility سایت

حالا که گوگل موقع رتبه بندی سایت ها، سرعت رو یه مورد مهم قرار میده، پس بارگذاری شما هم می‌تونه روی دسترسی کاربران به سایت شما تاثیر داشته باشه.

این امر به ویژه در حال حاضر خیلی مهمه چون که اگه بهش بی‌توجهی بشه اول از همه جایگاه خوب برای نمایش داده شدن تو نتایج موبایل رو از دست میدین (از دسامبر سال ۲۰۱۷ موتور جستجو رتبه بندی تمام نتایج جستجو رو براساس نسخه‌های موبایل صفحات آغاز کرده).

جستجو با استفاده از موبایل برای اولین بار در سال ۲۰۱۵ از تعداد جستجوی دسکتاپ پیشی گرفت و از اون روز تا به حال مقدارش در حال افزایشه!

در واقع به نفع گوگل است که تو نتایج جستجوی خودش سایت هایی که نسخه موبایل دارن رو به کاربر تلفن همراه ارائه بده. Google نمیخواد کاربران رو به سمت سایت هایی هدایت کنه که درست بارگیری نمیشن و یا عملکرد خوبی تو دستگاه های خودشون نداشتن.

اهمیت سرعت سایت در تلفن همراه

این طور که معلومه سرعت سایت تاثیر زیادی در تجربه کاربر داره، البته دیگه فقط تجربه کاربر دسکتاپ مهم نیست، پس اگه یه سایت سرعت خوبی در دسکتاپ داشته باشه ولی در عوض نسخه موبایلش از سرعت کمی برخودار باشه یعنی گوگل برای این سایت رتبه خوبی در نظر نمیگیره!

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

چرا سرعت سایت من کمه؟

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

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

زمان بارگیری مناسب برای سایت چند ثانیه‌ است؟

قبل از شروع کار روی سرعت سایت خودتون، این ایده خوبیه که یه هدفی برای جایی که دلتون می‌خواد بهش برسین داشته باشین!

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

در تجزیه و تحلیل ۹,۰۰,۰۰۰ صفحه فرود آگهی تلفن همراه که از ۱۲۶ کشور مختلف بودند، گوگل متوجه شد که ۷۰ درصد از صفحات مورد بررسی، تقریباً هفت ثانیه طول میکشه تا محتوای تصویری شون نمایش داده بشه.

از بین تمامی کسب و کارهایی که تو این تحقیق دخیل بودن هیچکدومشون جتی به سه ثانیه نزدیک هم نشده بودند!

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

این به این معنیه که صاحبان سایت به طور کلی کار زیادی برای عملکرد هرچه بهتر سایت هاشون از نظر گوگل دارن.

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

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

افزایش سرعت سایت توسط بهینه سازی کدهای سایت

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

تو این پست قراره به نکاتی که با استفاده از بهینه سازی کدهای سایت و همچنین بهینه سازی فایل های سایت باعث کاهش زمان بارگیری صفحات و بهبود عملکرد سایت میشه بپردازیم و اصلاً فکر نکنین تعداد نکته‌ها زیاده 🙂

درسته که همه این نکات می‌تونه به بهبود سرعت سایت شما کمک کنه ولی اصلاً لازم نیست همه اون‌ها رو انجام بدین. پس بیایین شروع کنیم:

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

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

طبق گفته یاهو، ۸۰ درصد از زمان بارگیری یک صفحه وب برای بارگیری قسمت‌های مختلفی مثل تصاویر و اسکریپت‌ها Scripts
صرف میشه.

درخواست‌های HTTP یا HTTP Requests برای هریک از این عناصر ساخته میشه، بنابراین هرچی مولفه یه صفحه بیشتر باشه مدت زمان بیشتری برای بارگیری لازم داره.

اولین قدم برای بهینه سازی کدهای سایت مشخص کردن تعداد درخواست‌های HTTP که سایت تون ایجاد میکنه. اگه از مرورگر گوگل کروم استفاده می‌کنین می‌تونین با استفاده از Developer Tools مرورگر تعداد درخواست‌های HTTP که سایت ایجاد میکنه رو ببینین.

کاهش تعداد درخواست باعث افزایش سرعت بارگیری سایت میشه. البته حواستون رو جمع کنین که فایل‌های اشتباهی رو پاک نکنین!!

۲. بهینه سازی فایل های سایت

حالا که میدونین سایت شما چندتا درخواست داره، می‌تونین برای کاهش این درخواست‌ها کار کنین. بهترین مکان برای شروع کار، پرونده‌های CSS , HTML و JavaScript است.

این پرونده‌ها خیلی مهمن چون که ظاهر سایت شما رو تعیین می‌کنن. اون‌ها همچنین به تعداد درخواست‌های سایت شما با هر بار که کاربر از اون بازدید میکنه، اضافه میکنه.

می‌تونین با کوچیک کردن و ترکیب کردن فایل های سایت، تعدادشون رو کاهش بدین. این کار باعث کاهش اندازه هر پرونده و همچنین تعداد کل پرونده‌ها میشه.

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

ترکیب فایل هم دقیقاً از اسمش مشخصه چیه، مثلاً میتونین فایل‌های CSS و JavaScript رو تو یه فایل ترکیب کنین.

کوچک سازی و ترکیب فایل برای بهینه سازی کد سایت

روش‌های زیادی برای کوچیک و یا ترکیب کردن فایل‌ها وجود داره و اگه سایت شما با وردپرس اجرا میشه، افزونه‌هایی مثل WP Rocket این روند رو خیلی ساده براتون انجام میده.

هرچی تعداد عناصر موجود تو صفحه کمتر باشه، مرورگر به تعداد درخواست‌های HTTP کمتری برای بارگیری نیاز داره پس سرعت سایت شما بهینه میشه!

۳. استفاده از بارگذاری غیرهمزمان برای بارگذاری فایل‌های CSS و JavaScript

بعد از کوچیک کردن و ترکیب کردن فایل‌های CSS و JavaScript می‌تونین نحوه بارگذاری اون‌ها رو تو صفحات خودتون بهینه کنین.

اسکریپت‌هایی مثل CSS و JavaScript رو می‌تونین به دوتا روش مختلف بارگذاری کنین: همزمان و غیرهمزمان

اگه بارگذاری اون‌ها همزمان باشه، یعنی فقط هر کدوم رو به ترتیبی که تو صفحه هستند بارگیری می‌کنین. و اگه غیرهمزمان باشه یعنی بعضی از اون‌ها ممکنه تو یه زمان با هم بارگیری بشن.

بارگذاری فایل‌ها به طور غیرهمزمان میتونه باعث سریع‌تر شدن صفحات شما بشه چون که وقتی یه مرورگر یه صفحه رو بارگیری میکنه، از بالا به پایین حرکت میکنه و اگه تو طول حرکتش به یه فایل اسکریپتی برخورد که شما به طور همزمان تو سایت بارگذاری کرده بودین، باید صبر کنه تا اول این فایل دانلود بشه و بعد بره سراغ فایل بعدی ولی برای بارگیری غیرهمزمان به این صورت نیست و می‌تونه سایر عناصر صفحه رو هم همون موقع بارگیری کنه!

۴. بارگذاری جاوا اسکریپت رو به تعویق بندازین

یکی از راه‌های بهینه سازی کدهای سایت اینه که بارگذاری فایل‌های بزرگ رو تا زمانی که فایل‌های کوچیکتر بارگذاری نشدن به تعویق بندازین. اگه این کار رو بکنین مطمئن میشین که عناصر دیگه‌ای که تو سایت شما هستن بدون تاخیر بارگذاری میشن.

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

۵. زمان رو برای دریافت اولین بایت TTFB به حداقل برسونین

زمان بایت اول یا TTFB مدت زمانیه که یه مرورگر باید منتظر بمونه تا اولین بایت داده خودش رو از سرور دریافت کنه، زمان TTFB که گوگل توصیه میکنه، کمتر از ۲۰۰ms است.

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

وقتی که یه کاربر از سایت شما بازدید میکنه مرورگر اون‌ها درخواست HTTP رو به سرور میزبان ارسال میکنه، سه مرحله وجود داره که باید بین درخواست اولیه و اولین بایت داده اتفاق بیفته:

• جستجوی DNS
• پردازش سرور
• واکنش

می‌تونین با استفاده از Developer Tools کروم یا یه ابزار شخص ثالث، ببینین که این پروسه چقدر برای سایت تون طول میکشه.

اگه از Developer Tools کروم استفاده میکنین، مهمه که یادتون باشه، زمان پاسخگویی می‌تونه تحت تاثیر اتصال اینترنت شما هم باشه، پس اگه سرعت اینترنت تون کمتر بود، پاسخ سرور هم کندتر ظاهر میشه.

6. فشرده سازی فایل‌ها برای بهینه سازی کدهای سایت

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

صفحاتی که تعداد تصاویر زیاد و عناصر دیگه‌ای دارن می‌تونن بیشتر از ۱۰۰ کیلو بایت حجمشون باشه پس سرعت بارگیری آهسته‌ای دارن. اما می‌تونین با فشرده سازی اون‌ها سرعت بارگیری رو بهبود ببخشین! دز واقع فشرده سازی فایل هم نوعی بهینه سازی فایل های سایت به حساب میاد.