Kung ang iyong WordPress site ay gumagamit ng isang bayad na tema ng WordPress o isang sikat mula sa opisyal na WordPress Themes repository, malamang na ang tema ay binuo para sa iba't ibang mga kaso ng paggamit. At maaaring gumagamit ka lamang ng isang maliit na hanay ng lahat ng mga tampok na magagamit sa tema.
Sa sitwasyong iyon, naglo-load ang iyong site ng maraming hindi nagamit na CSS na hindi kinakailangan upang i-istilo ang mga pahina ng iyong site. Halimbawa, ang WordPress theme na ginagamit mo ay maaaring may mga istilo din para sa mga pahina ng WooCommerce ngunit kung nagpapatakbo ka lang ng isang blog sa iyong WordPress site, hindi mo ginagamit ang CSS na kasama para sa mga pahina ng WooCommerce sa iyong site at sa gayon ay naghahatid ng hindi nagamit. CSS sa mga gumagamit.
Kung nasubukan mo na ang iyong website sa tool ng Google Pagespeed, malamang na alam mo na na ang iyong site ay may mga hindi nagamit na isyu sa CSS. Sa gabay na ito, ipapakita namin sa iyo kung paano suriin muna ang hindi nagamit na CSS, pagkatapos ay gumamit ng libreng tool upang alisin ang hindi nagamit na CSS mula sa iyong WordPress site.
Paano Suriin ang Hindi Nagamit na CSS
Ang Google Chrome DevTools (ang nakikita mo kapag na-click mo ang opsyong "Inspeksyon" sa menu ng konteksto) ay may feature na Coverage sa loob ng tab na Mga Pinagmulan. Maaari mong gamitin ang opsyong Coverage upang mahanap ang hindi nagamit na CSS at JS na nilo-load ng iyong website.
- Buksan ang iyong website sa Chrome sa desktop.
- Mag-right-click sa isang walang laman na puting espasyo sa iyong site, at piliin Siyasatin mula sa menu ng konteksto.
- Mag-click sa Mga pinagmumulan tab, pindutin Ctrl + Shift + P upang magbukas ng command window, pagkatapos ay i-type saklaw at piliin Simulan ang paggamit ng coverage at i-reload ang page mula sa magagamit na mga utos.
- Sa ilalim ng tab na Saklaw, mag-click sa Filter ng URL field at ilagay ang root domain ng iyong site dito upang ipakita lamang ang mga panloob na CSS/JS file.
└ Suriin ang Hindi nagamit na mga byte column upang makita ang porsyento ng data na nilo-load sa isang CSS/JS file mula sa iyong tema.
- Mag-click sa isang CSS file upang tingnan ang hindi nagamit na CSS (minarkahan ng mga pulang bar) na na-load ng iyong site. Ang CSS na ginagamit sa kasalukuyang pahina ay ipapakita na may mga berdeng bar.
Kapag nasuri mo na ang lahat ng hindi nagamit na CSS na nilo-load sa iyong website, oras na para alisin ito. Mayroong ilang mga libreng tool na magagamit upang alisin ang hindi nagamit na CSS mula sa mga webpage. Nasa ibaba ang isa sa mga sikat na tool na nasubukan ko at ginamit sa sarili kong mga proyekto.
Gamitin ang PurifyCSS Online Para Tanggalin ang Hindi Nagamit na CSS
Karaniwan, makakahanap ka ng isang plugin para sa halos lahat ng bagay sa WordPress. Ngunit para sa pag-alis ng hindi nagamit na CSS, sa kasamaang-palad, walang isang plugin na magagamit. Kaya gagamit kami ng manu-manong mga tool na hindi partikular sa wordpress para alisin ang hindi nagamit na CSS sa iyong site.
PurifyCSS ang pinaka magiliw na tool na hindi developer maaari mong mahanap upang makitungo sa hindi nagamit na CSS. Ang tool ay may isang simpleng UI upang hayaan ang mga user na magbigay ng alinman sa URL ng Website O ang HTML at CSS code. Para sa WordPress, gagamitin namin ang opsyon sa URL at magbibigay kami ng mga link sa lahat ng uri ng page sa iyong site upang hayaan ang tool na makuha ang CSS mula sa lahat at mag-optimize para sa hindi nagamit na CSS.
Narito ang isang mabilis na listahan ng mga pahina na dapat mong ilagay sa tool:
- URL ng homepage
- Maramihang mga URL ng pahina ng post mula sa bawat Kategorya sa iyong site
└ Ito ay para matiyak na kasama ang CSS para sa lahat ng elemento ng post.
- Contact, About, Privacy at lahat ng uri ng iba't ibang page na maaaring mayroon ka sa iyong site.
- Pahina ng archive, Pahina ng paghahanap, Mga pahina ng may-akda
- Mga pahina ng Custom na Uri ng Post
Hot Tip: Gumawa ng post/page na 'features' na may lahat ng elemento ng tema na ginagamit mo o maaaring gamitin sa hinaharap gaya ng Table, Image Gallery, Code, Pre, Ordered lists, Unordered lists, Forms, Tabs, Accordions, Gutenberg Blocks na karaniwan mong ginagamit , atbp.
Gamitin ang URL ng post na 'mga tampok' na ito sa tool na PurifyCSS Online upang matiyak na kasama ang CSS para sa mga karaniwang ginagamit na elemento.
Pindutin ang Linisin ang CSS button kapag naidagdag mo na ang lahat ng nauugnay na uri ng URL mula sa iyong site papunta sa tool na PurifyCSS Online.
Kopyahin ang bagong CSS na nabuo ng tool at gamitin ito sa iyong site. Siguraduhin mo i-backup ang orihinal na istilo.css at iba pang CSS file sa iyong tema bago palitan ang bagong CSS na nabuo ng PurifyCSS.
Tip: Maaari mong gamitin ang built-in na WordPress Theme Editor para i-edit ang mga CSS file ng iyong tema, o maaari kang gumamit ng FTP/SFTP program para kumonekta sa server at kumportableng mag-edit ng mga file gamit ang Notepad editor.