چطور معیار LCP را در کمتر از یک ساعت بهتر کنیم؟

معیار بزرگترین ترسیم محتوایی یا Largest Contentful Paint (LCP) یکی از سه معیار اصلی هسته حیاتی وب (Core Web Vitals) گوگل است.

مثل دو معیار دیگه (یعنی Cumulative Layout Shift و Interaction to Next Paint)، شاید اسمش یکم گنگ باشه و دقیقاً معلوم نباشه منظورش چیه.

ابزارهای زیادی وجود دارند که می‌توانند امتیاز LCP سایت شما را نشان بدهند و راه‌هایی برای بهبود آن پیشنهاد کنند. اما این پیشنهادها اغلب خیلی کلی هستند و جزئیات لازم برای اینکه واقعاً دست به کار شوید را ندارند.

پس، در این راهنما قدم به قدم به شما مراحل عملی و کاربردی برای بهبود LCP را نشان می‌دهم. من این مراحل را بر اساس موارد زیر دسته‌بندی می‌کنم:

• تأثیر بالقوه هر روش
• میزان زحمتی که برای اجرای آن لازم است
• اینکه هر روش دقیقاً به کدام جنبه از امتیاز LCP شما کمک می‌کند

اما قبل از هر چیز، بیایید ببینیم LCP واقعاً برای وب‌سایت شما چه معنایی دارد.

اصلاً این Largest Contentful Paint یعنی چی؟

بزرگترین ترسیم محتوایی (LCP) مدت زمانی را اندازه می‌گیرد که طول می‌کشد تا محتوای اصلی صفحه وب شما روی صفحه کاربر ظاهر شود — فرقی نمی‌کند این محتوا یک تصویر بزرگ (هیرو)، یک تیتر اصلی یا یک پاراگراف متن باشد.

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

• بزرگترین (Largest): بزرگترین قطعه از محتوای قابل مشاهده روی صفحه. این می‌تواند یک تصویر بزرگ، یک تیتر درشت، یا هر عنصر مهمی باشد که به چشم می‌آید.
• محتوایی (Contentful): یعنی چیزی که واقعاً محتوا دارد — مثل متن یا تصویر — و صرفاً یک پس‌زمینه یا کادر خالی نیست.
• ترسیم (Paint): این کلمه به فرآیندی اشاره دارد که در آن مرورگر شما آن عنصر را روی صفحه «نقاشی» (یا رندر) می‌کند.

برای مثال، تصور کنید روی لینکی کلیک می‌کنید تا یک مقاله خبری را بخوانید.

ممکن است صفحه عناصر مختلفی مثل منوی بالای صفحه و جایگاه‌های تبلیغات را به سرعت بارگذاری کند.

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

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

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

یک امتیاز خوب برای LCP چقدر است؟

گوگل سه محدوده امتیازبندی برای LCP ارائه می‌دهد:

• خوب: ۲.۵ ثانیه یا سریع‌تر
• نیاز به بهبود: بین ۲.۵ تا ۴ ثانیه
• ضعیف: بیشتر از ۴ ثانیه

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

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

پس، روی انتظارات و رفتار مخاطبان خود تمرکز کنید. تحلیل‌های سایتتان را بررسی کنید تا ببینید آیا LCP کندتر با نرخ پرش (Bounce Rate) بالاتر یا نرخ تبدیل (Conversion Rate) پایین‌تر ارتباط دارد یا نه.

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

اگر نرخ تبدیل شما ۱۰ برابر میانگین صنعت است، احتمالاً بهبود امتیاز LCP تأثیر شگرفی بر درآمد شما نخواهد داشت.

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

چطور امتیاز LCP خود را اندازه‌گیری کنیم؟

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

شما باید این دو چیز را هم یاد بگیرید:

• عنصر LCP سایت شما کدام است؟
• کدام مرحله از فرآیند LCP شما طولانی‌تر است؟

پیدا کردن این دو مورد، کلید اولویت‌بندی روش‌هایی است که برای بهبود LCP خود استفاده خواهید کرد.

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

در مورد مراحل هم باید بدانید که LCP از چهار مرحله تشکیل شده است:

