وبلاگ

چگونگی حذف CSS اضافی در وردپرس

حذف css اضافی در وردپرس
آموزش وردپرس

چگونگی حذف CSS اضافی در وردپرس

فهرست مطالب

اصل راهنمای وردپرس این است که اینترنت برای همه است و هر کسی حتی بدون دانش کد نویسی می تواند وب سایت درست کند. و این درست است. برای ایجاد یک وب سایت شما دقیقاً به هیچ دانش کد نویسی احتیاج ندارید. اما این بدان معناست که به کد نویسی شخص دیگری اعتماد کنید.

معایب آشکار است: ممکن است وب سایت شما حاوی کد باشد، اغلب کد CSS، که نیازی به اجرا ندارد. این آموزش در مورد چگونگی حذف CSS بلا استفاده از وب سایت وردپرس است. اما CSS چیست؟ چگونه وب سایت شما دارای کدی است که نیازی به آن ندارد؟ اگر کد کاری نمی کند، چرا آن را حذف نکنید؟ ما در این مقاله سعی خواهیم کرد به این سوالات و موارد دیگر پاسخ دهیم.

CSS چیست؟

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

بیشتر بخوانید:

CTA چیست؟ 7 ترفند طلایی برای طراحی Call To Action یا فراخوان عمل

 

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

CSS بلااستفاده از کجا می آید و چرا آن را حذف می کنیم؟

راه های زیادی وجود دارد که چگونه کد غیر ضروری می تواند به وب سایت شما راه پیدا کند. وقتی صحبت از CSS می شود، به احتمال زیاد به چیزی که در وب سایت وردپرس خود نصب کرده اید برمی گردد که باعث می شود بر نحوه ارائه آن به کاربر تأثیر بگذارد. به عنوان مثال، یک تم دارای CSS خاص خود است، که باعث می شود وب سایت شما با سایر وب سایت های بدون تم یکسان با شما متفاوت باشد. افزونه ای مانند صفحه ساز ممکن است CSS مخصوص به خود را داشته باشد، همچنین فونت ها، فونت های نماد و بسیاری از نرم افزارهای دیگر که می توانید نصب کنید همه دارای کدهای css هستند.

بیشتر بخوانید:

قالب صفحه در وردپرس چیست | آموزش ساخت page template در 4 مرحله

 

اما این کدهای چه ضرری دارند، ما از شما می پرسیم. خوب، نتیجه نهایی این است که وب سایت شما تعداد زیادی فایل را بارگیری می کند که نیازی به عملکرد آن‌ها ندارند، به این معنی که زمان بارگیری شما بی دلیل افزایش می یابد. زمان بارگذاری آهسته فقط بر تجربه کاربر و بازدیدکنندگان شما تأثیر نمی گذارد – موتورهای جستجو، نرخ پرش (سرعت سریع کاربر در وب سایت شما) و زمان بارگذاری را در نظر می گیرند.

زمانی که فایل های CSS کوچک هستند، تعداد زیادی از آنها در هر وب سایت خاصی وجود دارد. به همین دلیل است که چیزی به نام کد بی فایده بی ضرر وجود ندارد.

بیشتر بخوانید:

فشرده سازی Gzip در وردپرس با دو روش ساده

چگونه تعیین کنیم که وب سایت از CSS بلا استفاده، استفاده می کند یا خیر؟

تعیین اینکه آیا یک وب سایت از مشکل، CSS استفاده نشده رنج می برد، نسبتاً آسان است: گوگل ابزاری مخصوص آن دارد. می توانید از Google PageSpeed ​​Insights برای تعیین اینکه آیا وب سایت شما از کندی های غیر ضروری رنج می برد یا خیر، استفاده کنید و ببینید چه تعداد از آنها را می توان به CSS استفاده نشده نسبت داد.

حذف css اضافی در وردپرس

ما این آزمایش را در وب سایتی اجرا کرده ایم که به وضوح مشکلات زیادی دارد. برای مشاهده پیشنهادات Google می توانید نتایج حذف CSS بلااستفاده را مشاهده کنید.

بیشتر بخوانید:

سئو تکنیکال سایت فروشگاهی با نه گام

 

حذف css اضافی در وردپرس

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

بیشتر بخوانید:

افزونه EDD چیست؟ | کاربرد افزونه Easy Digital Downloads

نحوه حذف ایمن CSS بلا استفاده

چالش اینجا این است که بدانید کدام CSS بی فایده است. جواب؟ نیازی نیست خودتان بدانید شما می توانید و باید دوباره به کد دیگران اعتماد کنید. برای حل این مورد، یک افزونه وجود دارد به نام Asset CleanUp.

بیشتر بخوانید:

ابزار دیس اوو را چه زمانی بکار ببریم؟ چگونه لینک اسپم را disavow کنیم؟

 

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

نحوه حذف ایمن CSS بلا استفاده

برای آزمایش تنظیمات مختلف بدون تأثیر بر بازدیدکنندگان وب سایت، باید حالت تست افزونه را فعال کنید. برای انجام این کار، برگه Test Mode را انتخاب کرده و نوار لغزنده را بکشید و روی Update All Settings کلیک کنید.

بیشتر بخوانید:

افزونه های مهم وردپرس + چرا باید از این پلاگین‌ها استفاده کنیم

نحوه حذف ایمن CSS بلا استفاده

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

نحوه حذف ایمن CSS بلا استفاده

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

بیشتر بخوانید:

نحوه ساخت فوتر وردپرس و محتویاتی که باید به آن اضافه کرد

 

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

بیشتر بخوانید:

اضافه کردن واترمارک به عکس در وردپرس

 

برای بارگیری کد CSS فرم تماس 7 ازصفحه اصلی، اسلایدر را فعال کرده و روی Update کلیک کنید.

نحوه حذف ایمن CSS بلا استفاده

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

بیشتر بخوانید:

آموزش اضافه کردن دکمه به هدر وردپرس

 

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

نحوه حذف ایمن CSS بلا استفاده

هنگامی که از CSSهایی که بارگیری کرده اید راضی هستید، آزمایش کنید که آیا همه چیز به درستی بارگیری می شود یا خیر. سپس می توانید حالت آزمایشی (test mode) را خاموش کنید تا تنظیمات به همه کاربران اعمال شود و نه فقط به ادمین یا سرپرستان اعمال شود.

حذف css اضافی بصورت دستی

اگر از Chrome استفاده می کنید ، برگه DevTools دارای یک ابزار مفید است که به شما امکان می دهد ببینید کد در صفحه ای که در حال اجرا است چه کدی اجرا نمی شود. برای دسترسی به این ابزار ، مراحل زیر را دنبال کنید:

 

  1. Chrome DevTools را باز کنید
  2. منوی فرمان را با: cmd + shift + p باز کنید
  3. “Coverage” را تایپ کرده و روی گزینه “Show Coverage” کلیک کنید
  4. یک فایل CSS را از برگه Coverage انتخاب کنید تا فایل در برگه منابع باز شود

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

حذف css اضافی بصورت دستی

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

بیشتر بخوانید:

بهینه سازی وردپرس برای گوگل کور وب ویتال

سخن آخر

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

 

منبع:

https://qodeinteractive.com/magazine/how-to-safely-remove-unused-css-in-wordpress/

 

5 1 رای
امتیاز دهید
اشتراک
اطلاع از
guest
0 دیدگاه ها
بازخورد اینلاین
نمایش همه دیدگاه ها
0
فکر شما را دوست دارم ، لطفا نظر دهیدx
()
x