کاهش زمان LCP در وردپرس و آزمون Paint را با موفقیت پشت سر بگذارید

در این راهنمای جامع، عوامل اصلی افزایش نمرهٔ LCP در وردپرس را توضیح داده و راهکارهای اصلاح آن را ارائه می‌کنیم. شما یاد خواهید گرفت که چگونه عنصر LCP خود را شناسایی کنید، تصاویر را بهینه‌سازی نمایید، تأخیرهای ارائه‌دهنده (rendering delays) را حذف کنید، عملکرد سرور را بهبود بخشید و از ابزارهای مناسب برای افزایش سرعت بارگذاری وب‌سایت خود استفاده نمایید.

LCP (بزرگ‌ترین نقاشی محتوایی) معیاری است که بیشتر افراد هنگام فکر کردن به «سرعت صفحه» به ذهن آن‌ها می‌رسد. این معیار لحظه‌ای را نشان می‌دهد که بزرگ‌ترین عنصر قابل مشاهده روی صفحه — معمولاً تصویر اصلی (hero image)، تصویر ویژه یا بلوکی بزرگ از متن — به‌طور کامل در صفحه ظاهر می‌شود.

وب‌سایت‌های وردپرس اغلب با مشکلات LCP مواجه می‌شوند؛ نه به این دلیل که خود وردپرس کند است، بلکه به دلیل نحوه ساخت محتوای اصلی: این محتوا اغلب در پس‌زمینه‌های CSS پنهان شده، در اسلایدرها جاسازی شده و منتظر اجرای جاوااسکریپت می‌ماند، یا به‌صورت تصادفی با قابلیت lazy-load فعال شده و یا توسط اسکریپت‌هایی که بارگذاری صفحه را مسدود می‌کنند، به تأخیر افتاده است.

خبر خوب این است که اصلاحات LCP از جمله مؤثرترین و قابل‌پیش‌بینی‌ترین راهکارهای بهینه‌سازی عملکرد وب محسوب می‌شوند.

مرحله ۱: شناسایی دقیق عنصر LCP

ابزار توسعه‌دهنده کروم (Chrome DevTools) را باز کنید، به تب Performance بروید، بارگذاری صفحه را ضبط کنید و در نوار زمانی به دنبال نشانگر LCP باشید. یا صفحه خود را در PageSpeed Insights اجرا کنید؛ این ابزار در بخش «عنصر بزرگ‌ترین نقاشی محتوایی» (Largest Contentful Paint element) در بخش تشخیصی، دقیقاً عنصر مربوطه را نام‌گذاری می‌کند.

این مرحله اهمیت بیشتری دارد نسبت به آنچه بسیاری تصور می‌کنند. عنصر LCP شما اغلب آن چیزی نیست که حدس می‌زنید؛ ممکن است یک فضای تبلیغاتی بالای خط تا (above the fold)، تصویر اسلایدری که عمیقاً در کد سازنده صفحه (page builder) جاسازی شده یا حتی بلوکی از متن سرتیتر به‌جای یک تصویر باشد. اصلاح عنصر اشتباه، زمان شما را هدر داده و نمرهٔ شما را بهبود نمی‌بخشد.

برای تست‌های پایدار در طول اعمال تغییرات، به‌جای اتکا به داده‌های متغیر زنده، این دستور را از خط فرمان اجرا کنید:

<span style="font-size: 12pt; color: #000000;">npx lighthouse <URL> –only-categories=performance –form-factor=mobile</span>

مرحله ۲: درک «اسکنر preload»

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

۱. تصویر اصلی (hero image) به‌صورت پس‌زمینهٔ CSS و نه تگ `<img>` تعریف شده است. تگ `<img>` بلافاصله شناسایی شده و برای بارگذاری در صف قرار می‌گیرد؛ اما تصویر پس‌زمینهٔ CSS تا زمانی که صفحه‌استایل بارگذاری و خوانده شود، حتی وجودش نیز شناخته نمی‌شود. این تأخیر اضافی قبل از آغاز بارگذاری، یکی از شایع‌ترین دلایل عملکرد ضعیف بخش‌های اصلی در معیار LCP است.

