LCP چیست؟ 14 روش بهبود LCP

در تیترهای زیر، همه چیزهایی را که باید در مورد LCP بدانید، یاد خواهید گرفت، زیرا موضوعاتی مانند:

• LCP چیست؟
• نحوه اندازه گیری LCP؛
• بهترین امتیاز برای LCP چیست؟
• نحوه بهبود LCP
• کاهش LCP در سایت های وردپرسی.

و بسیاری از عناوین دیگر که به آن ها خواهیم پرداخت. پس شروع کنیم!

LCP چیست؟

Largest Contentful Paint اندازه‌گیری می‌کند که چقدر طول می‌کشد تا بزرگترین المان تصویری در یک قاب بارگذاری شود.

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

انواع عناصر در نظر گرفته شده برای LCP عبارتند از:

• تصاویر؛
• برچسب های تصویر;
• تصاویر کوچک ویدیو؛
• تصاویر پس زمینه با CSS.
• عناصر متن

کاهش LCP وب سایت شما به کاربران کمک می کند تا محتوای ضروری وب سایت شما را سریعتر ببینند.

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

در اینجا نحوه اندازه گیری امتیاز LCP آورده شده است.

نحوه اندازه گیری LCP

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

PageSpeed Insights

می توانید یک آزمون PageSpeed Insights (PSI) اجرا کنید تا ببینید کدام عنصر در صفحه شما بزرگ ترین است.

بخش "Diagnostics" به شما نشان می دهد که کدام عنصر متریک LCP را راه اندازی می کند.

پنل "Performance" در DevTools نیز می تواند همین کار را انجام دهد:

فقط به صفحه ای که می خواهید تست کنید بروید. سپس، پانل "Inspect" را باز کنید، "Performance" را پیدا کنید و صفحه را بازخوانی کنید.

WebPageTest

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

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

GTMetrix

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

بهترین امتیاز برای LCP چیست؟

به گفته گوگل:

"برای ارائه یک تجربه کاربری خوب، سایت ها باید تلاش کنند تا LCP 2.5 ثانیه یا کمتر را داشته باشند.

بنابراین باید برای نتیجه زیر 2.5 ثانیه هدف گذاری کنید. اما چگونه می توان به آن دست یافت؟

برای بهبود زمان LCP صفحه، باید زمان بارگذاری آن عنصر را بهینه کنید.

در اینجا پنج راه اثبات شده برای انجام این کار وجود دارد.

نحوه بهبود LCP

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

• بهینه سازی تصویر؛
• بهینه سازی CSS و جاوا اسکریپت؛
• زمان پاسخگویی سریعتر سرور؛
• رندر سمت مشتری محدود و بهینه
• پیش بارگیری و اتصال اولیه

همه اینها همچنین به سایر معیارهای عملکرد مانند FCP، CLS و TTI کمک می کنند.

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

بهینه‌سازی تصویر مجموعه‌ای از تکنیک‌هایی است که می‌تواند تمام معیارهای بار را بهبود بخشد و تغییرات طرح‌بندی (CLS) را کاهش دهد.

1. فشرده سازی تصویر

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

دو نوع فشرده سازی وجود دارد - با اتلاف و بدون اتلاف.

فشرده سازی با از دست دادن بخش هایی از داده ها را از فایل حذف می کند و در نتیجه تصویری با کیفیت پایین تر و سبک وزن ایجاد می کند. JPEG و GIF نمونه هایی از انواع تصاویر با اتلاف هستند.

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

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

• اگر با ابزارهای command-line راحت هستید، می توانید از imagemin استفاده کنید.
• اگر نه، ابزارهای مبتدی مانند Optimizilla نیز کار بسیار خوبی انجام می دهند.

همچنین، به یاد داشته باشید که با رشد وب سایت شما، احتمالاً تصاویر بیشتری و بیشتری اضافه خواهید کرد. در نهایت، به ابزاری نیاز خواهید داشت که تصاویر را به صورت خودکار به سطح دلخواه شما بهینه کند.

2. انتخاب فرمت مناسب

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

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

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

برای دیگران (سایت‌های خبری و وبلاگ‌های شخصی)، تصاویر با وضوح پایین‌تر کاملاً خوب هستند.

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

در اینجا یک چک لیست سریع از قوانین داریم که می توانید به عنوان راهنما از آنها استفاده کنید:

• از SVG برای تصاویری که از اشکال هندسی ساده مانند لوگو تشکیل شده اند استفاده کنید.
• هر زمان که مجبور به حفظ کیفیت و در عین حال فدا کردن کمی سرعت هستید، از PNG استفاده کنید.
• برای تعادل بهینه بین کیفیت و UX، از WebP استفاده کنید و در عین حال فرمت اصلی را به عنوان پشتیبان نگه دارید، زیرا WebP 100٪ از مرورگر پشتیبانی نمی کند.

این استراتژی ما در NabzNet است.

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

3. از ویژگی srcset استفاده کنید

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

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

روش بهتری وجود دارد:

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

