کندی المنتور: چرا «پیش‌فرض» در دو سایت دو معنا دارد؟

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

کلیدی که این فاصله را پر کرد «نمادهای فونت درون‌خطی» بود: با روشن‌کردنش سایت قدیمی به ۵۷ درخواست و ۶۷۱٫۴ کیلوبایت رسید. صفحه تنظیمات المنتور این کلید را در هر دو سایت «پیش‌فرض» نشان می‌دهد، اما پیش‌فرض، طبق کد افزونه، در سایتی که اولین بار با نسخه‌ای قدیمی‌تر از 3.17.0 (۳ آبان ۱۴۰۲) نصب شده خاموش است و در سایت تازه روشن. حالت سایت خودتان را از برگه «ویژگی‌ها» می‌بینید؛ مسیرش در بخش بعد است.

پیش‌فرض سه کلید به نسخه نصب اول بستگی دارد

المنتور نسخه‌ای را که اول بار روی سایت نصب شده نگه می‌دارد و پیش‌فرض بعضی کلیدها را با آن می‌سنجد. سه کلید برگه «ویژگی‌ها» که به سرعت و ساختار صفحه مربوط‌اند، در کد افزونه 4.3.5 فقط برای سایتی پیش‌فرض روشن دارند که اولین نسخه نصب‌شده‌اش دست‌کم این باشد: «کانتینر» 3.16.0 (۲۱ شهریور ۱۴۰۲)، «نمادهای فونت درون‌خطی» 3.17.0 (۳ آبان ۱۴۰۲) و «نشانه‌گذاری بهینه‌شده» 3.30.0 (۱۰ تیر ۱۴۰۴).

آزمایش هم همین را نشان داد. روی سایتی که با 3.12.2 نصب شده بود، هر سه کلید بعد از به‌روزرسانی به 4.3.5 غیرفعال ماند. سایت دیگری که با 3.29.2 نصب شده بود «کانتینر» و «نمادهای فونت درون‌خطی» را فعال و «نشانه‌گذاری بهینه‌شده» را غیرفعال داشت. در سایت تازه هر سه فعال بود. به‌روزرسانی هیچ‌کدام را عوض نکرد.

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

راهنمای خود المنتور (آخرین به‌روزرسانی ۲۹ خرداد ۱۴۰۵) هنوز کلید قدیمی Optimized Control Loading و «حافظه پنهان عنصر» را در همین برگه فهرست می‌کند. در 4.3.5 اولی دیگر کلید نیست و دومی در برگه «کارایی» است.

روشن‌کردن «نمادهای فونت درون‌خطی» در سایت 3.12.2 صفحه را ۲۷۹٫۵ کیلوبایت سبک کرد

وقتی کلید خاموش است، المنتور برای نمادهایش سه فایل فونت (۲۶۲٫۵ کیلوبایت) و چهار فایل CSS از کتابخانه‌های Font Awesome و eicons بارگذاری می‌کند. وقتی روشن است، نمادها به شکل SVG داخل خود صفحه می‌آیند (راهنمای المنتور). نتیجه روی سایت نصب‌شده با 3.12.2، با صفحه سکشنی (سکشن و ستون، ساختار قدیمی‌تر المنتور):

حالت	درخواست	کیلوبایت	گره DOM	Lighthouse
پیش‌فرض همان سایت	۶۴	۹۵۰٫۹	۳۲۴	۷۶
«نمادهای فونت درون‌خطی» فعال	۵۷	۶۷۱٫۴	۳۳۶	۸۱
«نشانه‌گذاری بهینه‌شده» فعال	۶۴	۹۵۰٫۹	۳۰۴	۷۵
هر دو فعال	۵۷	۶۷۱٫۳	۳۱۶	۸۱

Lighthouse در این جدول امتیاز عملکرد موبایل و میانه پنج اجراست. پنج اجرای حالت پیش‌فرض بین ۶۷ و ۷۶ بود و پنج اجرای «نمادهای فونت درون‌خطی» فعال بین ۷۸ و ۸۳. گره DOM یعنی شمار عنصرهای HTML صفحه.

