نکاتی برای اتخاذ مشخصه بارگیری استانداردشده
هدف من از این پست متقاعد کردن توسعه‌دهندگان و مشارکت‌کنندگان پلاتفرم CMS است (یعنی افرادی که هسته‌های CMS را توسعه می‌دهند) که اکنون زمان اجرای پشتیبانی از ویژگی بار کردن کُند تصویر در سطح مرورگر است. همچنین توصیه‌هایی درباره نحوه اطمینان از تجربه کاربری با کیفیت بالا و فعال کردن سفارشی‌سازی توسط توسعه‌دهندگان دیگر درحین پیاده‌سازی بار کردن کُند ارائه خواهم داد. این رهنمودها از تجربه ما در افزودن پشتیبانی به WordPress و همچنین کمک به Joomla، Drupal، و TYPO3 برای پیاده‌سازی این ویژگی به‌دست آمده است.
صرف‌نظر از اینکه توسعه‌دهنده پلاتفرم سیستم مدیریت محتوا هستید یا کاربر سیستم مدیریت محتوا (یعنی فردی که با سیستم مدیریت محتوا وب‌سایت می‌سازد)، می‌توانید از این پست برای کسب اطلاعات بیشتر درباره مزایای بارکردن کُند در سطح مرورگر در سیستم مدیریت محتوا استفاده کنید. برای پیشنهادهایی درباره نحوه تشویق پلاتفرم CMS خود به پیاده‌سازی بارکردن کُند، بخش مراحل بعدی را بررسی کنید.
پس‌زمینه
طی سال گذشته،
بار کردن کُند تصاویر و iframe بااستفاده از مشخصه loading
بخشی از استاندارد WHATWG HTML شده است
و
به‌طور فزاینده‌ای توسط مرورگرهای مختلف پذیرفته شده است.
بااین‌حال، این نقاط عطف فقط زمینه‌سازی برای
وب سریع‌تر و با صرفه‌جویی بیشتر در منابع است.
اکنون این وظیفه بوم‌سازگان وب توزیع‌شده است که از مشخصه loading استفاده کند.
سیستم‌های مدیریت محتوا
حدود ۶۰٪ از وب‌سایت‌ها را پشتیبانی می‌کنند،
بنابراین این پلاتفرم‌ها نقشی حیاتی در پذیرش ویژگی‌های مرورگر نو در وب ایفا می‌کنند. With a few popular open-source CMSs such as
WordPress,
Joomla, and
TYPO3 having already
implemented support for the loading attribute on images, let's have a look at
their approaches and the takeaways which are relevant for adopting the feature
in other CMS platforms as well. بار کردن کُند رسانه یکی از ویژگی‌های کلیدی عملکرد وب است که سایت‌ها باید در مقیاس بزرگ از آن بهره‌مند شوند، به همین دلیل است که استفاده از آن در سطح هسته سیستم مدیریت محتوا توصیه می‌شود.
مورد اجرای بارگیری کُند درحال‌حاضر
استانداردسازی
پذیرش ویژگی‌های غیراستاندارد مرورگر در سیستم‌های مدیریت محتوا، آزمایش گسترده را تسهیل می‌کند و می‌تواند زمینه‌های بالقوه بهبود را آشکار کند. بااین‌حال، اجماع کلی در سیستم‌های مدیریت محتوا این است که تا زمانی که ویژگی مرورگر استاندارد نشده باشد، ترجیحاً باید به‌صورت افزونه یا افزایه برای پلاتفرم مربوطه پیاده‌سازی شود. فقط پس‌از استانداردسازی می‌توان یک ویژگی را برای پذیرش در هسته پلاتفرم درنظر گرفت.
پشتیبانی مرورگر
پشتیبانی مرورگر از ویژگی نیز نگرانی مشابهی است: اکثر کاربران «سیستم مدیریت محتوا» باید بتوانند از این ویژگی بهره‌مند شوند. اگر درصد قابل‌توجهی از مرورگرها هنوز از این ویژگی پشتیبانی نمی‌کنند، این ویژگی باید اطمینان حاصل کند که حداقل هیچ تأثیر منفی‌ای بر آن‌ها ندارد.
آستانه‌های فاصله از نمای دید
یک نگرانی رایج درخصوص پیاده‌سازی‌های بار کردن کُند این است که این پیاده‌سازی‌ها در اصل احتمال بار نشدن تصویر را پس‌از نمایان شدن آن در نمای دید کاربر افزایش می‌دهند، زیرا چرخه بار کردن در مرحله بعدی شروع می‌شود. برخلاف راه‌حل‌های قبلی مبتنی بر جاوا اسکریپت، مرورگرها با احتیاط به این موضوع نزدیک می‌شوند و علاوه‌براین می‌توانند رویکرد خود را براساس داده‌های تجربه کاربر در دنیای واقعی تنظیم کنند، تأثیر را به حداقل برسانند، بنابراین بار کردن کُند در سطح مرورگر باید برای پذیرش توسط پلاتفرم‌های CMS ایمن باشد.
توصیه‌های تجربه کاربری
مشخصه‌های ابعاد در عناصر الزامی است
برای جلوگیری از تغییر چیدمان،
توصیه دیرینه‌ای وجود دارد که
محتوای جاسازی‌شده مانند تصاویر یا iframe باید همیشه شامل ویژگی‌های ابعاد width و height باشد،
تا مرورگر بتواند نسبت ابعادی آن عناصر را قبل‌از بار کردن واقعی آن‌ها استنباط کند. این توصیه صرف‌نظر از اینکه عنصر به‌صورت کُند بار می‌شود یا نه، مرتبط است. بااین‌حال، به‌دلیل
احتمال ۰٫۱٪ بیشتر برای بار نشدن کامل تصویر در نمای دید
با بار کردن کُند کمی کاربردی‌تر می‌شود.
ترجیحاً سیستم‌های مدیریت محتوا باید مشخصه‌های ابعاد را در همه تصاویر و iframeها ارائه دهند. اگر این کار برای همه این عناصر ممکن نیست، توصیه می‌شود از بار کردن کُند تصاویری که هر دو این مشخصه‌ها را ارائه نمی‌دهند صرف‌نظر شود.
از بار کردن کُند عناصر بالای خط تا خودداری کنید
درحال‌حاضر به سیستم‌های مدیریت محتوا توصیه می‌شود که فقط به تصاویر و قاب‌های درون‌خطی که در زیر خط تا قرار دارند، مشخصه‌های loading="lazy" اضافه کنند تا از تأخیر در سنجه بزرگ‌ترین رنگ‌آمیزی محتوایی جلوگیری شود، که در برخی موارد می‌تواند قابل‌توجه باشد همان‌طور که در ژوئیه ۲۰۲۱ کشف شد. بااین‌حال، باید تصدیق کرد که ارزیابی موقعیت یک عنصر نسبت به نمای قبل‌از فرایند پردازش پیچیده است. این موضوع به‌ویژه زمانی صدق می‌کند که سیستم مدیریت محتوا از رویکردی خودکار برای افزودن مشخصه‌های loading استفاده می‌کند، اما حتی براساس مداخله دستی، چندین عامل مانند اندازه‌های مختلف نمای هدف و نسبت‌های ابعادی باید درنظر گرفته شوند. بااین‌حال، اکیداً توصیه می‌شود که نگاره‌های اصلی و دیگر تصاویر یا iframeهایی که احتمالاً در بالای خط تا ظاهر می‌شوند، از بارکردن کُند حذف شوند.
اجتناب از بازگشت جاوا اسکریپت
درحالی‌که می‌توان از جاوا اسکریپت برای
ارائه بار کردن کُند به مرورگرهایی که (هنوز) از مشخصه loading پشتیبانی نمی‌کنند استفاده کرد،
چنین سازوکارهایی همیشه به برداشتن اولیه مشخصه src تصویر یا iframe متکی هستند که باعث تأخیر برای مرورگرهایی می‌شود که از این مشخصه پشتیبانی می‌کنند. علاوه‌براین، عرضه چنین راه‌حل مبتنی بر جاوا اسکریپت در
سمت کاربر یک CMS در مقیاس بزرگ، سطح مشکلات احتمالی را افزایش می‌دهد،
که بخشی از دلیل این است که هیچ CMS اصلی قبل‌از ویژگی مرورگر استانداردشده،
بارگیری کُند را در هسته خود اتخاذ نکرده بود.
توصیه‌های فنی
فعال کردن بار کردن کُند به‌طور پیش‌فرض
توصیه کلی برای سیستم‌های مدیریت محتوا که بار کردن کُند در سطح مرورگر را پیاده‌سازی می‌کنند این است که آن را به‌طور پیش‌فرض فعال کنند، یعنی loading="lazy" باید به تصاویر و قاب‌های درون‌خطی اضافه شود، ترجیحاً فقط برای عناصری که شامل مشخصه‌های ابعاد هستند.
فعال بودن این ویژگی به‌طور پیش‌فرض باعث صرفه‌جویی بیشتر در منابع شبکه می‌شود تا اینکه لازم باشد به‌صورت دستی فعال شود، مثلاً برای هر تصویر به‌صورت جداگانه.
تا حد امکان، loading="lazy" باید
فقط به عناصری اضافه شود که احتمالاً در زیر خط تا ظاهر می‌شوند.
هرچند پیاده‌سازی این الزام برای CMS به‌دلیل عدم آگاهی سمت کارخواه و اندازه‌های مختلف نمای هدف می‌تواند پیچیده باشد، توصیه می‌شود حداقل از اکتشافات تقریبی برای حذف عناصری مانند تصاویر اصلی که احتمالاً در بالای صفحه ظاهر می‌شوند از بارگیری کُند استفاده کنید.
مجاز کردن اصلاحات هر عنصر
درحالی‌که loading="lazy" باید به‌طور پیش‌فرض به تصاویر و iframe اضافه شود،
بسیار مهم است که اجازه دهید این ویژگی در برخی تصاویر حذف شود، برای مثال برای
بهینه‌سازی LCP. If the audience of the CMS is on
average considered more tech-savvy, this could be a UI control exposed for every
image and iframe allowing to opt out of lazy loading for that element.
یا علاوه‌براین، ممکن است میانای برنامه‌سازی کاربردی دراختیار توسعه‌دهندگان طرف سوم قرار گیرد
تا بتوانند تغییرات مشابهی را ازطریق کد اعمال کنند.
برای مثال، WordPress اجازه می‌دهد از ویژگی loading برای
کل تگ یا بافت HTML
یا برای
عنصر HTML خاصی در محتوا صرف‌نظر شود.
مدرن‌سازی محتوای موجود
در سطح بالا، دو رویکرد برای افزودن مشخصه loading به
عناصر HTML در CMS وجود دارد:
- یا مشخصه را از داخل ویرایشگر محتوا در بخش پشتی اضافه کنید و آن را به‌طور دائم در پایگاه داده ذخیره کنید.
- مشخصه را درحین اجرا هنگام ارائه محتوا از پایگاه داده در میانای کاربری اضافه کنید.
توصیه می‌شود CMS برای افزودن مشخصه درحین رندر کردن انتخاب شود تا مزایای بارکردن کُند برای هر محتوای موجودی نیز فراهم شود. اگر مشخصه فقط ازطریق ویرایشگر قابل‌افزودن بود، فقط محتواهای جدید یا محتواهایی که اخیراً اصلاح شده‌اند از مزایا بهره‌مند می‌شدند و این امر تأثیر سیستم مدیریت محتوا را در صرفه‌جویی منابع شبکه به‌شدت کاهش می‌داد. علاوه‌براین، افزودن ویژگی در حین اجرا، به‌راحتی امکان اصلاحات آتی را فراهم می‌کند، درصورتی‌که قابلیت‌های بارکردن کُند در سطح مرورگر بیشتر گسترش یابد.
افزودن مشخصه درحین اجرا باید برای مشخصه loading که احتمالاً در عنصر وجود دارد مناسب باشد و اجازه دهد چنین مشخصه‌ای اولویت داشته باشد. به‌این‌ترتیب، «سیستم مدیریت محتوا» یا افزونه‌ای برای آن نیز می‌تواند رویکرد ویرایشگرمحور را بدون ایجاد تداخل با مشخصه‌های تکراری پیاده‌سازی کند.
بهینه‌سازی عملکرد سمت سرور
هنگام افزودن مشخصه loading به محتوا در حین اجرا بااستفاده از (برای مثال)
میان‌افزار سمت سرور، سرعت یکی از ملاحظات است. بسته به CMS، مشخصه
می‌تواند ازطریق پیمایش DOM یا عبارت‌های باقاعده اضافه شود، که
مورد دوم برای عملکرد توصیه می‌شود.
استفاده از عبارت‌های باقاعده باید به حداقل برسد، برای مثال یک عبارت باقاعده تکی
که همه برچسب‌های img و iframe را در محتوا ازجمله
مشخصه‌های آن‌ها جمع‌آوری می‌کند و سپس مشخصه loading را به هر رشته برچسب درصورت
قابل‌اجرا بودن اضافه می‌کند. برای مثال، WordPress تا جایی پیش می‌رود که
یک عبارت باقاعده عمومی واحد برای انجام عملیات مختلف درلحظه روی عناصر خاص دارد،
که افزودن loading="lazy" فقط یکی از آن‌ها است، و از یک عبارت باقاعده واحد
برای تسهیل چندین ویژگی استفاده می‌کند. این شکل از بهینه‌سازی همچنین دلیل دیگری است که چرا استفاده از بار کردن کُند در هسته CMS نسبت‌به افزونه توصیه می‌شود - این کار امکان بهینه‌سازی بهتر عملکرد سمت سرور را فراهم می‌کند.
مراحل بعدی
ببینید آیا بلیت درخواست ویژگی موجودی برای افزودن پشتیبانی از این ویژگی در «سیستم مدیریت محتوا» شما وجود دارد یا نه، یا اگر هنوز وجود ندارد، بلیت جدیدی باز کنید. درصورت نیاز، از ارجاع به این پست برای پشتیبانی از پیشنهاد خود استفاده کنید.
برای پرسیدن سؤال یا ارائه نظر، یا برای اینکه سیستم مدیریت محتوای شما درصورت اضافه شدن پشتیبانی از بار کردن کُند در سطح مرورگر در این صفحه فهرست شود، به من (felixarntz@) توییت بزنید. اگر با چالش‌های دیگری مواجه شدید، من هم کنجکاوم درباره آن‌ها بیشتر بدانم تا شاید بتوانم راه‌حلی پیدا کنم.
اگر توسعه‌دهنده پلاتفرم سیستم مدیریت محتوا هستید، نحوه پیاده‌سازی بار کردن کُند توسط سیستم‌های مدیریت محتوای دیگر را مطالعه کنید:
می‌توانید از آموخته‌های پژوهشتان و توصیه‌های فنی این پست برای شروع مشارکت کد در سیستم مدیریت محتوایتان استفاده کنید، مثلاً در قالب وصله یا درخواست واکشی.