چگونه درخواست های HTTP/S را در وردپرس کاهش دهیم

این داستانی است که اگر بخواهید سرعت داشته باشید، عاشق آن خواهید شد سایت وردپرس خود را ارتقا دهید.

روز پیش یک وب سایت درخشان ساختم. من تمام تلاشم را کردم و WooCommerce، Google Tag Manager، OneSignal، helpdesk، Yoast، رادیو زنده (اوه بله، من انجام دادم)، Cookie Notice، رسانه های اجتماعی، و تعداد زیادی افزونه دیگر را اضافه کردم.

من هم مانند شما، مشتاق بودم که بازدیدکنندگانم را تحت تأثیر قرار دهم، یا اینطور فکر می کردم. اما بعد همه چیز به طرز غیرقابل تحملی کند شد. پس از دردسرهای زیاد، GTMetrix را برای رفع مشکل فعال کردم.

در کمال تاسف، این را دیدم:

آیا تحت تأثیر قرار گرفتم؟ جهنم به NAW! من می‌خواستم یک نمره A عالی کسب کنم و زمان بارگذاری صفحه را به کمتر از دو ثانیه کاهش دهم.

بنابراین، دکمه تست مجدد را زدم، اما حدس بزنید چه چیزی؟ هنوز هم همان نتیجه بیمار. من وحشت زده بودم، حتی عصبانی. اما من به راحتی تسلیم نمی شوم زیرا چنین چیزی غیرقابل قبول است.

میدونی بعدش چیکار کردم؟ من وب سایت را در Pingdom آزمایش کردم زیرا GTMetrix می تواند آن را بمکد. اما، یک بار دیگر نتایج ناگوار در زیر آمده است:

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

برای بدتر کردن اوضاع، من از موضوع وردپرس تجارت الکترونیک استفاده می کردم که میلیارد< عناصر /em> برای ساخت صفحه اصلی. در دفاع از من، باور نکردنی به نظر می رسید. برخی از کاربران موافق بودند که طراحی نیز به درستی انجام شده است، بنابراین بله، من به تنهایی به این ترفند علاقه نداشتم 🙂

اما طراحی بصری عالی و سرعت های آهسته دست به دست هم نمی دهند. من به یک راه حل و سریع نیاز داشتم.

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

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

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

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

و در پست امروز، دقیقاً چگونه یاد می گیرید!

گزارش‌های GTMetrix و Pingdom معمولاً به شما نشان می‌دهند که مشکل کجاست. به این ترتیب، سایت خود را با استفاده از هر دو ابزار آزمایش کنید تا مناطقی را که باید بهبود ببخشید، بیابید. با آماده بودن گزارش‌های شما، در اینجا نحوه کاهش درخواست‌های HTTP/S و افزایش سرعت سایت وردپرس آمده است.

مرحله 1: Declutter

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

منظور من از شر همه افزونه هایی است که به آن نیاز ندارید خلاص شوید. افزونه های وردپرس دارای فایل های زیادی هستند، خواه PHP، CSS یا جاوا اسکریپت (JS). هر فایلی که هر افزونه اجرا می کند، یک درخواست HTTP ایجاد می کند.

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

چه باید کرد؟

ممیزی پلاگین های خود را انجام دهید. برای اجرای وب سایت خود باید چه افزونه هایی داشته باشید؟ آیا افزونه هایی وجود دارند که به آنها نیاز ندارید؟ آیا پلاگین هایی دارید که به سرورهای شخص ثالث دسترسی دارند؟ آیا می توانید بدون این افزونه ها کار کنید؟

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

در مورد مضامین وردپرس و محتوایی که استفاده نمی کنید نیز همینطور است. همه چیز را پاک کن هر چیزی را که نیاز ندارید حذف کنید؛ برای سرعت و امنیت وب سایت شما خوب است.

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

این عالی خواهد بود، موافق نیستید؟ و برای اینکه فکر کنید فقط به افزونه Asset CleanUp WordPress نیاز دارید.

استفاده از این افزونه آسان و بسیار کارآمد است. یا همانطور که توسعه دهنده می گوید:

“Asset CleanUp” صفحه شما را اسکن می کند و تمام دارایی های بارگیری شده را شناسایی می کند. تنها کاری که باید هنگام ویرایش یک صفحه/پست انجام دهید این است که CSS/JS هایی را انتخاب کنید که برای بارگیری ضروری نیستند، به این ترتیب نفخ آن کاهش می یابد.

