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

برای کاهش تعداد درخواست های HTTP در سایت وردپرسی تان و افزایش چشمگیر سرعت بارگذاری، باید منابع غیرضروری مثل افزونه های سنگین و تصاویر با حجم بالا را حذف یا بهینه کنید. همچنین، با ترکیب و فشرده سازی فایل های CSS و JavaScript، فعال کردن Lazy Load برای تصاویر و ویدئوها، و مدیریت هوشمند فونت ها و اسکریپت های شخص ثالث، می توانید به نتایج عالی برسید. این کار باعث میشه سایت شما سریع تر از همیشه بالا بیاد و کاربرها هم از گشت و گذار توش حسابی کیف کنن.

تا حالا شده سایتت کند باشه و کلی حرص بخوری؟ یا وقتی توی ابزارهایی مثل GTmetrix یا PageSpeed Insights سایتت رو تست می کنی، با کلی هشدار و نمره پایین روبرو بشی؟ یکی از مهم ترین دلایل این کندی، تعداد زیاد درخواست های HTTP هست. این درخواست ها مثل کارمندهایی هستن که مرورگرت می فرسته سراغ سرور سایت تا هر تیکه از اطلاعات صفحه رو دونه دونه بیاره. خب معلومه که هرچی این کارمندها بیشتر باشن و رفت و آمدشون هم طول بکشه، سایت دیرتر بالا میاد و کاربر بیچاره باید منتظر بمونه.

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

چرا کاهش درخواست های HTTP برای سایت وردپرسی شما حیاتیه؟

شاید بپرسی این همه تأکید روی کاهش تعداد درخواست های HTTP برای چیه؟ قضیه اینه که سرعت سایت دیگه یه آپشن نیست، یه ضرورت واقعیه! هم برای کاربرها و هم برای گوگل. وقتی سایتت مثل برق و باد بارگذاری میشه، کاربر حوصله اش سر نمیره، توی سایتت بیشتر می مونه و شانس اینکه به مشتری تبدیل بشه بالاتر میره. از اون طرف، گوگل هم عاشق سایت های سریعه و بهشون توی نتایج جستجو رتبه بهتری میده. کلاً برد-برد میشه.

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

اصلاً درخواست HTTP چی هست و چطوری کار می کنه؟

بیاید از پایه شروع کنیم تا بفهمیم داستان از چه قراره. پروتکل HTTP (Hypertext Transfer Protocol) در واقع زبونیه که مرورگر کامپیوتر یا گوشی شما با سرور وب سایت صحبت می کنه. وقتی آدرس سایتی رو وارد می کنید، مرورگر یه درخواست HTTP به سرور می فرسته و میگه: سلام! این سایت رو می خوام. سرور هم شروع می کنه به پاسخ دادن و تمام فایل ها و منابع لازم رو دونه دونه برای مرورگر میفرسته.

تصور کنید می خواید یه خونه بسازید. هر آجر، هر پنجره، هر درب و هر سیم کشی، یه قطعه جداگونه ست. برای اینکه خونه کامل بشه، باید همه این قطعات رو از انبار بیارید و کنار هم بچینید. سایت شما هم همین طوره. هر تصویر، هر خط کد CSS که ظاهر سایت رو مشخص می کنه، هر اسکریپت جاوا اسکریپت که به سایت حرکت و امکانات میده، هر فونت و هر ویدئو، یه قطعه جداگونه ست که مرورگر باید با یه درخواست HTTP از سرور بگیره. حالا اگه تعداد این قطعات زیاد باشه، سرور باید درخواست های بیشتری رو پردازش کنه و مرورگر هم بیشتر منتظر بمونه تا همه چی کامل شه.

منابعی که HTTP Request می سازن، کدومان؟

