المنتور یا ویژوال کامپوزر یا گوتنبرگ: همان صفحه فارسی را با هر سه ساختیم و سنجیدیم

همان صفحه فارسی را سه بار ساختیم: در ویرایشگر بلوکی وردپرس (گوتنبرگ)، در المنتور (بدون پرو و با پرو) و در WPBakery، که در فارسی «ویژوال کامپوزر» هم نامیده می‌شود. صفحه در ویرایشگر بلوکی ۶۹٬۷۲۹ بایت به بازدیدکننده می‌فرستد، با ویژوال کامپوزر ۱۶۳٬۵۳۱ بایت، با المنتور ۲۲۸٬۸۸۳ بایت و با المنتور و پرو ۳۳۴٬۱۸۷ بایت.

به سه چیز نگاه کردیم: بایتی که به بازدیدکننده می‌رسد، جای ستون‌ها و تیترها در صفحه راست‌چین، و آنچه از صفحه می‌ماند وقتی صفحه‌ساز را خاموش کنیم. اگر صفحه باید از هر افزونه‌ای بیشتر عمر کند، ویرایشگر بلوکی. اگر کسانی که صفحه می‌چینند ابزارهای دیداری المنتور را می‌خواهند و ۱۵۹٬۱۵۴ بایت بیشتر برایشان می‌ارزد، المنتور. ویژوال کامپوزر فقط وقتی که سایت یا قالب از قبل با آن ساخته شده، و آن وقت ردیف‌ها و تیترهای تازه‌اش در پیش‌فرض راست‌چین نیستند. دلیل هر کدام در بخش‌های بعد است.

«ویژوال کامپوزر» اسم دو محصول است و ما یکی را سنجیدیم

افزونه‌ای که قبلاً Visual Composer Page Builder نام داشت، از اکتبر ۲۰۱۷ WPBakery Page Builder نامیده می‌شود. Visual Composer Website Builder محصول مستقل دیگری است که نام قدیمی را گرفته؛ دانش‌نامه خود WPBakery هر دو را محصول مستقل می‌نامد.

اینجا «ویژوال کامپوزر» و WPBakery یکی هستند: همان افزونه قدیمی، نسخه 9.0.1، که فروشگاه ما با نام افزونه ویژوال کامپوزر | WPBakery Page Builder عرضه می‌کند. Visual Composer Website Builder را نسنجیدیم.

همان صفحه را از یک متن واحد ساختیم و هر نسخه را در ویرایشگر خودش ذخیره کردیم

صفحه نمونه متنی فارسی و ساختگی است: هدری با تیتر اصلی، پاراگراف و دکمه؛ یک تصویر؛ ردیفی از سه ستون که هر کدام تیتر و پاراگراف دارد؛ ردیفی از دو ستون با تصویر، تیتر، پاراگراف و دکمه؛ یک خط جداکننده؛ و بخش پایانی با تیتر، پاراگراف و دکمه. شش تیتر، شش پاراگراف، سه دکمه و دو تصویر. غیر از سطح تیترها، پهنای ستون‌ها و اندازه «بزرگ» (Large) تصویرها، و در المنتور جهت ردیف‌ها، هیچ گزینه‌ای از پیش‌فرض عوض نشد؛ به رنگ، فاصله، فونت و تراز دست نزدیم.

سایت آزمایشی وردپرس 7.1.2 فارسی در Docker بود، با قالب Hello Elementor 3.5.1 (سه فایل CSS کوچک، ۱۹٬۱۹۰ بایت بازشده)، بدون ووکامرس و بدون افزونه دیگر. هر بار فقط یک صفحه‌ساز فعال بود: المنتور 4.3.5، المنتور پرو 4.3.1 از فایل فروشگاه، WPBakery 9.0.1 از فایل فروشگاه، یا هیچ‌کدام برای ویرایشگر بلوکی.

