گاهی اوقات هرچقدر هم که روی سرعت سایت کار می‌کنیم و تمام تیک‌های سبز را در افزونه‌های کشینگ فعال می‌کنیم، باز هم ابزارهای تست سرعت خطاهای مربوط به LCP (بزرگ‌ترین محتوای صفحه) را با رنگ قرمز به ما نشان می‌دهند. به عنوان یک کارشناس سئو، دیدن این وضعیت کلافه‌کننده است؛ مخصوصاً وقتی می‌دانیم ابزار قدرتمندی مثل WP Rocket روی سایت نصب است و انتظار داریم همه چیز با حداکثر سرعت بارگذاری شود.

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

شمشیر دو لبه‌ای به نام Lazy Load

یکی از امکانات بسیار جذاب و کاربردی در بحث سرعت سایت، قابلیت Lazy Load یا بارگذاری تنبل است. منطق این ویژگی بسیار ساده و هوشمندانه طراحی شده است: چرا باید تصاویری که در انتهای صفحه قرار دارند و کاربر هنوز به آن‌ها اسکرول نکرده است، در همان لحظه اول و همگام با کدهای اصلی سایت لود شوند؟

بارگذاری تنبل به سایت شما کمک می‌کند تا هم اینترنت کاربر بی‌دلیل مصرف نشود، هم منابع سرور درگیر درخواست‌های غیرضروری نشود و هم سرعت اولیه سایت بالا برود. افزونه راکت این کار را به صورت خودکار برای تمام تصاویر، ویدیوها و حتی عکس‌های پس‌زمینه انجام می‌دهد. همه چیز در ظاهر عالی به نظر می‌رسد، اما چالش اصلی دقیقاً در نیمه بالای صفحه (Above the Fold) خودش را نشان می‌دهد.

وقتی LCP در تله بارگذاری تنبل می‌افتد

فرض کنید یک کاربر وارد صفحه اصلی سایت شما می‌شود. اولین چیزی که در نمایشگر او قرار می‌گیرد، لوگوی سایت و یک بنر بزرگ (Hero Image) یا یک اسلایدر است. این تصاویر در واقع همان المان‌هایی هستند که شاخص LCP صفحه شما را می‌سازند.

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

استراتژی‌های خروج از بارگذاری تنبل

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

  • استفاده از آدرس دقیق فایل (URL): اگر تصویر بنر اول صفحه یا لوگوی شما همیشه ثابت است، می‌توانید لینک مستقیم آن را کپی کرده و در بخش تنظیمات راکت، در کادر مربوط به استثنائات قرار دهید.
  • استفاده از کلاس‌های اختصاصی (CSS Class): راه حرفه‌ای‌تر و منعطف‌تر این است که کلاس تصویر مورد نظر را به راکت معرفی کنید. مثلاً اگر صفحات لندینگ را با المنتور طراحی می‌کنید، می‌توانید یک کلاس اختصاصی مانند no-lazy به تصویر بنر اختصاص دهید و سپس به راکت بگویید هر عکسی که این کلاس را داشت، بلافاصله لود کند.
  • کدنویسی در قالب‌های اختصاصی: اگر در حال توسعه یک قالب اختصاصی هستید، می‌توانید مستقیماً در توابعی مثل get_attachment_image، ویژگی‌هایی (Attributes) مانند data-no-lazy یا skip-lazy را به عکس‌های بخش بالایی سایت اضافه کنید تا مرورگر از همان ابتدا تکلیف خودش را بداند.

یک هشدار مهم: هرگز کلاس‌های عمومی وردپرس (مثل attachment-full یا size-full) را در لیست استثنائات راکت قرار ندهید! با این اشتباه محاسباتی، ناگهان حجم عظیمی از تصاویر سایت شما از حالت لیزی‌لود خارج می‌شوند و تمام زحماتی که برای بهینه‌سازی سرعت کشیده‌اید، خنثی خواهد شد.

قهرمان سنگین‌وزن: فرمت و حجم تصاویر

حالا فرض کنیم مشکل بارگذاری تنبل را به صورت اصولی حل کردیم و تصویر شاخص ما بلافاصله لود می‌شود. آیا کار تمام است؟ قطعاً خیر.

گاهی اوقات عکسی که در بنر بالای صفحه قرار گرفته، بیش از ۲۰۰ کیلوبایت حجم دارد. بارگذاری چنین فایل سنگینی، حتی در بهترین حالت‌های سرور هم زمان‌بر است. در دنیای امروز وب، استفاده از فرمت‌های قدیمی و سنگین برای تصاویر بزرگ، یک اشتباه استراتژیک است.

با استفاده از ابزارهای آنلاین قدرتمند (مثل CloudConvert، FreeConvert یا TinyPNG) می‌توانید یک تصویر ۲۰۰ کیلوبایتی با فرمت قدیمی را به فرمت‌های مدرنی مثل WebP تبدیل کنید و حجم آن را به راحتی تا ۱۱ کیلوبایت کاهش دهید. این یعنی یک کاهش ۹۵ درصدی در حجم فایل، بدون اینکه افت کیفیت محسوسی برای چشم کاربر اتفاق بیفتد! همین تغییر به ظاهر کوچک، می‌تواند زمان LCP صفحه را به طرز چشم‌گیری کاهش دهد.

افزونه‌های بهینه‌ساز خودکار؛ کمک‌کننده یا دردسرساز؟

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

یک راهکار عملی و بدون افزونه: به جای درگیر شدن با افزونه‌های سنگین، می‌توانید وارد هاست خود شوید و پوشه تصاویر (uploads در مسیر wp-content) را دانلود کنید. تمام عکس‌ها را با ابزارهای آنلاین به صورت دسته‌جمعی فشرده‌سازی کنید. برای جلوگیری از شکستن لینک‌ها و ایجاد خطای ۴۰۴ در وردپرس، نیازی به تغییر نام یا تغییر پسوند در ساختار فایل‌ها نیست. کافی است نسخه‌های فشرده‌شده را با همان نام‌ها در هاست خود جایگزین کنید. با همین تکنیک دستی و ساده، بدون اضافه شدن حتی یک خط کد اضافی به سایت، سرعت بارگذاری رسانه‌های شما دگرگون خواهد شد.

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