همانطور که می بینید با srcset به جای px از w استفاده می کنیم. اگر می خواهید یک نسخه تصویری 600 پیکسل عرض داشته باشد، باید 600 وات بنویسید.

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

وب سایت Airbnb از این روش استفاده می کند:

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

همچنین باید از DevTools برای بررسی نحوه نمایش تصاویر در نماهای مختلف استفاده کنید.

هنگامی که زمان تغییر اندازه تصویر فرا می رسد، از Smart Resize برای تغییر اندازه به صورت انبوه استفاده کنید.

توجه برای کاربران وردپرس: از نسخه 4.4.، WP به طور خودکار نسخه های مختلفی از تصاویر شما را ایجاد می کند. همچنین ویژگی srcset را اضافه می کند. اگر کاربر وردپرس هستید، فقط باید اندازه های مناسب تصویر را ارائه دهید.

4. تصاویر شاخص را از قبل بارگذاری کنید

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

تصاویر شاخص معمولاً بیشترین معنی را در بالای عناصر اصلی دارند، بنابراین بارگذاری سریعتر آنها برای تجربه کاربر بسیار مهم است.

این تکنیک به مرورگر می‌گوید که هنگام رندر کردن صفحه، آن تصویر خاص را در اولویت قرار دهد.

پیش بارگیری می تواند LCP را به طور چشمگیری بهبود بخشد، به خصوص در صفحاتی با تصاویر شاخص که با:

• جاوا اسکریپت؛
• ویژگی background-image در CSS.

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

CSS و بهینه سازی جاوا اسکریپت

قبل از اینکه مرورگر بتواند یک صفحه را رندر کند، باید تمام فایل‌های CSS و JavaScript را که در حین تجزیه HTML پیدا می‌کند، بارگیری، تجزیه و اجرا کند.

به همین دلیل است که CSS و جاوا اسکریپت هر دو به طور پیش فرض مسدود کننده رندر هستند.

اگر بهینه نشوند، می توانند بارگذاری صفحه را کاهش دهند و در نتیجه به LCP شما آسیب بزنند.

در اینجا نحوه بهینه سازی آنها آورده شده است:

1. فایل های کد را کوچک و فشرده کنید

Minification بخش‌های غیرضروری را از فایل‌های کد مانند نظرات، فضای خالی و خطوط شکسته حذف می‌کند. باعث کاهش حجم فایل کوچک تا متوسط می شود.

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

هر دو تکنیک در مورد عملکرد ضروری هستند.

برخی از شرکت های میزبان و ارائه دهندگان CDN این تکنیک ها را به طور پیش فرض اعمال می کنند. ارزش بررسی این را دارد که ببینید آیا آنها در سایت شما پیاده سازی شده اند یا خیر.

اکثر فایل‌های کوچک‌سازی‌شده در جایی به نام خود «.min» دارند. فایل های فشرده دارای هدر پاسخ کدگذاری محتوا هستند که معمولاً مقدار gzip یا br دارد.

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

اگر نمی توانند، ابزارهای کوچک سازی و فشرده سازی زیادی از جمله ابزارهای رایگان وجود دارد.

2. Critical CSS را پیاده سازی کنید

پیاده سازی CSS Critical یک فرآیند سه مرحله ای است که شامل موارد زیر است:

• یافتن CSS که در قسمت‌های بالای صفحه در ویوپورت‌های مختلف استایل‌بندی می‌کند.
• قرار دادن (داخلی کردن) آن CSS به طور مستقیم در تگ سر صفحه.
• به تعویق انداختن بقیه CSS.

می‌توانید با استفاده از پانل «پوشش» در DevTools شروع کنید تا بفهمید چه مقدار از هر فایل CSS در صفحه استفاده می‌شود.

می توانید منابع را بر اساس نوع مرتب کنید و هر فایل CSS و JS را مرور کنید.

بدیهی است که CSS که در صفحه مورد استفاده قرار نمی گیرد، حیاتی نیست. با توجه به این نکته، ارزش تلاش برای حذف یا کاهش این CSS استفاده نشده را دارد، زیرا می تواند رندر را کاهش دهد. به همین دلیل است که ما ویژگی Reduce Unused CSS را برای NitroPack ساختیم.

در مرحله بعد، برای استخراج CSS Critical، باید کد را به صورت دستی مرور کنید یا از یک ابزار استفاده کنید. دو گزینه عالی برای این کار، CSS و حیاتی هستند.

پس از استخراج، Critical CSS را در تگ head صفحه خود قرار دهید.

در نهایت، بقیه CSS را به صورت ناهمزمان بارگذاری کنید. Google توصیه می‌کند از link rel="preload"، as="style"، یک کنترل کننده بارگذاری نال شده و تودرتو کردن پیوند به stylesheet در یک عنصر noscript.

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

3. بهینه کردن جاوا اسکریپت

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

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

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

برخی از ابزارهای محبوب برای این کار عبارتند از webpack، Rollup و browserify.

زمان پاسخگویی سریعتر سرور