ساختار هر صفحه را با کد از همان متن نوشتیم و بعد در ویرایشگر خودش باز و ذخیره کردیم؛ کسی عنصرها را با دست نچید. ذخیره از خود ویرایشگر مهم بود، چون هر دو صفحه‌ساز موقع ذخیره چیزی می‌نویسند که با نوشتن مستقیم در پایگاه داده نوشته نمی‌شود. المنتور یک رونوشت متنی از صفحه را در محتوای برگه می‌گذارد، و ویژوال کامپوزر در ذخیره فرم ویرایش، CSS صفحه را می‌سازد. صفحه المنتور را اول فقط با کد در پایگاه داده نوشتیم و محتوای برگه‌اش خالی بود؛ بعد از ذخیره در ویرایشگر پر شد.

صفحه را مثل بازدیدکننده‌ای بدون ورود به سایت، پنج بار (روی Twenty Twenty-Five سه بار) با Chrome 155 و پروفایل موبایل بارگذاری کردیم. در هر حالت بایت‌ها بین بارها حداکثر ۲۷ بایت روی Hello و ۱۰۶ بایت روی Twenty Twenty-Five فرق داشتند و تعداد درخواست‌ها و عناصر هیچ‌وقت. «بایت» یا «بایت روی سیم» یعنی آنچه Chrome برای هر درخواست دریافت کرد: بدنه فشرده به‌علاوه سرایند پاسخ، از سرور آزمایشی و برای فونت‌ها از گوگل. زمان بارگذاری را گزارش نمی‌کنیم.

وزن همان صفحه: از ۶۹٬۷۲۹ تا ۳۳۴٬۱۸۷ بایت

ابزار	درخواست	بایت صفحه	بدون دو تصویر	عنصر محتوا
ویرایشگر بلوکی	۷	۶۹٬۷۲۹	۲۱٬۹۲۶	۳۹
WPBakery 9.0.1	۱۲	۱۶۳٬۵۳۱	۱۱۵٬۷۲۸	۸۶
المنتور 4.3.5	۲۸	۲۲۸٬۸۸۳	۱۸۱٬۰۸۲	۷۰
المنتور با پرو 4.3.1	۳۲	۳۳۴٬۱۸۷	۲۸۶٬۳۸۶	۷۰

دو تصویر صفحه در هر چهار صفحه ۴۷٬۸۰۱ تا ۴۷٬۸۰۳ بایت است، پس تفاوت‌ها از صفحه‌ساز می‌آید. با تصویرها، صفحه ویژوال کامپوزر ۲٫۳ برابر صفحه بلوکی است، المنتور ۳٫۳ برابر و المنتور با پرو ۴٫۸ برابر. «عنصر محتوا» یعنی عنصرهای HTML داخل بخش اصلی صفحه، بدون script، style و link. شمار عنصر و بایت با هم بالا نمی‌روند: ویژوال کامپوزر ۸۶ عنصر دارد و المنتور ۷۰، اما المنتور بایت بیشتری می‌فرستد.

المنتور را روی سایتی سنجیدیم که از اول با 4.3.5 نصب شده. پیش‌فرض چند گزینه المنتور به نسخه نصب اول بستگی دارد. نوشته کندی المنتور سایتی را که با 3.12.2 نصب و به 4.3.5 به‌روز شده بود، با ۶۴ درخواست و ۹۵۰٫۹ کیلوبایت، سنگین‌تر از سایت تازه یافت (۵۹ درخواست و ۶۷۳٫۶ کیلوبایت). صفحه آنجا ۱۸ ابزارک داشت، از جمله گالری و گردونه تصویر، و با صفحه ما مقایسه‌پذیر نیست.

همین سنجش را روی Twenty Twenty-Five، قالب بلوکی‌ای که وردپرس 7.1.2 تازه‌نصب با خودش آورد، هم تکرار کردیم. فاصله‌ها همان ماند: ویژوال کامپوزر ۹۳٬۷۱۶ بایت، المنتور ۱۵۸٬۹۳۸ و المنتور با پرو ۲۶۴٬۳۶۳ بایت بیشتر از صفحه بلوکی؛ روی Hello این سه عدد ۹۳٬۸۰۲ و ۱۵۹٬۱۵۴ و ۲۶۴٬۴۵۸ بود.