• تصاویر: هر عکسی که توی سایتت داری، از لوگو گرفته تا بنر و عکس های مقاله، خودش یه درخواست HTTP جداگونه ست.
• فایل های CSS: این فایل ها مسئول ظاهر سایتت هستن؛ رنگ ها، فونت ها، چیدمان و هرچیزی که سایت رو قشنگ می کنه. معمولاً هر قالب و افزونه ای فایل های CSS خودش رو داره.
• فایل های JavaScript: این فایل ها مسئول اضافه کردن امکانات و تعاملات به سایتن؛ مثلاً اسلایدرها، فرم های پویا، پاپ آپ ها و انیمیشن ها.
• فونت ها و آیکون ها: فونت های خاص یا فونت های آیکون مثل Font Awesome هم هر کدوم ممکنه درخواست های جداگانه خودشون رو ایجاد کنن.
• ویدئوها: اگه ویدئو رو مستقیم توی سایتت آپلود کنی، یا حتی Embed کنی، می تونه کلی درخواست اضافه کنه.
• سایر منابع مالتی مدیا: فایل های صوتی، گیف ها و هرچیزی شبیه این ها.
• درخواست های شخص ثالث (Third-Party Requests): اسکریپت های گوگل آنالیتیکس، پیکسل فیس بوک، ابزارک های شبکه های اجتماعی، تبلیغات و غیره که از سرورهای دیگه بارگذاری میشن.

چطوری درخواست های HTTP سایتت رو پیدا و تحلیل کنی؟

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

به قول معروف، «تا ندانی کجایی، راه به مقصد نبری». پس قبل از اینکه شروع به بهینه سازی کنیم، باید یه تصویر دقیق از وضعیت فعلی سایت مون داشته باشیم. هدف اینه که اون درخواست های HTTP رو پیدا کنیم که یا خیلی حجیم هستن، یا تعدادشون زیاده، یا زمان زیادی برای بارگذاری شون لازمه.

آشنایی با ابزارهای تست سرعت

GTmetrix: قهرمان Waterfall Chart

یکی از بهترین ابزارها برای بررسی درخواست های HTTP، GTmetrix هست. وقتی آدرس سایتت رو بهش میدی، بعد از یه تحلیل کامل، یه بخشی به اسم Waterfall Chart بهت نشون میده که واقعاً معرکه است. توی این چارت، می تونی تمام درخواست های HTTP سایتت رو ببینی، از اولین تا آخرین درخواست. کنار هر درخواست هم اطلاعاتی مثل نوع منبع (تصویر، CSS، JS و…)، حجم فایل، و مهم تر از همه، مدت زمان بارگذاری اون درخواست رو نشون میده.

«Waterfall Chart در GTmetrix مثل یک نقشه راه دقیق عمل می کنه که بهت نشون میده کدام منابع سایتت دارن سرعت رو پایین میارن و کجا باید دست به کار بشی.»

با نگاه کردن به این چارت، می تونی بفهمی مثلاً کدوم افزونه داره بیشترین درخواست رو تولید می کنه یا کدوم تصویر خیلی بزرگه و زمان زیادی می بره تا لود بشه. این اطلاعات واقعاً طلاست!

Google PageSpeed Insights: شناسایی فرصت ها

ابزار دیگه که از طرف خود گوگل ارائه شده، PageSpeed Insights هست. این ابزار بهت نمره سرعت سایتت رو میده و یه سری پیشنهاد برای بهبود عملکرد ارائه می کنه. یکی از هشدارهایی که زیاد می بینیم، Make fewer HTTP requests (تعداد درخواست های HTTP کمتری داشته باش) یا Eliminate render-blocking resources (حذف منابع مسدود کننده رندر) هست. این ابزار به جای نمایش تک تک درخواست ها، بیشتر روی فرصت های بهینه سازی تمرکز می کنه و بهت میگه که کجاها می تونی با کم کردن درخواست ها یا بهینه سازیشون، سرعت رو ببری بالا.

استفاده از ابزارهای توسعه دهنده مرورگر (Developer Tools)

مرورگرهایی مثل کروم، فایرفاکس یا Edge، خودشون ابزارهای توسعه دهنده داخلی دارن که خیلی به دردت می خورن. کافیه توی سایتت کلیک راست کنی و گزینه Inspect یا Inspect Element (یا بازرسی در مرورگرهای فارسی) رو انتخاب کنی. بعدش برو به تب Network. اینجا می تونی تمام درخواست های HTTP که برای بارگذاری صفحه فعلی رد و بدل میشن رو در زمان واقعی ببینی. می تونی اون ها رو بر اساس نوع (تصاویر، CSS، JS و…) فیلتر کنی و حتی مدت زمان بارگذاری هر کدوم رو هم مشاهده کنی.

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

وقتی نتایج رو بررسی می کنی، به چند نکته توجه کن:

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

استراتژی های اصلی برای کاهش درخواست های HTTP