1. Time to First Byte (TTFB): زمان تا دریافت اولین بایت
2. Resource load delay: تأخیر در بارگذاری منبع
3. Resource load time: زمان بارگذاری منبع
4. Element render delay: تأخیر در رندر عنصر

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

در اینجا دو راه برای پیدا کردن این اطلاعات وجود دارد.

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

Google PageSpeed Insights

PageSpeed Insights (PSI) گوگل یک انتخاب محبوب است اگر به دنبال یک گزارش ساده و تحت وب هستید.

فقط کافی است URL خود را وارد کنید تا یک نمای کلی از Core Web Vitals سایتتان، از جمله LCP، دریافت کنید.

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

همچنین یک بخش عیب‌یابی (diagnostics) مفید دارد که برخی از راه‌های اصلی کاهش امتیاز شما را نشان می‌دهد. فقط مطمئن شوید که گزینه “LCP” را در کنار “Show audits relevant to” انتخاب کنید.

روی گزینه “Largest Contentful Paint element” کلیک کنید تا ببینید کدام عنصر در آن صفحه، عنصر LCP شماست.

این ابزار همچنین تفکیک (به صورت درصد) هر مرحله از LCP شما را نشان می‌دهد. از مثال بالا، می‌توانید ببینید که بخش عمده زمان LCP ما (۸۸٪) مربوط به مرحله تأخیر در رندر (Render Delay) است.

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

Chrome DevTools

ابزارهای توسعه‌دهنده کروم (Chrome DevTools) می‌توانند بازخورد دقیق و آنی در مورد جنبه‌های مختلف عملکرد صفحه شما ارائه دهند.

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

برای دسترسی به آن، در هر صفحه وب در کروم راست‌کلیک کرده و “Inspect” را انتخاب کنید.

در رابطی که ظاهر می‌شود، به تب “Performance” بروید.

(می‌توانید روی سه نقطه کنار آیکون چرخ‌دنده کلیک کرده و محل قرارگیری داک را تغییر دهید — من فکر می‌کنم حالت افقی برای تحلیل LCP بهترین است.)

این نما امتیاز LCP شما را نشان می‌دهد. اگر ماوس خود را روی “LCP element” زیر امتیاز نگه دارید، خواهید دید که کدام بخش از محتوا، بزرگترین عنصر محتوایی است.

سپس، با کلیک روی دکمه “Record and reload”، تفکیک مراحل LCP را دریافت کنید. این کار بررسی‌های عملکرد را دوباره روی صفحه اجرا می‌کند و اطلاعات بیشتری را به همراه یک نمودار آبشاری (waterfall chart) خواهید دید.

فعلاً آن را نادیده بگیرید و به جای آن روی منوی کشویی “LCP by phase” کلیک کنید. این کار LCP را به چهار بخش تشکیل‌دهنده‌اش تقسیم می‌کند و زمان واقعی هر مرحله را به همراه درصد آن نشان می‌دهد.

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

چطور LCP وب سایت خود را بهبود ببخشیم؟

شما می‌توانید LCP خود را به روش‌های مختلفی بهبود دهید و برخی روش‌ها بیشتر از بقیه به شما کمک خواهند کرد.

جدول زیر روش‌ها را بر اساس تأثیرشان مرتب می‌کند و همچنین سطح تلاش مورد نیاز برای هر کدام و اینکه به کاهش کدام مرحله از LCP شما کمک می‌کند را نشان می‌دهد.

روش	تأثیر	به کاهش چه کمکی می‌کند
استفاده از CDN	زیاد	زمان بارگذاری منابع
بهینه‌سازی تصاویر	زیاد	زمان بارگذاری منابع
استفاده از پلاگین‌های وردپرس	زیاد	به طور بالقوه همه مراحل
پیاده‌سازی Caching	زیاد	زمان تا دریافت اولین بایت (TTFB)
استفاده از هاست سریع‌تر	زیاد	زمان تا دریافت اولین بایت (TTFB)
فشرده‌سازی (Minify) کد	متوسط	زمان بارگذاری منابع
بهینه‌سازی فونت‌ها	متوسط	زمان بارگذاری منابع
جلوگیری از Lazy Loading بالای صفحه	متوسط	تأخیر در بارگذاری منابع
حذف عناصر غیرضروری	متوسط	تأخیر در رندر عنصر
استفاده از Defer/Async برای JS	متوسط	تأخیر در رندر عنصر
درون‌خطی کردن CSS حیاتی	متوسط	تأخیر در رندر عنصر
تغییر به رندر سمت سرور (SSR)	متوسط	تأخیر در رندر عنصر
پیش‌بارگذاری (Preload) منابع مهم	متوسط	تأخیر در بارگذاری منابع