۲. تصویر اصلی با ویژگی `loading=”lazy”` علامت‌گذاری شده است. lazy loading برای تصاویری که در بخش پایین‌تر صفحه قرار دارند بسیار مفید است، اما اعمال آن بر روی تصویر اصلی بالای خط تا (above-the-fold) به مرورگر این پیام را می‌دهد که «این تصویر اولویت ندارد» — در حالی که دقیقاً برعکس این موضوع مطلوب است.

در حقیقت، توسعه‌دهندگان خود وردپرس کشف کرده‌اند که اعمال خودکار lazy loading بر روی اولین تصویر صفحه، نمرهٔ LCP را حدود ۷٪ کاهش می‌دهد؛ به همین دلیل وردپرس اکنون به‌طور پیش‌فرض اولین تصویر را از این قاعده مستثنی می‌کند. اگر قالب یا سازنده صفحه شما این رفتار را بازنویسی کرده باشد، بررسی مستقیم آن ضروری است.

مرحله ۳: preload دستی تصویر LCP

اگر عنصر LCP شما واقعاً برای مرورگر دشوار است که به‌صورت خودکار آن را پیدا کند — مثلاً به‌صورت پس‌زمینهٔ CSS یا تصویری که توسط جاوااسکریپت درون یک اسلایدر اضافه شده است — می‌توانید به‌صورت دستی آن را اعلام کنید:

<span style="font-size: 12pt; color: #000000;">`<link rel=”preload” as=”image” href=”/wp-content/uploads/hero.webp” fetchpriority=”high”>`</span>

در وردپرس، این کد را از طریق تابع قالب اضافه کنید:

<span style="font-size: 12pt; color: #000000;">function add_lcp_preload() {</span>

<span style="font-size: 12pt; color: #000000;">echo '<link rel=”preload” as=”image” href=”' . esc_url( get_theme_mod( 'hero_image_url' ) ) . '” fetchpriority=”high”>';</span>

<span style="font-size: 12pt; color: #000000;">}</span>

<span style="font-size: 12pt; color: #000000;">add_action( 'wp_head', 'add_lcp_preload', 1 );</span>

هشدار مهم: از ویژگی `fetchpriority=”high”` با احتیاط استفاده کنید. این ویژگی صرفاً برای نشان‌دادن اهمیت بالاتر یک منبع طراحی شده است؛ اگر تعداد زیادی تصویر را با این ویژگی علامت‌گذاری کنید، مرورگر دیگر نمی‌تواند تشخیص دهد کدام یک واقعاً حیاتی است.

نکتهٔ ظریف‌تر دیگری نیز وجود دارد: اگر قالب شما CSS حیاتی یا اسکریپت‌های جاوااسکریپت مسدودکننده را در بخش `<head>` بارگذاری کند، تصویر اصلی که به‌صورت aggresive preload شده است، ممکن است برای استفاده از پهنای باند با صفحه‌استایل رقابت کند. در نتیجه، بایت‌های تصویر قبل از آنکه مرورگر محل دقیق نمایش آن را در صفحه بداند، بارگذاری می‌شوند. راه‌حل این نیست که از preload صرف‌نظر کنید، بلکه این است که CSS حیاتی خود را نیز اصلاح کنید (به مرحله ۵ مراجعه کنید)، تا این دو منبع با یکدیگر رقابت نکنند.

مرحله ۴: اصلاح خود تصویر

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

• از فرمت‌های مدرن استفاده کنید. تصاویر اصلی را به WebP یا AVIF تبدیل کنید. یک تصویر اصلی ۲ مگابایتی اغلب می‌تواند بدون افت قابل‌مشاهدهٔ کیفیت به زیر ۱۵۰ کیلوبایت کاهش یابد؛ و این تنها تغییر می‌تواند زمان LCP را از ۳–۴ ثانیه به زیر ۱٫۵ ثانیه کاهش دهد. برای بررسی عمیق‌تر WebP و دلایل تأثیر مثبت آن بر عملکرد وب‌سایت، راهنمای ما را مطالعه کنید: «چرا WebP هوشمندانه‌ترین فرمت تصویر برای وب‌سایت‌های سریع‌تر است؟».

