بهبود LCP سایت

چگونه محتوای اصلی خود را با بهینه سازی و بهبود lcp سایت، سریعتر رندر کنیم

من هیچ محتوای مفیدی نمی بینم! چرا بارگذاری آن اینقدر طول می‌کشد؟  

یکی از عواملی باعث تجربه کاربری ضعیف می‌شود این است که چقدر طول می‌کشد تا کاربر محتوای ارائه شده روی صفحه را ببیند. First Contentful Paint (FCP) مدت زمانی است که طول می‌کشد تا اولین عناصر DOM ارائه شود ، اما نشان نمی‌دهد که چه مدت طول کشیده است تا بزرگترین (معمولاً معنی‌دارترین) محتوای صفحه نمایش داده شود.

Largest Contentful Paint (LCP) یک معیار Core Web Vitals است و زمانی را اندازه گیری می‌کند که بزرگترین عنصر محتوا در viewport قابل مشاهده باشد. می‌توان از LCP برای تعیین اینکه چه زمانی محتوای اصلی صفحه در صفحه نمایش لود شده است استفاده کرد.

شایع ترین علل ضعف در LCP عبارتند از:

• زمان پاسخ آهسته سرور
• Render-blocking جاوااسکریپت و css
• بارگذاری آهسته منابع
• رندر سمت مرورگر مشتری

آنچه در این مقاله می‌خوانیم

• بهبود LCP سایت
  • مقدمه
  • زمان پاسخ سرور
    • بهینه سازی سرور
    • استفاده از CDN برای بهبود LCP سایت
    • استفاده از کش سمت سرور
    • بارگذاری صفحات html به صورت cache-first
    • اتصالات شخص ثالث را زودتر برقرار کنید
    • از AMP و یا SXG استفاده کنید
  • Render-blocking جاوااسکریپت و css
    • زمان مسدود شدن CSS را کاهش دهید
      • کوچک کردن CSS
      • CSS غیر بحرانی را به تعویق بیندازید
      • CSS های بحرانی را به صورت inline بارگذاری کنید
    • زمان مسدود شدن جاوا اسکریپت را کاهش دهید
  • بارگذاری آهسته منابع
    • بهینه سازی و فشرده سازی تصاویر
    • منابع مهم را از قبل بارگذاری کنید
    • فشرده سازی فایل‌های متنی
    • ارائه منابع مختلف بر اساس اتصال شبکه
    • کش کردن منابع با استفاده از service worker
  • رندر سمت کاربر
    • جاوا اسکریپت حیاتی را به حداقل برسانید
    • از رندر سمت سرور استفاده کنید
    • از پیش رندر استفاده کنید
  • Developer tools
    • سرفصل‌های وب ویتال

زمان پاسخ سرور

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

قبل از هر چیزی، نحوه مدیریت بارگذاری سرورتان را بهبود دهید. از Time to First Byte (TTFB) برای اندازه گیری زمان پاسخ دهی سرور خود استفاده کنید. شما می‌توانید TTFB خود را به روش های مختلف بهبود بخشید:

• سرور خود را بهینه کنید
• استفاده از CDN
• استفاده بهینه از امکان کش مرورگرها
• بارگذاری صفحات html به صورت cache-first
• اتصالات شخص ثالث را زودتر برقرار کنید
• از AMP و یا SXG استفاده کنید

بهینه سازی سرور

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

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

استفاده از CDN برای بهبود LCP سایت

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

امروزه CDN ها امکانات بیسار بیشتری در اختیار صاحبان سایت برای بهبود تجربه کاربری و … می‌گذارند که بررسی همه آنها از حوصله این مقاله خارج است

استفاده از کش سمت سرور

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

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

• پراکسی‌های معکوس (Varnish، nginx) ابزارهای مناسبی برای ارائه محتوای کش‌شده هستند.
• استفاده از از خدمات کش ابری مانند : Firebase، AWS، Azure
• استفاده از کش CDN

بارگذاری صفحات html به صورت cache-first

service worker یک API است که در پس‌زمینه مرورگر اجرا می‌شود و می‌تواند درخواست‌های سرور را رهگیری کند.شما می‌توانید برخی یا تمام محتوای صفحه HTML را در حافظه پنهان ذخیره کنید و تنها زمانی حافظه پنهان را به روز کنید که محتوا تغییر کرده باشد.

نمودار زیر نشان می‌دهد که چگونه توزیع LCP در یک سایت با استفاده از این الگو کاهش یافته است:

توزیع LCP، برای بارگیری صفحه با و بدون سرویسکار – philipwalton.com

نمودار بالا توزیع LCP را از یک سایت در 28 روز گذشته نشان می‌دهد که بر اساس وضعیت سرویس‌دهنده تقسیم‌بندی شده است.

اتصالات شخص ثالث را زودتر برقرار کنید