با کلید فعال، صفحه ۷ درخواست و ۲۷۹٫۵ کیلوبایت کمتر داشت. هر ۱۶ نمادی که صفحه داشت SVG شد و هیچ نمادی با تگ فونتی نماند. همه از ویجت‌های خود المنتور بودند. راهنمای المنتور می‌گوید این کلید نمادهای Font Awesome Pro را تبدیل نمی‌کند، و نمادی را که افزونه جانبی چاپ می‌کند نسنجیدیم؛ بعد از روشن‌کردن چند صفحه را باز کنید. HTML صفحه ۱٫۷ کیلوبایت بزرگ‌تر شد و زمان نمایش بزرگ‌ترین محتوا (LCP) در Lighthouse از ۶٫۲ به ۴٫۷ ثانیه رسید.

«نشانه‌گذاری بهینه‌شده» ۲۰ گره DOM کم کرد (۳۲۴ به ۳۰۴)، اما حجم عوض نشد و امتیاز Lighthouse ۷۵ شد، داخل بازه ۶۷ تا ۷۶ حالت پیش‌فرض. توضیح خود المنتور برای این کلید می‌گوید «ممکن است نیاز به به‌روزرسانی کدهای CSS/JS سفارشی داشته باشد». در این سنجش دلیلی برای روشن‌کردنش به‌خاطر سرعت ندیدیم.

با فونت‌های پیش‌فرض و میزبان بی‌پاسخ گوگل، صفحه ۲۱٫۳ ثانیه چیزی نشان نداد

روی سایت تازه، با همان محتوا در ساختار کانتینر (۵۷ درخواست و ۵۶۲٫۳ کیلوبایت)، فونت‌های سراسری پیش‌فرض المنتور فعال بود. در بخش head دو شیوه‌نامه از fonts.googleapis.com درخواست می‌شد، یکی برای Roboto و یکی برای Roboto Slab، و بعد دو فایل فونت از fonts.gstatic.com: چهار درخواست و ۷۵٫۰ کیلوبایت. با «فونت‌های گوگل» روی «غیرفعال» (برگه «پیشرفته») صفحه ۵۳ درخواست و ۴۸۷٫۳ کیلوبایت شد و امتیاز Lighthouse از ۸۱ به ۸۷ رسید (پنج اجرای حالت پیش‌فرض بین ۷۷ و ۸۳ بود و هر پنج اجرای حالت غیرفعال ۸۷).

بعد در کروم این دو میزبان را به نشانی 192.0.2.1 (از بازه مخصوص مستندات) هدایت کردیم تا اتصال هرگز جواب نگیرد. اولین نمایش محتوا (FCP) هر سه بار ۲۱٫۳ ثانیه طول کشید، در برابر ۰٫۴۲ ثانیه وقتی میزبان‌ها جواب می‌دادند. با «فونت‌های گوگل» غیرفعال یا «بارگذاری محلی فونت‌های گوگل» (برگه «کارایی») فعال، همان صفحه با همان میزبان بی‌پاسخ ۰٫۲۳ تا ۰٫۲۷ ثانیه طول کشید. بارگذاری محلی نسبت به حالت پیش‌فرض ۵٫۵ کیلوبایت بیشتر شد و هیچ درخواستی به میزبان دیگر نفرستاد.

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

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

هر کلید را روی سایت تازه، با صفحه کانتینری که ۵۷ درخواست و ۵۶۲٫۳ کیلوبایت بود، جدا عوض کردیم:

کلید	درخواست	کیلوبایت
«روش پرینت CSS» روی «جایگذاری درونی»	۵۵	۵۶۱٫۳
«بارگذاری بهینه تصویر» غیرفعال	۵۷	۵۶۲٫۴
«بارگذاری بهینه گوتنبرگ» غیرفعال	۵۸	۵۸۱٫۴
«بارگذاری تنبل تصاویر پس‌زمینه» غیرفعال	۵۸	۶۷۲٫۴
«حافظه پنهان عنصر» غیرفعال	۵۷	۵۶۲٫۳