این مقادیر همگی نسبی هستند.

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

من هر روش را به صورت جداگانه در نظر گرفته‌ام، زیرا تأثیر نسبی هر اصلاح ممکن است با اجرای هر کدام کاهش یابد.

برای مثال، اگر بسیاری از این روش‌ها را اجرا کنید اما از CDN استفاده نکنید، امتیاز LCP شما احتمالاً تا حدی بهبود می‌یابد که استفاده از CDN ممکن است تفاوت چندانی در امتیاز ایجاد نکند (اگرچه ممکن است همچنان تجربه کاربری شما را بهبود بخشد).

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

در ادامه، جزئیات بیشتری در مورد هر روش و اینکه برای چه کسی مناسب‌تر است، توضیح خواهم داد.

۱. استفاده از CDN

تأثیر: زیاد | زحمت: کم | به کاهش چه چیزی کمک می‌کنه: زمان بارگذاری منابع (Resource Load Time)

یک شبکه توزیع محتوا (CDN) کپی‌های کش‌شده (cached) از محتوای شما را در سرورهای سراسر جهان ذخیره می‌کند. وقتی مردم از سایت شما بازدید می‌کنند، فایل‌ها از نزدیک‌ترین سرور به آن‌ها ارائه می‌شود.

این یعنی زمان بارگذاری سریع‌تر برای کاربران شما.

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

این روش برای موارد زیر بیشترین تأثیر را دارد:

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

چطور این کار را انجام دهیم؟

می‌توانید در یک سرویس CDN مانند Cloudflare، KeyCDN یا StackPath ثبت‌نام کنید. آن‌ها دستورالعمل‌هایی برای تغییر تنظیمات دامنه شما برای هدایت ترافیک از طریق سرورهایشان ارائه می‌دهند.

پس از راه‌اندازی، CDN فایل‌های وب‌سایت شما را از سروری که از نظر فیزیکی به کاربران نزدیک‌تر است، ارائه می‌دهد. گزینه‌های ارزان و رایگان وجود دارد، اما برای سایت‌های بزرگ با ترافیک زیاد ممکن است گران شود.

اگر از وردپرس یا یک سیستم مدیریت محتوای مشابه (CMS) استفاده می‌کنید، اغلب پلاگین‌هایی وجود دارند که فرآیند راه‌اندازی را حتی ساده‌تر می‌کنند.

۲. بهینه‌سازی تصاویر

تأثیر: زیاد | زحمت: متوسط | به کاهش چه چیزی کمک می‌کنه: زمان بارگذاری منابع (Resource Load Time)

فایل‌های تصویری بزرگ یک دلیل رایج برای امتیازات LCP ضعیف هستند. این امر به ویژه اگر از یک تصویر هیرو (hero image) بزرگ در بالای صفحات یا پست‌های وبلاگ خود استفاده می‌کنید، صادق است.

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

این روش برای موارد زیر بیشترین تأثیر را دارد:

• سایت‌هایی با تعداد زیادی تصویر محصول یا وبلاگ
• عکاسان یا فروشگاه‌های اینترنتی با تصاویر با وضوح بالا
• هر کسی که به دنبال راهی ساده برای افزایش سرعت بارگذاری است

چطور این کار را انجام دهیم؟

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

Squoosh یک ابزار رایگان است که به شما امکان می‌دهد تنظیمات بهینه‌سازی را تغییر دهید، فرمت را برای تبدیل انتخاب کنید و اندازه تصویر را تغییر دهید.

برای انجام این کار به صورت دسته‌جمعی، می‌توانید از ابزاری مانند TinyPNG نیز استفاده کنید.

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

نکته: علاوه بر تصاویر، معمولاً بهتر است از قرار دادن ویدیو در بالای صفحه (above the fold) خودداری کنید. این کار می‌تواند منجر به امتیاز LCP ضعیف شود.

