5 کد کاربری برای افزایش سرعت سایت های وردپرسی و المنتوری

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

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

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

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

کدهای بهینه سازی سرعت سایت های وردپرسی و المنتوری را کجا قرار دهیم؟

بیشتر کدهای PHP این آموزش باید در فایل functions.php قالب فرزند یا همان Child Theme قرار بگیرند. پیشنهاد نمی‌کنیم کدها را مستقیماً داخل functions.php قالب اصلی قرار دهید؛ چون ممکن است بعد از آپدیت قالب حذف شوند. اگر با کدنویسی آشنایی زیادی ندارید، قبل از هر تغییری یک نسخه پشتیبان از فایل موردنظر داشته باشید.

۱. حذف Emoji های اضافی وردپرس

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

کد زیر را در functions.php قالب فرزند قرار دهید:

<?php
function disable_emojis() {
    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
    remove_action( 'wp_print_styles', 'print_emoji_styles' );
}

add_action( 'init', 'disable_emojis' );
?>

نتیجه این کد چیست؟

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

۲. بارگذاری JavaScript با Defer

یکی از مواردی که ابزارهایی مثل PageSpeed Insights زیاد درباره آن هشدار می‌دهند، فایل‌های JavaScript مسدودکننده رندر هستند. استفاده از ویژگی defer باعث می‌شود مرورگر فایل JavaScript را دانلود کند اما اجرای آن را تا بعد از پردازش HTML به تعویق بیندازد.

نمونه ساده:

<?php
function defer_parsing_of_js( $url ) {

    if ( is_user_logged_in() ) {
        return $url;
    }

    if ( strpos( $url, 'jquery.js' ) ) {
        return $url;
    }

    return str_replace( ' src', ' defer src', $url );
}

add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );
?>

Defer چه کمکی می‌کند؟

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

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

همه فایل‌های JavaScript را نمی‌توان بدون بررسی Defer کرد. بعضی اسکریپت‌های المنتور، اسلایدرها، منوها، پاپ‌آپ‌ها، پرداخت ووکامرس و افزونه‌های مختلف به ترتیب خاصی از اجرای JavaScript وابسته هستند.

اگر بعد از اجرای این کد مواردی مثل:

• اسلایدر
• منوی موبایل
• پاپ‌آپ
• تب‌ها
• سبد خرید
• فرم‌ها

دچار مشکل شدند، این کد را حذف کنید. اگر از افزونه‌هایی مانند LiteSpeed Cache یا Perfmatters استفاده می‌کنید، معمولاً بهتر است مدیریت Delay و Defer جاوااسکریپت را از همان افزونه انجام دهید تا امکان Exclude کردن فایل‌ها نیز داشته باشید.

۳. حذف Font Awesome اضافی در Elementor

Elementor در بعضی سایت‌ها فایل‌های Font Awesome را بارگذاری می‌کند. اگر در طراحی سایت خود از آیکون‌های Font Awesome استفاده نمی‌کنید یا آیکون‌ها را به روش دیگری بارگذاری کرده‌اید، ممکن است بتوانید فایل‌های مربوط به آن را حذف کنید.

کد:

<?php
add_action( 'wp_enqueue_scripts', function() {

    wp_dequeue_style( 'fontawesome' );
    wp_dequeue_style( 'elementor-icons-fa-solid' );
    wp_dequeue_style( 'elementor-icons-fa-brands' );

}, 100 );
?>

این کار چه مزیتی دارد؟

در صورت عدم نیاز به Font Awesome، حذف این فایل‌ها می‌تواند:

• تعداد درخواست‌های HTTP را کاهش دهد
• حجم CSS را کمتر کند
• منابع غیرضروری صفحه را حذف کند

حتماً بعد از اجرای کد سایت را بررسی کنید

اگر بعد از اضافه کردن کد بعضی آیکون‌های سایت ناپدید شدند، یعنی سایت شما هنوز به Font Awesome نیاز دارد. در این شرایط کد را حذف کنید. صفحه اصلی، هدر، فوتر، منوی موبایل، صفحه محصول و فرم‌ها را نیز بررسی کنید؛ چون ممکن است آیکونی در بخشی از سایت استفاده شده باشد که در نگاه اول متوجه آن نشوید.

۴. پاکسازی Head وردپرس

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

برای پاکسازی بخشی از این موارد می‌توانید از کد زیر استفاده کنید:

<?php
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'wp_generator' );
remove_action( 'wp_head', 'wp_shortlink_wp_head' );
remove_action( 'wp_head', 'rest_output_link_wp_head' );
?>

این کد برخی موارد اضافی مانند:

RSD Link،
Windows Live Writer Manifest،
نسخه وردپرس،
Shortlink و
لینک REST API موجود در Head

را حذف می‌کند.