فقط روشن بودن صفحه‌ساز هم هزینه دارد؟ روی یک صفحه خالی، ویژوال کامپوزر ۱۴۰ بایت اضافه کرد. المنتور روی Hello شش درخواست و ۳۳٬۰۱۷ بایت اضافه کرد: چهار فایل خود المنتور (شیوه‌نامه اصلی، شیوه‌نامه کیت و دو شیوه‌نامه فونت گوگل) ۱۲٬۷۹۷ بایت بود، شیوه‌نامه بلوک‌های هسته وردپرس ۱۹٬۴۹۱ بایت بود که فقط در این حالت فایل جدا شد (دلیلش را پیدا نکردیم)، و یک اسکریپت قالب هم آمد. روی Twenty Twenty-Five هیچ‌کدام از آن چهار فایل نیامد.

حالت Optimized ویژوال کامپوزر روی سیم ۶٬۵۸۷ بایت کم می‌کند، با هشت درخواست بیشتر

در پیشخوان، ویژوال کامپوزر > تنظیمات عمومی، گزینه «CSS loading» سه حالت دارد: Hybrid CSS، Optimized CSS و Legacy CSS. تا انتخاب نکنید، حالت Legacy است و صفحه یک فایل CSS ۴۴۲٬۴۷۶ بایتی می‌گیرد (۴۵٬۴۲۰ بایت فشرده روی سیم).

با Optimized، مجموع فایل‌های CSS صفحه، بعد از باز کردن فشرده‌سازی، از ۴۶۲٬۵۰۹ به ۳۳۹٬۶۴۲ بایت رسید. روی سیم فقط ۶٬۵۸۷ بایت کم شد (۱۶۳٬۵۳۱ به ۱۵۶٬۹۴۴) و هشت درخواست به صفحه اضافه شد. حالت Hybrid را نسنجیدیم.

پرو ۱۰۵٬۳۰۴ بایت به صفحه المنتور اضافه می‌کند، حتی بدون ابزارک پرو

صفحه المنتور ۱۱ فایل جاوااسکریپت (۱۱۰٬۲۰۲ بایت روی سیم) و ۱۳ فایل CSS دارد. با پرو چهار فایل جاوااسکریپت اضافه شد: دو فایل هسته وردپرس، hooks و i18n با ۲٬۲۰۴ و ۲٬۸۳۶ بایت، که فقط وقتی پرو روشن بود در صفحه آمدند، و دو فایل خود پرو با ۲۴٬۹۷۷ و ۷۳٬۹۰۹ بایت؛ جمعاً ۱۰۳٬۹۲۶ بایت. فایل CSS تازه‌ای نیامد و کل صفحه ۱۰۵٬۳۰۴ بایت (۱۰۲٫۸ کیلوبایت، هر کیلوبایت ۱٬۰۲۴ بایت) سنگین‌تر شد؛ ۱٬۳۷۸ بایت باقی‌مانده HTML صفحه و CSS تولیدشده خود المنتور است.

نوشته تفاوت المنتور رایگان و پرو روی دو صفحه دیگر، با المنتور 4.3.4 و روش دیگری (curl، بایت gzip، بدون تصویر و فونت و بدون مرورگر)، کل افزایش را ۱۰۱٫۵ کیلوبایت و جاوااسکریپت آن را ۱۰۰٫۱ کیلوبایت به‌دست آورده بود؛ اینجا همان چهار فایل ۱۰۱٫۵ و کل صفحه ۱۰۲٫۸ کیلوبایت شد؛ بدنه فشرده همان چهار فایل به‌تنهایی ۱۰۰٫۱ کیلوبایت است و بقیه بیشتر سرایند پاسخ است که Chrome هم می‌شمارد. ابزارک پرو در این صفحه نیست و این بایت‌ها با روشن بودن پرو آمدند.