دو کلید «بارگذاری بهینه گوتنبرگ» و «بارگذاری تنبل تصاویر پس‌زمینه» پیش‌فرض روشن‌اند و خاموش‌کردنشان ۱۹٫۱ و ۱۱۰٫۱ کیلوبایت اضافه کرد. «بارگذاری بهینه تصویر» تغییری نداد: در هر دو حالت اولین تصویر گالری با اولویت بالا بارگذاری شد و سه تصویر آخر تنبل شدند. «حافظه پنهان عنصر» هم روی این صفحه ۱۸ ویجتی زودتر پاسخ نداد. زمان تا اولین بایت (میانه ۳۰ درخواست) ۵۰٫۱ میلی‌ثانیه بود و با غیرفعال‌کردنش ۴۹٫۶. «روش پرینت CSS» روی «جایگذاری درونی» دو فایل CSS را به خود صفحه برد: ۲ درخواست و ۱٫۰ کیلوبایت کمتر.

صفحه سکشنی ۱۱۱٫۳ کیلوبایت سنگین‌تر از کانتینری بود

صفحه سکشنی همان محتوا ۳۱۹ گره DOM داشت و کانتینری ۳۰۰. سکشنی ۶۷۳٫۶ کیلوبایت بود، در برابر ۵۶۲٫۳ کیلوبایت کانتینری، و تصویر پس‌زمینه دوم را هم همان لحظه بارگذاری کرد. کد «بارگذاری تنبل تصاویر پس‌زمینه» فقط عنصرهای کانتینر را هدف می‌گیرد. «کانتینر» در سایت 3.12.2 خاموش بود و همین صفحه سکشنی در آن بدون مشکل بارگذاری شد؛ روشن‌کردنش روی صفحه‌های سکشنی را نسنجیدیم.

در ویجت‌هایی که سنجیدیم، گالری با لایت‌باکس و گردونه تصویر بیشترین بار را داشتند

صفحه‌ای که فقط یک عنوان داشت ۲۵ درخواست و ۱۶۹٫۵ کیلوبایت بود. این‌قدر CSS و JS روی آن اضافه شد (کیلوبایت):

ویجت	CSS و JS اضافه
دکمه، جعبه نماد، انیمیشن ورود، شبکه‌های اجتماعی	هرکدام تا ۲٫۹
شمارنده، آکاردئون، تب‌ها	۹٫۵ تا ۱۱٫۱
گردونه تصویر	۴۷٫۰ (۳۹٫۱ از آن کتابخانه Swiper است)
گالری با لایت‌باکس	۸۲٫۴

کل صفحه گالری ۴۰ درخواست و ۳۶۴٫۹ کیلوبایت بود. با گزینه «لایت باکس» روی «خیر» (یا «پیوند» روی «هیچ») ۳۲ درخواست و ۲۸۳٫۳ کیلوبایت شد: ۸ درخواست و ۸۱٫۶ کیلوبایت کمتر، با همان شش تصویر.

از این سه جا شروع کنید: ویژگی‌ها، فونت و گالری

1. برگه «ویژگی‌ها» را باز کنید و نقطه «نمادهای فونت درون‌خطی» را ببینید. اگر پیش‌فرضش غیرفعال است، آن را روی «فعال» بگذارید و چند صفحه را نگاه کنید.
2. اگر در تب Network مرورگر درخواستی به fonts.googleapis.com می‌بینید، «فونت‌های گوگل» را غیرفعال کنید و فونت فارسی را از قالب یا CSS خودتان بگذارید، یا «بارگذاری محلی فونت‌های گوگل» را فعال کنید. بارگذاری محلی وقتی کار می‌کند که سرور سایت بتواند فونت‌ها را از گوگل بگیرد؛ طبق کد افزونه، اگر نتواند، المنتور همان پیوند گوگل را چاپ می‌کند.
3. در تنظیمات ویجت گالری، جایی که لازم نیست تصویر در لایت‌باکس باز شود، «لایت باکس» را روی «خیر» بگذارید.

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

افزونه کش لایه دیگری است و آن را روی یک فروشگاه در لایت اسپید کش یا راکت سنجیدیم. ویجت‌های Pro (تفاوتشان با نسخه رایگان)، هاست و افزونه‌های جانبی المنتور را در این آزمایش نسنجیدیم.

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