کاهش تعداد درخواست های HTTP در وردپرس

سلام! 👋
چطوری؟ خوش اومدی به یه آموزش کاربردی دیگه از رایا وردپرس.

اگه الان این صفحه رو باز کردی، احتمالاً یکی از این اتفاق‌ها برات افتاده:

• سایتت رو با ابزارهایی مثل GTmetrix چک کردی و تعداد درخواست‌ها رو بالای ۸۰ یا ۱۰۰ دیدی.
• هاستت خوبه، قالبتم سنگین نیست؛ ولی بازم سایت کنده.
• یا فقط دوست داری سایتت از الان سریع‌تر از بقیه باشه. 😎

خبر خوب اینه که کاهش درخواست‌های HTTP اصلاً اون غولی نیست که خیلی‌ها ازش می‌سازن! کافیه بدونیم این درخواست‌ها چطور تولید می‌شن و کجا باید دست‌کاریشون کنیم. توی این آموزش، هم مفهوم رو ساده یاد می‌گیری، هم کدهای آماده و هم یه آزمایشگاه تعاملی داریم که ببینی هر ترفند چقدر درخواست کم می‌کنه. 😍

درخواست HTTP یعنی چی؟ 🤔

هر بار که کسی وارد سایتت می‌شه، مرورگرش باید کلی فایل مختلف رو از سرور تو بگیره:

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

• فایل HTML صفحه
• فایل‌های CSS (برای استایل و ظاهر)
• فایل‌های جاوااسکریپت (برای اسلایدر، منو و…
• تصاویر، فونت‌ها و آیکون‌ها

به هر کدوم از این «تقاضا»ها یه درخواست HTTP (HTTP Request) می‌گن. یعنی مرورگر به سرور می‌گه: «این فایل رو برام بفرست!» و سرور هم جواب می‌ده.

💡 نکته طلایی: هر چی تعداد این درخواست‌ها بیشتر باشه، مرورگر باید صف طولانی‌تری رو مدیریت کنه. حتی با یه هاست فوق‌سریع هم، لود ۱۰۰ فایل ریز و درشت زمان‌بره. هدف ما اینه که این صف رو تا جای ممکن خلوت کنیم.

چرا سایت وردپرسی من این همه درخواست داره؟ 😵

وردپرس به خودی خود سبک و تمیزه، ولی مشکل از جایی شروع می‌شه که ما عاشق افزونه نصب کردن هستیم! 😅 هر افزونه‌ای که نصب می‌کنی، چند تا فایل CSS و JS خودش رو به سایت اضافه می‌کنه. بذار ببینیم این درخواست‌ها دقیقاً از کجا میان:

۱. افزونه‌ها؛ قاتل خاموش سرعت 🔪

هر افزونه به‌طور میانگین ۳ تا ۶ فایل جداگانه (استایل + اسکریپت) به هر صفحه اضافه می‌کنه. حالا حساب کن یه سایت معمولی چند تا افزونه داره: ۲۰، ۳۰ یا حتی ۴۰ تا! نتیجه؟ صدها فایل که شاید نصفشون رو اصلاً لازم نداری.

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

۲. قالب‌های چندمنظوره سنگین 🏋️

قالب‌های چندمنظوره (مثل بعضی قالب‌های معروف سایت‌های فروشگاهی) برای این‌که «همه‌چیزکار» باشن، صدها فایل CSS و JS دارن. تقریباً نیمی از این فایل‌ها رو هیچ‌وقت توی سایتت استفاده نخواهی کرد!

۳. وردپرس هم خودش چند تا درخواست پیش‌فرض داره 🫣

تازه هسته وردپرس خودش چند تا درخواست اضافه داره که خیلی‌ها از وجودشون بی‌خبرن:

• ایموجی‌ها (Emoji): یک اسکریپت + یک استایل برای نمایش ایموجی در مرورگرهای قدیمی.
• امبدها (oEmbed): برای جاسازی لینک یوتیوب و… در متن.
• فونت آیکون Dashicons: مخصوص پیشخوان وردپرس، نه سایت تو!
• فایل Embed API: در نسخه‌های قدیمی‌تر اضافه می‌شد.

۴. تصاویر و فونت‌های بهینه‌نشده 📸

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

HTTP/2 و HTTP/3؛ چرا مهمن؟ 🌐

قبل از هر کاری، باید یه مفهوم مهم رو بدونی: نسخه پروتکل HTTP سایتت. این نسخه می‌تونه کل استراتژی بهینه‌سازیت رو عوض کنه!

تفاوت HTTP/1.1 با HTTP/2 چیست؟

در HTTP/1.1، مرورگر فقط می‌تونست به هر دامنه تعداد محدودی درخواست همزمان بفرسته (معمولاً ۶ عدد). یعنی اگه ۶۰ فایل داشتی، باید ۱۰ تا صف ۶‌تایی می‌ساختی و منتظر می‌موندی! اما در HTTP/2، همه درخواست‌ها روی یک اتصال واحد و موازی ارسال می‌شن. به همین خاطر دیگه «ادغام اجباری» همه فایل‌ها مثل قدیم حیاتی نیست.

چطور بفهمیم سایت ما HTTP/2 است؟

• سایت خودت رو در کروم باز کن، F12 بزن و برو تب Network.
• روی ستون بالای جدول درخواست‌ها راست‌کلیک کن و گزینه Protocol رو فعال کن.
• اگه نوشته h2 یعنی HTTP/2، و اگه h3 دیدی یعنی HTTP/3 و اگه چیز دیگری دیدی یعنی HTTP/1.1.

اکثر هاست‌های ایرانی امروزی HTTP/2 رو دارند (و خیلی‌ها HTTP/3 یا همون QUIC رو هم اضافه کردن). 🎉

چطور تعداد درخواست‌های سایت رو ببینیم؟ 🔍

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

۱. ابزارهای توسعه مرورگر کروم (ساده‌ترین و دقیق‌ترین)

سایتت رو باز کن، کلید F12 رو بزن و برو تب Network (شبکه). حالا صفحه رو یک بار رفرش کن. پایین پنجره، تعداد کل درخواست‌ها + حجم دانلود شده + زمان لود کامل رو می‌بینی. این‌جا حتی می‌تونی ببینی هر درخواست دقیقاً چقدر طول کشیده و کدومش معطله.

۲. GTmetrix (محبوب‌ترین بین وب‌مسترها)

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

۳. PageSpeed Insights گوگل (برای سئو ضروریه)

ابزار رسمی گوگل هم در بخش Opportunities (فرصت‌ها) لیستی از فایل‌های بیهوده رو نشونت می‌ده که بهت می‌گه «این فایل‌ها رو حذف کن، این حجم پس‌انداز می‌شه». برای Core Web Vitals هم اطلاعات طلایی داره.

۴. وب پیج تست (WebPageTest)

ابزار حرفه‌ای‌تر که از نقاط مختلف دنیا (با مرورگر و سرعت‌های مختلف) سایتت رو تست می‌کنه. برای عیب‌یابی تخصصی و بررسی «تعداد اتصال‌های موازی» عالیه.

🎯 عدد جادویی چیه؟ به‌طور کلی، اگه تعداد درخواست‌هات بیشتر از ۶۰ باشه، حتماً جا برای بهبود داری. سایت‌های خیلی خوب معمولاً بین ۲۵ تا ۴۵ درخواست دارن.

⚠️ قبل از شروع: حتماً از سایتت بکاپ بگیر و در صورت امکان اول روی یک محیط آزمایشی (Staging) تست کن. این قانون همیشه اولین قدم توی رایا وردپرس بوده! 😉

راهکارهای کاملاً عملی برای کاهش درخواست‌ها 🛠️

حالا می‌رسیم به قلب مقاله! 👇 این‌جا ۸ راهکار رو قدم‌به‌قدم با هم مرور می‌کنیم؛ از ساده‌ترین‌ها تا حرفه‌ای‌ترین‌ها. هر کدوم رو که انجام بدی، بلافاصله نتیجه‌اش رو توی تعداد درخواست‌ها می‌بینی.

۱. فایل‌های CSS و JS رو ادغام (Combine) و فشرده (Minify) کن 🧩

با یک افزونه کش حرفه‌ای مثل WP Rocket یا LiteSpeed Cache می‌تونی تمام فایل‌های CSS رو به یک فایل و اسکریپت‌ها رو به یک یا دو فایل تبدیل کنی. نتیجه؟ به جای ۳۰ درخواست، فقط ۲ یا ۳ درخواست!

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

پیشنهاد میشه: ابزار مینیفای کد CSS

۲. ایموجی‌ها و امبدهای وردپرس رو غیرفعال کن 🚫

وردپرس برای پشتیبانی از ایموجی‌ها، یه فایل جاوااسکریپت و یه فایل CSS اضافه بارگذاری می‌کنه. اگه توی نوشته‌هات از ایموجی استفاده نمی‌کنی (یا ایموجی‌های خود سیستم‌عامل و مرورگر کافیه)، این درخواست‌ها کاملاً بی‌فایدست. امبد هم برای جاسازی لینک یوتیوب و… استفاده می‌شه که خیلی از سایت‌ها نیازی بهش ندارن.

۳. فونت آیکون Dashicons رو برای بازدیدکننده‌ها حذف کن 🖼️

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

۴. بارگذاری تنبل (Lazy Load) رو فعال کن 💤

اگه صفحه‌ات ۲۰ تا عکس داره، مرورگر اولِ کار همه‌شون رو دانلود می‌کنه! با فعال‌سازی لود تنبل، عکس‌ها فقط وقتی لود می‌شن که کاربر بهشون نزدیک بشه. از نسخه ۵.۵ وردپرس، خودش برای عکس‌ها این قابلیت رو داره؛ ولی برای ویدیوها و آی‌فریم‌ها (مثل ویدیوی یوتیوب) هنوز باید افزونه یا کد استفاده کنی.

۵. دارایی‌های بیهوده افزونه‌ها رو مدیریت کن (Asset Unloading) 🎛️

این شاید قوی‌ترین ترفند این لیست باشه! مثلاً افزونه «فرم تماس ۷» کدهاش رو توی همه صفحات سایت لود می‌کنه، در حالی که فرم فقط توی صفحه «تماس با ما»ست. با افزونه‌هایی مثل Perfmatters یا Asset CleanUp می‌تونی تعیین کنی هر فایل توی کدوم صفحه لود بشه و کجا نه.

۶. فونت‌ها رو محلی (Self-Host) کن 🔤

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

۷. تصاویر رو فشرده و به فرمت درست تبدیل کن 🏞️

هر عکس یک درخواسته؛ پس هر عکس اضافه یعنی درخواست بیهوده. از فرمت جدید WebP یا AVIF استفاده کن که حجمشون تا ۵۰٪ کمتر و کیفیتشون عالیه. افزونه‌های Imagify، ShortPixel و Smush عکس‌ها رو خودکار فشرده و تبدیل می‌کنن.

پیشنهاد میشه: ابزار کاهش حجم تصویر و تبدیل به webp

۸. از CSS Sprite برای آیکون‌های زیاد استفاده کن 🎨

اگه سایتت کلی آیکون کوچیک جداگانه داره (مثل آیکون شبکه‌های اجتماعی)، همه رو توی یک تصویر واحد بذار و با CSS بخش موردنظرت رو نمایش بده. نتیجه: به جای ۲۰ درخواست آیکون، فقط ۱ درخواست!

🔥 ترفند حرفه‌ای: اگه سایتت روی HTTP/2 باشه، دیگه ادغام ۱۰۰٪ فایل‌ها اون قدرها حیاتی نیست؛ ولی حذف درخواست‌های بیهوده همیشه و همه‌جا جواب می‌ده. پس اول درخواست‌های بیهوده رو حذف کن، بعد سراغ ادغام برو!

جدول مقایسه افزونه‌های کاهش درخواست HTTP 📊

توی جدول زیر محبوب‌ترین ابزارها رو برات مقایسه کردیم تا راحت‌تر انتخاب کنی:

💡 پیشنهاد رایا وردپرس: ترکیب LiteSpeed Cache (اگه هاستت لایت‌اسپیده) یا WP Rocket + Asset CleanUp یه ترکیب برنده‌ست.

هر ترفند چقدر درخواست کم می‌کند؟ (تخمین تقریبی)

کدهای آماده برای فایل functions.php قالب فرزند 💻

اگه دوست نداری برای این کارهای ساده افزونه نصب کنی (که خودمون عاشق اینیم! 😍)، این کدها رو به انتهای فایل functions.php قالب فرزند اضافه کن:

کد ۱: غیرفعال‌سازی کامل ایموجی‌های وردپرس

// Disable WordPress Emojis
add_action( 'init', 'disable_wp_emojis' );
function disable_wp_emojis() {
    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
    remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
    remove_action( 'wp_print_styles', 'print_emoji_styles' );
    remove_action( 'admin_print_styles', 'print_emoji_styles' );
    remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
    remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
    remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
    add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
function disable_emojis_tinymce( $plugins ) {
    if ( is_array( $plugins ) ) {
        return array_diff( $plugins, array( 'wpemoji' ) );
    }
    return array();
}

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

کد ۲: غیرفعال‌سازی Dashicons برای کاربران مهمان

// حذف Dashicons برای بازدیدکنندگان (کاربران لاگین‌نشده)
add_action( 'wp_enqueue_scripts', 'rayawp_remove_dashicons' );
function rayawp_remove_dashicons() {
    if ( ! is_user_logged_in() ) {
        wp_dequeue_style( 'dashicons' );
        wp_deregister_style( 'dashicons' );
    }
}

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

کد ۳: غیرفعال‌سازی امبدها + لود تنبل پیش‌فرض

// غیرفعال کردن امبدهای وردپرس (oEmbed)
add_action( 'init', function() {
    remove_action( 'wp_head', 'wp_oembed_add_discovery_links' );
    remove_action( 'wp_head', 'wp_oembed_add_host_js' );
}, 1 );

// لود تنبل برای آی‌فریم‌ها
add_filter( 'the_content', function( $content ) {
    // پیدا کردن تگ‌های iframe و افزودن ویژگی loading="lazy" به آن‌ها
    return preg_replace( '/<iframe /i', '<iframe loading="lazy" ', $content );
});

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

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

نتیجه‌گیری: سرعت بیشتر، فروش بالاتر

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