ترکیب فایل های JS و CSS + چه مواقع از این تکنیک استفاده نکنیم؟

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

سرعت همیشه یکی از مهمترین عوامل در رشد بازدید سایت و افزایش رتبه سئو یک وب سایت بوده است، ترکیب فایل های JS و CSS هم یکی از فاکتورهایی است که به بهبود سرعت سایت شما کمک می کند، اما این تمام ماجرا نیست!

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

• افزونه وردپرس چیست + کاربرد افزونه ها در وردپرس
• آموزش نصب افزونه در وردپرس از طریق هاست یا نرم افزار های FTP، پیشخوان و یا Github
• چه تعداد افزونه در وردپرس نصب کنیم؟ تعداد استاندارد افزونه ها در وردپرس
• افزایش سرعت وردپرس – آموزش 0 تا 100 بهینه سازی وردپرس

حال فرض کنید وب سایت شما به دلیل استفاده از افزونه و یا نیاز خود دارای 30 اسکریپت JS/CSS است. هنگامی که یک کاربر وارد سایت شما می شود به ازای هر اسکریپت 1 درخواست از مرورگر به سمت سرور ارسال شده و سرور شما نیز وظیفه پاسخ به این درخواست را دارد.

حال فرض کنید صفحه مورد نظر، دارای 20 تصویر و چند وزن ( مثال 2 وزن ) از یک فونت است، یعنی برای بارگذاری سایت در هر بازدید 52 درخواست توسط مرورگر به سرور ارسال می شود!!! لازم به ذکر است که این تعداد درخواست منهای کوئری و دیگر درخواست‌های Back-End و Front-End است انجام این فرایند موجب بالارفتن مصرف منابع و کند شدن سایت خواهد شد.

کاهش درخواست‌ها به سمت سرور موجب کاهش مصرف منابع و افزایش سرعت سایت خواهد شد.

حال با ترکیب فایل های JS و CSS شما 2 درخواست کاهش دهید، یعنی یک فایل JS و یک فایل CSS و در این حالت در مجموع 24 درخواست به سمت سرور ارسال می شود.

مسلما ترکیب اسکریپت‌ها موجب کاهش درخواست های سمت سرور، کاهش مصرف منابع ( کاهش هزینه ) و افزایش سرعت سایت خواهد شد، در درازمدت این افزایش سرعت موجب بهبود تجربه کاربری و بهبود رتبه سئو سایت شما خواهد شد، شما با ترکیب کردن اسکریپت های CSS و JS هم در هزینه صرفه جویی می کنید و هم موجب افزایش سرعت و بهبود تجربه کاربری در سایت خود خواهید شد.

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

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

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

1. ممکن است با ترکیب فایل های CSS با خطای Render Blocking مواجه شوید، چرا که تمامی کدهای CSS سایت شما در یک فایل قرار دارند و اگر این فایل یک فایل حجیم باشد ظاهر سایت شما تا بارگذاری کامل فایل، نامناسب است. در واقع راه حل درست این است که کدهای سی اس اس به ترتیب و بخش به بخش اجرا شوند.
2. ممکن است ترکیب فایل های جاوااسکریپت موجب اختلال در سایت و غیرفعال شدن بخش هایی از سایت شما که ملزم به استفاده از کدهای جاوااسکریپت هستند شود، می توان گفت تعویق در بارگذاری فایل‌های JS و بارگذاری این فایل‌ها در فوتر یک راه حل موثرتر نسبت به ترکیب فایل‌های JS است.
3. بارگذاری کدهای غیرضروری! برخی از افزونه‌های بهینه سازی و کش تمامی فایل های JS و CSS سایت شما ( قالب و تمامی افزونه‌ها ) را به یک نسخه جداگانه سی اس اس و جاوااسکریپت اضافه می کنند و همان نسخه نیز در تمامی صفحات شما بارگذاری می شود. برای مثال اگر شما در این صفحه فرمی ندارید کدهای افزونه Contact Form 7 نیز بارگذاری می شوند.
4. فرض کنید سایت شما دارای 30 افزونه باشد ( اصلا توصیه نمی شود )، تمامی اسکریپت‌های مربوط به افزونه‌های شما در تمامی صفحات بارگیری می‌شوند، حتی اگر نیازی به آن کد نباشد! البته اگر این فایل در مرورگر کاربر ذخیره شود ( کش )، این مشکل فقط در اولین بازدید اون وجود دارد و در بازدیدهای بعدی نیازی به بارگیری مجدد از سمت سرور نیست.
5. ترکیب اسکریپ‌ها ممکن است باعث افزایش زمان TTFB شود، برخی اوقات داشتن زمان پاسخگویی سریع می‌تواند به اندازه زمان بارگذاری سریع مهم باشد.

