افزایش سرعت سایت های وردپرسی همیشه یکی از دغدغه های طراحان سایت محسوب می شود. جالب است بدانید که مقصر اصلی کندی سایت شما در بیشتر مواقع، اسکریپت های CSS و JS موجود در سایت هستند. هرکدام از این اسکریپت ها برای لود شدن و نمایش نیاز به منابعی دارند که باعث کندی بارگذاری صفحه می شود. پس یکی از مهم ترین اقدامات شما برای سرعت سایت بهینه سازی فایل های css و js در وردپرس می باشد .
اگر شما یک توسعه دهنده وردپرس هستید؛ میتوانید ترفندهای کدنویسی بهینه را یاد بگیرید و قالب و افزونه های بهینه برای وبسایت خود استفاده کنید. اما راه حل های ساده تری هم وجود دارند که حتی برای طراحانی که دانش برنامه نویسی ندارند نیز کاربردی است؛ در ادامه این نوشته به این ترفندها اشاره می شود.
از کجا بفمیم فایل های css و js سایت نیاز به بهینه سازی دارند؟
قدم اول برای شروع کار همیشه این است که سایت را به کمک ابزارهای آنلاین تست سرعت آنالیز کنید. این کار به شما در شناسایی علت کندی و همینطور راه حل افزایش سرعت کمک می کند. از این گذشته، اگر قبل از هرگونه اقدام، سرعت سایت را آنالیز کنید؛ بعد از انجام تغییرات ، میزان اثربخشی کاملا مشهود خواهدبود.
بگذریم، بهتر است ابزارهای تست فایل های css و js را معرفی کنیم:
آنالیز فایل های css و js سایت با GTmetrix
سایت جی تی متریکس به عنوان یک ابزار آنلاین تست سرعت و رفع ایرادات مربوط به لود سایت شناخته شده است. بعد از آنالیز وبسایت در این ابزار در بخش structure ایرادات مربوط به فایل های استایل و جاوااسکریپت قابل مشاهده است.
آنالیز فایل های css و js با Pagespeed insights
یکی دیگر از ابزارهای تست و آنالیز سرعت سایت و مشکلات مربوط به سرعت page speed insights است.
این ابزار تمامی بخش های سایت از جمله اسکریپت ها و فایل ها استایل را از لحاظ سرعت چک می کند و پیشنهاداتی جهت بهبود سرعت به شما ارائه می کند. بعد از وارد کردن نام دامنه وبسایت می توانید بررسی کلی از وضعیت لود سایت در حالت موبایل و دسکتاپ داشته باشید و در بخش Diagnostics اقداماتی که برای بهتر شدن سرعت ابزار به شما پیشنهاد می کند را ببینید.
چگونه در وردپرس فایل های css و js را بهینه سازی کنیم؟
حالا بعد از معرفی ابزار هایی که نیاز دارید برای آنالیز میرسیم سراغ اینکه چگونه بهینه سازی کنیم ببینید تا مشکل را شناسایی نکنید ، نمیتوانید به خوبی مشکل را رفع کنید پس این ابزار های بالا خیلی به شما کمک میکنند .
فشرده سازی یا Minify
منظور از minify فشرده سازی فایل ها به نحوی است که بدون تغییر در عملکرد حجم کمتری داشته باشند و سرعت لود فایل ها بیشتر شود. این عمل از طریق حذف کاراکترهایی مثل فاصله، Tab و به طور کلی موارد اضافی از کدها انجام می شود. ابزارهای آنلاین زیادی برای فشرده سازی کدها وجود دارند اما پلاگین هایی که در ادامه معرفی می شوند می توانند با فشردن یک دکمه همه کدهای شما را مینیفای کنند.
برای این منظور میتوانید از سایت minifier کمک بگیرید
حذف فایل های غیر ضروری
هر افزونه ای که نصب می کنید، امکان دارد چندین فایل css و Js را به سایت شما اضافه کند که اجرا شدن همه آنها مشخصا برای لود شدن وبسایت ضروری نیستند. در ادامه نحوه حذف این فایل ها با افزونه آموزش داده می شود.
لود به صورت Deferred و با ترتیب بهینه
به جای کلیه فایل ها استایل و اسکریپت در ابتدای بارگذاری صفحه لود شوند می توان از تکنیکهای مثل Async یا Defer کمک گرفت تا بخش های مختلف فایل با تاخیر بارگذاری شوند و سرعت لود اولیه سایت بیشتر شود.
بهینه سازی فایل های css و js با افزونه Optimize Scripts & Styles
افزونه Optimize Scripts & Styles همانطور که از نامش پیداست کدهای شما را بهینه می کند. این بهینه سازی را با کاهش تعداد و حجم فایل های سایت انجام می دهد که همین کار روی سرعت هم تاثیر مثبت دارد. میزان اثربخشی این پلاگین در سایت های مختلف با هم فرق دارد. مثلا اگر سایتی اسکریپت های زیادی نداشته باشد؛ چون چیزی برای بهینه سازی به این روش وجود ندارد احتمالا تاثیر خاصی مشاهده نمی شود.
باوجود اینکه استفاده از تنظیمات این افزونه بسیارساده است اما باتوجه به اهمیت کار با آن توضیحاتی در این خصوص را در ادامه به شما ارائه می کنیم.
بعد از نصب و فعالسازی این افزونه از طریق پیشخوان، بخش تنظیمات > optimization به تنظیمات این افزونه دسترسی دارید.
حالا به برخی از تنظیمات می پردازیم :
Optimization Behavior: اولین چیزی که باید ست کنید رفتار بهینه سازی است. گزینه پیش فرض Minify است، اما می توانید Concentrate را نیز انتخاب کنید. Minify سعی میکند اندازه فایل را کاهش دهد، در حالی که Concentrate فایلها را ترکیب می کند تا تعداد درخواست ها کمتر شود.
Cache Lifespan: انتخاب طول عمر کش.
Optimize Scripts: بهینه سازی اسکریپت ها، این سوییچر را حتما در حالت فعال روشن قرار دهید.
Optimize Styles: این گزینه هم مثل سوییچر قبلی باید حتما روشن باشد چون باعث بهینه سازی فایل های استایل شما می شود.
Remove type=’text/javascript’ from script and style tags: با فعال کردن این دو سوییچر ویژگی type از اسکریپت ها و فایل های استایل حذف می شود.
Show clear button in admin bar : نمایش دکمه پاک کردن کش در نوار مدیریت پیشخوان وردپرس.
بخش Debug : این بخش از دو گزینه تشکیل شده است. اولین مورد غیرفعال کردن حافظه پنهان است که فقط باید برای اهداف آزمایشی انجام می شود. روشن گذاشتن این مورد برای مدت طولانی باعث کندی وب سایت شما می شود. گزینه دیگر نمایش اشکال زدایی است که زمانی مفید است که چیزی به درستی کار نمی کند. برای تنظیمات اولیه نیازی نیست وارد این قسمت شوید، اما زمانی که اتفاق غیرمنتظره ای رخ می دهد می توانند مفید باشند.
بخش remove: اگر در کار با وردپرس مبتدی هستید وارد این بخش نشوید. با این قسمت می توانید اسکریپت های اضافی قالب خود را حذف کنید. اما باید بدانید که، آنها حذف نمی شوند. در حقیقت، افزونه مانع از بارگذاری آنها می شود.
بخش ignore: درنهایت، بخش Ignore به شما امکان می دهد اسکریپت های خاصی را نادیده بگیرید یا استثنا درنظر بگیرید. این قسمت اغلب بهترین گزینه برای اسکریپت های سفارشی است که خودتان وارد کرده اید چون این افزونه در حالت پیش فرض تلاش می کند همه اسکریپت ها را بهینه کند.
بهینه سازی فایل های css و js با افزونه WP Rocket
یکی دیگر از افزونه های کاربردی که قابلیت مینیفای یا فشرده سازی فایل ها را دارد راکت وردپرس است. در بخش بهینه سازی فایل افزونه بخشی برای فشرده سازی فایل های css و جاوااسکریپت وجود دارد.
بعد از تیک دار کردن این دو گزینه اخطاری از طرف افزونه دریافت می کنید که می گوید احتمال دارد طراحی سایت شما به همین خاطر بهم بریزد، بهتر است این ریسک را بپذیرید و اگر مشکلی ایجاد شد تنظیمات را به حالت قبل برگردانید.
بهینه سازی فایل های css و js با افزونه Autoptimize
Autoptimize یک افزونه رایگان است که می توانید آن را از مخزن وردپرس دانلود کنید.
بعد از نصب و فعالسازی این پلاگین تنظیمات آن از بخش تنظیمات پیشخوان در دسترس شماست.
جمع بندی
در این نوشته با راه های بهینه سازی فایل های css و js آشنا شدید، حتما قبل و بعد از انجام ترفندهای گفته شده سرعت و وضعیت لود وبسایت خود را چک کنید که بتوانید بهترین تصمیم را در خصوص بهینه سازی سرعت وبسایت خود بگیرید.
