به طراح وب خوش آمدید.
آیا به تازگی وب سایت خود را از طریق Google PageSpeed Insights راه اندازی کرده اید تا یک پیام تشخیصی مبنی بر اینکه بزرگترین تصویر Contentful Paint بارگذاری شده است را دریافت کنید؟
بارگذاری تنبل معمولا یک تاکتیک هوشمندانه برای سریعتر بارگذاری سایت شما است. 🎿
اما اگر با تنبلی تصویر را در بالای صفحه بارگذاری میکنید، که برای محاسبه طولانیترین زمانهای رندر محتوا در سایت شما استفاده میشود، این میتواند علیه شما کارساز باشد. چرا؟ بارگذاری تنبل اولین تصویر در واقع می تواند بزرگترین زمان رندر سایت شما را کند کند زیرا نمایش آن زمان بیشتری می برد.
به همین دلیل است که PageSpeed Insights “بزرگترین تصویر Contentful Paint با تنبلی بارگذاری شد» پیام تشخیصی
خوشبختانه، یک راه حل نسبتا ساده وجود دارد – تنها کاری که باید انجام دهید این است که اولین تصویر را از بارگذاری تنبل حذف کنید.
👉 در این پست ساده ترین روش انجام این کار را در سایت وردپرسی خود خواهید آموخت.
چگونه بزرگترین پیام بارگذاری تنبل تصویر Contentful Paint را در PageSpeed Insights رفع کنیم
در اینجا دو روش برای حذف تصویر اول از بارگذاری تنبل در وردپرس وجود دارد:
- از افزونه رایگان Optimole استفاده کنید که بارگذاری تنبل بهینه شده و همچنین بسیاری از ویژگی های بهینه سازی تصویر دیگر را ارائه می دهد..
- برای تنظیم قابلیت بارگذاری تنبل داخلی مرورگر وردپرس، یک قطعه کد اضافه کنید..
۱٫ از Optimole برای بهینه سازی تصاویر خود برای بیشترین رنگ محتوا استفاده کنید.
سادهترین راه برای تعمیر بزرگترین عیبیابی تصویر Contentful Paint که با تنبلی بارگذاری شده است، استفاده از آن است. پلاگین Optimole. این یک ابزار همه کاره بهینه سازی تصویر است که متعلق به خانواده Themeisle است.
Optimole علاوه بر کمک به شما برای حل این مشکل خاص، ابزارهای زیادی را برای بهینه سازی تصاویر سایت شما برای بیشترین محتوا (و فقط عملکرد وب) ارائه می دهد.
🖱️ کاری که او می تواند انجام دهد این است:
- تصاویر پاسخگو و بیدرنگ را برای هر بازدیدکننده بهینهسازی کنید. به عنوان مثال، هنگامی که در یک گوشی هوشمند با وضوح پایین مشاهده می شود، تصاویر کوچکتر از زمانی که در یک صفحه نمایش ۴K مشاهده می شوند، خواهند بود.
- بارگذاری تنبل تصاویر، از جمله حذف اولین تصاویر X از بارگذاری تنبل.
- فشرده سازی تصاویر با استفاده از فشرده سازی با اتلاف یا بدون اتلاف.
- تبدیل تصاویر به فرمت های بهینه شده مانند WebP و AVIF.
- تصاویر را از طریق شبکه تحویل محتوای داخلی (CDN) که توسط شبکه جهانی Amazon CloudFront ارائه میشود.
وقتی صحبت از تشخیص بارگذاری تنبل بزرگترین تصویر با محتوا می شود، مهمترین ویژگی Optimole این است که اولین تصاویر X در پست شما را از بارگذاری تنبل حذف می کند.
⚙️ چگونه این کار را انجام دهیم…
افزونه Optimol را در وب سایت خود فعال کنید
ابتدا افزونه رایگان Optimole را در وب سایت خود نصب و فعال کنید. این افزونه در WordPress.org فهرست شده است و می توانید آن را مانند هر افزونه رایگان دیگری نصب کنید.
پس از فعال سازی افزونه، از شما خواسته می شود که یک حساب کاربری رایگان برای دسترسی به کلید API ایجاد کنید. این به شما امکان می دهد تا سایت خود را به سرویس Optimole متصل کنید.
فقط دستورالعمل ها را دنبال کنید. شما آن را در کمتر از یک دقیقه راه اندازی خواهید کرد.
اولین تصاویر را از بارگیری تنبل حذف کنید
پس از اتصال به افزونه، باید نوار ابزار Optimole را مشاهده کنید.
همیشه می توانید با رفتن به آن به آن دسترسی داشته باشید رسانه → Optimole.
Optimol به طور پیش فرض بارگذاری تنبل را فعال می کند. همچنین به طور خودکار بارگذاری تنبل سه تصویر اول را حذف می کند. به عبارت دیگر، حتی با تنظیمات پیش فرض باید پیام عیب یابی را برطرف کند.
اگر میخواهید تصاویر اضافی را از بارگذاری تنبل حذف کنید یا رفتار بارگذاری تنبل را سفارشی کنید، میتوانید به تنظیمات → پیشرفته → بارگذاری تنبل در قسمت Optimole داشبورد وردپرس.
سایر ویژگی های بهینه سازی تصویر را با توجه به ترجیحات خود تنظیم کنید.
Optimole علاوه بر رفع مشکلات مربوط به بارگذاری تنبل و بزرگترین تصاویر رنگی محتوایی، بسیاری دیگر از ویژگیهای بهینهسازی تصویر مفید را ارائه میدهد که ارزش کاوش را دارند.
برای مشاهده و/یا فعال کردن این ویژگیها، میتوانید به آن مراجعه کنید تنظیمات ناحیه رابط Optimole در داشبورد وردپرس.
۲٫ از کد برای حذف تصاویر از بارگذاری تنبل داخلی وردپرس استفاده کنید.
حتی اگر از یک پلاگین بارگذاری تنبل اختصاصی مانند Optimole استفاده نکنید، ممکن است همچنان با آن مواجه شوید بزرگترین تصویر Contentful Paint با تنبلی بارگذاری شد پیام دلیل آن این است که وردپرس پشتیبانی بومی را برای بارگذاری تنبل در وردپرس ۵٫۵ اضافه کرده است.
در ابتدا، این باعث می شد که با بد بودن رندر بزرگترین محتوا، مشکلاتی ایجاد شود، زیرا با تنبلی تمام تصاویر را بارگذاری می کرد.
برای رفع آن و اجتناب بزرگترین تصویر Contentful Paint با تنبلی بارگذاری شد وردپرس ۵٫۹ این رفتار را تغییر داد تا به طور خودکار اولین تصویر را از بارگذاری تنبل حذف کند.
با این حال، شما همچنان می توانید با مشکل بارگذاری تنبل داخلی وردپرس به دلیل برخی موارد لبه یا مشکل با موضوع خود مواجه شوید.
اگر می خواهید ایمن باشید، می توانید استفاده کنید تابع wp_omit_loading_attr_threshold(). و یک قلاب اکشن با این کار تعداد تصاویری که از بارگذاری تنبل حذف می شوند تنظیم می شود.
به عنوان مثال، می توانید اولی را حذف کنید دو تصاویر، نه فقط تصویر اول.
برای این کار قطعه کد زیر را به آن اضافه کنید functions.php فایل تم فرزند شما یا یک افزونه مدیر کد مانند قطعه کد.
add_filter( 'wp_omit_loading_attr_threshold', function($omit_threshold){
if ( is_single() ) {
$omit_threshold = 2;
}
return $omit_threshold;
} );
این قطعه کد دو تصویر اول را از همه پستها حذف میکند. اگر می خواهید حتی تصاویر بیشتری را حذف کنید، می توانید عدد “۲” را به عدد بزرگتر تغییر دهید.
پیام ثابت در مورد بارگذاری تنبل بزرگترین تصویر با محتوای Paint برای همیشه 🎯
اگر در PageSpeed Insights پیغام ” بزرگترین تصویر رندر بارگذاری شده بود ” را مشاهده کردید، به این معنی است که با تاخیر در بارگذاری تصویر اصلی، زمان رندر بزرگترین محتوای سایت خود را کاهش می دهید.
ساده ترین راه برای حل این مشکل نصب است پلاگین optimole رایگان و آن را طوری تنظیم کنید که چند تصویر اول را از بارگذاری تنبل حذف کند.
علاوه بر رفع این عیب، کارهای مفید دیگری نیز برای بهینه سازی تصاویر شما برای حداکثر زمان رندر محتوا و به طور کلی عملکرد وب انجام می دهد.
اگر از بارگذاری تنبل داخلی مرورگر وردپرس به جای افزونه بارگذاری تنبل استفاده می کنید، می توانید به صورت دستی تعداد تصاویر حذف شده از بارگذاری تنبل را نیز تنظیم کنید. wp_omit_loading_attr_threshold() تابع.
👉 برای برخی از راههای دیگر برای بهبود این معیار، میتوانید پنج نکته ما را برای سرعت بخشیدن به زمانهای رندر برتر محتوای خود و همچنین راهنمای کلی ما برای Google Core Web Vitals بخوانید.
آیا هنوز در مورد نحوه جلوگیری از بارگذاری تنبل اولین تصویر در وردپرس سؤال دارید؟ در نظرات به ما اطلاع دهید!