تصویر نویسنده

۱۴ مهر ۱۳۹۹

0

بهینه سازی Largest Contentful Paint

آموزش

قبلا در مورد LCP صحبت کردیم و توضیح دادیم که به چه معناست. حال در این مطلب قصد داریم تا درباره نحوه بهینه سازی Largest Contentful Paint آن صحبت کنیم.

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

LCP یک معیار اصلی Core Web Vital است و زمانی که بزرگترین عنصر محتوا در ویوپورت قابل مشاهده است را اندازه گیری می کند. می توان از آن برای تعیین زمان پایان کار ارائه محتوای اصلی صفحه بر روی صفحه استفاده کرد.

امتیازهای مربوط به LCP

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

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

پاسخ کند سرور

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

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

  • سرور خود را بهینه کنید.
  • کاربران را به یک CDN نزدیک هدایت کنید.
  • اطلاعات مهم را کش کنید.
  • صفحات HTML را به صورت cache-first آماده کنید.
  • ارتباطات طرف ثالث را زودهنگام برقرار کنید.

سرور خود را بهینه کنید

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

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

به عبارت دیگر، فرم ورک ها به جای ارسال فقط یک فایل HTML کامل که در صورت درخواست مرورگر از قبل آماده است، برای ساخت صفحه باید منطق را اجرا کنند. این ممکن است به دلیل نتایج معلق از یک جستجوی پایگاه داده باشد یا حتی به این دلیل که اجزای سازنده باید توسط یک فرم ورک UI در markup تولید شوند (مانند React).

بسیاری از فرم ورک های وب که بر روی سرور اجرا می شوند دارای راهنمایی عملکردی هستند که می توانید برای سرعت بخشیدن به این روند از آنها استفاده کنید.

کاربران را به یک CDN نزدیک هدایت کنید

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

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

چیزهای مهم را کش کنید

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

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

  • پروکسی های معکوس (Varnish، nginx) را برای ارائه محتوای کش شده یا عمل کردن مانند یک سرور کش هنگام نصب در مقابل سرور برنامه تنظیم کنید.
  • رفتار کش ارائه دهنده فضای ابری (Firebase ، AWS ، Azure) خود را پیکربندی و مدیریت کنید.
  • از CDN که edge server فراهم می کند استفاده کنید تا محتوای شما در کش شده و نزدیک به کاربران ذخیره شوند.

صفحات HTML را به صورت cache-first آماده کنید

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

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

کاهش توزیغ LCP با service worker
توزیع LCP، برای بارگذاری صفحات با و بدون یک service worker

نمودار، توزیع LCP از یک سایت در ۲۸ روز گذشته را نشان می دهد که بر اساس وضعیت service worker تقسیم شده است. توجه داشته باشید که صفحه های بیشتری پس از معرفی cache-first HTML در service worker (بخش آبی نمودار) مقدار LCP سریع تری دارند.

ارتباطات طرف ثالث را زودهنگام برقرار کنید

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

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

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

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

اگرچه هر دو نکته متفاوت عمل می کنند، استفاده از dns-prefetch را به عنوان گزینه بازگشتی برای مرورگرهایی که از اتصال مجدد پشتیبانی نمی کنند در نظر بگیرید.

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

رندر بلاکینگ CSS و جاوا اسکریپت

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

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

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

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

  • CSS را کوچک کنید
  • از شر CSS های غیر حیاتی راحت شوید
  • CSS حیاتی را inline کنید

CSS را کوچک کنید

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

اگر از بسته نرم افزاری ماژول یا ابزار ساخت استفاده می کنید، یک پلاگین مناسب برای کوچک کردن فایل های CSS در هر بیلد اضافه کنید:

کاهش LCP با کوچک کردن CSS

از شر CSS های غیر حیاتی راحت شوید

برای یافتن CSS بدون استفاده در صفحه وب خود از تب Coverage در Chrome DevTools استفاده کنید.

بخش coverage در chrome devtools

برای بهبود:

  • CSS های بدون استفاده را به طور کامل حذف کنید یا اگر در صفحه دیگری از سایتتان استفاده کرده اید، آن را به stylesheet دیگری منتقل کنید.
  • برای هر CSS که برای ارائه اولیه نیازی به آن نیست، از loadCSS به منظور بارگیری همزمان فایل ها استفاده کنید، که از اهرم های rel=”preload”and onload استفاده می کند.
<link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'">
کاهش زمان LCP بعد از حذف CSS غیرضروری
نمونه ای از بهبود LCP: قبل و بعد از به تعویق انداختن CSS غیرضروری

CSS حیاتی را inline کنید

با قرار دادن مستقیم آن در <head>، هر CSS مسیر حیاتی را که برای محتوای above-the-fold استفاده می شود، درون خطی کنید.

CSS ضروری inline شده

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

اگر نمی توانید به صورت دستی استایل های inline را به سایت خود اضافه کنید، از یک کتابخانه برای خودکار کردن فرآیند استفاده کنید. چند نمونه:

  • Critical ، CriticalCSS و Penthouse همه بسته هایی هستند که above-the-fold CSS را استخراج و inline می کنند
  • Critters یک افزونه وب پک است که CSS ضروری را inline می کند و بقیه را به عقب می اندازد
بهبود LCP پس از inline کردن CSS
نمونه ای از بهبود LCP: قبل و بعد از inline کردن CSS ضروری

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

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