• اندازهٔ تصویر را با محل نمایش آن تطبیق دهید. تصویری با عرض ۴۰۰۰ پیکسلی را در ظرفی با عرض ۱۲۰۰ پیکسل آپلود نکنید و اجازه ندهید CSS آن را کوچک کند. آن را پیش از آپلود مقیاس‌بندی کنید.

• از ویژگی `srcset` استفاده کنید تا بازدیدکنندگان موبایل تصویر کوچک‌تری دریافت کنند و نه نسخهٔ تمام‌عرض دسکتاپ.

• تصاویر کوچک را بزرگ‌نمایی نکنید. کشیدن یک تصویر کوچک به اندازهٔ بزرگ‌تر، کیفیت آن را بدتر می‌کند و هیچ مزیتی ندارد.

اغلب افزونه‌های مدیریت تصویر (مانند ShortPixel، Imagify و ابزارهای مشابه) به‌طور خودکار در زمان آپلود، تبدیل فرمت و فشرده‌سازی را انجام می‌دهند؛ اما همچنان بررسی دستی تصویر اصلی صفحه اصلی و تصاویر اولیه صفحات ورودی (landing pages) ضروری است، چرا که این تصاویر بیشترین تأثیر را بر نمرات اصلی عملکرد وب (Core Web Vitals) دارند.

مرحله ۵: پاک‌سازی مسیر ارائه — رفع CSS و جاوااسکریپت مسدودکننده

حتی یک تصویر کاملاً preload شده و بهینه‌شده نیز در صورتی که مرورگر در حال تجزیه و تحلیل CSS یا اجرای جاوااسکریپت باشد، همچنان با تأخیر نمایش داده می‌شود. این توالی — تبدیل HTML، CSS و JS به پیکسل‌های واقعی روی صفحه — «مسیر ارائهٔ حیاتی» (critical rendering path) نامیده می‌شود و اغلب مانع اصلی عملکرد است، حتی زمانی که خود تصویر به‌تنهایی مشکلی نداشته باشد.

• CSS حیاتی را درون‌خطی (inline) کنید. فقط CSS مورد نیاز برای محتوای بالای خط تا را استخراج کرده و مستقیماً در بخش `<head>` قرار دهید؛ سپس بقیهٔ صفحه‌استایل را بعداً بارگذاری کنید. افزونه‌هایی مانند WP Rocket و FlyingPress این کار را به‌صورت خودکار انجام می‌دهند.

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

• CSS و JS خود را minify و bundle کنید. این کار تعداد فایل‌های رقابت‌کننده برای پهنای باند با تصویر اصلی را کاهش می‌دهد. در وب‌سایت‌های پر از افزونه، این تغییر به‌تنهایی می‌تواند تعداد کل درخواست‌ها را ۷۰–۸۰٪ کاهش دهد.

• فونت‌ها را خودمیزبانی کنید و از `font-display: swap` استفاده نمایید. بارگذاری فونت‌ها از منبع خارجی (مانند سرورهای Google) تأخیرهای اضافی ایجاد می‌کند. خودمیزبانی فونت‌ها این مرحله را حذف می‌کند و `font-display: swap` از نمایش متن نامرئی (FOIT) در زمان بارگذاری فونت جلوگیری می‌کند.

مرحله ۶: مدیریت اسلایدرها با احتیاط

اسلایدرها باعث بسیاری از مشکلات LCP می‌شوند، چرا که اغلب منتظر بارگذاری جاوااسکریپت می‌مانند تا حتی اولین اسلاید نیز نمایش داده شود؛ یعنی تصویری که بازدیدکننده واقعاً می‌بیند، در زمان شروع رندر صفحه هنوز وجود ندارد.

