چگونه می توان کمتر درخواست HTTP در وردپرس ایجاد کرد (سرعت سایت را به راحتی افزایش دهید)

هرچه درخواست های HTTP سایت شما بیشتر باشد ، سرعت بارگیری آن کندتر است. بنابراین اگر می توانید تعداد درخواست های HTTP را کاهش دهید و نحوه بارگیری آنها را بهینه کنید ، می توانید عملکرد وب سایت خود را بهبود بخشید .

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

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

سپس ، ما نکات و استراتژی هایی را به اشتراک می گذاریم که می توانید برای کاهش درخواست سایت خود پیاده سازی کنید. این استراتژیها علاوه بر اینکه به شما در ارسال پیام “ساخت کمتر درخواست HTTP” در GTmetrix کمک می کنند ، به پیام “جلوگیری از زنجیره کردن درخواستهای مهم” در Google PageSpeed ​​Insights نیز کمک می کنند.
سایت آهسته است؟ requests بیش از حد درخواست های HTTP می تواند مقصر باشد. این راهنما را برای درخواست کمتر در اینجا ببینید ? برای توییت کلیک کنید

درخواست های HTTP چیست؟ h2>

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

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

به عنوان مثال ، ممکن است گفته شود ، “سلام سرور ، من به آن پرونده coolimage.png احتیاج دارم” و “سلام سرور ، من همچنین به صفحه سبک CSS برای آن نیاز دارم پلاگین فرم تماس “. سپس سرور با پرونده های مورد نظر به آن درخواست ها پاسخ می دهد.

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

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

یک نکته مهم برای درک این است که هر عنصر جداگانه یک درخواست HTTP جداگانه است. به عنوان مثال ، اگر پنج فایل تصویری در یک صفحه وب دارید ، مرورگر باید پنج درخواست HTTP جداگانه ایجاد کند ، برای هر تصویر یکی.

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

چرا کاهش درخواستهای HTTP مهم است؟ h2>

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

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

بنابراین اگر وب سایتی قبل از نمایش این صفحه باید 70 درخواست HTTP ایجاد کند ، طولانی تر از آن است که 40 درخواست HTTP انجام دهد.

بعلاوه ، برخی از درخواستهای HTTP سایر درخواستهای HTTP را “مسدود” می كنند ، این بدان معناست كه مرورگر نمی تواند شروع به بارگیری برخی از درخواستهای HTTP كند تا زمانی كه قبل از پایان بارگیری درخواستهای HTTP ، آنرا بارگیری كند.

خط آخر: وقتی درخواست HTTP کمتری می کنید ، وب سایت خود را سریعتر بارگذاری می کنید .

نحوه مشاهده و تجزیه و تحلیل درخواستهای HTTP سایت شما h2>

در بالا ، شما آموخته اید که همه چیز برابر است ، کاهش تعداد درخواستهای HTTP سرعت سایت شما را افزایش می دهد a > با این حال ، همه درخواست های HTTP همیشه “برابر” نیستند. برخی از درخواستهای HTTP بیشتر از سایر درخواستها هستند. بعضی از آنها کندتر از دیگران هستند.

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

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

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

اکثر ابزارهای تست سرعت این مورد را ارائه می دهند ، اما رابط ها در GTMetrix و Pingdom بسیار راحت هستند. همچنین می توانید از ابزارهای توسعه دهنده مرورگر خود استفاده کنید. با این حال ، ما از GTmetrix برای عکسهای صفحه خود استفاده خواهیم کرد.

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

برای تجزیه و تحلیل درخواستهای فردی خود ، به برگه آبشار در زیر بروید.

در اینجا لیستی از تک تک درخواستهای HTTP را به همراه اطلاعاتی درباره مدت زمان بارگیری درخواست HTTP در سایت خود مشاهده خواهید کرد:

می توانید ببینید که چگونه همه درخواست های HTTP برابر نیستند. به عنوان مثال ، تصویر 839.3 کیلوبایت 1.12 ثانیه زمان می برد در حالی که تصویر 57.6 کیلوبایت فقط 87.5 میلی ثانیه زمان می برد:

همچنین می توانید با جستجوی نام پوشه آن پلاگین در سرور خود ، درخواست های HTTP را از پلاگین های مختلف WordPress که استفاده می کنید پیدا کنید. به عنوان مثال ، می توانید ببینید که WooCommerce هفت درخواست HTTP خود را اضافه می کند:

با این روش می توانید ببینید که آیا افزونه هایی که استفاده می کنید تعداد زیادی درخواست HTTP (به ویژه درخواست های بارگیری آهسته) را به آن اضافه می کنند.

نحوه بهینه سازی و ایجاد درخواستهای کمتر HTTP در وردپرس h2>

در سطح بالا ، دو استراتژی گسترده برای ایجاد درخواستهای کمتر HTTP وجود دارد:

  • درخواست های HTTP را حذف کنید. در صورت امکان ، باید هر درخواست غیرضروری HTTP را کاملاً حذف کنید. به عنوان مثال ، اگر افزونه ای دارید که هیچ ارزشی به سایت شما اضافه نمی کند و CSS و JavaScript خود را بارگیری می کند ، کافی است آن پلاگین را کاملاً حذف کنید تا از همه درخواست های HTTP آن خلاص شوید.
  • درخواستهای HTTP را ترکیب کنید. اگر درخواست های HTTP دارید که کاملاً باید بارگیری کنید ، می توانید آنها را در یک پرونده واحد ترکیب کنید. به عنوان مثال ، به جای شش فایل کوچک CSS ، می توانید آنها را در یک پرونده CSS بزرگتر ترکیب کنید ، که همچنان سریعتر بارگیری می شود زیرا مرورگر نیاز به درخواست کمتری دارد (این همیشه با HTTP/2 ، که در زیر به آن خواهیم پرداخت).

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

1 افزونه های غیرضروری وردپرس را حذف کنید h3>

برای شروع ، می خواهید از تجزیه و تحلیل آبشار استفاده کنید تا تمام درخواست های پلاگین های خود را بگیرید. شما می توانید این کار را با جستجوی “افزونه ها” انجام دهید ، این درخواست باعث می شود هر درخواست HTTP از پوشه wp-content / plugins گرفته شود.

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

برخی از حفاری های بیشتر باعث می شود که انقلاب لغزنده سه مورد از درخواست های HTTP خود را اضافه کند ، حتی اگر این صفحه آزمون فاقد اسلایدر باشد:

make fewer http requests

چگونه برای دیدن اینکه درخواست HTTP از کجا ناشی می شود

اگر از Slider Revolution برای یک نوار لغزنده اصلی استفاده می کنید ، شاید لازم باشد آن را نگه دارید. اما اگر برای آزمایش آن را نصب کرده اید ، بعداً لغزنده را برداشته و دیگر واقعاً از آن استفاده نمی کنید سپس شما باید آن را حذف کند تا از شر آن درخواست های HTTP خلاص شود.

اساساً ، شما می خواهید تمام لیست را مرور کنید و از خود بپرسید که آیا واقعاً هر افزونه به سایت شما ارزش افزوده می دهد. اگر افزونه ای نیست (اما درخواست های HTTP را به آن اضافه می کند) ، بهتر است آن را حذف کنید.

2. پلاگین های سنگین را با موارد سبک تر جایگزین کنید h3>

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

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

به عنوان مثال ، افزونه محبوب AddThis شش درخواست HTTP اختصاصی خود را اضافه می کند (از جمله برخی درخواست های خارجی – بیشتر از موارد موجود در ثانیه):

با استفاده از گزینه بهینه تری مانند NovaShare یا رشد توسط MediaVine .

3 اسکریپتهایی را که در سرتاسر کشور مورد نیاز نیست بارگذاری مشروط کنید h3>

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

برای مثال ، از افزونه فرم 7 تماس بگیرید . شما احتمالاً فقط در چند صفحه به این افزونه نیاز دارید (به عنوان مثال صفحه “تماس با ما”). با این حال ، فرم تماس 7 اسکریپت های خود را در هر صفحه از سایت شما بارگیری می کند. بنابراین ، به عنوان مثال ، فرم تماس 7 هنوز برخی از درخواست های HTTP را به پست های وبلاگ شما اضافه می کند ، حتی اگر پست های وبلاگ شما هیچ فرم تماس ندارند.

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

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