برای اینکه سایتت سبک تر و سریع تر بشه، دو تا استراتژی اصلی و مهم داریم که باید مثل آب خوردن بلد باشی. این دو راهکار مثل دو تا چاقوی تیز عمل می کنن برای بریدن ریشه های کندی سایت!

۱. استراتژی حذف: خداحافظی با درخواست های اضافی

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

۲. استراتژی ترکیب و بهینه سازی: کارآمد کردن ضروری ها

خب، یه سری درخواست ها رو که نمی تونی حذف کنی، چون برای عملکرد سایتت ضروری ان. مثلاً فایل های CSS قالب سایتت یا جاوا اسکریپت های مهم. اینجا میرسیم به استراتژی دوم: ترکیب و بهینه سازی. به جای اینکه مرورگر برای ۱۰ تا فایل CSS جداگانه ۱۰ تا درخواست بفرسته، می تونیم این ۱۰ تا فایل رو به یه فایل بزرگ تر تبدیل کنیم و مرورگر فقط یه درخواست بفرسته. این کار سرعت رو خیلی بالا می بره. همین طور فشرده سازی فایل ها (Minification) و استفاده از تکنیک هایی مثل Lazy Load برای تصاویر هم جزء همین استراتژی قرار می گیرن. یعنی کاری می کنیم که اون چیزهایی که حتماً باید لود بشن، به کارآمدترین شکل ممکن لود بشن.

گام به گام: روش های عملی کاهش درخواست های HTTP در وردپرس

حالا که با کلیات و استراتژی ها آشنا شدیم، وقتشه بریم سراغ کارهای عملی و جزئیاتی که باید توی وردپرست پیاده کنی تا سایتت مثل ساعت کار کنه. این بخش، قلب ماجراست و قراره حسابی دستت پر شه!

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

پاکسازی افزونه های غیرضروری و بلااستفاده

یکی از بزرگ ترین دلایل کندی سایت های وردپرسی، وجود افزونه های زیاد و بلااستفاده ست. هر افزونه ای که نصب می کنی، حتی اگه غیرفعال هم باشه، ممکنه یه سری فایل CSS یا JavaScript رو به سایتت اضافه کنه. این فایل ها به معنی درخواست های HTTP اضافیه. به قول معروف سنگ مفت، گنجشک مفت نیست اینجا! هر افزونه ای یه بار اضافه ست.

یه لیست از تمام افزونه هات تهیه کن و صادقانه از خودت بپرس: «آیا واقعاً به این افزونه نیاز دارم؟» اگر نه، بدون تعلل حذفش کن. نه فقط غیرفعال کردن، بلکه حذف کامل!

جایگزینی افزونه های سنگین با نسخه های سبک تر

بعضی افزونه ها هستن که کارشون رو خوب انجام میدن، اما متاسفانه خیلی سنگین ان و کلی درخواست HTTP ایجاد می کنن. مثلاً خیلی از افزونه های اسلایدر، فرم سازهای قدیمی یا افزونه های اشتراک گذاری اجتماعی، بار زیادی روی سایت میذارن. بهتره همیشه دنبال گزینه های سبک تر و بهینه تر باشی. مثلاً به جای اسلایدرهای حجیم، از اسلایدرهای مبتنی بر CSS استفاده کنی یا برای فرم ساز، فرم سازهای سبک مثل WPForms رو انتخاب کنی.

مدیریت هوشمند اسکریپت ها: بارگذاری شرطی

این یکی یه مرحله پیشرفته ست، ولی خیلی هم کاربردی. تصور کن یه افزونه فرم تماس داری. آیا لازمه اسکریپت های این افزونه تو همه صفحات سایتت لود بشن، حتی تو یه پست بلاگی که اصلاً فرمی نداره؟ معلومه که نه! با بارگذاری شرطی (Conditional Loading)، می تونی مشخص کنی که اسکریپت ها و فایل های CSS هر افزونه فقط توی صفحات خاصی که بهشون نیاز هست، بارگذاری بشن.

افزونه هایی مثل Asset CleanUp یا Perfmatters این قابلیت رو بهت میدن که با یه رابط کاربری ساده، کنترل کامل روی بارگذاری اسکریپت ها داشته باشی. البته باید حسابی حواست جمع باشه که یه وقت چیزی رو اشتباه غیرفعال نکنی و سایتت به هم نریزه!

انتخاب قالب سبک و بهینه: سنگ بنای سرعت

قالب سایتت مثل اسکلت ساختمونه. اگه اسکلتت از اول خوب و محکم نباشه، هرچقدر هم تزئینش کنی، باز به مشکل می خوری. خیلی از قالب های پرفروش و پرامکانات، پر از کد و اسکریپت های اضافی ان که کلی درخواست HTTP ایجاد می کنن. سعی کن از قالب های سبک و بهینه مثل GeneratePress، Astra یا Kadence استفاده کنی. این قالب ها از پایه برای سرعت و عملکرد طراحی شدن و امکانات اضافی رو به صورت ماژولار ارائه میدن که هر وقت خواستی می تونی فعالشون کنی.

تصاویر: از حجم زیاد تا سرعت بالا

حذف و فشرده سازی: هر پیکسل مهم است!

تصاویر، بزرگ ترین بخش از محتوای یک سایت رو تشکیل میدن و می تونن کلی درخواست HTTP و حجم اضافه به سایتت تحمیل کنن. قبل از هر کاری، تصاویر غیرضروری و تکراری رو از کتابخانه رسانه ایت پاک کن. بعدش، حواست باشه که هر تصویری رو با اندازه مناسب آپلود کنی. یه تصویر ۲۰۰ کیلوبایتی با ابعاد ۲۰۰ در ۲۰۰ پیکسل، اگه قراره فقط به عنوان آیکون تو یه فضای ۵۰ در ۵۰ پیکسل نمایش داده بشه، واقعاً اضافیه. باید اون رو به ابعاد مناسب تغییر بدی و بعد فشرده سازی (Compress) کنی. افزونه هایی مثل Imagify، Smush یا ShortPixel این کار رو به صورت خودکار برات انجام میدن و حجم تصاویر رو بدون افت کیفیت زیاد کم می کنن.

فرمت های جدید: WebP و AVIF

فرمت های تصویری مثل WebP و AVIF، نسل جدیدی از فرمت ها هستن که نسبت به JPEG و PNG حجم کمتری دارن و کیفیتشون هم خوبه. اگه می تونی، تصاویرت رو به این فرمت ها تبدیل کن. خیلی از افزونه های بهینه سازی تصویر مثل Imagify یا WebP Express، قابلیت تبدیل خودکار تصاویر به WebP رو دارن و با این کار کاهش تعداد درخواست های HTTP اتفاق میفته چون حجم کمتری برای انتقال نیاز هست.

بارگذاری تنبل (Lazy Loading): وقتی عجله ای نیست

قابلیت Lazy Load به این معنیه که تصاویر و ویدئوها فقط زمانی بارگذاری میشن که کاربر به قسمت پایین صفحه اسکرول کنه و اون محتوا توی محدوده دیدش قرار بگیره. از وردپرس نسخه ۵.۵ به بعد، این قابلیت به صورت بومی برای تصاویر اضافه شده. یعنی لازم نیست حتماً افزونه ای نصب کنی. اما اگه کنترل بیشتری می خوای یا برای ویدئوها نیاز به Lazy Load داری، می تونی از افزونه هایی مثل WP Rocket یا Perfmatters استفاده کنی.

CSS Sprites: ترکیب هنر و کارایی

CSS Sprites یه تکنیک باحاله که بهت اجازه میده چند تا تصویر کوچک (مثل آیکون ها، دکمه ها یا لوگوهای کوچک) رو توی یه فایل تصویری بزرگ تر با هم ترکیب کنی. بعدش، با استفاده از CSS، فقط قسمتی از اون فایل بزرگ رو که نیاز داری، نمایش میدی. این طوری به جای اینکه برای ۱۰ تا آیکون ۱۰ تا درخواست HTTP داشته باشی، فقط یه درخواست داری. البته این روش بیشتر برای تصاویر تزئینی و آیکون ها خوبه، نه تصاویر مهمی که توی متن مقاله ات استفاده می کنی، چون توی سئو و دسترسی پذیری ممکنه مشکلاتی ایجاد کنه.

اگه با این روش هنوز هم گیج هستی، می تونی به فایل های CSS Sprite سایت های بزرگ مثل آمازون نگاه کنی. می بینی چطور کلی آیکون و بخش های کوچک گرافیکی رو توی یه عکس بزرگ جا دادن و بعد با CSS فقط قسمتی رو که نیاز دارن نشون میدن.

فایل های CSS و JavaScript: نظم و ترتیب در کدها

ترکیب (Concatenation) فایل ها

قالب و افزونه های وردپرس معمولاً چندین فایل CSS و JavaScript جداگانه دارن. هر کدوم از این فایل ها یه درخواست HTTP جداگونه ایجاد می کنن. با ترکیب کردن این فایل ها، می تونیم به جای مثلاً ۵ فایل CSS، فقط یه فایل CSS داشته باشیم و به جای ۱۰ درخواست، فقط یه درخواست برای اون فایل ترکیبی بفرستیم. این کار کاهش تعداد درخواست های HTTP رو به طور چشمگیری رقم می زنه.

خیلی از افزونه های بهینه سازی و کش مثل WP Rocket و Autoptimize این قابلیت رو دارن. کافیه توی تنظیماتشون گزینه Combine CSS files و Combine JavaScript files رو فعال کنی.

فشرده سازی (Minification): کوچک تر، سریع تر

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

حذف CSS و JS بلااستفاده: تمیزکاری کدها

گاهی اوقات یه افزونه یا قالب، کدهای CSS یا JavaScript رو لود می کنه که توی اون صفحه خاص اصلاً استفاده نمیشن. این کدهای اضافی هم به بار سایت اضافه می کنن و هم باعث میشن درخواست های HTTP بی مورد ایجاد شن. ابزارهایی مثل Google PageSpeed Insights بهت نشون میدن که کجاهای سایتت کدهای بلااستفاده داری. افزونه هایی مثل Asset CleanUp بهت کمک می کنن تا این کدها رو شناسایی و از بارگذاریشون توی صفحات غیرضروری جلوگیری کنی. این کار مثل یه خونه تکونی حسابی برای کدهای سایتته!

به تأخیر انداختن (Defer) و بارگذاری غیرهمزمان (Async) جاوا اسکریپت

بعضی از فایل های جاوا اسکریپت مسدودکننده رندر (Render-Blocking) هستن. یعنی مرورگر تا وقتی اونا رو کامل لود نکنه، نمی تونه ادامه صفحه رو به کاربر نشون بده. این قضیه شدیداً روی سرعت بارگذاری اولیه تاثیر میذاره. با استفاده از ویژگی های Defer و Async، می تونیم به مرورگر بگیم که این فایل های جاوا اسکریپت رو توی اولویت پایین تری قرار بده و جلوی نمایش صفحه رو نگیره.

• Defer: فایل رو دانلود می کنه ولی اجراش رو به بعد از رندر شدن HTML موکول می کنه.
• Async: فایل رو دانلود و همزمان با رندر شدن HTML اجرا می کنه.

هر دو گزینه به افزایش سرعت اولیه سایت کمک می کنن و باز هم افزونه های بهینه سازی مثل WP Rocket این امکان رو بهت میدن که با یه کلیک ساده این ویژگی ها رو برای فایل های جاوا اسکریپت فعال کنی.

مدیریت فونت ها: بهینه سازی تایپوگرافی

کاهش تعداد فونت ها و وزن ها

فونت های سفارشی خیلی سایت رو زیبا می کنن، اما هر فونت جدید و هر وزن اضافه اش (مثلاً Bold، Italic و…) به معنای یه درخواست HTTP جداگونه ست. سعی کن تعداد فونت های استفاده شده رو به حداقل برسونی (مثلاً فقط یک یا دو فونت اصلی) و فقط وزن هایی رو بارگذاری کنی که واقعاً لازم داری. آیا واقعاً به ۵ تا وزن مختلف برای یه فونت احتیاج داری؟

استفاده از فونت های سیستمی

اگه خیلی وسواس به سرعت داری و از نظر طراحی هم انعطاف پذیری کمتری می خوای، می تونی از فونت های سیستمی (System Fonts) استفاده کنی. این فونت ها روی اکثر کامپیوترها و گوشی ها به صورت پیش فرض وجود دارن و مرورگر دیگه نیازی به بارگذاریشون نداره. این یعنی هیچ درخواست HTTP اضافه ای برای فونت ها نخواهیم داشت.

بهینه سازی فونت های گوگل: محلی سازی و display: swap

