قابلیت جدید المنتور: المان‌های اتمی یا Atomic Elements

قابلیت جدید افزونه المنتور چند وقتی هست که اضافه شده اما در موردش صحبت نکرده بودیم. با تست این قابلیت متوجه ویژگی‌های جدیدش شدم و تصمیم گرفتم درباره تفاوت‌هاش با نسخه‌های قبلی و اینکه چرا المنتور این تغییرات رو در قالب یه المنت جدید معرفی کرده و همون قبلی‌ها رو ارتقا نداده صحبت کنم.

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

المنتور تازگی‌ها یه قابلیت به اسم «عناصر اتمی» (Atomic Elements) اضافه کرده که دقیقاً برای حل همین مشکل ساخته شده. تو این مقاله می‌خوام دقیق بهتون بگم این چیه، چه فرقی با المنت‌های همیشگی داره و مهم‌تر از همه، اگه بخواین ازش استفاده کنین چه نکاتی رو باید حواستون باشه که به‌جای بهتر شدن، سایتتون به هم نریزه.

عناصر اتمی چیست؟

عناصر اتمی در واقع یه نسل جدید از المنت‌های المنتوره که با یه هدف مشخص ساخته شدن: سبک‌تر کردن سایت و بهتر شدن پرفورمنس.

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

یه نکته رو همین اول بگم که بعداً سردرگم نشین: عناصر اتمی هنوز به اون شکلی که شاید فکر کنین همه‌ی المنت‌ها رو پوشش نمی‌ده. فعلاً بیشترِ المنت‌های پرکاربرد مثل تیتر، تصویر و تب‌ها (زبانه‌ها) اتمی شدن. المنت اتمیِ فرم هم توی نسخه‌ی پرو فعاله و توی نسخه‌ی رایگان بیشتر با همون عناصر پایه‌ای طرفین. پس انتظار نداشته باشین همه چیز یه‌شبه اتمی شده باشه؛ این یه مسیره که المنتور داره کم‌کم پیش می‌بره.

چطور فعالش کنیم؟

فعال کردنش کار سختی نیست، فقط چندتا مرحله داره:

۱. مطمئن بشین المنتورتون نسخه‌ی ۴ به بعده. این قابلیت روی نسخه‌های قدیمی‌تر نیست. مثلا اگه از یه قالب وردپرسی اهورا استفاده می‌کنین که پیش‌نیازش المنتوره، معمولاً المنتور روی سایتتون نصب هست و فقط کافیه نسخه‌شو چک کنین.

۲. المنتور رو به آخرین نسخه آپدیت کنین. برین توی پیشخوان وردپرس، قسمت «به‌روزرسانی‌ها»، و اگه آپدیتی برای المنتور اومده انجامش بدین. این مدل قابلیت‌ها معمولاً تو نسخه‌های جدیدتر پخته‌تر می‌شن، پس بهتره روی آخرین نسخه باشین. یا می‌تونین از قسمت افزونه‌ها المنتورتون رو آپدیت کنید.

۳. یکی از صفحه‌هاتون رو با المنتور باز کنین. حالا که وارد محیط ویرایش شدین، یه گزینه‌ی جدید به اسم «عناصر اتمی» می‌بینین که ازتون می‌خواد فعالش کنین.

۴. روی «اکنون فعال کنید» بزنین. همین. از این به بعد عناصر اتمی کنار همون ابزارهای همیشگی‌تون در دسترسه و می‌تونین هر دوتا رو با هم استفاده کنین.

تفاوت عناصر اتمی با المنت قدیمی چیست؟

اینجا قلب ماجراست و بذارین با یه مثال عملی نشونتون بدم، چون همه چیز با یه تست ساده روشن می‌شه.

فرض کنین دوتا تیتر می‌سازین؛ یکی با عنصر اتمی و یکی با همون عنصر پایه‌ی قدیمی. از بیرون هر دوتا شبیه هم‌ان و فرقی نمی‌بینین. ولی بیاین بریم پشت صحنه رو ببینیم.

اگه روی صفحه راست‌کلیک کنین و گزینه‌ی Inspect مرورگر رو بزنین، می‌تونین کد HTML هر کدوم رو ببینین. اینجاست که تفاوت خودشو نشون می‌ده:

• تیتر قدیمی: برای ساختن یه تیتر ساده، یه تگ تیتر رو گذاشته توی یه div، اون div هم توی یه div دیگه، و اون یکی هم باز توی یه div دیگه. یعنی برای یه تیتر، چهار پنج تا المنت تودرتو ساخته.

• تیتر اتمی: فقط یه تگ تیتر رو گذاشته توی یه div ساده. تمام.

پس اولین و مهم‌ترین فرق اینه که عناصر اتمی ساختار HTML رو خیلی ساده‌تر و کم‌عمق‌تر می‌کنن.

اهمیت ساده‌تر شدن

شاید بگین «حالا یه تیتر توی چهار تا div باشه یا یکی، چه فرقی می‌کنه؟» فرقش رو بذارین براتون باز کنم، چون دقیقاً همینجاست که پای پرفورمنس وسط میاد.

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

قضیه اینه: وقتی یه کاربر صفحه‌ی سایتتون رو باز می‌کنه، مرورگرش باید کل این ساختار HTML رو بارگذاری کنه و مقداری از رَم سیستمش رو درگیرش کنه. هرچی این ساختار تودرتوتر و سنگین‌تر باشه، رم بیشتری اشغال می‌شه و صفحه کندتر لود می‌شه.

می‌خواین خودتون ببینین؟ توی مرورگر کروم، موس رو ببرین روی عنوان تبِ یه صفحه؛ اونجا مقدار مصرف حافظه‌ی همون تب رو بهتون نشون می‌ده. حالا هرچی این عدد کمتر باشه، یعنی صفحه‌تون سبک‌تره و کاربر تجربه‌ی روون‌تری داره.

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

عناصر اتمی دقیقاً همینجا کمکتون می‌کنن: با کم کردن عمق و تعداد المنت‌ها، رم کمتری از سیستم کاربر مصرف می‌شه و سایتتون روی دستگاه‌های ضعیف‌تر هم بهتر کار می‌کنه.

یه نکته مهم:

وقتی از «عمق المنت‌ها» حرف می‌زنم، منظورم اون تعداد تگ‌های HTML تودرتوئه، نه DOM. اون چیزی که تو گوگل پیج‌اسپید به اسم DOM می‌بینین، مخفف Document Object Model هست و یه بحث جداست. اینا رو با هم قاطی نکنین.

مزیت‌های دیگر عناصر اتمی

جدا از بحث پرفورمنس، چندتا نکته‌ی خوب دیگه هم داره که کار باهاش رو لذت‌بخش‌تر می‌کنه:

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

خب، بالاخره استفاده کنیم یا نه؟

رسیدیم به سؤال اصلی. جوابش یه «آره» یا «نه»‌ی خشک‌وخالی نیست و به چند تا نکته بستگی داره:

اول از همه بدونین که این تغییر خودکار نیست. المنتور عمداً نیومده المنت‌های قدیمی سایتتون رو خودش تبدیل به اتمی کنه. چرا؟ چون اگه این کارو خودکار انجام می‌داد، ممکن بود سایت‌هایی که سال‌ها با ساختار قدیمی کار می‌کردن به هم بریزن. پس مسئولیت این جابه‌جایی (مایگریشن) رو گذاشته به عهده‌ی خودتون.

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

پس این نکته‌ها رو حواستون باشه:

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

راستش این مدل رفتار توی دنیای توسعه خیلی رایجه. معمولاً وقتی یه پلاگین یا ابزارِ پرکاربرد یه چیز جدید معرفی می‌کنه، نسخه‌ی قدیمی رو هم کنارش نگه می‌داره و انتخاب رو به کاربر می‌سپره، تا کسی که به قدیمی عادت کرده اذیت نشه. این احترام به کاربرِ فعلیه، نه یه ضعف.

جمع‌بندی

اگه بخوام کل ماجرا رو توی دو خط خلاصه کنم:

عناصر اتمی المنتور دو تا دستاورد اصلی براتون دارن؛ اول کم کردن عمق و تعداد المنت‌های HTML که مستقیم روی سرعت و مصرف رم تأثیر می‌ذاره، و دوم مدیریت و کنترل بهتر مخصوصاً توی حالت‌های ریسپانسیو.

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

سؤالات متداول

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.