اگر برنامه نویس نیستید ، می توانید از افزونه هایی مانند Asset CleanUp یا Perfmatters برای انجام این کار بدون کد. با Perfmatters ، ابتدا باید مدیر اسکریپت را فعال کنید. سپس ، می توانید مدیر اسکریپت را باز کنید تا همه اسکریپت های در حال بارگیری در یک صفحه را مشاهده کرده و هرگونه مورد نیاز را غیرفعال کنید:

The script managed in the Perfmatters plugin - make fewer http requests

مدیر اسکریپت در افزونه Perfmatters

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

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

4 تصاویر غیرضروری را حذف کنید (و بقیه موارد را بهینه کنید) h3>

به خوبی استفاده می شود ، تصاویر وب سایت شما را کاربرپسند و جذاب تر می کنند. آنها به سایت شما ارزش می بخشند.

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

به عنوان مثال ، آیا این GIF خنده دار ارزش دارد؟ ممکن است… باشد اما ممکن است نباشد – هر زمان که تصاویر بیشتری به آن اضافه می کنید ، باید به فکر تجارت باشید. محتوای شما .

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

5. از بارگذاری تنبل برای تصاویر و فیلم ها استفاده کنید h3>

با بارگذاری تنبل ، سایت شما منتظر بارگیری تصاویر زیر بار ، فیلم ها و iframes تا زمانی که کاربر شروع به پیمایش به پایین کند.

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

از وردپرس 5.5 ، وردپرس اکنون شامل بارگیری تنبل بومی برای تصاویر با استفاده از ویژگی HTML loading . برای برخی از روشهای دیگر برای اجرای بارگذاری تنبل (از جمله برای فایل های ویدئویی) ، می توانید از راهنمای کامل ما در بارگذاری تنبل وردپرس دیدن کنید .

6. محدود کردن استفاده از قلم های سفارشی و یا استفاده از قلم های سیستم (همان قلم های آیکون) h3>

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

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

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

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

(مطلب پیشنهادی: نحوه تغییر قلم ها در وردپرس ).

7. شکلک های وردپرس را غیرفعال کنید h3>

به طور پیش فرض ، وردپرس درخواست HTTP خود را برای شکلک ها اضافه می کند. در حالی که این فقط یک درخواست HTTP 5.1 کیلوبایتی است ، اما این پرونده مدتهاست که مورد توجه طرفداران عملکرد وردپرس قرار گرفته است. در اینجا در Kinsta ، ما عملکرد وردپرس را دوست داریم ، به همین دلیل یک راهنمای کامل در مورد غیرفعال کردن شکلک های وردپرس داریم. .

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

بعد از انجام این کار ، تعداد درخواست HTTP شما یکی کاهش می یابد و همچنان می توانید از شکلک استفاده کنید ?

8. درخواستهای HTTP شخص ثالث را کاهش / حذف کنید h3>

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

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

چند نمونه:

  • Google Analytics – اسکریپت ردیابی در سرورهای Google میزبانی می شود ، اما مرورگرهای بازدید کننده هنوز باید آن فایل را بارگیری کنید.
  • ویدیوهای YouTube جاسازی شده – درخواستهای HTTP زیادی را به سرورهای YouTube خواهید دید. لی>
  • خدمات تبلیغات شخص ثالث – تعداد زیادی درخواست شخص ثالث مربوط به ارائه تبلیغات خود را مشاهده خواهید کرد.
  • قلم های Google (در CDN Google) – درخواست های شخص ثالث از سرورهای Google را به پرونده های قلم خود را بارگیری کنید.

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

به عنوان مثال ، اگر یک افزونه درخواست شخص ثالث خود را اضافه کند (مانند پلاگین AddThis از بالا درخواست می کند) ، می توانید آن را حذف کرده و از موارد بهینه تری استفاده کنید.

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

برای اسکریپت های شخص ثالث ، مانند Google Analytics یا Facebook Pixel ، لازم است ، می توانید با میزبانی آن اسکریپت ها به صورت محلی تجربه کنید.

WP Rocket افزونه های داخلی برای میزبانی Google Analytics و Facebook Pixel به صورت محلی یا می توانید از افزونه ای مانند CAOS استفاده کنید (کامل مجموعه بهینه سازی تجزیه و تحلیل) .

همچنین راهنماهایی داریم که ممکن است به شما کمک کنند:

9. تصاویر را با CSS Sprites ترکیب کنید h3>

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

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

Sprites CSS برای تصاویر تزئینی مانند تغییرات آرم یا آیکون ها بهترین عملکرد را دارد. شما نباید از CSS sprites برای تصاویر اطلاعاتی (مانند تصاویر موجود در متن پست وبلاگ) استفاده کنید زیرا دو اشکال بزرگ وجود دارد:

  • سئو – چون تصاویر را در یک فایل تصویری ترکیب می کنید ، نمی توانید تصاویر منفرد را در جستجوی Google رتبه بندی کنید.
  • دسترسی – زیرا شما نمی توانید alt-text to images ، افرادی که صفحه خوان دارند قادر نخواهند بود تصاویر بارگذاری شده با Spritit های CSS را درک کنند (اگرچه برخی از تاکتیک ها برای رفع این مشکل وجود دارد).

اگر هنوز در مورد این موضوع سردرگم هستید ، در اینجا مثالی از پرونده Sprite آمازون CSS را مشاهده می کنید – می توانید ببینید که چگونه آن شامل یک دسته از تغییرات لوگو و همچنین برخی از نمادها است. آمازون برای اطمینان از اینکه فقط “قسمت” مربوط به آن فایل تصویری در هر مکان نمایش داده می شود ، از CSS استفاده می کند:

An example of CSS sprites from Amazon. You use CSS to

نمونه ای از SpSS های CSS از آمازون. شما از CSS استفاده می کنید تا فقط بخشی خاص از تصویر ترکیبی را هدف قرار دهید.

متأسفانه ، هیچ افزونه WordPress “تنظیم کنید و آن را فراموش کنید” برای spSS های CSS وجود ندارد. با این حال ، می توانید ابزاری برای کمک پیدا کنید ، مانند این CSS Sprite Tool :

  1. تصاویری را که می خواهید ترکیب کنید در ابزار بارگذاری کنید.
  2. سپس این ابزار به شما یک فایل تصویری ترکیبی همراه با کد CSS برای هر تصویری که آپلود کرده اید ، می دهد.
  3. فایل تصویری ترکیبی را در سایت وردپرس خود بارگذاری کنید.
  4. برای نمایش تصویر در محتوای خود از کد CSS استفاده کنید. CSS ارائه شده به طور خودکار فقط قسمت مناسب فایل تصویری ترکیبی را انتخاب می کند.

10 پرونده های CSS و JavaScript را ترکیب کنید h3>

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

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

بسیاری از افزونه های ذخیره سازی وردپرس دارای ویژگی هایی برای ترکیب فایل های CSS و JavaScript هستند. به عنوان مثال ، WP Rocket که می توانید در Kinsta استفاده کنید ، به شما امکان می دهد هر دو را با چند کلیک فعال کنید.

در تنظیمات WP Rocket به برگه بهینه سازی پرونده بروید. سپس ، کوچک سازی را فعال کرده و سپس پرونده ها را با هم ترکیب کنید:

How to combine CSS and JavaScript in WP Rocket - make fewer http requests

نحوه ترکیب CSS و JavaScript در WP Rocket

برای جزئیات بیشتر ، راهنمای کامل WP Rocket ما را بررسی کنید .

همچنین می توانید از Autoptimize برای ترکیب فایل های CSS و JavaScript استفاده کنید. برای ترکیب پرونده ها ، به تنظیمات im بهینه سازی خودکار بروید و گزینه های زیر را انتخاب کنید:

  • پرونده های JS را جمع کنید
  • پرونده های CSS را جمع کنید

برای جزئیات بیشتر ، آموزش کامل بهینه سازی خودکار ما را بررسی کنید .

به ما در کامنت ها اطلاع دهید!

منبع:
https://kinsta.com/blog/make-fewer-http-requests/.

دیدگاهتان را بنویسید


Fatal error: Uncaught wfWAFStorageFileException: Unable to save temporary file for atomic writing. in /home/wekjriusd1/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php:35 Stack trace: #0 /home/wekjriusd1/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php(659): wfWAFStorageFile::atomicFilePutContents('/home/wekjriusd...', '<?php exit('Acc...') #1 [internal function]: wfWAFStorageFile->saveConfig('livewaf') #2 {main} thrown in /home/wekjriusd1/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php on line 35