بارگیری تنبل در سطح مرورگر برای CMS ها

یادگیری برای اتخاذ ویژگی بارگذاری استاندارد شده

فلیکس آرنتز

هدف من از این پست متقاعد کردن توسعه دهندگان و مشارکت کنندگان پلتفرم CMS (یعنی افرادی که هسته های CMS را توسعه می دهند) است که اکنون زمان اجرای پشتیبانی از ویژگی بارگذاری تنبل تصویر در سطح مرورگر است . همچنین توصیه هایی را در مورد چگونگی اطمینان از تجربه کاربری با کیفیت بالا و فعال کردن سفارشی سازی توسط سایر توسعه دهندگان در حین اجرای بارگذاری تنبل به اشتراک خواهم گذاشت. این دستورالعمل ها از تجربه ما در افزودن پشتیبانی به وردپرس و همچنین کمک به جوملا، دروپال و TYPO3 برای اجرای این ویژگی آمده است.

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

زمینه

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

سیستم های مدیریت محتوا قدرت حدود 60 درصد از وب سایت ها را تامین می کنند ، بنابراین این پلتفرم ها نقش حیاتی در پذیرش ویژگی های مرورگر مدرن به وب دارند. با توجه به اینکه چند CMS منبع باز محبوب مانند وردپرس ، جوملا و TYPO3 قبلاً از ویژگی loading بر روی تصاویر پشتیبانی کرده‌اند، بیایید نگاهی به رویکردهای آنها و نکاتی که برای استفاده از این ویژگی در سایر پلتفرم‌های CMS مرتبط هستند، بیاندازیم. . رسانه بارگذاری تنبل یک ویژگی کلیدی عملکرد وب است که سایت ها باید در مقیاس بزرگ از آن بهره مند شوند، به همین دلیل است که استفاده از آن در سطح اصلی CMS توصیه می شود.

موردی برای اجرای بارگذاری تنبل در حال حاضر

استاندارد سازی

پذیرش ویژگی‌های غیر استاندارد مرورگر در CMS، آزمایش گسترده را تسهیل می‌کند و می‌تواند زمینه‌های بالقوه بهبود را نشان دهد. با این حال، اجماع عمومی در بین CMS ها این است که، تا زمانی که یک ویژگی مرورگر استاندارد نشده باشد، ترجیحاً باید در قالب یک افزونه یا افزونه برای پلتفرم مربوطه پیاده سازی شود. تنها زمانی که استاندارد شود می توان یک ویژگی را برای پذیرش در هسته پلت فرم در نظر گرفت.

پشتیبانی از مرورگر

پشتیبانی مرورگر از این ویژگی نگرانی مشابهی است: اکثر کاربران CMS باید بتوانند از این ویژگی بهره مند شوند. اگر درصد قابل توجهی از مرورگرها وجود داشته باشند که این ویژگی هنوز پشتیبانی نمی شود، این ویژگی باید اطمینان حاصل کند که حداقل هیچ اثر نامطلوبی برای آن ها ندارد.

آستانه های فاصله از درگاه دید

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

توصیه های تجربه کاربر

نیاز به ویژگی های ابعاد در عناصر

برای جلوگیری از تغییر طرح ، توصیه‌ای از دیرباز این بوده است که محتوای جاسازی‌شده مانند تصاویر یا آی‌فریم‌ها باید همیشه دارای ویژگی‌های ابعاد width و height باشد ، تا مرورگر بتواند نسبت ابعاد آن عناصر را قبل از بارگیری واقعی آنها استنتاج کند. این توصیه صرف نظر از اینکه یک عنصر در حال بارگذاری تنبل است یا خیر مرتبط است. با این حال، به دلیل 0.1٪ احتمال بیشتر بارگذاری نشدن کامل تصویر یک بار در نمای دید، با بارگذاری تنبل در محل کمی بیشتر قابل استفاده است.