۳. استفاده از پلاگین‌های وردپرس (یا اپ‌های CMS دیگر)

تأثیر: زیاد | زحمت: کم | به کاهش چه چیزی کمک می‌کنه: به طور بالقوه همه مراحل

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

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

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

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

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

نکته: اگر از CMS دیگری مانند Shopify استفاده می‌کنید، احتمالاً اپ‌ها یا افزونه‌هایی وجود دارند که می‌توانند به امتیاز LCP شما کمک کنند.

این روش برای موارد زیر بیشترین تأثیر را دارد:

• کاربران وردپرس بدون دانش فنی
• هر کسی که یک راه‌حل سریع برای چندین مشکل عملکردی می‌خواهد
• کسانی که مایلند کمی پول خرج کنند تا بسیاری از مشکلات را یکجا حل کنند (اگرچه گزینه‌های رایگان نیز وجود دارد)

چطور این کار را انجام دهیم؟

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

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

Autoptimize یک پلاگین رایگان وردپرس است که بسیاری از کارهای مشابه WP Rocket را انجام می‌دهد. البته فاقد چند ویژگی مانند تولید CSS حیاتی و کش کردن است. اما برای مبتدیانی که بودجه محدودی دارند و یک سایت وردپرسی دارند، نقطه شروع خوبی است.

۴. پیاده‌سازی Caching

تأثیر: زیاد | زحمت: کم | به کاهش چه چیزی کمک می‌کنه: زمان تا دریافت اولین بایت (Time to First Byte)

کش کردن (Caching) بخش‌هایی از سایت شما را در مرورگر کاربر ذخیره می‌کند تا مجبور نباشد هر بار که از سایت بازدید می‌کند، آن‌ها را از ابتدا درخواست کند.

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

این روش برای موارد زیر بیشترین تأثیر را دارد:

• سایت‌هایی با بازدیدکنندگان تکراری (مانند وبلاگ‌ها، مجلات آنلاین)
• وب‌سایت‌هایی روی پلتفرم‌هایی که صفحات را به صورت پویا تولید می‌کنند (مانند وردپرس)
• سایت‌هایی که با زمان پاسخ‌دهی کند سرور مواجه هستند

چطور این کار را انجام دهیم؟

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

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

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

۵. استفاده از یک هاست سریع‌تر

تأثیر: زیاد | زحمت: کم | به کاهش چه چیزی کمک می‌کنه: زمان تا دریافت اولین بایت (Time to First Byte)

تغییر به یک پلن یا ارائه‌دهنده هاستینگ قدرتمندتر می‌تواند تفاوت بزرگی در سرعت بارگذاری محتوای اصلی سایت شما ایجاد کند.

این به این دلیل است که سرعت هاست وب شما بیشترین تأثیر را بر روی Time to First Byte (TTFB) شما خواهد داشت.

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

اگر یک سایت کوچک یا بودجه محدودی دارید، ممکن است توجیه هزینه برای بهبود LCP به تنهایی سخت باشد. اما برای کسب‌وکارهای بزرگ یا سایت‌هایی که درآمد زیادی تولید می‌کنند، سرمایه‌گذاری در هاستینگ بهتر می‌تواند نتیجه بدهد.

نکته: اگر هاست شما در حال حاضر بسیار سریع است، این کار بعید است که تأثیر زیادی بر LCP شما بگذارد. من به طور کلی توصیه می‌کنم این گزینه را فقط در صورتی در نظر بگیرید که Time to First Byte شما به طور استثنایی طولانی باشد. یا اگر متوجه مشکلات عملکردی دیگر یا دوره‌های طولانی قطعی وب‌سایت شده‌اید.

این روش برای موارد زیر بیشترین تأثیر را دارد:

• سایت‌های پرترافیک که به سرعت پایدار نیاز دارند
• کسب‌وکارهایی با بودجه برای سرمایه‌گذاری در هاستینگ پریمیوم
• سایت‌هایی که از پلن هاستینگ فعلی خود فراتر رفته‌اند

چطور این کار را انجام دهیم؟

هنگام ارتقاء هاست وب خود، به دنبال این موارد باشید: آپتایم قابل اعتماد، مقیاس‌پذیری، پشتیبانی خوب، ویژگی‌های امنیتی و گزینه‌های پشتیبان‌گیری قوی.

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