کاهش زمان پاسخ اولیه سرور یکی از رایج ترین پیشنهادات در PageSpeed Insights است.

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

• پلن هاست خود را ارتقا دهید. اگر از یک برنامه میزبانی ارزان و مشترک استفاده می کنید، باید آن را ارتقا دهید. داشتن یک وب سایت سریع با سرور میزبان کند غیرممکن است.
• سرور خود را بهینه کنید عوامل زیادی می توانند بر عملکرد سرور شما تأثیر بگذارند، به خصوص زمانی که ترافیک اوج بگیرد. از این آموزش کتی همپنیوس برای ارزیابی، تثبیت، بهبود و نظارت بر سرور خود استفاده کنید.
• پلاگین ها، ابزارها و کتابخانه های شخص ثالث وابسته به سایت را کاهش دهید. آنها مقدار کدی را که باید روی سرور یا مرورگر اجرا شود افزایش می دهند. این امر مصرف منابع را افزایش می دهد و به معیارهایی مانند Time to First Byte، First Contentful Paint و LCP آسیب می رساند.
• حداکثر بهره را از حافظه پنهان ببرید. حافظه پنهان ستون فقرات عملکرد عالی وب است. بسیاری از دارایی ها را می توان برای ماه ها یا حتی یک سال در حافظه پنهان نگه داشت (آرم ها، نمادهای ناوبری، فایل های رسانه ای). همچنین، اگر HTML شما ثابت است، می توانید آن را کش کنید، که می تواند TTFB را به میزان قابل توجهی کاهش دهد.
• از CDN استفاده کنید. CDN فاصله بین بازدیدکنندگان و محتوایی را که می خواهند به آن دسترسی داشته باشند کاهش می دهد. برای اینکه کار خود را تا حد امکان آسان کنید، یک ابزار کش با CDN داخلی تهیه کنید.
• رندر سمت مشتری محدود و بهینه شده
• رندر سمت مشتری (CSR) به معنای استفاده از جاوا اسکریپت برای رندر کردن صفحات به طور مستقیم در مرورگر است.

کاهش LCP در سایت های وردپرسی

تکنیک های ذکر شده در بالا به بهبود LCP در همه سایت ها، از جمله سایت هایی که بر روی WordPress (WP) ساخته شده اند، کمک می کند. با این حال، دو نکته دیگر نیز می تواند به بهینه سازی این معیار در سایت های WP کمک کند:

• یک تم سبک انتخاب کنید. یک قالب سنگین می تواند زمان بارگذاری را به میزان قابل توجهی افزایش دهد و به Core Web Vitals شما از جمله LCP آسیب برساند. به همین دلیل باید موضوع خود را با دقت انتخاب کنید. برای جزئیات بیشتر، این تحقیق توسط Kinsta را بررسی کنید. شما می توانید لیست بهترین قالب های فروشگاهی وردپرس را در این لینک مشاهده کنید.
• از افزونه های زیاد استفاده نکنید. در حالی که افزونه ها عملکردهای مفیدی را ارائه می دهند، اکثر آنها هزینه عملکردی نیز دارند. آنها مقدار کدی را که باید اجرا شود افزایش می دهند که منجر به مصرف بیشتر منابع می شود. در مورد هر افزونه به دقت تحقیق کنید و پس از افزودن بر عملکرد سایت خود نظارت کنید.

هر دوی این نکات هنگام کار با سایت های وردپرس ضروری هستند. آنها را با تکنیک های ذکر شده در بالا ترکیب کنید و باید شاهد پیشرفت های بزرگ LCP باشید.

سایر ابزارها و بهترین روش ها برای نظارت بر Core Web Vitals

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

داده‌های میدانی توسط گزارش تجربه کاربر Chrome (CrUX) جمع‌آوری می‌شود. این داده ها نشان می دهد که کاربران واقعی چگونه سایت شما را تجربه می کنند. می‌توانید داده‌های میدانی را در بالای گزارش PageSpeed Insights خود بیابید:

از آنجایی که Google Core Web Vitals یک صفحه را برای دوره 28 روزه قبلی ارزیابی می کند، باید صفحات مهم را حداقل یک بار در ماه آزمایش کنید.

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

• Chrome UX Report API - به تجربه ای با جاوا اسکریپت و JSON نیاز دارد.
• BigQuery - به پروژه Google Cloud و مهارت های SQL نیاز دارد.
• گزارش Core Web Vitals در کنسول جستجوی گوگل - بسیار مناسب برای مبتدیان، مفید برای بازاریابان، سئوکاران و مدیران سایت.

اینکه کدام ابزار را انتخاب کنید به ترجیح شما بستگی دارد. نکته مهم این است که از هر گونه مشکل احتمالی در مورد LCP وب سایت خود (و دیگر Core Web Vitals) آگاه باشید.

باز هم، مطمئن شوید که گزارش Core Web Vitals را حداقل یک بار در ماه بررسی کنید. گاهی اوقات مشکلات می توانند در مکان های غیرمنتظره ظاهر شوند و برای مدت طولانی ناشناخته باقی بمانند.