CMS ها ترجیحاً باید ویژگی های ابعاد را در همه تصاویر و iframe ها ارائه دهند. اگر این امکان برای هر عنصری وجود ندارد، به آنها توصیه می شود از تصاویر بارگذاری تنبلی که هر دو ویژگی را ندارند صرف نظر کنند.

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

در حال حاضر CMSها توصیه می‌شوند که فقط ویژگی‌های loading="lazy" را به تصاویر و iframe‌هایی که در زیر صفحه قرار دارند اضافه کنند تا از تاخیر در اندازه‌گیری Largest Paint جلوگیری شود، که در برخی موارد می‌تواند همانطور که در جولای کشف شد قابل توجه باشد. 2021 . با این حال، باید اذعان کرد که ارزیابی موقعیت یک عنصر نسبت به viewport قبل از فرآیند رندر پیچیده است. این امر مخصوصاً زمانی اعمال می‌شود که CMS از یک رویکرد خودکار برای افزودن ویژگی‌های loading استفاده می‌کند، اما حتی بر اساس مداخله دستی چندین فاکتور مانند اندازه‌های مختلف درگاه دید و نسبت‌های ابعادی باید در نظر گرفته شود. با این حال، اکیداً توصیه می‌شود که تصاویر قهرمان و سایر تصاویر یا آیفریم‌هایی که احتمالاً در بالای صفحه ظاهر می‌شوند را از لود کردن تنبل حذف کنید.

اجتناب از جاوا اسکریپت بازگشتی

در حالی که جاوا اسکریپت می تواند برای ارائه بارگذاری تنبل برای مرورگرهایی که (هنوز) از ویژگی loading پشتیبانی نمی کنند استفاده شود، چنین مکانیزم هایی همیشه متکی به حذف اولیه ویژگی src یک تصویر یا iframe هستند که باعث تاخیر برای مرورگرهایی می شود که از ویژگی پشتیبانی می کنند . . علاوه بر این، راه‌اندازی چنین راه‌حل مبتنی بر جاوا اسکریپت در جلوی یک CMS در مقیاس بزرگ، مساحت سطح را برای مشکلات احتمالی افزایش می‌دهد، به همین دلیل است که هیچ CMS بزرگی قبل از ویژگی استاندارد مرورگر، بارگذاری تنبل را در هسته‌اش اتخاذ نکرده بود.

توصیه های فنی

بارگذاری تنبل را به طور پیش فرض فعال کنید

توصیه کلی برای CMS هایی که بارگذاری تنبل در سطح مرورگر را اجرا می کنند، فعال کردن آن به طور پیش فرض است، به عنوان مثال loading="lazy" باید به تصاویر و iframe ها اضافه شود، ترجیحاً فقط برای آن دسته از عناصری که دارای ویژگی های ابعاد هستند . فعال بودن این ویژگی به‌طور پیش‌فرض باعث صرفه‌جویی در منابع شبکه می‌شود تا زمانی که به صورت دستی فعال می‌شد، برای مثال بر اساس عکس.

تا آنجا که ممکن است، loading="lazy" فقط باید به عناصری اضافه شود که احتمالاً در زیر صفحه ظاهر می شوند . در حالی که اجرای این الزام برای یک CMS به دلیل عدم آگاهی از سمت کلاینت و اندازه‌های دید مختلف می‌تواند پیچیده باشد، توصیه می‌شود حداقل از اکتشافات تقریبی برای حذف عناصری مانند تصاویر قهرمان که احتمالاً در بالای صفحه ظاهر می‌شوند استفاده کنید. تنبل بودن .

تغییرات هر عنصر را مجاز کنید

