طراحی سایت

مهم‌ترین نکات عملی برای افزایش سرعت سایت

گوگل از همان ابتدا هم به سرعت سایت اهمیت زیادی می‌داد. چراکه سرعت مهم‌ترین فاکتور تاثیرگذار روی «تجربه کاربری» است. اما حدودا از سال پیش بود که گوگل در ابزار سرچ کنسول که رابط میان گوگل و صاحبان وب سایت (و سئوکارها) است، گزینه‌ای به اسم Core Web Vitals اضافه کرد. در واقع این بخش به‌شکل اختصاصی به بررسی چند اِلمان مرتبط به سرعت سایت پرداخته و صفحاتی از سایت که سرعت مناسب پایینی دارند را به شما نشان می‌دهد.

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

چه چیزی روی افزایش سرعت سایت تاثیر دارد؟

ببینید سرعت سایت صرفاً از یک یا دو فاکتور تاثیر نمی‌گیرد. در واقع بیشتر از ده‌ها فاکتور وجود دارد که باعث می‌شوند سرعت سایت شما کاهش یا افزایش پیدا کند. از کد نویسی وب سایت گرفته تا محتوایی که روی آن بارگذاری می‌کنید و حتی فضای میزبانی (هاست) آن. در ادامه مقاله یکی‌یکی با این فاکتورهای تاثیرگذار روی عملکرد وب‌سایت آشنا شده و مهم‌ترین اقدامات لازم برای افزایش سرعت سایت را هم به شما توضیح می‌دهم.

چه چیزی روی افزایش سرعت سایت تاثیر دارد؟

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

1_ فضای میزبانی درستی انتخاب کنید

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

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

نکته بعدی که باید به آن دقت کنید این است که در اغلب مواقع شرکت‌های هاستینگی که خدمات ارزان‌قیمتی ارائه می‌کنند هاست‌های کم‌سرعتی دارد. بنابراین بهتر است به سراغ شرکت‌های محبوب بروید که کمی حتی قیمت بالاتر از بازار دارند اما مشتریان‌شان به شدت از آنها راضی هستند.

راهکار عملی

افزایش سرعت لود سایت

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

2_ Cashe را فعال کنید

ببینید، بعضی از مخاطبانی که به وب سایت شما سر می‌زنند قبلاً هم یک بار وارد آن شد‌ه‌اند. به همین دلیل فعال بودن قابلیت کش به عنوان یکی از مهم‌ترین اقدامات برای بهینه‌سازی تجربه کاربری و افزایش سرعت سایت، مخصوصا برای کاربران بازگشتی (Return Visitor) در نظر گرفته می‌شود.

در واقع کش یا Cache قابلیتی است که وقتی آن را روی سایت‌تان فعال کنید، بخش‌هایی از محتوای سایت و کدهای CSS و JavaScript و HTML بعد از ورود اول کاربر به سایت شما، روی مرورگر رایانه یا تلفن همراهش ذخیره می‌شوند. به این ترتیب در دفعات بعدی که کاربر وارد سایت شما شد دیگر نیاز ندارد این فایل‌ها را دانلود کند و از روی خود مرورگرش فایل‌ها به او نمایش داده می‌شود. این موضوع باعث می‌شود دیگر زمانی برای دانلود فایل‌های اضافه، صرف نشده و عملکرد و سرعت سایت شما روی مرورگر این کاربران بالاتر برود.

راهکار عملی

برای فعال کردن کش، می‌توانید هم به پشتیبان هاست‌تان پیام بدهید، هم در اقدامی بهتر از افزونه‌های فعال‌سازی کش مثل w3 total cache و wp super cache کمک بگیرید. جوملا و دروپال هم افزونه‌های اختصاصی خودشان را دارند.

3_ Gzip Compression