۶. فشرده‌سازی (Minify) کد

تأثیر: متوسط | زحمت: کم | به کاهش چه چیزی کمک می‌کنه: زمان بارگذاری منابع (Resource Load Time)

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

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

این روش برای موارد زیر بیشترین تأثیر را دارد:

• سایت‌هایی با تعداد زیادی فایل CSS و جاوا اسکریپت
• صفحاتی که به چندین کتابخانه یا فریم‌ورک متکی هستند

چطور این کار را انجام دهیم؟

می‌توانید کد خود را با ابزارهای رایگان مانند Minifier فشرده کنید.

اگر از CMS مانند وردپرس استفاده می‌کنید، از پلاگین‌هایی (مانند WP Rocket، Autoptimize) استفاده کنید که به طور خودکار CSS، JS و HTML شما را کوچک می‌کنند.

فقط مطمئن شوید که از سایت خود نسخه پشتیبان تهیه کرده یا آن را در یک محیط آزمایشی (staging) تست کنید. گاهی اوقات، فشرده‌سازی می‌تواند باعث مشکلات چیدمان یا اسکریپت شود.

۷. بهینه‌سازی فونت‌ها

تأثیر: متوسط | زحمت: متوسط | به کاهش چه چیزی کمک می‌کنه: زمان بارگذاری منابع (Resource Load Time)

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

فونت‌های سفارشی اغلب باید از یک سرور جداگانه دانلود شوند. اگر آن‌ها را بهینه کنید یا به صورت محلی میزبانی کنید، تأخیرهایی را که مانع از دیده شدن متن شما (مانند تیترهای بزرگ) می‌شود، کاهش می‌دهید.

این روش برای موارد زیر بیشترین تأثیر را دارد:

• سایت‌هایی که از چندین فونت سفارشی یا خانواده‌های فونت بزرگ استفاده می‌کنند
• صفحات با طراحی سنگین و تایپوگرافی فانتزی
• هر کسی که متوجه “فلش متن نامرئی” (flash of invisible text) هنگام بارگذاری صفحات می‌شود

چطور این کار را انجام دهیم؟

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

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

۸. جلوگیری از بارگذاری تنبل (Lazy Loading) برای محتوای بالای صفحه

تأثیر: متوسط | زحمت: کم | به کاهش چه چیزی کمک می‌کنه: تأخیر در بارگذاری منابع (Resource Load Delay)

Lazy loading یک ویژگی است که تصاویر را فقط زمانی بارگذاری می‌کند که کاربر به آن‌ها اسکرول می‌کند. به عبارت دیگر، تصاویر فقط زمانی بارگذاری می‌شوند که در “viewport” (محدوده دید) کاربر قرار گیرند.

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

اما اگر تصاویری را که درست در بالای صفحه شما قرار دارند، به صورت lazy load بارگذاری کنید، بازدیدکنندگان شما قبل از اینکه چیزی ظاهر شود، یک فضای خالی خواهند دید. این می‌تواند واقعاً به LCP شما آسیب برساند.

بنابراین، معمولاً بهتر است محتوای بالای صفحه را فوراً بارگذاری کنید، و سپس آنچه در پایین قرار دارد را به صورت lazy load بارگذاری کنید.

این روش برای موارد زیر بیشترین تأثیر را دارد:

• سایت‌هایی که به طور پیش‌فرض همه چیز را lazy load می‌کنند
• مناطق بالای صفحه با تصاویر یا بنرهای کلیدی
• صفحاتی که تصویر اصلی هدر برای تعامل کاربر حیاتی است

چطور این کار را انجام دهیم؟

بسیاری از ابزارهای lazy-loading به شما اجازه می‌دهند تصاویر خاصی را مستثنی کنید. تنظیمات یا گزینه پلاگینی را که مشخص می‌کند “بالای صفحه” (above the fold) یا “اولین ترسیم محتوایی” (first contentful paint) است، پیدا کنید و lazy loading را برای آن‌ها غیرفعال کنید.

در WP Rocket، این کار را در بخش “Media” انجام می‌دهید.