در حالی که loading="lazy" باید به طور پیش‌فرض به تصاویر و iframe‌ها اضافه شود، مهم است که اجازه دهید ویژگی در برخی از تصاویر حذف شود، برای مثال برای بهینه‌سازی LCP . اگر مخاطب CMS به طور متوسط ​​با فناوری بیشتر آشنا باشد، این می‌تواند یک کنترل رابط کاربری باشد که برای هر تصویر و فریمی در معرض دید قرار می‌گیرد و اجازه می‌دهد از بارگذاری تنبل برای آن عنصر انصراف دهد. به طور متناوب یا علاوه بر این، یک API می تواند در معرض توسعه دهندگان شخص ثالث قرار گیرد تا بتوانند تغییرات مشابهی را از طریق کد ایجاد کنند.

به عنوان مثال وردپرس اجازه می دهد تا از ویژگی loading برای کل تگ یا زمینه HTML یا برای یک عنصر HTML خاص در محتوا صرفنظر کنید.

بهینه سازی محتوای موجود

در سطح بالا، دو رویکرد برای افزودن ویژگی loading به عناصر HTML در CMS وجود دارد:

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

برای CMS توصیه می‌شود که هنگام رندر کردن، ویژگی را به صورت همزمان اضافه کند تا مزایای بارگذاری تنبل را برای هر محتوای موجود نیز به ارمغان بیاورد. اگر ویژگی صرفاً از طریق ویرایشگر اضافه شود، فقط محتوای جدید یا اصلاح شده جدید از مزایای آن برخوردار می شود و تأثیر CMS بر صرفه جویی در منابع شبکه را به شدت کاهش می دهد. علاوه بر این، در صورتی که قابلیت‌های بارگذاری تنبل در سطح مرورگر بیشتر گسترش یابد، افزودن این ویژگی به راحتی امکان تغییرات آینده را فراهم می‌کند.

با این حال، افزودن ویژگی در حال پرواز باید ویژگی loading بالقوه موجود روی یک عنصر را برآورده کند و اجازه دهد چنین ویژگی اولویت داشته باشد. به این ترتیب، CMS یا یک افزونه برای آن نیز می‌تواند رویکرد ویرایشگر محور را بدون ایجاد تضاد با ویژگی‌های تکراری پیاده‌سازی کند.

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

هنگام اضافه کردن ویژگی loading به محتوا در حال پرواز با استفاده از (مثلا) یک میان افزار سمت سرور، سرعت مورد توجه قرار می گیرد. بسته به CMS، مشخصه را می توان از طریق پیمایش DOM یا عبارات منظم اضافه کرد، که دومی برای عملکرد توصیه می شود.

استفاده از عبارات منظم باید به حداقل برسد، به عنوان مثال یک regex منفرد که تمام تگ‌های img و iframe را در محتوا از جمله ویژگی‌های آنها جمع‌آوری می‌کند و سپس ویژگی loading را به هر رشته برچسب اضافه می‌کند. برای مثال وردپرس تا آنجا پیش می‌رود که یک عبارت منظم کلی برای انجام عملیات‌های مختلف در حین پرواز به عناصر خاص دارد ، که افزودن loading="lazy" تنها یکی از آنهاست، با استفاده از یک عبارت منظم برای تسهیل چندین ویژگی. علاوه بر این، این شکل از بهینه‌سازی دلیل دیگری است که چرا استفاده از بارگذاری تنبل در هسته یک CMS از طریق یک برنامه افزودنی توصیه می‌شود - بهینه‌سازی عملکرد سمت سرور را بهتر می‌سازد.

مراحل بعدی

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

اگر پشتیبانی از بارگذاری تنبل در سطح مرورگر اضافه شده است، برای سؤال یا نظرات، یا برای دریافت CMS خود در این صفحه، توییت کنید ( felixarntz@ ). اگر با چالش های دیگری روبرو شدید، من نیز کنجکاو هستم که در مورد آنها بیشتر بدانم تا امیدوارم راه حلی بیابم.

اگر یک توسعه دهنده پلتفرم CMS هستید، بررسی کنید که CMS های دیگر چگونه بارگذاری تنبل را پیاده سازی کرده اند:

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

عکس قهرمان توسط کالین واتس در Unsplash .