بخش زیادی از محتوای یک صفحه که باعث کاهش سرعتش می‌شود کدهای آن هستند. کدهایی مثل CSS و JavaScript و HTML. حالا اگر شما بتوانید با هر تکنیکی از حجم و اندازه این کدها کم کنید به افزایش سرعت سایت کمک کرده‌اید.

یکی از بهترین تکنیک‌ها برای کاهش حجم یک صفحه از طریق کاهش کدها، فشرده کردن آنها به روش Gzip است. در این تکنیک عملاً شما کاری می‌کنید که فضاهای خالی و کد‌های غیر کاربردی و بی‌مصرف از میان کدهای صفحه‌تان حذف شوند. به این ترتیب ممکن است بین 30 الی ۷۰ درصد از حجم هر صفحه کاهش پیدا کند. البته یک نکته مهم وجود دارد. اینکه بعد از انجام فشرده‌سازی حتماً قابلیت‌های سایت و همینطور ظاهر صفحات مختلف را بررسی کنید. چرا که گاهاً انجام این فشرده‌سازی باعث برهم ریختن کدهای سایت و اختلال در ظاهر و عملکردش می‌شود.

راهکار عملی

برای سایت‌های وردپرسی می‌توانید برای وردپرس از افزونه WordPress Gzip Compression، برای جوملا از Gzip Compression و برای دروپال از CSS GZip کمک بگیرید.

4_ سایت را سنگین نکنید

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

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

راه های افزایش سرعت سایت

راهکار عملی

اگر می‌خواهید بدانید که کدام افزونه‌ها بیشتر از همه باعث کاهش سرعت سایت شده، یکی‌یکی آنها را غیرفعال کرده و هر بار بعد از غیر فعال کردن افزونه، سرعت سایت را به کمک یکی از ابزارهای بررسی سرعت سایت مثل PageSpeed Insights بسنجید.

5_ قابلیت Keep-Alive را فعال کنید

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

با توجه به این توضیحات احتمالاً متوجه شدید که بالا رفتن تعداد درخواست‌ها باعث کاهش سرعت سایت می‌شود. حالا یکی از قابلیت‌هایی که می‌تواند به شما در کاهش این درخواست‌ها و در نتیجه افزایش عملکرد سایت کمک کند، قابلیتی به اسم Keep-Alive است. Keep-Alive در واقع به کمک یک‌سری عملیات‌های نسبتاً پیچیده باعث می‌شود وب سایت با ارسال درخواست‌های کم‌تر، به نمایش دربیاید.

راهکار عملی

بهترین راهکار برای فعال کردن این قابلیت، کمک گرفتن از یک متخصص است. راهکار بعدی کمک گرفتن از پشتیبان هاست است! در نهایت اگر حاضرید ریسک کنید، کد پایین را به فایلی با اسم htaccess. که در هاست شما قرار گرفته، اضافه کنید:

Header set Connection keep-alive

6_ کدها Minify را کنید

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

در تکنیک Minify، این بار شما فایل کدهای مختلف سایت مثل CSS و HTML را با هم ادغام کرده و در یک فایل قرار می‌دهید. به این ترتیب عملا هم تعداد فایل‌هایی که روی سرور وجود دارد کم‌تر شده و هم درخواست‌هایی که مرورگر به سرور ارسال می‌کند.

راهکار عملی

در وردپرس، افزونه‌های جامع افزایش سرعت سایت مثل wp-rocket قابلیت Minify کردن را به شما ارائه می‌کنند. اما خب اگر خواستید می‌توانید از افزونه Better WordPress Minify کمک بگیرید.

7_ مراقب عکس‌ها باشید

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

  • اول از همه برای ایجاد پس‌زمینه در سایت، تا جای ممکن به جای عکس از کدهای CSS استفاده کنید.
  • در درجه دوم، از این به بعد به کمک ابزارهایی مثل فتوشاپ یا سایت‌های کاهش حجم تصاویر مثل compressjpeg، اندازه عکس‌ها را تا جای ممکن بهینه کنید.
  • در نهایت هم اینکه تمامی تصاویر قبلی سایت را از نظر حجمی بهینه کنید.