اگر از CMS مانند وردپرس استفاده نمی‌کنید، فقط مطمئن شوید که HTML تصویر LCP شما به این شکل باشد، با loading=”eager” یا بدون هیچ ویژگی loading (مقدار پیش‌فرض “eager” است):

به جای اینکه این شکلی با ویژگی loading=”lazy” باشد.

۹. حذف عناصری که به آن‌ها نیاز ندارید

تأثیر: متوسط | زحمت: متوسط | به کاهش چه چیزی کمک می‌کنه: تأخیر در رندر عنصر (Element Render Delay)

هر اسکریپت، تصویر، یا ویجتی که در سایت خود دارید، به زمانی که طول می‌کشد تا صفحه شما به طور کامل بارگذاری شود، اضافه می‌کند. بنابراین باید با دقت در مورد آنچه در بالای صفحه (above the fold) نمایش داده می‌شود، فکر کنید.

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

فقط مطمئن شوید که عناصری را که برای کاربران یا پیام برند شما حیاتی هستند، حذف نکنید.

این روش برای موارد زیر بیشترین تأثیر را دارد:

• سایت‌های پر از محتوا که با ویجت‌ها یا تبلیغات پر شده‌اند.
• صفحات اصلی (Homepage) که با چندین بنر، اسلایدشو، یا انیمیشن شلوغ شده‌اند.
• هر کسی که به دنبال ساده‌سازی طراحی خود بدون قربانی کردن ویژگی‌های اصلی است.

چطور این کار را انجام دهیم؟

ناحیه بالای صفحه (above-the-fold) سایت خود را بررسی کنید و از خود بپرسید: «آیا این عنصر فوراً به کاربر من کمکی می‌کند؟»

اگر پاسخ منفی است، آن را به پایین صفحه منتقل کنید (یا به طور کامل حذفش کنید).

به جمع‌کردن (collapsing) فرم‌های ثبت‌نام بزرگ یا تصاویر اضافی فکر کنید.

حذف اسکریپت‌های غیرضروری، مانند کدهای رهگیری قدیمی، نیز می‌تواند کمک‌کننده باشد. برای مشخص کردن قطعه کدهایی که ممکن است بخواهید حذف کنید، به دنبال فرصت “Reduce unused JavaScript” در PageSpeed Insights باشید.

10. استفاده از Defer/Async برای جاوا اسکریپت

تأثیر: متوسط | زحمت: متوسط | به کاهش چه چیزی کمک می‌کنه: تأخیر در رندر عنصر (Element Render Delay)

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

این به LCP شما کمک می‌کند زیرا بزرگترین بخش صفحه شما بدون انتظار برای اتمام بارگذاری تمام JS شما، نمایش داده می‌شود.

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

دلیل اصلی که احتمالاً به سراغ async و defer خواهید رفت این است که ابزاری که با آن LCP خود را اندازه‌گیری می‌کنید، به شما بگوید که “منابع مسدودکننده رندر” (render-blocking resources) دارید.

مثل این تصویر از PageSpeed Insights:

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

• با async: مرورگر هنگام دانلود فایل جاوا اسکریپت، تجزیه (parsing) فایل HTML را متوقف نمی‌کند. اما پس از اتمام دانلود، برای اجرای اسکریپت، تجزیه HTML را متوقف می‌کند.
• با defer: مرورگر برای دانلود یا اجرای جاوا اسکریپت، تجزیه HTML را متوقف نمی‌کند. این می‌تواند به امتیاز LCP پایین‌تری منجر شود، اما به این معنی است که جاوا اسکریپت شما تا زمانی که مرورگر تجزیه کامل HTML را به پایان نرساند، اجرا نخواهد شد.

اگر مطمئن نیستید که کدام اسکریپت‌ها را باید به صورت defer یا async بارگذاری کنید، یا چگونه این کار را انجام دهید، ممکن است به کمک یک توسعه‌دهنده نیاز داشته باشید.

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

این روش برای موارد زیر بیشترین تأثیر را دارد:

• سایت‌هایی که به چندین کتابخانه جاوا اسکریپت متکی هستند
• صفحاتی که با بارگذاری زودهنگام اسکریپت‌ها کند شده‌اند
• صاحبان وب‌سایتی که به دنبال یک راه‌حل میانی بدون SSR کامل هستند

