بهبود و بهینه سازی کدهای CSS در وردپرس

فایل‌های CSS قالب‌بندی بصری و استایل وب‌سایت وردپرس شما را کنترل می‌کنند، اما اگر کد CSS شما بهینه نباشد، ممکن است سرعت وب‌سایت‌تان را کُند کند.

در این مقاله ما دو روش آسان برای بهینه سازی کدهای CSS وردپرس را به شما نشان می‌دهیم.

چگونه بهینه سازی کدهای CSS وردپرس بر عملکرد وردپرس تأثیر می‌گذارد؟

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

CSS برای وب‌سایت‌های مدرن ضروری است، اما ممکن است فایل‌های CSS بسته به نحوه تنظیم، سرعت و عملکرد سایت شما را کاهش دهند.

حتی یک تاخیر کوچک در سرعت سایت، تجربه کاربری بدی ایجاد می‌کند و ممکن است بر رتبه‌بندی جستجو و نرخ تبدیل شما تأثیر بگذارد و در نتیجه ترافیک و فروش کمتری داشته باشید.

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

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

خبر خوب این است که می‌توانید عملکرد سایت خود را با بهینه سازی نحوه ارائه کد CSS بهبود بخشید. این کار با شناسایی حداقل کد CSS مورد نیاز برای نمایش اولین قسمت از صفحه وب فعلی انجام می‌شود که به عنوان «CSS بحرانی» یا Critical CSS شناخته می‌شود.

سپس این کد به‌جای استایل شیت‌های جداگانه به صورت درون خطی به HTML صفحه اضافه می‌شود تا کد بدون نیاز به بارگذاری فایل CSS در ابتدا رندر شود. پس از اینکه بازدیدکنندگان شما محتوای صفحه‌ای را که به عنوان «Deferred Loading» شناخته می‌شود مشاهده کردند، بقیه CSS را می‌توان بارگیری کرد.

در ادامه، به دو روش برای بهبود و بهینه سازی کدهای CSS در وردپرس اشاره می‌کنیم.

بهینه‌سازی تحویل CSS وردپرس به کمک افزونه WP Rocket

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

پس از فعال‌سازی به منوی تنظیمات > WP Rocket و سپس تب File Optimization مراجعه کنید.

در مرحله بعد به قسمت CSS Files بروید.

پس از آن، باید کادر کنار گزینه “Optimize CSS delivery” را علامت بزنید.

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

تنها کاری که اکنون باید انجام دهید این است که روی دکمه “ذخیره تغییرات” کلیک کنید و منتظر بمانید تا WP Rocket فایل CSS لازم را برای همه پست‌ها و صفحات شما ایجاد کند.

بهینه سازی تحویل CSS وردپرس با افزونه Autoptimize

Autoptimize یک افزونه رایگان است که برای بهبود تحویل فایل‌های CSS و جاوا اسکریپت وب‌سایت شما طراحی شده است.

این افزونه به اندازه WP Rocket ویژگی زیادی نداشته و به تنظیمات بیشتری نیاز دارد.

اگر برای سرعت بخشیدن به سایت خود به سایر ویژگی‌های WP Rocket نیاز ندارید، این افزونه رایگان می‌تواند گزینه خوبی باشد.

اولین چیزی که نیاز دارید این است که افزونه را نصب و فعال کنید. (لینک در انتهای مطلب موجود است)

پس از فعالسازی به منوی تنظیمات > Autoptimize و سپس به قسمت CSS Options بروید و کادر “Optimize CSS Code” را علامت بزنید.

هنگامی که این کار را انجام دادید، باید مطمئن شوید که تیک گزینه “Aggregate CSS-Files” را برداشته‌اید و سپس “Eliminate render-blocking CSS” را علامت بزنید.

اکنون می‌توانید روی دکمه “Changes and Empty Cache” کلیک کنید تا تنظیمات خود را ذخیره کنید.

این افزونه تا زمانی که یک حساب کاربری Critical CSS در وب‌سایتش ایجاد نکنید، به درستی کار نخواهد کرد.

برای عضویت، به برگه Critical CSS در تنظیمات Autoptimize بروید، در اینجا اطلاعاتی را که برای ثبت‌نام نیاز دارید، پیدا خواهید کرد.

هنگامی که کلید Critical CSS API خود را دریافت کردید به بخش API Key بروید تا بتوانید آن را در کادر متنی «Your API key» قرار دهید.

پس از آن مطمئن شوید که روی دکمه ذخیره تغییرات کلیک کرده‌اید.

Autoptimize اکنون تمام اطلاعاتی را که برای افزودن Critical CSS درون خطی نیاز دارد و بارگذاری استایل شیت‌ها را به زمانی که صفحه ارائه شده است به تعویق می‌اندازد در اختیار دارد، در نتیجه وب‌سایت شما سریع‌تر بارگیری می‌شود.

امیدواریم این مقاله در بهبود و بهینه‌سازی کدهای CSS در وردپرس به شما کمک کرده باشد.