روزمرگی فنی
روزمرگی فنی
خواندن ۳ دقیقه·۳ سال پیش

وردپرس 5.9 برای بهبود عملکرد قالب‌های بلوکی چکار کرد؟

وردپرس مدتی پیش بالاخره از نسخه 5.9 رونمایی کرد که یک آپدیت عمده و نه جزئی محسوب می‌شد. یکی از تفاوت‌های این نسخه جدید -به همراه سری‌های بعدی‌اش- با نسخه‌های قبلی، بهبود عملکرد سایت‌های مبتنی بر این سیستم مدیریت محتواست.

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

قالب بلوکی

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

قالب بلوکی از خیلی جهات با نسل قدیم یا همان قالب‌های کلاسیک وردپرس فرق دارد. از جمله اینکه در قالب‌های کلاسیک تمام دستورات استایل در فایل مشهور style.css می‌آید. ولی حالا با روی کار آمدن قالب‌های بلوکی، ماجرای استایل‌دهی یک مقدار چالشی‌تر از قبل شده؛ چون اینبار css ها از سورس‌های متفاوتی می‌آیند (مثلا از هسته بلوک‌ها یا قالب‌ یا حتی کاربر).

بنابراین وردپرس از نسخه 5.8 به بعد، فایل جدیدی را معرفی کرد به اسم theme.json. الان این فایل است که به طراح سایت امکان تعریف تنظیمات اولیه و پیش‌فرض قالب مثل مقدار عرض، نوع و اندازه فونت‌ها، رنگ‌ها و غیره را می‌دهد (البته این فقط یکی از کارکردهایش است) و ضمنا در عین حال سفارشی‌سازی قالب را برای کاربر به مراتب انعطاف‌پذیرتر از قبل می‌کند. خلاصه فایل theme.json تمام استایل‌ها را به شکل یک «استایل مادر» یا سراسری و از یک مکان اجرا می‌کند و با این روش تعداد استایل‌های همراه یک قالب کاهش پیدا می‌کند و ضمنا احتمال تداخل در ترتیب اثر دستورات css بنا به اولویت‌هایشان کمتر می‌شود.

وردپرس 5.9 صرفا نسخه اول theme.json را به نسخه دوم ارتقا داده و عملکردش را نسبت به قبل بهبود بخشیده.

استایل بلوک‌ها و لود CSS

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

اما با انتشار نسخه 5.9، حالا فقط چیزی لود می‌شود که ضروری باشد. از یک طرف استایل‌های کوچک به صورت درون‌خطی یا inline درآمده‌اند و از طرف دیگر استایل هر بلوک تنها در صورتی لود و اجرا می‌شود که از آن بلوک در صفحه استفاده شده باشد. به علاوه با پایان کار اینترنت اکسپلوررِ فقید، polyfillهایی که سابقا استفاده می‌شدند هم از اسکریپت‌های سمت کاربر حذف شدند. در نتیجه وردپرس با جلوگیری از لود استایل‌های نالازم و غیرضروری بلوک‌ها و کم کردن تعداد استایل‌هایی که باید لود شوند، باعث کاهش قابل توجه زمان لود و افزایش عملکرد شده است.

استایل اضافی برای هر بلوک

از الآن به بعد توسعه‌دهنده‌های قالب و بلوک می‌توانند به ازای هر بلوک، استایل‌های اضافی هم برایش درنظر بگیرند (برخلاف سابق که یک استایل یکپارچه و واحد لود می‌شد) و این موضوع به توسعه‌دهنده‌های بلوک اجازه می‌دهد که برای بلوک‌های پیچیده بتوانند از استایل سایر بلوک‌ها مجددا استفاده کنند و نه اینکه هر بار همان استایل‌های مشابه را چندین بار تکرار یا duplicate کنند.

توسعه‌دهنده‌های قالب هم الان می‌توانند برای استایل‌دهی به هر بلوک از یک تابع جدید به نام wp_enqueue_style() استفاده کنند. مجموع این‌ها هم در کاهش بار استایل‌ها بر لود صفحه تاثیر داشته.

بهبود لود تنبل تصاویر

وردپرس قبلا قابلیت بارگذاری تنبل تصاویر را با نسخه 5.5 معرفی کرد و حالا با نسخه 5.9 این قابلیت را بهبود بخشیده. مهمترین تغییر وردپرس این بوده که الان دیگر اولین تصویر یا iframe در محتوای یک صفحه از بارگذاری تنبل مستثنی می‌شود. اما این چه کاربردی دارد؟ با این کار مدت زمان لازم برای لود بیشترین محتوای صفحه برای کاربر (همان معیار LCP) کمتر و در عوض LCP سریع‌تر باعت بهود رتبه سایت از نظر گوگل می‌شود.

وندا نوژن

وردپرس 5 9قالب بلوکیبهینه‌سازیوردپرس
روزها درگیر مصائب فنی، شب‌ها مشغول ثبت راه‌حل‌های یافتنی
شاید از این پست‌ها خوشتان بیاید