راه‌حل اثبات‌شده: اولین اسلاید را با یک تگ `<img>` اصلی و ثابت جایگزین کنید که ظاهری دقیقاً مشابه اولین فریم اسلایدر دارد، و تنها پس از اینکه این تصویر اولیه نمایش داده شد (یا پس از تعامل کاربر با صفحه) اجرای جاوااسکریپت اسلایدر را آغاز کنید. این تغییر می‌تواند LCP را به‌اندازه چند ثانیه کاهش دهد، بدون اینکه هیچ تفاوت قابل‌مشاهده‌ای در ظاهر ایجاد شود؛ اسلایدر به‌همان شکل قبلی کار می‌کند، اما دیگر بارگذاری صفحه را متوقف نمی‌کند.

اگر به فرمت اسلایدر وابستگی خاصی ندارید، تست کردن یک تصویر اصلی ثابت (static hero image) نیز ارزشمند است. به‌ویژه در دستگاه‌های موبایل، یک تصویر ثابت اغلب از کاروسلی که برای نمایش هر چیزی باید منتظر اجرای جاوااسکریپت و بارگذاری چندین تصویر باشد، عملکرد بهتری دارد.

مرحله ۷: اصلاح سرور

هیچ میزانی از تنظیمات سمت کلاینت نمی‌تواند جبران کند اگر سرور شما کند باشد. اگر سرور شما برای پاسخ‌دهی تنها ۱–۲ ثانیه زمان ببرد، تمام راهکارهای فوق از نقطه‌ای عقب‌تر شروع می‌شوند. تغییرات سمت سرور که واقعاً تأثیرگذار هستند:

• استفاده از کش صفحه (page caching)، تا وردپرس در هر بازدید صفحات را از ابتدا بازسازی نکند.

• استفاده از شبکه تحویل محتوا (CDN) مانند Cloudflare یا BunnyCDN، که فایل‌های شما را از سروری نزدیک‌تر به هر بازدیدکننده ارائه می‌کند.

• استفاده از PHP مدرن (نسخه ۸٫۲ یا جدیدتر) و نرم‌افزارهای سرور به‌روز، چرا که ارتقاء PHP به‌تنهایی در گذشته بهبودهای واقعی و قابل‌اندازه‌گیری در سرعت ایجاد کرده است.

• استفاده از HTTP/2 یا HTTP/3، که امکان بارگذاری همزمان چندین فایل را با کارایی بیشتری نسبت به پروتکل‌های قدیمی فراهم می‌کند.

چک‌لیست سریع اولویت‌بندی

✅ عنصر واقعی LCP خود را با استفاده از DevTools یا PageSpeed Insights تأیید کنید، نه حدس بزنید

✅ تصویر را به WebP/AVIF تبدیل کنید و اندازهٔ آن را با محل نمایش آن تطبیق دهید

✅ در صورت دشوار بودن شناسایی خودکار تصویر توسط مرورگر، آن را به‌صورت دستی preload کنید

✅ پس از هر تغییر، تست مجدد انجام دهید و نتایج را در داده‌های واقعی (گزارش Core Web Vitals در Google Search Console) تأیید کنید، نه صرفاً در یک تست آزمایشگاهی واحد.

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

جمع‌بندی نهایی

LCP یکی از مقادیر اصلی وب که در اصلاحات نسبتاً مسامح‌تر است؛ راه‌حل‌های آن ملموس و مکانیکی هستند و نیازی به بازطراحی گسترده معماری سایت ندارند. عنصر واقعی LCP را شناسایی کنید، اطمینان حاصل کنید که مرورگر بتواند آن را بلافاصله پیدا کند، از بارگذاری تنبل برای آن استفاده نکنید، آن را به‌درستی فشرده کنید و مسیر اطراف آن را پاک کنید. علاوه بر این، یک سرور قوی و تنظیمات مناسب پنهان‌سازی (کش) در پایه سایت قرار دهید؛ در این صورت اکثر وب‌سایت‌های وردپرس می‌توانند بدون نیاز به بازسازی کامل، LCP را زیر ۲٫۵ ثانیه به‌دست آورند.

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

سؤالات متداول

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

نمره خوب LCP برای یک وب‌سایت وردپرس چقدر است؟