راهکار عملی

برای بهینه کردن تصاویر قبلی، 2 راهکار دارید:

در راهکار اول افزونه‌هایی مثل reSmush.it یا EWWW Image Optimizer یا Compress JPEG & PNG images هستند. این افزونه‌ها به طور خودکار تصاویر قبلیِ روی سرور را از نظر حجمی بهینه می‌کنند.

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

8_ LazyLoad را فعال کنید

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

راهکار عملی

برای فعال کردن این قابلیت افزونه‌های زیادی وجود دارد. از جمله:

  • jQuery Image Lazy Load WP
  • Lazy Load
  • یا BJ Lazy Load

همینطور برای جوملا افزونه‌هایی مثل Lazy Load for Joomla وجود دارند.

9_ CDN را فعال کنید

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

روش های افزایش سرعت سایت

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

راهکار عملی

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

10_ Hotlink Protection را فعال کنید

ببینید، بعضی وب سایت‌ها صرفا محتوای‌شان را از دیگر سایت‌های سطح وب کپی می‌کنند. در ادامه گاها سایت‌های مورد نظر حتی زحمت بارگذاری تصاویر در هاست خودشان را هم نکشیده و آدرس تصاویر را از هاست شما در سایت خودشان می‌گذارند. (اگر لینک تصویری که در سایت شماست را در صفحه خودشان بگذارند، تصویر از هاست شما در سایت آنها نمایش داده می‌شود!) به این ترتیب با افزایش بازدید صفحات آنها، به هاست شما فشار می‌آید.

حالا Hotlink Protection در واقع قابلیتی است که به سایت‌ها اجازه انجام چنین کاری را نداده و عملا جلوی آنها در دزدی از منابع سرور شما را می‌گیرد.

راهکار عملی

با اینکه به نظر من قابلیت Hotlink Protection این روزها خیلی کاربردی نیست، در هر حال برای فعال کردن آن کافی است به پشتیبان هاست‌تان پیام داده و از او راهنمایی بخواهید.

11_ پایگاه داده سایت را بهینه کنید

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

راهکار عملی

برای بهینه کردن پایگاه داده، 2 انتخاب دارید. اول از همه می‌توانید به سراغ افزونه‌های این حوزه بروید. مثلا برای وردپرس WP Optimize و برای دروپال OptimizeDB و برای جوملا هم Optimize Your Table.

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

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

12_ ویدیو را در هاست بارگذاری نکنید

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

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

راهکار عملی

به طور کلی 2 راهکار وجود دارد:

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

راهکار دوم و بهتر هم این است که به طور کلی یک هاست دانلود یا هاست مخصوص ویدیو اجاره کرده، ویدیوها را در آن بارگذاری و لینکش را در سایت خودتان قرار بدهید.

13_ بارگذاری کدهای JS عقب بیندازید!

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

راهکار عملی

اغلب افزونه‌های افزایش سرعت سایت مثل Speed Booster Pack و افزونه راکت، این قابلیت را در اختیار شما گذاشته‌اند.

به سرعت نسخه موبایل توجه کنید!

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

کلام آخر

خب به انتهای مقاله رسیدیم. در این مقاله با بیشتر از 10 تکنیک بهبود سایت و بهبود عملکرد سایت آشنا شدیم. در آخر اگر سوال و نظری داشتید در بخش نظرات منتظر شما عزیزان هستم. در ضمن اگر از سر و کله زدن با مشکلات فنی خسته شده و ترجیح می‌دهید سیستم مدیریت محتوایی داشته باشید که خیال‌تان را بابت سرعت سایت، مسائل فنی، هاست و… راحت کند، حتما نگاهی به تست 7 روزه فروشگاه ساز سیتی سایت داشته باشید. 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *