متریک «Largest Contentful Paint (LCP)» یا این که گران قدر‌ترین طراحی اپلیکیشن رسم محتوایی، این میزان معین کننده نقطه آغاز استارت لود یک شیت از وقتی میباشد که او‌لین عنصر در یک برگه اینترنت نمایان می شود و تا‌زمانیکه نصیب اعظم شیت لود خواهد شد ادامه خواهد داشت.
امتیاز مطلوب برای LCP چقدر میباشد؟
«LCP» به مراد رابطه خوب مجرب کاربری پیاده سازی گردیده است. برای ارائه آن تارنما‌ها می بایست کوشش کنند تا تعالی‌ترین رنگ محتوای 2.5 ثانیه یا این که کمتر را به‌دست بیاورند. برای یقین از وصال به‌این غرض، رایا پارس امتیاز ۷۵درصدی برای لود برگه در دستگاه‌های دسکتاپ و تلفن‌های یار به دست آورند.
بیشتر بخوانید: CLS یا این که Cumulative Layout shift چیست + راهکارهای بهبود آن
ارکان اصلی در احتساب LCP چیست؟
به عبارتی‌طور که اشاره کردیم، محتواهای یک ورقه به‌تیتر بلندمرتبه‌ترین موادسازنده، معرف این میزان می‌باشند. بدین ترتیب باتوجه « API » اکنون حاضر در «Largest Contentful Paint »، گونه های عنصرها در حیث گرفته گردیده برای آن عبارتند از:
تصاویر
تگهای مرتبط با تصاویر ،
تصاویر شاخص کلیپ
تصاویر دورنما‌ی که با « CSS » ساخته شده است.
موادسازنده محتوای متنی داخل صفحه ها یا این که متن‌های باطن خطی در سطح دوم
به‌خیال و خاطر داشته باشید application که محصور کردن ارکان به این شرکت به مراد معمولی نگه داشتن مفاد در اولِ عمل میباشد. با جاری ساختن پژوهش ها بیشتر ممکن میباشد در بعدی عناصری اضافه خواهد شد.
بیشتر بخوانید: نظارت گزارش قسمت Page Experience سرچ کنسول
شیوه‌های با صرفه‌سازی LCP
اصل اصلی کاهش « LCP » در مجموع تکنیک‌های مذکور زیر، کاهش داده‌های دانلود گردیده در دستگاه مخاطب و کاهش مجال ارسال و اجرای آن محتوا میباشد.
تصاویر خویش را باصرفه فرمایید
یکی‌از مهمترین مسایلی که در سرعت لود تارنما اثر می گذارد، وسعت و اندازه تصاویر میباشد. هاست‌ها معمولاً بعدها مشخصی را برای ورژن دسکتاپ یا این که گوشی سفارش میدهند. به کار گیری از آن از بار گذاری بیش تر از حد خودداری می‌نماید و قادر است « LCP » بالایی را ساخت نماید.
برای باصرفه‌سازی تصاویر این نکات را در لحاظ بگیرید:
در حالتی‌که تصویر شما با محتوا رابطه ندارد، آن را حذف فرمایید.
تصاویر را فشرده نمایید.
تصاویر را به فرمت‌های جدیدتر مانند: « Webp،JPEG2000 » یا این که « JPEG XR » تبدیل نمایید.
از تصاویر ریسپانسیو استعمال فرمائید.
از یک «image CDN» به کار گیری نمائید.
منابع اصلی و ضروری و اساسی را « Pre-load » کنیم.
اکثری از موردها اساسی وبسایت را قادر خواهیم بود « Pre-load » کنیم؛ منابعی مانند فونت‌ها، تصاویر، ویدیوها یا این که پچ‌های ضروری «CSS» یا این که جاوا اسکریپت. با به کار گیری از کد « link rel=”preload » می توانیم به فچ شدن سریع این منابع یاری کنیم.
فرصت پاسخگویی سرور را کاهش دهید
در‌صورتی‌که سرور شما برای جواب به یک درخواست مجال متعددی ارتفاع میکشد، پس مجال رندر شیت روی برگه نیز ارتقا می یابد. براین اساس، روی هر میزان سرعت برگه، مثلا « LCP » اثر منفی میگذارد. می توانید از « Time To First Byte (TTFB) » برای اندازه‌گیری جواب سرور به کار گیری فرمایید. برای بهبود «TTFB» طریق‌های مختلفی وجود دارااست:
سرور خویش را باصرفه‌سازی فرمائید.
یوزرها را به یک «CDN » مجاورت‌خیس هدایت فرمائید.
از «Cache Assets » امداد بگیرید.
یک رابطه «Third-Party » تولید نمایید.
از «signed exchanges » به کارگیری فرمائید.
منابع مسدودکننده رندر را حذف نمائید.
وقتی که مرورگر کاغذ «HTML» را از سرور شما اخذ می‌نماید، درخت «DOM» را تجزیه‌وتحلیل می‌نماید. در شرایطی‌که هر استایل‌کاغذ یا این که فولدر « JS » در«DOM» وجود داشته باشد، مرورگر می بایست پیش از تجزیه درخت «DOM» مانده را متوقف نماید.