مشخصا این توضیحات تناقض زیادی با توضیحات قبلی داشته و تقریبا فواید ترکیب فایل های JS و CSS نقض و بی تاثیر می‌کند! دلیل واضح است شما در شرایط خاصی باید از این تکنیک استفاده کنید.

فرض کنید شما چند فایل CSS دارید به نام های main.css, style.css و footer.css که که با ترکیب و فشرده سازی آنها چنین تغییراتی صورت می گیرد:

• بدون ترکیب: 3 درخواست، 20 کیلوبایت حجم، بارگیری 60 میلی‌ثانیه
• ترکیب شده: 1 درخواست، 18 کیلوبایت حجم، بارگیری 50 میلی‌ثانیه

در ظاهر همه‌چیز عالیست، درخواست کمتر، حجم کمتر و بارگیری سریعتر! اما ممکن است وجود فایل footer.css موجب Render Blocking شود چرا که در ابتدا فقط به فایل‌های style.css و main.css نیاز دارید، پس بهتر است که فایل footer.css در این لیست قرار نگیرد.

اگر اسکریپت‌های سایت شما دارای حجم زیادی هستند، ترکیب فایل های JS و CSS برای شما مناسب نیست چرا که شما یک اسکریپت با حجم غیراستاندارد دارید و بارگیری این اسکریپت به دلیل حجم بالای آن دیرهنگام و موجب Render Blocking خواهد شد. راه حل چیست؟ سعی کنید فایل‌های کم‌حجم را باهم ترکیب کنید، برای مثال ترکیب 4 فایل 6 کیلوبایتی بسیار منطقی است.

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

حال که با فواید و معایب ترکیب فایل‌های سی اس اس و جاوااسکریپت آشنا شدید، در حالت کلی بهتر است از چه روشی استفاده کرد؟ استفاده درست از این تکنیک می‌تواند موجب افزایش سرعت و کاهش هزینه برای شما باشد پس بهتر است به موارد زیر دقت کنید:

• از ترکیب اسکریپ‌هایی که بخش بالای صفحه تاثیری ندارند خودداری کنید.
• از ترکیب اسکریپت‌هایی با حجم بیشتر از 15 کیلوبایت خودداری کنید.
• در کنار ترکیب اسکریپت‌ها از تعویق در بارگیری فایل‌های Javascript هم استفاده کنید.
• حتما پس از اعمال تغییرات وب سایت خود را به صورت دستی و از طریق وب سایت‌های آنالیز سرعت بررسی کنید.
• ترکیب و درون خطی کردن اسکریپت‌ها در سایت‌های کوچک می‌تواند بسیار موثر باشد و تاثیر چشمگیری در بهبود سرعت سایت شما داشته باشد.
• برای مدیریت بهتر بهتر است جهت ترکیب فایل های JS و CSS از افزونه استفاده کنید.

در لیست زیر برخی از برترین افزونه های بهینه سازی و ترکیب فایل های JS و CSS با عملکردی مشابه آورده شده است:

• افزونه Autoptimize
• افزونه LiteSpeed Cache
• افزونه WP Rocket
• افزونه W3 Total Cache

در این مقاله با تکنیک CSS & JS Combine یا ترکیب فایل های JS و CSS آشنا شدید، همانطور که درمقاله نیز به این مورد اشاره شد این تکنیک دارای مزایا و معایب خود است و برای رسیدن به بهترین نتیجه باید موارد مختلفی مورد بررسی قرار گیرند، در صورت رضایت از این مقاله، آن را با دوستان خود به اشتراک بگذارید، امیدواریم که این مقاله در رسیدن شما به نتیجه دلخواه کمک کرده باشد.

در صورتی که هرگونه راهکار بهتر و یا سوالی در این خصوص دارید میتوانید با استفاده از بخش نظرات همین مقاله راهکار و یا سوال خود در خصوص ترکیب فایل های JS و CSS برای سایر کاربران به اشتراک بگذارید.