فونت های گوگل هم عالی ان، ولی به صورت پیش فرض از سرورهای گوگل بارگذاری میشن و یه درخواست HTTP خارجی اضافه می کنن. می تونی با میزبانی محلی (Local Hosting) این فونت ها، از سرور خودت بارگذاریشون کنی و سرعت رو بالا ببری. همچنین استفاده از ویژگی display: swap توی CSS باعث میشه متن با یه فونت پیش فرض لود شه و بعد که فونت اصلی بارگذاری شد، با اون جایگزین بشه. این کار جلوی Flickering یا تغییر ناگهانی فونت رو می گیره و تجربه کاربر رو بهتر می کنه.

آیکون ها: فونت یا SVG؟

آیکون ها هم می تونن منبع درخواست های HTTP باشن. استفاده از فونت های آیکون مثل Font Awesome یا IcoMoon، یه درخواست HTTP برای کل کتابخانه آیکون ایجاد می کنه. اگه فقط به چند تا آیکون محدود نیاز داری، می تونی از آیکون های SVG استفاده کنی. SVGها فایل های وکتوری و سبک تری هستن که مستقیم توی HTML قابل جاسازی ان و ممکنه بتونن تعداد درخواست ها رو کمتر کنن.

غیرفعال کردن قابلیت های اضافی وردپرس

وردپرس به صورت پیش فرض یه سری قابلیت داره که ممکنه به درد همه نخوره، اما در عوض، درخواست های HTTP اضافه تولید می کنه. غیرفعال کردن اینا یه راه عالیه برای کاهش تعداد درخواست های HTTP.

غیرفعال کردن Emojis

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

غیرفعال کردن Embeds

قابلیت Embeds در وردپرس بهت اجازه میده ویدئوها یا محتوای دیگه رو از سایت های دیگه مثل یوتیوب به راحتی توی سایتت جاسازی کنی. اما این قابلیت هم یه سری اسکریپت اضافی رو بارگذاری می کنه. اگه از این ویژگی استفاده نمی کنی، غیرفعالش کن.

غیرفعال کردن XML-RPC

XML-RPC یه رابط برنامه نویسی بود که در گذشته برای ارتباط وردپرس با اپلیکیشن های خارجی استفاده می شد (مثلاً برای انتشار پست از راه دور). امروزه بیشتر با REST API جایگزین شده و فعال بودنش هم می تونه یه نقطه ضعف امنیتی باشه و هم یه درخواست HTTP اضافه تولید کنه. اگه بهش نیازی نداری، غیرفعالش کن.

کاهش درخواست های شخص ثالث: کنترل بیرون از خانه

همون طور که گفتیم، همه درخواست های HTTP از سرور خودت میان. خیلی وقت ها، سایتت از سرورهای دیگه هم درخواست هایی می کنه که بهشون میگیم درخواست های شخص ثالث. این درخواست ها می تونن خیلی دردسرساز باشن، چون کنترل کمی روشون داری و سرعتشون به سرعت سرورهای دیگه بستگی داره.

شناسایی درخواست های شخص ثالث

اولین قدم، شناسایی این درخواست هاست. با ابزارهایی مثل GTmetrix (توی بخش Waterfall) می تونی ببینی کدوم درخواست ها از دامنه های دیگه میان. معمولاً اسکریپت های گوگل آنالیتیکس، پیکسل فیس بوک، ویدئوهای جاسازی شده از یوتیوب/ویمئو، ابزارک های شبکه های اجتماعی و اسکریپت های تبلیغاتی جزء این دسته هستن.

میزبانی محلی اسکریپت ها

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

Lazy Load برای ویدئوهای جاسازی شده

ویدئوهای جاسازی شده از یوتیوب یا ویمئو می تونن حجم زیادی از درخواست های HTTP رو اضافه کنن. به جای اینکه پلیر کامل ویدئو رو از اول لود کنی، می تونی از Lazy Load استفاده کنی. این طوری، فقط یه تصویر بندانگشتی (Thumbnail) از ویدئو بارگذاری میشه و پلیر کامل فقط وقتی لود میشه که کاربر روی اون کلیک کنه تا ویدئو رو ببینه. این کار کاهش تعداد درخواست های HTTP اولیه صفحه رو به شدت کم می کنه.