چطور این کار را انجام دهیم؟

اگر از وردپرس استفاده می‌کنید، به دنبال یک پلاگین بهینه‌سازی باشید که شامل به تعویق انداختن یا بارگذاری ناهمزمان اسکریپت‌ها باشد. در تنظیمات سفارشی، باید ویژگی‌های defer یا async را به تگ‌های اسکریپت خود در HTML اضافه کنید.

فقط مطمئن شوید که هیچ اسکریپت حیاتی (مانند عملکردهای اصلی) را بیش از حد به تأخیر نیندازید.

۱1. درون‌خطی کردن CSS حیاتی (Inline Critical CSS)

تأثیر: متوسط | زحمت: زیاد | به کاهش چه چیزی کمک می‌کنه: تأخیر در رندر عنصر (Element Render Delay)

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

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

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

علاوه بر این، راهنمایی رسمی تیم کروم در این مورد به این صورت است:

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

این روش برای موارد زیر بیشترین تأثیر را دارد:

• سایت‌هایی با مقدار کمی CSS حیاتی برای بخش هدر
• طراحی‌های مینیمالیستی که به استایل‌شیت‌های خارجی بزرگ متکی نیستند
• هر کسی که به دنبال کاهش تأخیرهای کوچک در بارگذاری است

چطور این کار را انجام دهیم؟

CSS ضروری برای استایل‌دهی به بخش بالای صفحه خود را شناسایی کرده و آن را مستقیماً در <head> HTML قرار دهید. بقیه CSS خود را در فایل‌های خارجی نگه دارید تا از بزرگ شدن بیش از حد HTML جلوگیری کنید. برخی پلاگین‌های عملکردی می‌توانند این رویکرد “CSS حیاتی” را برای شما خودکار کنند.

12. تغییر به رندر سمت سرور (SSR)

تأثیر: متوسط | زحمت: زیاد | به کاهش چه چیزی کمک می‌کنه: تأخیر در رندر عنصر (Element Render Delay)

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

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

SSR می‌تواند به LCP برای سایت‌های سنگین از نظر جاوا اسکریپت کمک کند، زیرا بزرگترین محتوا از قبل برای کاربر “از پیش ساخته شده” است. اما تغییر از CSR به SSR می‌تواند یک پروژه بزرگ باشد اگر با آن آشنا نباشید.

این روش برای موارد زیر بیشترین تأثیر را دارد:

• وب اپلیکیشن‌های سنگین از نظر جاوا اسکریپت (مانند React، Vue)
• سایت‌هایی که تأخیر قابل توجهی را قبل از ظاهر شدن محتوا مشاهده می‌کنند
• کاربران یا تیم‌های پیشرفته که می‌توانند معماری پیچیده‌تر را مدیریت کنند

چطور این کار را انجام دهیم؟

تغییر از CSR به SSR (یا یک رویکرد ترکیبی) معمولاً شامل استفاده از فریم‌ورک‌هایی (مانند Next.js برای React) است که محتوای شما را روی سرور از پیش رندر می‌کنند. اگر با این کار راحت نیستید، ممکن است نیاز به استخدام یک توسعه‌دهنده یا آژانس داشته باشید.

۱3. پیش‌بارگذاری (Preload) منابع مهم

تأثیر: متوسط | زحمت: متوسط | به کاهش چه چیزی کمک می‌کنه: تأخیر در بارگذاری منابع (Resource Load Delay)

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

این روش برای موارد زیر بیشترین تأثیر را دارد:

• سایت‌هایی که به منابع خارجی متکی هستند (مانند فونت‌ها یا تصاویر)
• کسانی که با ویرایش هدرهای HTML یا استفاده از پلاگین‌ها برای انجام این کار در مقیاس راحت هستند

چطور این کار را انجام دهیم؟

می‌توانید فونت‌ها و تصاویر را با افزودن تگ‌های لینک خاص در <head> سایت خود پیش‌بارگذاری کنید. شما به سادگی rel=”preload” را به تگ <link> اضافه می‌کنید.

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

با بهبود تجربه کاربری، رتبه سایتتان را تقویت کنید

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

این امر بهینه‌سازی برای عواملی مانند LCP و سایر Core Web Vitals را بسیار مهم‌تر می‌کند.