چگونه تعداد فایل‌های css و js قالب را کاهش دهیم ؟
مقالات وردپرسجهت بهبود سرعت سایت و قالب ، چگونه می‌توان تعداد فایل‌های css و js را به شکلی استاندارد کاهش داد ؟ معرفی 3 روش اصلی جهت بهینه سازی وضعیت درخواست های قالب از نظر تعداد فایل‌های css و js !
اگر با بحث طراحی سایت آشنایی داشته باشید حتما اطلاع دارید که جهت طراحی قالب ، نیاز به زبان نشانه‌گذاری HTML و درکنار آن زبان CSS هستیم تا بتوانیم استایل و دیزاین بهتری به صفحات وب دهیم . در کنار HTML و همچنین CSS می‌توانیم از زبان جاوا اسکریپت یا کتابخانه‌های jQuery استفاده کنیم .
درحال حاضر قریب به 90% سایت‌های سطح وب ، دارای کتابخانه‌هایی CSS و همچنین JS زیادی هستند . اگر در داخل سایت خودتان کلیدهای ترکیبی CTRL + U را فشار دهید ، وارد بخش سورس سایت خواهید شد . در این بخش کافیست تا کلیدهای CTRL + F را فشار داده و عبارت زیر را جستجو کنید :
.cssبه این ترتیب تمامی کتابخانه‌ها و فایل‌های CSS که داخل قالب سایت شما استفاده شده است نمایش داده خواهند شد . اگر تعریف درستی از یک استاندارد برای تعداد فایل‌های CSS یا JS داشته باشیم ، می‌توان اینگونه گفت که بهتر است مجموع این دو فایل‌ها بیش از 20 عدد نباشد .
در قالب‌های حرفه‌ای تعداد این فایل‌ها در مجموع 20 عدد هم نیست . البته که این سایت‌ها مثل سایت ما یعنی سئو نود ، دارای قالب و پوسته اختصاصی هستند و برنامه نویسی درستی روی آنها انجام شده است .
عموما در قالب‌های آماده که از مارکت‌های فروش قالب خریداری می‌کنید ، به دلیل ازدیاد افزونه‌های جانبی برای هر پوسته ، تعداد فایل‌های css و js قالب نیز بسیار زیاد است و احتمال دارد شما نزدیک به 100 فایل CSS و بیش از 50 فایل JS داشته باشید .
درمورد سایت‌هایی که با صفحه سازهایی همچون المنتور طراحی می‌شوند نیز معمولا تعداد این فایل‌ها زیاد است . به این دلیل که قالب‌های المنتوری معمولا توسط وب مسترانی طراحی می‌شوند که تخصصی در زمینه برنامه نویسی ندارند و لذا جهت افزودن امکانات بیشتر به سایت ، از افزونه‌های جانبی استفاده خواهند کرد و افزونه‌هایی که در سمت فرانت اجرا می‌شوند ، فایل‌های استایل و جی‌کوئری خودشان را به پروژه اضافه خواهند کرد .
چرا باید تعداد فایل‌های css و js قالب را کاهش دهیم ؟
هنگامی که آدرس یک وب سایت را در نوار آدرس وارد می‌کنید ، طبق درخواست شما و همچنین آدرس سایتی که وارد شده است ، تمامی فایل‌های css و js قالب به همراه تمامی تصاویر و ویدیوها و … از سرور سایت ( هاست ) درخواست شده و برای شما داخل مرورگر نمایش داده خواهند شد .
این ارسال درخواست‌ها بسمت سرور به تعداد مشخصی انجام خواهد شد . بخشی از این درخواست‌ها از سمت سرور ، مربوط به فایل‌های css و js قالب است . هر تعداد که درخواست‌های ارسال شده به سمت سرور بیشتر باشد ، سرعت نمایش سایت شما برای مخاطب پایین‌تر خواهد بود و اصطلاحا مخاطب شما با تاخیر بیشتری سایت را مشاهده خواهد کرد .
این موضوعی است که در بحث سئو و بهینه سازی سایت بسیار مهم است و لذا یکی از چالش‌ها در طراحی سایت و خصوصا بعد از آن در بحث سئو ، کاهش تعداد درخواست‌ها به سمت سرور است و عمده این کاهش درخواست‌ها بروی تعداد فایل‌های css و js قالب + تعداد تصاویر انجام می‌شود .
اما چگونه تعداد فایل‌های CSS قالب را کاهش دهیم ؟
اکنون شما اطلاع دارید که اگر قصد دارید تا حداقل فایل‌های CSS را داشته باشید باید از یک قالب با طراحی و دیزاین اختصاصی استفاده کنید اما دقت داشته باشید که در این بین باید از یک طراح یا شرکت متخصص کمک بگیرید چراکه ممکن است حتی در این بخش نیز بصورت بهینه کار نشود ، اما در هر صورت این روش ، بهترین حالت برای داشتن یک وب سایت با حداقل فایل‌های CSS و همچنین جاوا اسکریپتی است .
- اگر قالب شما توسط بسته نصبی و با قالب آماده راه اندازی شده است :
اولین کاری که لازم است انجام دهید ، بررسی افزونه‌های سایت است . احتمال دارد که سایت شما از طریق بسته نصبی اجرا شده باشد و در این حالت اکثر افزونه‌ها بروی سایت شما فعال باشد . لذا در گام اول توجه کنید که قصد دارید تا فعلا در سایت خودتان چه امکاناتی را داشته باشید و به کاربر ارائه کنید و برهمین اساس ، یا برخی افزونه‌ها را غیرفعال کنید یا تماما حذف کنید . با انجام همین کار تعداد فایل‌های CSS و JS شما تا اندازه قابل توجهی کاهش خواهد یافت .
در گام دوم اگر مشاهده کردید که بازهم تعداد فایل‌های CSS و JS شما بسیار زیاد است ، می‌توانید از یک طراح قالب وردپرس کمک بگیرید تا قالب شما را بررسی کنند . در این بین احتمال دارد کتابخانه‌هایی وجود داشته باشند که شاید تنها چندین خط کد در داخل فایل آنها وجود داشته باشد و بخاطر همین چندخط کد ، یک عدد فایل اضافی داخل سایت شما درخواست شود .
طراح قالب وردپرس می‌تواند اینگونه فایل یا فایل‌ها را با یکدیگر ادغام نموده و چندین فایل را به یک فایل تبدیل کند ، البته که این کار باید دقیق و اصولی انجام شود چراکه تقدم اجرای فایل‌های CSS و JS در قالب سایت بسیار مهم است .
- اگر قالب شما توسط المنتور طراحی شده است :
در این حالت نیز اول از همه باید سعی کنید تا از امکانات داخل المنتور و المنتور پرو جهت طراحی پوسته استفاده کنید . اگر سایت شما فروشگاهی باشد احتمال دارد برخی افزونه‌های اضافی همچون Woolentor را نیز نصب کنید تا امکانات بیشتری برای فروشگاه خود مثل پیشنهاد شگفت انگیز و … داشته باشید .
درمورد این نوع پروژه‌ها سعی کنید تا حدالامکان از کمترین تعداد افزونه استفاده کنید . به این دلیل که معمولا هنگام نصب افزونه ، امکان یکپارچه سازی فایل‌های کتابخانه‌ها با یکدیگر وجود ندارد و این کار سبب اختلال در نمایش قالب شما خواهد شد . برای کاهش تعداد فایل‌های JS نیز باید دقیقا همین رویه را مدنظر داشته باشید .
آیا از افزونه‌های یکپارچه ساز استفاده نکنیم ؟
برخی افزونه‌های جانبی در وردپرس وجود دارند که می‌توانید توسط آنها ، فایل‌های داخل قالب خودتان را با یکدیگر ادغام کنید . یعنی اگر 10 فایل CSS داشته باشید ، تمامی آنها را به یک عدد فایل تبدیل کنید تا تعداد درخواست‌های شما به تعداد 9 عدد کم شود . اما چه مشکلاتی ضمن انجام این کار ممکن است ایجاد شود ؟
اولین موردی که باید مدنظر داشه باشید اینجاست که فایل کتابخانه اصلی CSS قالب که عموما نام آن style.css است را از لیست فایل‌هایی که قرار است ادغام شوند خارج کنید .
اکثر این افزونه‌ها به شما این امکان را خواهند داد تا بتوانید مشخص کنید که چه فایل‌هایی از فایل‌هایی CSS و JS که داخل قالب قرار دارند فشرده نشوند . اگر ضمن یکپارچه سازی چند فایل به مشکل برخوردید ، بهتر است از یکپارچه سازی منصرف شوید چراکه احتمال دارد با بروز شدن افزونه مربوطه نیز مشکلاتی برای شما ایجاد شود .
معمولا افزونه WP Rocket در این زمینه امکانات مناسبی را ارائه می‌کند اما توجه داشته باشید که این افزونه بروی وب سرورهای NginX عملکرد مناسبی را ارائه می‌کند . امیدواریم این مقاله برای شما مفید باشد .