ابزارک های شبکه های اجتماعی: سبک و کارآمد

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

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

همون طور که دیدیم، کاهش تعداد درخواست های HTTP یه کار جامع و چند وجهیه. خوشبختانه توی دنیای وردپرس، افزونه های قدرتمندی هستن که می تونن خیلی از این کارها رو به صورت خودکار یا با چند کلیک ساده برات انجام بدن. این افزونه ها مثل یه تیم حرفه ای هستن که کمک می کنن سایتت رو از شر بار اضافی نجات بدی.

• WP Rocket: این افزونه یه پکیج کامل بهینه سازی سرعته و برای کاهش درخواست های HTTP قابلیت های فوق العاده ای داره. از کش پیشرفته گرفته تا ترکیب (Combine) و فشرده سازی (Minify) فایل های CSS و JS، Lazy Load برای تصاویر و ویدئوها، به تأخیر انداختن جاوا اسکریپت، و حتی میزبانی محلی اسکریپت های گوگل آنالیتیکس و پیکسل فیس بوک رو هم پوشش میده. واقعاً یه دونه از بهترین انتخاب هاست.
• Perfmatters: این افزونه هم خیلی عالیه و به صورت تخصصی روی غیرفعال کردن و مدیریت اسکریپت های اضافی تمرکز داره. قابلیت Script Manager بهت اجازه میده اسکریپت های هر افزونه رو توی صفحات خاصی غیرفعال کنی. غیرفعال کردن Emojis، Embeds، XML-RPC و قابلیت Lazy Load هم از جمله امکاناتشه. اگه می خوای روی جزئیات بارگذاری اسکریپت ها کنترل کامل داشته باشی، Perfmatters یه انتخاب فوق العاده ست.
• Asset CleanUp: این افزونه دقیقاً برای مدیریت و بارگذاری شرطی فایل های CSS و JavaScript طراحی شده. باهاش می تونی به راحتی شناسایی کنی که کدوم فایل ها توی کدوم صفحات لازم نیستن و اون ها رو غیرفعال کنی. این طوری جلوی بارگذاری کدهای بلااستفاده رو می گیری و تعداد درخواست ها رو پایین میاری.
• Autoptimize: یه افزونه رایگان و قدرتمند برای ترکیب (Concatenate) و فشرده سازی (Minify) فایل های CSS و JavaScript. اگه نمی خوای هزینه کنی ولی دنبال بهبود اساسی هستی، Autoptimize یه گزینه عالیه که کارتو راه میندازه.
• Imagify/Smush/WebP Express: این ها مجموعه ای از افزونه های بهینه سازی تصاویر هستن که بهت کمک می کنن تصاویر رو فشرده کنی، اندازه مناسب بهشون بدی و به فرمت های جدید مثل WebP تبدیل کنی. هر کدوم از این ها، نقش مهمی توی کاهش حجم درخواست های HTTP مربوط به تصاویر دارن و در نهایت به کاهش تعداد درخواست های HTTP کمک می کنن.

جمع بندی: سایت سریع، کاربر راضی، گوگل شاد!

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

یادت نره که سرعت سایت، مثل بنزین برای ماشین میمونه؛ هرچی با کیفیت تر و بهینه تر باشه، ماشینت بهتر حرکت می کنه. با بهینه سازی افزونه ها و قالبت، هوشمندانه کار کردن با تصاویر، منظم کردن فایل های CSS و JavaScript، مدیریت فونت ها و حذف قابلیت های اضافی وردپرس و درخواست های شخص ثالث، داری یه سرویس درجه یک به کاربرهات میدی و به گوگل هم نشون میدی که چقدر برات مهم هستن.

تست و نظارت مداوم رو هم فراموش نکن. بعد از اعمال هر تغییر، حتماً با ابزارهایی مثل GTmetrix و PageSpeed Insights سایتت رو دوباره تست کن تا مطمئن بشی که تغییراتت اثر مثبت داشته و چیزی خراب نشده. ممکنه نیاز به آزمون و خطا باشه، اما ارزشش رو داره.

اگه با هر کدوم از این مراحل تجربه خاصی داری یا سؤالی برات پیش اومده، حتماً توی بخش دیدگاه ها با ما در میون بذار. نظراتت برای ما خیلی ارزشمنده و می تونیم از تجربیات همدیگه یاد بگیریم!