چندین کار وجود دارد که می توانید برای بهبود عملکرد LCP یک صفحه انجام دهید:
- یک سرور سریع دریافت کنید
- یک CDN راه اندازی کنید
- جاوا اسکریپت استفاده نشده را حذف کنید
- JS و CSS را به تعویق بیندازید
- فایل های JS و CSS را کوچک کنید
- تصاویر را بهینه کنید و آنها را در WebP ارائه دهید
- از فرمت های فشرده سازی مانند GZIP یا Brotli برای دارایی های ثابت استفاده کنید
- از rel=”preload” برای دارایی های حیاتی استفاده کنید
- از rel=”preconnect” برای اتصالات شخص ثالث استفاده کنید
سایت هایی که بر روی CMS های محبوبی مانند وردپرس اجرا می شوند، می توانند از بسیاری از راه حل های مخصوص پلتفرم برای کمک به این مسائل و به طور کلی بهینه سازی سرعت صفحه استفاده کنند. در مورد اینکه چگونه این افزونه ها و خدمات می توانند به ساده سازی این فرآیند کمک کنند، بیشتر بخوانید.
بار روی سرور را کم کنید
شما می توانید با بهینه سازی پرس و جوهای پایگاه داده و حذف پرس و جوهای پر منابع، کارها را در سرور خود آسان تر کنید. به عنوان مثال، صفحاتی که از منطق زیادی برای تولید صفحه به صورت پویا استفاده می کنند، قبل از اینکه کاربر نهایی فرصتی برای دیدن صفحه پیدا کند، سرورها را از بین می برند. برای سایت‌های وردپرس، کش کردن و یک تم بهینه‌سازی شده کلیدی برای سرعت هستند.
بزرگترین رنگ محتوایی: چگونه امتیاز خود را برای همیشه بهبود دهیم | 10 وب
از CDN استفاده کنید
یک شبکه تحویل محتوا (CDN) محتوا را از شبکه ای از سرورهای خود ارائه می دهد. استفاده از CDN می تواند زمان بارگذاری کلی صفحه را با ارائه خدمات وب سایت شما از مکانی که از نظر جغرافیایی به کاربر نزدیک تر است، کوتاه کند. به علاوه، بسیاری از CDN ها بهینه سازی تصویر را ارائه می دهند که به بهبود عملکرد Largest Contentful Paint کمک می کند.
جاوا اسکریپت را به تعویق بیندازید
به تعویق انداختن جاوا اسکریپت به شما این امکان را می دهد که کدهای مورد نیاز برای محتوای بالا و دارایی های حیاتی را اولویت بندی کنید، سپس منتظر بمانید تا بقیه بارگذاری شوند. از آنجایی که نمی‌توان همه JS را به تعویق انداخت، می‌توانید برخی از درخواست‌های اسکریپت‌ها را با درون‌سازی کدهای حیاتی با تگ <script> حذف کنید.
با اسکریپت‌های مهم درون خطی، می‌توانید ویژگی‌های async یا defer را به URLهای JS غیر مهم اضافه کنید و آنها را به ترتیب بارگذاری بعدی موکول کنید.
CSS را به تعویق بیندازید
می‌توانید CSS حیاتی را در یک بلوک <style> در سر صفحه درون‌نویسی کنید، سپس از سایر شیوه نامه‌ها درخواست کنید تا با استفاده از ویژگی‌ها و مقادیر پیوند rel=”preload” و as=”style به صورت ناهمزمان بارگذاری شوند.
فایل های JS، CS و HTML را کوچک و فشرده کنید
کوچک کردن فایل های جاوا اسکریپت، CSS و HTML تمام فضای خالی را حذف می کند.
بهینه سازی تصاویر
برای تصاویری که به‌عنوان بزرگترین محتوای Paint استفاده می‌شوند، اندازه مناسب، فشرده‌سازی و ارائه در قالب‌های مدرن مانند WepP، JPEG 2000 یا JPEG XR ضروری است تا بتوانند با حداکثر کارآمدی بارگذاری شوند.
استفاده از پرسش‌های رسانه‌ای و تصاویر با اندازه مناسب برای اندازه‌های مختلف صفحه نمایش به اطمینان از امتیاز LCP خوب و تجربه کاربری بهتر در دستگاه‌های تلفن همراه کمک می‌کند.
بهینه سازی تحویل فونت ها
فونت ها متخلفان شناخته شده ای برای نگه داشتن نمایش هستند. بارگیری فونت‌ها از قبل و کاهش تعداد درخواست‌ها برای چهره‌ها و تغییرات فونت‌های مختلف به راه‌اندازی این آهسته‌ها کمک می‌کند.
مشکلات رایجی که منجر به امتیازات ضعیف LCP می شود
وقتی صحبت از سرعت پایین صفحه به میان می‌آید، چند مورد نادیده گرفته می‌شود. برای بهترین امتیاز رنگ محتوایی، باید از استفاده از موارد زیر خودداری کنید:
پرس و جوهای پیچیده سمت سرور و منطق پر منابع برای تولید پویا یک صفحه.
فونت ها و انواع بسیار زیاد.
جاوا اسکریپت مسدودکننده رندر – فقط آنچه را که صفحه نیاز دارد بارگیری می کند، زمانی که به آن نیاز دارد، و بقیه را به تعویق می اندازد.
انبوهی از شیوه نامه ها – سبک های انتقادی را شناسایی کرده و درون آن قرار دهید، سپس بقیه را ادغام و به تعویق بیندازید.
تصاویر با اندازه کامل با اندازه فایل های فشرده نشده و بزرگ.
استفاده از میزبانی بودجه یکی دیگر از مشکلات مهمی است که باید از آن اجتناب کنید. پاسخ آهسته سرور فقط LCP را افزایش می دهد.
مواردی که باید برای سرعت سایت وردپرس در نظر بگیرید
خوشبختانه، تعداد زیادی افزونه وردپرس وجود دارد که راه‌حل‌های حذفی را برای بسیاری از فاکتورهای بزرگترین امتیاز رنگ محتوای بالا ارائه می‌دهند.
اول از همه، برای بهبود LCP در سایت وردپرس، ارتقا هاست خود را در نظر بگیرید. شانس دسترسی آسان به LCP کمتر از 2.5 ثانیه بدون برنامه میزبانی قوی که روی سرورهای سریع اجرا می شود، بسیار اندک است.