نصب خود را از قبل hombre پاک کنید. از شر هرزنامه ها خلاص شوید – هرزنامه نظر گنجانده شده است. اوه بله، پیوندهای شکسته را حذف کنید و پایگاه داده خود را بهینه کنید در حالی که در آن هستید. اینها زمینه های قابل توجهی هستند که باید تا آنجا که سرعت سایت شما افزایش می یابد در نظر بگیرید، اما من از آن دور می شوم.

بیایید به کاهش درخواست‌های HTTP برگردیم.

مرحله 2: بهینه سازی تصاویر

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

با این وجود، نمی‌توانیم این واقعیت را نادیده بگیریم که اکثر مضامین وردپرس (سایت‌های خواندنی) به تصاویر و بسیاری از تصاویر متکی هستند. بنابراین، با توجه به این موضوع، چگونه می توانید درخواست های HTTP را با بهینه سازی تصاویر خود کاهش دهید؟

برای شروع، از شر تمام تصاویری که استفاده نمی کنید خلاص شوید. بی رحم باش؛ از شر تمام آن نفخ خلاص شوید – به آن نیاز ندارید. پس از آن، تصاویر را فشرده و بهینه کنید تا داده های فایل غیر ضروری را حذف کنید.

در حالی که تعدادی افزونه برای انتخاب وجود دارد، ما واقعا WP Compress را دوست داریم. در حالی که این یک سرویس ممتاز است، بهینه سازی خودکار قدرتمند تصاویر، فشرده سازی بدون تلفات، پردازش ابری برای کاهش بار سرور شما، پشتیبانی از تصویر WebP، تغییر اندازه خودکار و موارد دیگر ارزش سرمایه گذاری را دارد (بررسی برای کسب اطلاعات بیشتر). بعلاوه می‌توانید با ۱۰۰ تصویر به صورت رایگان اعلام کنید – بنابراین حداقل می‌توانید آن را امتحان کنید.

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

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

سپس با استفاده از ترفندهای CSS، می توانید انتخاب کنید کدام قسمت از تصویر نمایش داده شود. اما این چگونه درخواست های HTTP را کاهش می دهد؟ در اینجا یک قیاس وجود دارد.

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

می بینی با این به کجا می روم؟ هرچه سفرها کمتر باشد، درخواست های HTTP کمتر است. بهترین بخش این است که شما برای ایجاد و پیاده سازی sprites تصویر CSS نیازی به عرق کردن ندارید. می‌توانید از ابزاری مانند CSS Sprite Generator استفاده کنید. پیاده‌سازی تصاویر CSS آسان است، مشروط بر اینکه راه خود را در مورد CSS بدانید.

نکته حرفه‌ای: اگر وب‌سایت شما از HTTP/2 استفاده می‌کند که از بارگیری ناهمزمان تصاویر و اسکریپت‌ها پشتیبانی می‌کند، می‌توانید همه چیز را در مورد تصاویر CSS فراموش کنید. GTMetrix هنگام امتیازدهی عملکرد، HTTP/2 را در نظر نمی‌گیرد، بنابراین اگر به نظر می‌رسد که تصاویر شما تعداد زیادی درخواست HTTP ایجاد می‌کنند، نگران نباشید.

اما من می‌گویم: اگر تصاویر sprites CSS می‌توانند درخواست‌های HTTP را به میزان قابل توجهی در سایت شما کاهش دهند، و شما می‌دانید که چگونه آن را پیاده‌سازی کنید، به دنبال آن باشید و آن ثانیه‌های اضافی را از زمان بارگذاری صفحه خود کم کنید. آیا HTTP/2 دارید یا نه.

بالاخره، یک فایل تصویری به یک درخواست HTTP نیاز دارد. ده تصویر جداگانه به 10 درخواست HTTP و غیره نیاز دارند. من می دانم که شما دریفت را دریافت می کنید.

مرحله 3: ترکیب و کوچک سازی HTML، CSS و جاوا اسکریپت

علت اصلی بسیاری از درخواست های HTTP در وب سایت وردپرس من، فایل های CSS خارجی و جاوا اسکریپت بود. بله، من با 43 اسکریپت JS و 22 فایل CSS مخالف بودم. این تعداد عظیم 66 درخواست HTTP است.

از حدود 130 درخواست HTTP، درخواست های CSS خارجی و جاوا اسکریپت حدود 51٪ مشکل را تشکیل می دهند! این فقط مسخره است. متشکرم، GTMetrix، مشت من را بکوب.