نمره خوب LCP برابر با ۲٫۵ ثانیه یا کمتر است. اگر زمان LCP شما بین ۲٫۵ تا ۴ ثانیه باشد، نیاز به بهبود دارد؛ در حالی که هر مقدار بالاتر از ۴ ثانیه به‌عنوان نمره ضعیف در نظر گرفته می‌شود.

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

چگونه عنصر LCP را در صفحه وردپرس خود پیدا کنم؟

شما می‌توانید عنصر LCP را با استفاده از ابزار PageSpeed Insights یا Chrome DevTools شناسایی کنید. PageSpeed Insights این عنصر را در بخش تشخیصی «عنصر بزرگ‌ترین نقاشی محتوایی» نمایش می‌دهد، در حالی که Chrome DevTools در پنل «عملکرد» (Performance) نشانگر LCP را نمایش می‌دهد.

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

آیا باید تصویر LCP در وردپرس با حالت بارگذاری تنبل (Lazy Load) بارگذاری شود؟

معمولاً خیر. اگر تصویری عنصر LCP باشد و در بالای صفحه (above the fold) ظاهر شود، بارگذاری تنبل ممکن است بارگذاری آن را به تأخیر اندازد، زیرا مرورگر به‌صورت ضمنی اعلام می‌کند که این تصویر از اهمیت فوری برخوردار نیست.

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

فرمت WebP چگونه به بهبود LCP در وردپرس کمک می‌کند؟

فرمت WebP می‌تواند حجم تصاویر بزرگ را کاهش داده و در عین حال کیفیت بصری مناسبی را حفظ کند. تصویر قهرمانی کوچک‌تر نیازمند تعداد بایت کمتری برای دانلود است و این امر می‌تواند به نمایش زودهنگام‌تر عنصر LCP توسط مرورگر کمک کند.

با این حال، صرفاً تغییر فرمت تصویر نمی‌تواند تمام مشکلات LCP را حل کند؛ بلکه این تصویر باید از ابتدا قابل کشف باشد و در ابعاد مناسبی ارائه شود.

چه زمانی باید تصویر LCP را در وردپرس پیش‌بارگذاری (Preload) کرد؟

پیش‌بارگذاری زمانی بیشترین فایده را دارد که مرورگر با مشکل شناسایی زودهنگام تصویر LCP مواجه باشد؛ مثلاً وقتی تصویر از طریق پس‌زمینه CSS بارگذاری می‌شود یا توسط جاوااسکریپت اضافه می‌گردد. دستور پیش‌بارگذاری به مرورگر اعلام می‌کند که این تصویر را زودتر دریافت کند.

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

آیا CSS و جاوااسکریپت حتی با وجود تصویر بهینه‌شده می‌توانند منجر به نمره بالای LCP شوند؟

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

CSS حیاتی را درون صفحه (Inline) قرار دهید، جاوااسکریپت غیرضروری را به تعویق بیندازید (Defer) و منابع اضافی که با رندر اولیه رقابت می‌کنند را کاهش دهید.

چرا اسلایدرهای وردپرس می‌توانند LCP را کندتر کنند؟

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

این بدان معناست که مرورگر ممکن است مجبور باشد ابتدا جاوااسکریپت را دانلود و اجرا کند تا حتی بتواند تصویر قهرمانی را شناسایی یا نمایش دهد.

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

مقالات پیشنهادی

بهترین افزونه‌های بهینه‌سازی سرعت وردپرس برای سال ۲۰۲۶ (بررسی صادقانه)

آیا به دنبال بهترین افزونه سرعت وردپرس در سال ۲۰۲۶ هستید؟ این مقایسه صادقانه، افزونه‌های WP Rocket، NitroPack، FlyingPress، LiteSpeed Cache، WP-Optimize را از نظر ویژگی‌ها، قیمت‌گذاری، مزایا، معایب و مخاطبان هدف هر کدام بررسی می‌کند. بدون تأثیر گرفتن از تبلیغات، راه‌حل مناسب برای وب‌سایت خود را پیدا کنید.

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

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

برای ثبت سفارش و دریافت مشاوره تخصصی، به لینک زیر مراجعه کنید:

👉 سفارش بهینه‌سازی سایت وردپرسی