آیا این کد به‌تنهایی سرعت سایت را چند برابر می‌کند؟

خیر.

تأثیر این بهینه‌سازی نسبتاً کوچک است، اما هدف این است که HTML سایت تا حد امکان تمیز و سبک باقی بماند. در واقع بهینه‌سازی حرفه‌ای سرعت سایت از تعداد زیادی اصلاح کوچک و بزرگ تشکیل شده است.

۵. استفاده از font-display: swap برای فونت‌ها

فونت‌های فارسی معمولاً یکی از منابع سنگین سایت‌های ایرانی هستند. اگر فونت سایت دیر دانلود شود، ممکن است مرورگر تا زمان دریافت فونت اصلی، متن را با تأخیر نمایش دهد.

یکی از روش‌های بهبود این وضعیت استفاده از:

font-display: swap;

است.

نمونه:

@font-face {
    font-family: 'YourFont';

    src: url('/fonts/yourfont.woff2') format('woff2');

    font-display: swap;
}

به‌جای YourFont نام فونت خودتان و به‌جای آدرس نمونه، مسیر واقعی فایل فونت را وارد کنید.

font-display: swap چه کاری انجام می‌دهد؟

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

آیا این ۵ کد باعث می‌شوند PageSpeed سایت ۱۰۰ شود؟

نه لزوماً.

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

به‌خصوص در سایت‌های المنتوری بهتر است موارد زیر را هم جدی بگیرید:

• استفاده از هاست مناسب
• فعال‌سازی Page Cache
• استفاده از تصاویر WebP یا AVIF
• کاهش تعداد فونت‌ها و وزن‌های فونت
• حذف افزونه‌های غیرضروری
• کاهش تعداد Containerها و عناصر اضافی Elementor
• Lazy Load تصاویر
• بهینه‌سازی CSS و JavaScript
• Preload کردن منابع مهم
• بررسی LCP
• کاهش CLS
• بررسی TTFB سرور

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

آیا باید همه این کدها را با هم استفاده کنیم؟

خیر.

این یکی از اشتباهاتی است که در بهینه‌سازی وردپرس زیاد دیده می‌شود. قرار نیست هر کدی که با عنوان «افزایش سرعت وردپرس» پیدا می‌کنیم روی سایت قرار دهیم. برای مثال اگر از Font Awesome استفاده می‌کنید، نباید فایل آن را حذف کنید. یا اگر افزونه کش شما JavaScript را Defer کرده است، اجرای یک کد دیگر برای همان کار ممکن است باعث تداخل شود.

روش صحیح این است:

هر بار فقط یک تغییر انجام دهید، کش سایت را پاک کنید، صفحات مهم را بررسی کنید و سپس نتیجه را با ابزارهایی مانند PageSpeed Insights آزمایش کنید.

افزونه بهتر است یا کدنویسی؟

هر دو روش کاربرد خودشان را دارند. کدنویسی برای تغییرات کوچک و مشخص می‌تواند بسیار سبک باشد، اما افزونه‌هایی مثل LiteSpeed Cache و Perfmatters امکانات بیشتری برای مدیریت استثناها و تست تنظیمات در اختیار شما قرار می‌دهند.

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

جمع‌ بندی

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

۵ روشی که در این مقاله بررسی کردیم شامل:

1. حذف Emojiهای اضافی وردپرس
2. Defer کردن JavaScript
3. حذف Font Awesome در صورت عدم استفاده
4. پاکسازی Head وردپرس
5. استفاده از font-display: swap

بود.

اما قبل از اجرای هر کد حتماً از سایت بکاپ بگیرید و تغییرات را مرحله‌به‌مرحله آزمایش کنید. اگر بعد از اجرای این روش‌ها هنوز سایت شما کند است، احتمالاً مشکل اصلی جای دیگری مانند سرور، تصاویر، JavaScript سنگین، DOM بزرگ یا تنظیمات Elementor قرار دارد.

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

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

آیا این کدها برای تمام سایت‌های المنتوری مناسب هستند؟

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

کدهای PHP را کجا قرار دهیم؟

بهترین محل فایل functions.php قالب فرزند یا یک افزونه اختصاصی سبک است.

آیا حذف Font Awesome باعث افزایش سرعت می‌شود؟

اگر سایت واقعاً از آن استفاده نکند، حذف فایل‌های مربوط به آن می‌تواند درخواست‌ها و CSS اضافی را کاهش دهد. اگر از آیکون‌های Font Awesome استفاده می‌کنید، نباید آن را حذف کنید.

آیا Defer کردن JavaScript برای Elementor خطر دارد؟

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

آیا این کدها جای LiteSpeed Cache یا Perfmatters را می‌گیرند؟

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

منبع: تیم تولید محتوای نایس کدرز