با بهینه سازی اسکریپت ها به چند روش مختلف می توانید این کار را انجام دهید:

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

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

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

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

مدت زمان لازم برای بارگیری این عناصر در صورت ارائه above-the-fold، تأثیر مستقیمی بر LCP خواهد داشت. چند روش برای اطمینان از بارگیری سریع این فایل ها وجود دارد:

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

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

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

تصویر به عنوان بزرگترین عنصر صفحه:  design.google

بهبود مدت زمان بارگیری و ارائه این نوع تصاویر مستقیماً سرعت LCP را بهبود می بخشد. برای انجام این کار:

  • در وهله اول لازم بودن استفاده از تصویر را در نظر بگیرید. اگر به محتوا آسیبی نمی رسد، آن را حذف کنید.
  • فشرده سازی تصاویر به عنوان مثال با  Imagemin
  • تبدیل تصاویر به قالب های جدیدتر  JPEG 2000،JPEG XR  یا Web 
  • استفاده از تصاویر ریسپانسیو
  • استفاده از CDN عکس

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

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

اگر می دانید که یک منبع خاص باید اولویت بندی شود، از <link rel=”preload”> استفاده کنید تا آن را زودتر آماده کنید. بسیاری از منابع می توانند از قبل بارگیری شوند، اما ابتدا باید بر روی بارگیری دارایی های مهم مانند فونت ها، تصاویر یا فیلم های above-the-fold و CSS یا JavaScript مسیر حیاتی تمرکز کنید.

<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 ، JavaScript) را به میزان قابل توجهی کاهش دهند. Gzip به طور موثر در همه مرورگرها پشتیبانی می شود و Brotli، که نتایج فشرده سازی بهتری را نیز فراهم می کند، تقریباً در همه مرورگرهای جدیدتر قابل استفاده است.

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

  1. ابتدا بررسی کنید که آیا سرور شما از قبل فایل ها را به طور خودکار فشرده می کند یا خیر. بیشتر سیستم عامل های میزبانی، CDN ها و سرورهای معکوس پروکسی یا دارایی ها را به صورت پیش فرض با فشرده سازی رمزگذاری می کنند یا به شما امکان می دهند به راحتی آنها را پیکربندی کنید.
  2. اگر می خواهید سرور خود را برای فشرده سازی پرونده ها اصلاح کنید، از Brotli به جای gzip استفاده کنید زیرا می تواند نسبت های فشرده سازی بهتری را فراهم کند.
  3. هنگامی که یک الگوریتم فشرده سازی را برای استفاده انتخاب کردید، دارایی ها جلوتر از زمان درخواست توسط مرورگر فشرده کنید. با این کار سربار سرور به حداقل می رسد و از تأخیر در هنگام درخواست به ویژه هنگام استفاده از نسبت های فشرده سازی بالا جلوگیری می کند.
 قبل و بعد از فشرده سازی  Brotli
نمونه ای از بهبود LCP: قبل و بعد از فشرده سازی Brotli

ارائه تطبیقی

هنگام بارگیری منابعی که محتوای اصلی یک صفحه را تشکیل می دهند، بسته به شرایط دستگاه کاربر یا شبکه کاربر می تواند دارایی های مختلف را به طور مشروط فرا بخواند. این کار را می توان با استفاده از API های Network Information، Device Memory و HardwareConcurrency انجام داد.

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

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

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

  • navigator.connection.effectiveType: Effective connection type
  • navigator.connection.saveData: Data-saver enabled/disabled
  • navigator.hardwareConcurrency: CPU core count
  • navigator.deviceMemory: Device Memory

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

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

پیش پرداخت منابع ضروری با استفاده از یک service worker می تواند زمان بارگیری آنها را به میزان قابل توجهی کاهش دهد، به خصوص برای کاربرانی که صفحه وب را با اتصال ضعیف تری بارگیری می کنند (یا حتی به صورت آفلاین به آن دسترسی پیدا می کنند). کتابخانه هایی مانند Workbox می توانند روند به روزرسانی دارایی های منسوخ شده را آسان تر از انجام کار توسط خودتان کنند.

ارائه در سمت کلاینت

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

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

هنگام ساخت یک سایت ارائه شده در سمت مشتری، بهینه سازی های زیر را در نظر بگیرید:

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

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

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

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

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

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

به حداقل رساندن مقدار جاوا اسکریپت همیشه باید اولین موضوعی باشد که برای سایتهایی که عمدتا توسط مشتری ارائه می شوند روی آن تمرکز می شود. با این حال، شما همچنین باید ترکیبی از یک تجربه ارائه سرور را برای بهبود هر چه بیشتر LCP در نظر بگیرید.

این مفهوم با استفاده از سرور برای ارائه برنامه به HTML کار می کند، جایی که مشتری تمام JavaScript و داده های مورد نیاز را روی همان محتوای DOM “هیدراته” می کند. این کار می تواند با اطمینان از اینکه محتوای اصلی صفحه ابتدا در سرور ارائه می شود و نه فقط در کلاینت، LCP را بهبود بخشد، اما چند اشکال وجود دارد:

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

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

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

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

قبل و بعد از پیش رندر
نمونه بهبود LCP: قبل و بعد از پیش رندر

ابزارهای توسعه دهنده

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

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

بخشی از صفحه lighthouse گوگل

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

بخش Timings در پنل Performance در Chrome DevTools

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

منبع : web.dev

۳ ۱ vote
Article Rating