درخواست های سرور به منابع third-party نیز می‌تواند بر LCP تأثیر بگذارد، به خصوص اگر برای نمایش محتوای مهم در صفحه مورد نیاز باشد. از rel="preconnect" استفاده کنید تا به مرورگر اطلاع دهید که صفحه شما قصد دارد در اسرع وقت ارتباط برقرار کند.

<link rel="preconnect" href="https://example.com" />

همچنین می‌توانید از dns-prefetch برای حل سریعتر جستجوهای DNS استفاده کنید.

<link rel="dns-prefetch" href="https://example.com" />

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

<head>
  …
  <link rel="preconnect" href="https://example.com" />
  <link rel="dns-prefetch" href="https://example.com" />
</head>

از AMP و یا SXG استفاده کنید

Signed exchanges (SXGs) یک مکانیسم تحویل هستند که با ارائه محتوا در قالبی که به راحتی قابل ذخیره‌سازی است، تجربه‌های سریع‌تری را برای کاربر فراهم می‌کنند. به طور خاص، جستجوی گوگل SXG ها را کش می‌کند و گاهی اوقات از قبل واکشی می‌کند. برای سایت هایی که بخش زیادی از ترافیک خود را از جستجوی گوگل دریافت می‌کنند، SXG ها می‌توانند ابزار مهمی برای بهبود LCP باشند.

Render-blocking جاوااسکریپت و css

قبل از اینکه مرورگر بتواند محتوایی را ارائه دهد، باید نشانه گذاری HTML را در یک درخت DOM تجزیه کند.تجزیه کننده HTML در صورت برخورد با شیوه نامه های خارجی (<link rel="stylesheet">) و تگ های جاوا اسکریپت همزمان (<script src="main.js">) متوقف می‌شود.

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

زمان مسدود شدن CSS را کاهش دهید

با روش‌های زیر اطمینان حاصل کنید که کمترین مقدار مسدود سازی CSS را دارید:

• کوچک کردن CSS
• به تعویق انداختن CSS های غیر بحرانی
• CSS های بحرانی را به صورت inline بارگذاری کنید.

کوچک کردن CSS

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

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

مثالی از بهبود LCP: قبل و بعد از کوچک کردن CSS

CSS غیر بحرانی را به تعویق بیندازید

با استفاده از تب Coverage در DevTools کروم می‌توانید css های استفاده نشده در فایل‌های خود را پیدا کنید

برای بهبود مراحل زیر را انجام دهید:

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

<link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'">

مثالی از بهبود LCP: قبل و بعد از به تعویق انداختن CSS غیر بحرانی

CSS های بحرانی را به صورت inline بارگذاری کنید

css های بحرانی را با قراردادن آن در تگ <style> در تگ <head> به صورت inline بارگذاری کنید، این کار باعث می‌شود تا درخواست اضافی به سرور برای بارگذاری css ها ارسال نشود.

Critical CSS inlined

قراردادن css های مهم در فایل html اصلی نیاز به درخواست رفت و برگشت برای واکشی CSS حیاتی را از بین می‌برد. اگر نمی‌توانید به صورت دستی استایل های درون خطی را به سایت خود اضافه کنید، از یک کتابخانه برای خودکارسازی فرآیند استفاده کنید. مثل :

• Critical، CriticalCSS و Penthouse همگی بسته هایی هستند که CSS های حساس را inline می‌کنند.
• Critters یک پلاگین وب است که CSS حیاتی را inline و سایر آنها را به صورت lazy-loads بارگذاری می‌کند.

نمونه ای از بهبود LCP: قبل و بعد از درون ریزی CSS بحرانی

زمان مسدود شدن جاوا اسکریپت را کاهش دهید

حداقل جاوا اسکریپتِ لازم را دانلود و به کاربران ارائه دهید. کاهش میزان مسدود کردن جاوا اسکریپت باعث رندر سریعتر و در نتیجه LCP بهتر می‌شود. این را می‌توان با بهینه سازی اسکریپت های خود به چند روش مختلف انجام داد:

• فایل های جاوا اسکریپت را کوچک و فشرده کنید
• جاوا اسکریپت استفاده نشده را به تعویق بیندازید
• polyfills استفاده نشده را به حداقل برسانید

بارگذاری آهسته منابع

اگرچه افزایش زمان مسدود کردن CSS یا جاوا اسکریپت مستقیماً منجر به سرعت پایین تر سایت می‌شود، زمان بارگذاری انواع دیگر منابع نیز می‌تواند بر زمان بارگذاری سایت تأثیر بگذارد. انواع عناصری که بر LCP تأثیر می‌گذارند عبارتند از:

• المان‌های <img>
• المان های <image> در المان های <svg>
• المان های <video> (تصویر پوستر برای اندازه گیری LCP استفاده می‌شود)
• یک عنصر با یک تصویر پس‌زمینه بارگیری شده از طریق تابع url()

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