در پیش‌فرض، هر دو صفحه‌ساز از گوگل فونتی می‌خواهند که حرف فارسی ندارد

المنتور روی سایت تازه فونت‌های سراسری پیش‌فرضش را از گوگل می‌گیرد: دو شیوه‌نامه (Roboto و Roboto Slab) و یک فایل Roboto، جمعاً ۴۲٬۴۷۱ بایت روی همین صفحه، و فقط یک فایل Roboto گرفته شد؛ صفحه‌ای که نوشته کندی المنتور سنجید چهار درخواست و ۷۵٫۰ کیلوبایت فونت گرفته بود. تیتر پیش‌فرض ویژوال کامپوزر هم Abril Fatface را از گوگل می‌خواهد: ۱۴٬۵۱۹ بایت. شیوه‌نامه‌های گوگل برای Abril Fatface فقط بازه‌های لاتین دارند و برای Roboto لاتین، یونانی، سیریلیک و ویتنامی؛ حرف فارسی در هیچ‌کدام نیست.

مرورگر فقط فایل بازه لاتین را گرفت. متن محتوای صفحه المنتور، جدای حرف‌ها و نشانه‌های فارسی، فاصله، نقطه و ۱۴ نیم‌فاصله داشت و هر سه در بازه لاتین‌اند. حرف‌های فارسی را فونت جایگزین دستگاه بازدیدکننده می‌کشد؛ نوشته وودمارت همین را روی ویندوز و لینوکس دید: Arial در یکی، Noto Sans Arabic در دیگری.

ویژوال کامپوزر راهی در خودش دارد: با روشن‌کردن گزینه «Local Google Fonts» و ذخیره دوباره صفحه از ویرایشگر، فایل فونت در پوشه بارگذاری‌های سایت نشست و صفحه هیچ میزبان بیرونی نخواست. فایل TTF بود و با شیوه‌نامه‌اش ۳۲٬۹۶۸ بایت شد. برای المنتور گزینه‌های مشابه را در نوشته کندی المنتور سنجیده‌ایم؛ همان‌جا، وقتی دو میزبان گوگل را در کروم بی‌پاسخ کردیم، اولین نمایش محتوا با فونت‌های پیش‌فرض ۲۱٫۳ ثانیه طول کشید و با غیرفعال‌کردن فونت‌های گوگل یا بارگذاری محلی آن ۰٫۲۳ تا ۰٫۲۷ ثانیه.

در صفحه راست‌چین، ویژوال کامپوزر ستون اول را سمت چپ می‌گذارد

همان صفحه را در عرض ۱۴۴۰ پیکسل سنجیدیم. ستون «طراحی»، اولین ستون، در ویرایشگر بلوکی و المنتور سمت راست است (لبه چپ تیتر آن ستون در ۹۲۶ و ۹۳۳ پیکسل) و در ویژوال کامپوزر سمت چپ (۱۵۰). تیترها هم همین‌طورند: در بلوکی و المنتور از ابتدای خط (start) می‌آیند، یعنی راست، و در ویژوال کامپوزر چپ‌اند، چون پیش‌فرض عنصر تیتر در آن tag:h2|text_align:left است. حاصل صفحه‌ای است که پاراگراف‌هایش راست‌اند و تیترهایش چپ.

راه حلش در خود افزونه هست، اما دستی. هر ردیف در تنظیماتش گزینه‌ای به نام «RTL columns» دارد که توضیحش می‌گوید ستون‌ها را در RTL معکوس می‌کند و پیش‌فرضش خاموش است. روی صفحه‌ای جدا با همان ردیف سه‌ستونه، با روشن‌کردنش ستون اول از ۱۵۰ به ۹۳۰ رفت. تراز هر تیتر را هم باید جدا بگذارید. افزونه برای عنصرها «پیش‌تنظیم» (Element Presets) هم دارد که پیش‌فرض عنصر را عوض می‌کند؛ آن را نسنجیدیم و نمی‌دانیم این دو گزینه را به ردیف و تیتر تازه می‌برد یا نه. صفحه ما شش ردیف (هر بخش صفحه یکی) و شش تیتر دارد.

