بهبود LCP سایت

مقدمه

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

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

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

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

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

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

هر چه بیشتر طول بکشد تا مرورگر محتوا را از سرور دریافت کند، زمان بیشتری برای نمایش صفحه نیاز است.سریعتر بودن زمان پاسخگویی سرور مستقیماً هر معیار بارگذاری صفحه از جمله 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 را از یک سایت در 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 مشاهده کرد.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بهبود مدت زمان بارگذاری و ارائه این نوع تصاویر به طور مستقیم سرعت LCP را افزایش می‌دهد. برای انجام این:

• در وهله اول تا جایی که می‌توانید از تصویر استفاده نکنید. اگر به محتوا مربوط نیست، آن را حذف کنید.
• فشرده سازی تصاویر
• تبدیل تصاویر به فرمت های جدیدتر (JPEG 2000، JPEG XR یا WebP)
• از تصاویر واکنش گرا استفاده کنید
• استفاده از CDN

منابع مهم را از قبل بارگذاری کنید

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

اگر می‌دانید که یک منبع خاص باید اولویت بندی شود، از<link rel="preload"> استفاده کنید تا زودتر آن را واکشی کنید. بسیاری از انواع منابع را می‌توان از قبل بارگذاری کرد، اما ابتدا باید روی بارگذاری اولیه منابع حیاتی، مانند فونت‌ها، تصاویر یا ویدیوهای بالای صفحه و CSS یا جاوا اسکریپت بحرانی تمرکز کنید.

<link rel="preload" as="script" href="script.js" />
<link rel="preload" as="style" href="style.css" />
<link rel="preload" as="image" href="img.png" />
<link rel="preload" as="video" href="vid.webm" type="video/webm" />
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

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

<link
  rel="preload"
  as="image"
  href="wolf.jpg"
  imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
  imagesizes="50vw"
/>

فشرده سازی فایل‌های متنی

الگوریتم‌های فشرده‌سازی، مانند Gzip و Brotli، می‌توانند اندازه فایل‌های متنی (HTML، CSS، جاوا اسکریپت) را هنگام انتقال بین سرور و مرورگر به میزان قابل توجهی کاهش دهند. Gzip به طور موثر در همه مرورگرها پشتیبانی می‌شود و Brotli که نتایج فشرده سازی بهتری را ارائه می‌دهد، تقریباً در تمام مرورگرهای جدیدتر قابل استفاده است.

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

• ابتدا بررسی کنید که آیا سرور شما قبلاً فایل‌ها را به صورت خودکار فشرده می‌کند. اکثر پلتفرم‌های میزبانی، CDN و سرورهای پراکسی معکوس یا منابع را به صورت پیش‌فرض با فشرده‌سازی رمزگذاری می‌کنند یا به شما اجازه می‌دهند به راحتی آن را پیکربندی کنید.
• اگر نیاز به تغییر سرور خود برای فشرده سازی فایل ها دارید، به جای gzip از Brotli استفاده کنید زیرا می‌تواند نسبت فشرده سازی بهتری را ارائه دهد.
• هنگامی که یک الگوریتم فشرده‌سازی را برای استفاده انتخاب کردید، منابع را قبل از موعد در طول فرآیند ساخت فشرده کنید، به‌جای اینکه مرورگر درخواست آن‌ها را انجام دهید. این کار سربار سرور را به حداقل می‌رساند و از تاخیر در هنگام درخواست‌ها، به‌ویژه هنگام استفاده از نسبت‌های فشرده‌سازی بالا جلوگیری می‌کند.

ارائه منابع مختلف بر اساس اتصال شبکه

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

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

if (navigator.connection && navigator.connection.effectiveType) {
  if (navigator.connection.effectiveType === '4g') {
    // Load video
  } else {
    // Load image
  }
}

لیستی از ویژگی‌های مفیدی که می‌توانید استفاده کنید:

• navigator.connection.effectiveType: نوع اتصال
• navigator.connection.saveData: فعال و غیر فعال کردن DataSaver
• navigator.hardwareConcurrency:تعداد هسته CPU
• navigator.deviceMemory: حافظه دستگاه

کش کردن منابع با استفاده از service worker

Service workers را می‌توان برای بسیاری از کارها از جمله ارائه کش HTML جهت کاهش درخواست ها همانطور که قبلا در این مقاله ذکر شد، استفاده کرد. همچنین می‌توان برای کش کردن هر منبع استاتیک برای کاهش درخواست های تکراری به مرورگر استفاده شود.

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

Workbox چیست ؟ Workbox یک جعبه ابزار service worker سطح بالا است و مجموعه‌ای از کتابخانه‌های آماده برای افزودن پشتیبانی آفلاین به برنامه‌های وب را فراهم می‌کند.

رندر سمت کاربر

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

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

هنگام ساخت یک سایت که کدهای زیادی را در طرف کاربر رندر می‌کند بهینه سازی های زیر را در نظر بگیرید:

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

جاوا اسکریپت حیاتی را به حداقل برسانید

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

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

از رندر سمت سرور استفاده کنید

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

استفاده از سرور برای رندر برنامه ها و کدها و تبدیل آنها به HTML به رندر سمت سرور معروف است. که در آن جاوا اسکریپت و داده های مورد نیاز روی همان محتوای DOM “هیدراته” (hydrates) می‌شود.این کار می‌تواند LCP را با اطمینان از اینکه محتوای اصلی ابتدا بر روی سرور رندر می‌شود، بهبود می‌بخشد، اما چند اشکال اساسی نیز وجود دارد:

• حفظ همان برنامه رندر شده با جاوا اسکریپت بر روی سرور و کلاینت می‌تواند پیچیدگی را افزایش دهد.
• اجرای جاوا اسکریپت برای ارائه یک فایل HTML در سرور همیشه زمان پاسخ سرور (TTFB) را در مقایسه با ارائه صفحات صرفا استاتیک افزایش می‌دهد.
• با یک صفحه رندر شده توسط سرور نمی‌توان تعامل داشت، و تا زمانی که تمام جاوا اسکریپت سمت کلاینت اجرا نشود، نمی‌تواند به هیچ ورودی کاربر پاسخ دهد.و به طور خلاصه ممکن است زمان تعامل (TTI) را بدتر کند.

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

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

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

Developer tools

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

• Lighthouse 6.0 شامل پشتیبانی از اندازه گیری LCP در محیط آزمایشگاهی است.

• بخش زمان‌بندی پانل عملکرد در Chrome DevTools شامل یک نشانگر LCP است و زمانی که ماوس را روی قسمت Related Node می‌برید به شما نشان می‌دهد که کدام عنصر با LCP مرتبط است.

• گزارش تجربه کاربر Chrome مقادیر LCP دنیای واقعی را در سطح مبدأ جمع‌آوری می‌کند.