اگر آن 44 فایل JS و 22 فایل CSS را ترکیب و کوچک کنم، می‌توانم درخواست‌های HTTP، اندازه وب‌سایت و زمان بارگیری را به میزان قابل توجهی کاهش دهم. اما این تجارت «ترکیب» و «کوچک کردن» چیست؟

بر اساس رالین موری از Words by Birds (من طرفدار زیادی هستم 🙂)، کوچک‌سازی فرآیندی است برای «…حذف هر گونه کاراکتر غیر ضروری، مانند نظرات، قالب‌بندی، فضای خالی و خطوط جدید از فایل‌های HTML، CSS و جاوا اسکریپت که ضروری نیستند. برای اجرای کد.”

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

دوباره، رائلین می گوید:

ترکیب فایل‌ها، در عین حال، دقیقاً به نظر می‌رسد. به عنوان مثال، اگر صفحه وب شما 5 فایل CSS خارجی و 5 فایل جاوا اسکریپت خارجی را بارگیری می کند، ترکیب CSS و جاوا اسکریپت شما در یک فایل مجزا به جای 10، فقط 2 درخواست ایجاد می کند.

متوجه شدید؟ من مطمئنا امیدوارم. ترکیب فایل ها درخواست های HTTP را کاهش می دهد. از طرف دیگر کوچک سازی حجم فایل را کاهش می دهد. این دو را با هم ترکیب کنید و دو پرنده را با همان سنگ بکشید.

آیا افزونه هایی وجود دارد؟ بله، البته!

تعداد زیادی افزونه وردپرس برای ترکیب و کوچک سازی فایل های شما وجود دارد. یک مثال خوب افزونه WP Rocket است. این اساساً یکی از بهترین افزونه های ذخیره سازی حافظه پنهان است که ویژگی هایی را برای ترکیب و کوچک سازی فایل ها با چند کلیک به شما ارائه می دهد.

یکی دیگر از گزینه های محبوب (و رایگان) خودکارسازی< /a> افزونه.

به هر حال، در حین کار، تعداد فایل‌های CSS خارجی و اسکریپت‌های JS را کاهش دهید؟ به عنوان مثال، و ما در اینجا نامی را ذکر نمی کنیم، آیا واقعاً به یک پلت فرم نظر شخص ثالث نیاز دارید؟ آیا به یک افزونه رادیویی زنده نیاز دارید؟

مهم نیست چه می گویم، همه اسکریپت ها و فایل های خارجی را که نیاز ندارید حذف کنید.

مرحله 4: تنظیم فایلهای CSS و جاوا اسکریپت مسدودکننده رندر

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

اگر به دلایلی بارگیری ناهمزمان انجام نمی‌شود (شاید از HTTP/2 استفاده نمی‌کنید، یا اسکریپت‌ها ناهمزمان نیستند)، این فایل‌ها می‌توانند وب‌سایت شما را به میزان قابل توجهی کاهش دهند.

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

چطور؟ همه اسکریپت های مسدود کننده رندر را از بالا به پایین صفحه وب خود منتقل کنید. اما در اینجا مراقب باشید؛ شما نیازی به انتقال همه اسکریپت ها به پایین ندارید. این را می گویم زیرا ممکن است صفحه شما برای ارائه یک تجربه کاملاً جذاب به CSS و JS نیاز داشته باشد.

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

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

به خودی خود درخواست های HTTP را کاهش نمی دهد (زیرا همه اسکریپت ها و فایل ها در نهایت بارگیری می شوند)، اما تعداد درخواست های HTTP مورد نیاز برای ارائه صفحه شما را کاهش می دهد.

برای تصاویر بسیار شبیه بارگیری تنبل است. تصویر فقط زمانی بارگذاری می‌شود که در ویوپورت باشد، نه زمانی که بقیه (و مهمترین بخش‌های) صفحه در حال بارگیری هستند.

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

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

شما درخواست‌های HTTP را حذف می‌کنید و سرعت سایت خود را با حفظ همان عملکرد افزایش می‌دهید. من می‌دانم که کدنویسی ویژگی‌ها در طرح زمینه شما برای بیشتر مبتدیان امری دشوار است، بنابراین با یک کاربر یا برنامه‌نویس پیشرفته WP مشورت کنید.

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

آیا گزینه های رایگان وجود دارد؟ البته! ما در حال کار با وردپرس هستیم، یادتان هست؟ می‌توانید از Async JavaScript در میان سایر افزونه‌ها استفاده کنید.

