مقایسه قالب‌های وردپرس از نظر سرعت بارگذاری

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

سرعت بارگذاری قالب از چه لایه‌هایی ساخته می‌شود؟

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

این پنج لایه، مبنای تحلیل کندی هر قالبی است. اگر بخواهید در سطح عمیق‌تر ببینید، پست Core Web Vitals چیست همین معیارها را با آستانه‌های عددی باز کرده و در چرا بعضی قالب‌ها سایت را کند می‌کنند، مکانیزم هرکدام کالبدشکافی شده است.

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

لایه اول: TTFB و اثر قالب بر پاسخ سرور

TTFB یعنی فاصله بین ارسال درخواست تا رسیدن اولین بایت پاسخ. این لایه، ترکیبی از سرعت سرور و کد PHP قالب است. قالب‌هایی که در هر صفحه تعداد زیادی کوئری دیتابیس می‌زنند یا در حلقه‌ها فایل‌های اضافه enqueue می‌کنند، TTFB را بالا می‌برند.

در مقایسه قالب‌ها، اگر TTFB روی همه صفحات بالای ۸۰۰ میلی‌ثانیه است، اول باید بفهمید چه بخشی از این عدد سهم قالب است و چه بخشی سهم هاست. راه تحلیلش در تأثیر TTFB بر سرعت بارگذاری و تأثیر هاست بر سرعت سایت آمده است.

در تست‌های میدانی خودم، تفاوت TTFB بین قالب‌های مینیمال و قالب‌های سنگین روی همان سرور معمولاً بین ۵۰ تا ۱۵۰ میلی‌ثانیه است. این تفاوت، به‌تنهایی نمی‌تواند یک قالب را برنده کند، ولی وقتی با لایه‌های بعدی جمع شود، اثرش محسوس می‌شود.

لایه دوم: مسیر بحرانی رندر (Critical Rendering Path)

مرورگر تا وقتی که CSS بحرانی صفحه را نگرفته باشد، نمایش نمی‌دهد. قالب‌هایی که چند فایل CSS در head لود می‌کنند یا فونت‌های بیرونی بدون font-display دارند، مسیر بحرانی رندر را طولانی می‌کنند. این لایه، تفاوت اصلی بین قالب‌های مینیمال و قالب‌های فیچر-محور است.

قالب‌های مینیمال مثل Hello و Neve معمولاً یک یا دو فایل CSS اصلی دارند؛ در حالی که قالب‌های فیچر-محور با همه ماژول‌های روشن، ممکن است پنج تا هشت فایل CSS در صف داشته باشند. راه بهبود در این لایه، تولید CSS بحرانی است که در افزونه‌های کش وردپرس پوشش داده شده است.

در قالب‌های سنگین، حتی اگر همه چیز روی سرور پرقدرت اجرا شود، کاربر همان چند صد میلی‌ثانیه انتظار برای دیدن اولین محتوا را حس می‌کند.

لایه سوم: ساختار DOM و هزینه پارس

ساختار HTML قالب، تعیین می‌کند مرورگر چقدر باید کار کند تا درخت DOM را بسازد. قالب‌هایی که برای هر عنصر ساده، چند لایه div می‌سازند، DOM عمیق و پرهزینه‌ای تولید می‌کنند. اثر این لایه روی موبایل‌های میان‌رده محسوس است، نه دسکتاپ.

روش سریع تست: در کنسول مرورگر، دستور document.querySelectorAll("*").length را بزنید. قالب‌های سبک معمولاً زیر ۱۰۰۰ نود برای صفحه اصلی دارند؛ قالب‌های صفحه‌ساز-محور به‌راحتی از ۲۰۰۰ نود عبور می‌کنند. این معیار، یکی از شاخص‌های مطمئن برای تشخیص قالب سبک از سنگین است.

در ادامه تفصیلی این مبحث، پست قالب سبک وردپرس چیست را ببینید.

لایه چهارم: بار فایل‌های استاتیک

مجموع بایت‌های CSS و JS، شاید ملموس‌ترین معیار مقایسه باشد. در تست‌های خودم:

• قالب‌های مینیمال: معمولاً زیر ۱۰۰ کیلوبایت فشرده.
• قالب‌های فیچر-محور با ماژول‌های کم: حدود ۱۵۰ تا ۲۵۰ کیلوبایت.
• قالب‌های فیچر-محور با همه ماژول‌ها: ۴۰۰ تا ۶۰۰ کیلوبایت.
• قالب‌های صفحه‌ساز-محور: به‌شدت وابسته به استفاده، از ۲۰۰ کیلوبایت تا بالای یک مگابایت.

این اعداد، به تنهایی قضاوت نمی‌کنند؛ ولی وقتی با سرعت اینترنت متوسط ایران (که در عمل کمتر از ایده‌آل است) ترکیب شوند، تفاوت‌های ۲۰۰ کیلوبایتی معنادار می‌شوند. راه کاهش این بار در افزایش سرعت وردپرس آمده است.

لایه پنجم: تصویر شاخص و LCP

لایه‌ای که بیشتر از همه نادیده گرفته می‌شود. LCP بزرگ‌ترین عنصر دیدی صفحه است و در اکثر قالب‌ها، همان تصویر شاخص یا بنر خانه. قالب‌های خوب، این تصویر را با srcset و ابعاد درست لود می‌کنند؛ قالب‌های ضعیف، همان فایل اصلی با ابعاد بزرگ را در موبایل نمایش می‌دهند.

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

روش مقایسه عملی در چند ساعت

روش من برای مقایسه قالب‌ها از نظر سرعت بارگذاری، یک آزمایش سه‌ساعته است:

1. نصب تمیز وردپرس: بدون داده قبلی، بدون افزونه اضافه.
2. داده مشترک: یک نوشته با تصویر شاخص، یک صفحه ساده، یک آرشیو.
3. سه بار تست هر صفحه: میانه را ثبت کنید، نه میانگین.
4. پنج عدد: TTFB، LCP، مجموع بایت، تعداد درخواست، عمق DOM.
5. تست روی موبایل شبیه‌سازی‌شده: با پروفایل Fast 3G، نه وای‌فای اداری.

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

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

حکم نهایی و راهنمای انتخاب

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

توصیه عملی من این است: پیش از انتخاب، همان آزمایش سه‌ساعته را روی دو یا سه قالب کاندیدا اجرا کنید. اگر می‌خواهید مقایسه آماده‌تری داشته باشید، پست‌های تخصصی‌تری هم نوشته‌ام: Astra در برابر GeneratePress، نقد Kadence و مقایسه سرعت قالب‌های محبوب.

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