ترجمه فارسی یکدست نیست: هسته ۱۰۰ درصد، المنتور ۸۳ درصد

هسته وردپرس، که ویرایشگر بلوکی بخشی از آن است، در ۳ آبان ۱۴۰۵ در translate.wordpress.org ۱۰۰ درصد ترجمه شده بود و المنتور ۸۳ درصد. ویژوال کامپوزر فایل فارسی خودش را در افزونه دارد، با تاریخ مهر ۱۴۰۱؛ آن فایل ۸۸٫۵ درصد رشته‌های قالب ترجمه شهریور ۱۴۰۲ را دارد. رشته‌هایی مثل «CSS loading» و «RTL columns» و Module Manager و Design options در هیچ‌کدام از دو فایل نیستند و انگلیسی ماند. فایل فروشگاه برای المنتور پرو پوشه زبان ندارد و برچسب ابزارک‌های پرو در ویرایشگر ما انگلیسی ماند.

خاموش‌کردن صفحه‌ساز: المنتور متن را نگه می‌دارد، ویژوال کامپوزر کد کوتاه نشان می‌دهد

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

ویرایشگر بلوکی چیزی برای خاموش‌کردن ندارد و صفحه همان می‌ماند: ۱۵ متن، دو تصویر، سه دکمه و یک خط جداکننده. با خاموش‌کردن المنتور، هر ۱۵ متن، دو تصویر و سه پیوند ماند (دکمه‌ها پیوند ساده شدند)، اما ستون‌ها یک ستون شدند و خط جداکننده رفت. دلیلش رونوشت متنی است که المنتور هنگام ذخیره می‌نویسد (۱٬۸۴۸ نویسه). با خاموش‌کردن پرو و روشن ماندن المنتور رایگان، صفحه ما تغییری نکرد، چون ابزارک پرو نداشت.

با خاموش‌کردن ویژوال کامپوزر، ۵۴ برچسب کد کوتاه، مثل vc_row و vc_column در کروشه، وسط صفحه دیده شد. هر ۱۵ متن به‌صورت متن داخل همین برچسب‌ها بود، اما دو تصویر و سه دکمه رفتند و تیترها دیگر تگ تیتر نداشتند: فقط تیتر خود برگه ماند. اگر نمی‌خواهید ردیف‌ها را از نو بسازید، فرم پشتیبانی ما سرویس بازطراحی دارد.

این یک صفحه و یک نسخه از هر افزونه بود.

برای یک سایت فارسی المنتور، ویژوال کامپوزر یا ویرایشگر بلوکی را انتخاب کنیم؟

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

المنتور را انتخاب کنید وقتی کسانی که صفحه می‌چینند ابزارهای دیداری المنتور را می‌خواهند. این آزمون فقط چیزهایی را ساخت که هر سه دارند، پس نشان نمی‌دهد المنتور و پرو چه اضافه می‌کنند؛ نوشته تفاوت المنتور رایگان و پرو پنل ویرایشگر را بدون پرو ۴۷ مورد و با پرو ۱۲۷ مورد شمرده است و المنتور پرو در فروشگاه است. بهای المنتور در همین آزمون ۱۵۹٬۱۵۴ بایت بیشتر از صفحه بلوکی، فونت گوگل در پیش‌فرض و صفحه‌ای است که با خاموش‌کردن ستون‌ها و خط جداکننده‌اش را از دست می‌دهد.

ویژوال کامپوزر را فقط وقتی انتخاب کنید که سایت یا قالب از قبل با آن ساخته شده. آن وقت دو گزینه برای کل سایت (CSS loading و Local Google Fonts) و دو گزینه برای ردیف‌ها و تیترها (RTL columns و تراز) را حساب کنید؛ اگر اشتباه کرده باشید، خروج از آن یعنی ساختن دوباره هر ردیف.

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

پرسش‌های متداول