مرحله 5: از حافظه پنهان و CDN استفاده کنید

آیا می‌دانستید حافظه پنهان و CDN‌ها می‌توانند درخواست‌های HTTP شما را کاهش دهند؟ در ابتدا این یک واقعیت به نظر نمی رسد، اما وقتی آنچه را که در پشت صحنه اتفاق می افتد در نظر می گیرید، می توانید از کش و CDN به نفع خود استفاده کنید.

ذخیره سازی شامل ذخیره فایل های ثابت در مرورگر است تا کاربران در بازدیدهای بعدی فایل ها را دانلود نکنند. فرض کنید یک افزونه کش دارید و کاربر در اولین بازدید خود محتوای ذخیره شده شما را دانلود می کند.

در بازدیدهای بعدی، سایت شما از سرور درخواستی ارسال نمی کند. درعوض، به منابع ذخیره شده از مرورگر سرویس می دهد، درخواست های HTTP را کاهش می دهد و سرعت سایت شما را افزایش می دهد.

CDN (یا Ccontent Delivery Network) شبکه‌ای از سرورها است که در سراسر جهان قرار گرفته‌اند. CDN از حافظه پنهان نیز استفاده می‌کند، اما برای سرعت‌های بیشتر، ارائه‌دهنده CDN محتوای ذخیره‌شده شما را از سروری که نزدیک‌ترین به بازدیدکننده است، ارائه می‌کند.

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

و بهتر از همه، تعدادی گزینه CDN رایگان وجود دارد (یا حداقل آزمایش‌های رایگان، بنابراین می‌توانید به معنای واقعی کلمه تفاوت آن را ببینید). در WPExplorer ما از Cloudflare استفاده می‌کنیم و آن را به شدت توصیه می‌کنیم، اما CDN را انتخاب کنید که فکر می‌کنید برای شما بهترین است.

پاداش: مطمئن شوید که HTTP/2 پشتیبانی می شود

شما ممکن است همه کارها را برای کاهش درخواست های HTTP انجام دهید، اما میزبان وب شما می تواند دلیل مشکلات شما باشد. تعجب نکنید؛ پرسیدن و فکر کردن، چه کسی – در این زمان و عصر – از چیزی جز HTTP/2 استفاده می کند؟

شما احتمالاً حتی نمی دانید HTTP/2

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

در قضاوت عجله نکنید. من ارائه دهندگان میزبانی وب را دیده ام که هنوز از HTTP 1.0 و نسخه های قدیمی تر PHP استفاده می کنند. بله، حتی با وجود مزایای ظاهری HTTP/2 و PHP 7. من حتی بلوف نمی‌زنم. برخی از مشتریان آنها وقتی به من مراجعه می کنند که برخی از افزونه های آنها کار نمی کند و این باعث ناراحتی می شود!

اما، واقعاً، چرا؟ این واقعیت که برخی از ارائه دهندگان میزبانی وب از این واقعیت که PHP 5.6 منسوخ شده و دارای آسیب پذیری های امنیتی است اذیت نمی شوند، چیز دیگری است. و اگر از HTTP/2 پشتیبانی نمی‌کنند، واقعاً برای شما مشکل ساز است.

با میزبان خود تماس بگیرید یا از ابزار KeyCDN استفاده کنید تا بررسی کنید آیا سرور شما پشتیبانی می کند یا خیر HTTP/2. بهترین میزبان وب از HTTP/2 و آخرین نسخه PHP پشتیبانی می کند. اگر هاست شما در هر دو مورد عقب مانده است، از آنها بخواهید که میزبان وب بهتری را ارتقا دهند یا انتخاب کنند.

کلمات پایانی

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

برای کاهش درخواست‌های HTTP، سایت خود را شلوغ کنید، تصاویر را بهینه کنید، اسکریپت‌های مسدودکننده رندر را اصلاح کنید، از کش استفاده کنید و اطمینان حاصل کنید که میزبان شما از HTTP/2 پشتیبانی می‌کند. به غیر از آن، سعی کنید وب‌سایت‌های ساده و تمیزی ایجاد کنید که برای بارگیری به تعداد زیادی دارایی نیاز ندارند.

اگر سوالی دارید، لطفاً در بخش نظرات زیر با ما در میان بگذارید. به سلامتی وب‌سایت‌های سریع‌تر و آینده‌ای عالی در پیش است!