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

 

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

بیشتر وقت‌ها هم ساده‌ترین کار را می‌کنم: می‌روم یک سایت دیگر ببینم آن یکی بهتر باز می‌شود یا نه. اگر صاحب سایت باشید، این خبر خوبی برایتان نیست. سرعت سایت خیلی وقت‌ها مرز بین یک خرید موفق و یک مشتری عصبانی است؛ بین یک خواننده که می‌ماند و یک کاربر که سریع صفحه را می‌بندد؛ بین یک مشتری وفادار و کسی که به همه می‌گوید «اصلاً سراغ این سایت نرو».

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

بیشتر بخوانید: تاثیر هاست بر روی سئو سایت چیست؟

 

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

۱) بارگذاری تنبل (Lazy Loading)

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

بارگذاری تنبل چیست؟

بارگذاری تنبل یعنی مرورگر فقط زمانی محتوا را لود کند که واقعاً لازم است—بدون اینکه تجربه کاربر خراب شود.

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

نتیجه این می‌شود که بارگذاری تنبل به شکل قابل‌توجهی کم می‌کند:

• وزن کلی صفحه
• زمان بارگذاری
• دانلودهای غیرضروری

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

بارگذاری تنبل چطور کار می‌کند؟

ساده‌ترین توضیح فنی این است:

مرورگر به جای فایل اصلی، اول یک «جایگزین سبک» (placeholder) نمایش می‌دهد تا زمانی که موقع لود فایل اصلی برسد.

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

مرورگرهای جدید تقریباً همه از Lazy Loading پشتیبانی می‌کنند، اما نوع اجرا بسته به نوع محتوا فرق می‌کند. برای حالت‌های ساده، از یک ویژگی در HTML استفاده می‌شود، ولی برای حالت‌های پیچیده‌تر معمولاً کتابخانه‌های جاوااسکریپت به کار می‌آیند.

چطور بارگذاری تنبل را فعال کنیم؟

راه فعال‌کردن Lazy Loading بسته به پلتفرم شما فرق دارد:

• وردپرس: می‌توانید روی Lazy Loading داخلی وردپرس حساب کنید یا با افزونه‌هایی مثل Smush یا WP Rocket حالت پیشرفته‌تری را فعال کنید.
• Wix: به صورت پیش‌فرض Lazy Loading دارد.
• Shopify: خیلی از قالب‌ها به صورت پیش‌فرض دارند. اگر قالب شما ندارد، می‌توانید در کد، به تگ‌های تصویر و iframe ویژگی زیر را اضافه کنید:
  loading=”lazy”
• سایت‌های اختصاصی: در سایر پلتفرم‌ها هم می‌توانید همین ویژگی loading=”lazy” را به تگ‌های img و iframe اضافه کنید و در صورت نیاز از کتابخانه‌هایی مثل Lazysizes کمک بگیرید.

ممکن است لازم باشد این ویژگی را در چند فایل مختلف قالب اضافه کنید. مثلاً در شاپیفای، معمولاً باید دنبال تگ‌های تصویر در فایل‌هایی مثل این‌ها بگردید:

• sections/featured-product.liquid
• sections/product-template.liquid

بهترین نکات برای Lazy Loading

• همه‌چیز را تنبل لود نکنید.
• تصاویر بالای صفحه (مثل لوگو و تصویر اصلی/بنر) باید همان اول لود شوند.
• برای تصاویر پایین صفحه، بهتر است به جای یک کادر خالی، از جایگزین‌های کم‌کیفیت یا محو استفاده کنید تا تجربه کاربر بهتر باشد.
• حتماً تست کنید؛ گاهی باید تنظیم کنید که Lazy Loading دقیقاً از چه نقطه‌ای شروع شود.

وقتی Lazy Loading را درست انجام دادید، نوبت به کشینگ می‌رسد که معمولاً ترکیبش با Lazy Loading نتیجه‌ی خیلی خوبی می‌دهد.

بیشتر بخوانید: نقش هاستینگ در تجربه کاربری (UX) سایت

۲) کشینگ (Caching)

کشینگ را می‌شود شبیه نگه‌داشتن ادویه‌های پرمصرف روی کانتر آشپزخانه تصور کرد: کارتان سریع‌تر می‌شود، بدون اینکه کانتر را با چیزهایی که کم استفاده می‌کنید شلوغ کنید.

کشینگ چیست؟

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

کشینگ در سطح‌های مختلف اتفاق می‌افتد:

• روی دستگاه کاربر
• روی سرور شما
• یا از طریق شبکه توزیع محتوا (CDN)

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

انواع کشینگ

خیلی وقت‌ها کشینگ بدون اینکه شما بدانید فعال است، مثلاً اگر هاست شما آن را پیش‌فرض روشن کرده باشد. شما همچنین می‌توانید کش مرورگر و کش CDN را هم فعال کنید. انواع مهم کشینگ این‌هاست:

نوع کش	چه کاری انجام می‌دهد؟	مزیت اصلی
کش مرورگر (Browser Caching)	فایل‌های ثابت مثل CSS، تصاویر و JavaScript را روی دستگاه کاربر ذخیره می‌کند	وقتی کاربر دوباره برمی‌گردد، لازم نیست این فایل‌ها دوباره دانلود شوند
کش سرور (Server Caching)	از هر صفحه HTML یک نسخه ثابت می‌سازد تا اجرای PHP و کوئری‌های دیتابیس کمتر شود/انجام نشود	زمان پاسخ‌دهی سرور و مصرف CPU کاهش پیدا می‌کند
کش CDN (CDN Caching)	نسخه‌هایی از فایل‌های سایت را روی شبکه‌ای از سرورها در نقاط مختلف دنیا نگه می‌دارد	محتوا از نزدیک‌ترین سرور به کاربر ارسال می‌شود و لود سریع‌تر می‌شود
کش آبجکت/دیتابیس (Object/Database Caching)	نتایج کوئری‌های دیتابیس را در حافظه نگه می‌دارد	محتوای داینامیک سریع‌تر می‌شود چون داده‌ها لازم نیست هر بار دوباره تولید شوند

 

چطور کشینگ را فعال کنیم؟

بسته به پلتفرم شما:

• وردپرس: یک افزونه کش مثل W3 Total Cache یا WP Rocket نصب کنید.
• Wix و Shopify: معمولاً کشینگ داخلی دارند.
• هاست و CDN: در پنل هاستینگ اغلب گزینه‌ای برای روشن‌کردن کش وجود دارد. در Cloudflare هم می‌توانید از داشبورد کش را فعال کنید.

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

بهترین نکات برای کشینگ

• اگر فایلی خیلی کم تغییر می‌کند (مثل CSS یا تصاویر)، زمان کش را طولانی بگذارید (چند هفته یا چند ماه).
• حتی اگر سرور شما خیلی سریع است، استفاده از CDN معمولاً ارزش دارد.
• بعد از آپدیت‌های مهم، کش را پاک کنید تا کاربران تغییرات جدید را ببینند.

بیشتر افزونه‌های کش و CDNها دکمه‌ای مثل «Purge» دارند که با آن می‌توانید کش را دستی پاک کنید.

۳) فشرده‌سازی (Compression)

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

فشرده‌سازی چیست؟

فشرده‌سازی یعنی حجم فایل‌ها کم شود. وقتی فایل کوچک‌تر باشد، سریع‌تر روی شبکه منتقل می‌شود. این شامل فایل‌های متنی (HTML، CSS، JS) و فایل‌های رسانه‌ای (تصاویر و ویدیوها) می‌شود. با فشرده‌سازی، محتوا همان است، فقط «بسته‌بندی» کوچک‌تر است. وقتی فایل باز شود، کیفیت معمولاً خیلی کم یا اصلاً افت محسوس ندارد.

فشرده‌سازی می‌تواند تا حدود ۸۰٪ حجم فایل را کاهش دهد و همین باعث افزایش چشمگیر سرعت دانلود می‌شود.

انواع فشرده‌سازی

• فشرده‌سازی متن: فایل‌های CSS، HTML و JavaScript معمولاً با الگوریتم‌هایی مثل Brotli و GZIP فشرده می‌شوند.
• فشرده‌سازی ویدیو: بهتر است ویدیو را در پلتفرم‌هایی مثل YouTube یا Vimeo میزبانی کنید. اگر خودتان فشرده می‌کنید، سراغ کُدِک‌های جدید مثل VP9 یا H.265 بروید.
• فشرده‌سازی تصویر: معمولاً بدون افت محسوس کیفیت، حجم تصویر کم می‌شود. بعد از آن هم می‌توانید تصاویر را به فرمت‌های جدید مثل WebP یا AVIF تبدیل کنید که نسبت به PNG و JPEG حجم کمتر و کیفیت خوب‌تری دارند.

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

چطور فشرده‌سازی را فعال کنیم؟

• وردپرس: بیشتر افزونه‌های کش، Brotli یا GZIP را فعال می‌کنند. برای تصاویر هم افزونه‌هایی مثل Imagify یا ShortPixel پیشنهاد می‌شود.
• Wix و Shopify: معمولاً فشرده‌سازی متن و تصویر را خودکار انجام می‌دهند.
• سرور و CDN: می‌توانید در تنظیمات Nginx یا Apache فشرده‌سازی را فعال کنید. در Cloudflare هم Brotli وجود دارد، ولی باید آن را روشن کنید.

فشرده‌سازی و کشینگ معمولاً دست به دست هم می‌دهند؛ به همین خاطر در وردپرس اغلب یک افزونه کش خوب، هم کش را درست می‌کند و هم فشرده‌سازی را.

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

• اگر امکانش هست Brotli را به جای GZIP انتخاب کنید.
• برای مرورگرهای قدیمی، نسخه‌های PNG و JPEG را به عنوان جایگزین نگه دارید، چون ممکن است WebP یا AVIF را پشتیبانی نکنند.
• تصاویر و فایل‌ها را آن‌قدر فشرده نکنید که افت کیفیت واضح شود.

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

ترکیب هر سه روش

هر کدام از این سه ستون—Lazy Loading، کشینگ و فشرده‌سازی—مزیت خاص خودش را دارد، اما بیشترین نتیجه زمانی به دست می‌آید که هر سه را با هم اجرا کنید. این‌ها روش‌های امتحان‌شده‌اند و لزوماً لازم نیست برنامه‌نویس باشید تا بتوانید از آن‌ها استفاده کنید.

خبر خوب این است که همین تغییرات نسبتاً سریع می‌تواند سرعت سایت را به شکل جدی بالا ببرد و حتی جایگاه شما را در نتایج گوگل بهتر کند.