Paano alisin ang hindi nagamit na CSS at JS sa WordPress (Napakadali)

Ang pagkakaroon ng maraming hindi nagamit na CSS at JS sa iyong website ay maaaring makapinsala sa oras ng pag-load ng iyong website. Kung pinapatakbo mo ang iyong website sa pamamagitan ng a mga tool sa pagsubok ng bilis tulad ng Google PageSpeed ​​​​Insight, maaari kang makakuha ng babala na alisin ang Hindi Nagamit na CSS.

Sa kabutihang palad, mayroong isang napakadaling paraan upang gawin iyon. Hindi mo kailangang magkaroon ng anumang espesyal na teknikal na kaalaman upang maalis ang hindi nagamit na CSS at JS mula sa iyong WordPress site.

Ito ay dahil sa isang kamangha-manghang plugin na kilala bilang Asset CleanUp: Page Speed ​​Booster. Sa plugin na ito, ang pag-alis ng hindi nagamit na CSS ay kasingdali ng pag-click sa ilang mga pindutan. Bilang kahalili, kung hindi mo iniisip na gumastos ng ilang bucks sa isang taon, kasama ang WP Rocket, may tinanggal na hindi nagamit na CSS button, i-activate lang ito at awtomatikong aalisin ng plugin ang lahat ng hindi nagamit na CSS.

Checkout: Nangungunang 7 Pinamamahalaang Google Cloud WordPress Hosting

Ano ang hindi nagamit na CSS?

Ang hindi nagamit na CSS ay isang CSS file na naroroon sa isang pahina ngunit kadalasan ay hindi kailangan para mag-load ang pahina. Kapag ang isang bisita ay nagbukas ng isang website, ang browser ay karaniwang kailangang mag-download, mag-parse, at magproseso ng lahat ng mga panlabas na stylesheet sa binisita na pahina bago nito maipakita ang nilalaman ng pahina sa bisita. Kung mayroong anumang CSS sa naturang page na hindi ginagamit sa page, mag-aaksaya ng oras ang browser dito.

Ang isang klasikong halimbawa nito ay ang karamihan sa mga plugin ng contact form na ginagamit. Ang mga plugin na ito bagaman kadalasan ay ginagamit lamang sa pahina ng Makipag-ugnay sa amin, i-load ang CSS nito sa buong website. Hindi mahalaga kung ito ang homepage kung saan hindi ito ginagamit, maglo-load ang CSS.

Kung mayroong masyadong maraming CSS na hindi kailangan ngunit naglo-load at nagpapabagal sa oras ng browser upang basahin at ipakita ang isang pahina, maaari itong maging isang problema.

Bukod sa mga plugin, nagsusulat ang mga developer ng tema ng maraming bagay sa style.css na kadalasang hindi kailangan. Ngunit kailangan man o hindi, naglo-load sila sa tuwing na-load ang iyong site!

Maaaring hindi problema ang isang hindi nagamit na CSS ngunit maaaring makaapekto ang maraming hindi nagamit na CSS sa oras ng pagkarga ng iyong website.

Checkout: Nangungunang 10 pinakamabilis at pinakamahusay na mga tema ng WordPress 

Paano makilala ang Hindi Nagamit na CSS

Ang paghahanap ng hindi nagamit na CSS at JS ay napakadaling gawin. Mayroong dalawang mga diskarte na irerekomenda ko.

Ang isa ay pag-aralan ang iyong website sa pamamagitan ng Google PageSpeed ​​​​Insight. Tingnan kung ang iyong website ay may alisin ang hindi nagamit na isyu sa CSS. Mag-click dito at matutukoy mo ang bahagi ng iyong site na responsable para dito.

Makikita mo mula sa itaas mayroong isang kaso ng hindi nagamit na CSS na naitala. Nagagawa kong makita ang plugin at lokasyon ng hindi nagamit na CSS sa pamamagitan ng pagtingin dito.

Ang pangalawang opsyon ay upang makakuha ng mas detalyadong pagsusuri. Magagawa mo ito sa pamamagitan ng paggamit ng mga tool sa Chrome Dev.

Sa iyong chrome browser, buksan ang mga tool sa Chrome Dev pagkatapos ay pumunta sa coverage. Pagkatapos ay i-click ang reload button sa loob ng coverage area. Makakahanap ka ng isang komprehensibong gabay sa kung paano gawin ito sa tool ng Google Developers.

Ang isa pang pagpipilian ay ang paggamit jitbit upang i-scan para sa hindi nagamit na mga tagapili ng CSS. Maaari mo ring gamitin PurifyCSS upang mahanap ang hindi nagamit na CSS

Paano tanggalin ang hindi nagamit na CSS

Sundin ang mga hakbang na ito upang alisin ang hindi nagamit na CSS mula sa WordPress:

1. I-install ang Asset CleanUp

Pumunta sa plugin pagkatapos ay Magdagdag ng bago. Pagkatapos ay i-type mo ang "Asset CleanUp" sa box para sa paghahanap ng pahina ng Magdagdag ng bagong plugin. I-install at i-activate ang plugin.

2. Pumunta sa mga setting ng plugin

Upang ma-access ang mga setting ng plugin, mula sa WordPress dasboard mag-click sa mga setting pagkatapos ay mag-click sa Asset CleanUp.

3. I-unload ang hindi gustong CSS at JS

Sa mga setting ng plugin, maaaring kailanganin mong tanggapin na alam mo kung paano gumagana ang plugin sa ilalim ng stripping fat tap bago ka magsimula.

Upang i-unload ang CSS at JS i-click ang CSS at JSS manager. Mula doon maaari mong alisin ang anumang CSS at JS na hindi mo kailangan. Maaari mo itong alisin para lamang sa homepage, para sa buong site o para sa isang partikular na URL. Maaari ka ring mag-alis para sa mga post, page, o kategorya.

Ang isang halimbawa ay ang pag-unload ng anumang contact form mula sa pag-load para sa buong site maliban sa contact us page

Maglaan ng oras at i-unload ang bawat CSS at JS na alam mong hindi kailangan. Siguraduhing subukan mo ang iyong site pagkatapos mong matiyak na maayos ang lahat.

Alisin ang hindi nagamit na mga plugin ng CSS WordPress

Narito ang ilang mga plugin na maaari mong gamitin upang alisin ang hindi nagamit na CSS sa WordpPress:

1. Asset CleanUp: Page Speed ​​Booster

Asset CleanUp: Page Speed ​​Booster ginagawang madali ang pag-alis ng hindi nagamit na CSS at JSin WordPress kahit para sa mga nagsisimula. Ang kailangan mo lang gawin ay i-deactivate ang isang partikular na CSS na hindi kailangan para sa isang partikular na page.

Maaari ka ring mag-deactivate para sa mga indibidwal na post lamang. Gamit ang premium na bersyon, maaari mong i-deactivate ang hindi nagamit na CSS/JS sa pamamagitan ng mga plugin.

Ang plugin na ito ay isang kumpletong plugin ng pagganap na may maraming iba pang mga pagpipilian upang mapabilis ang WordPress. Ang pag-alis ng Hindi Nagamit na CSS/JS ay bahagi lamang nito.

Sa post na ito, ginamit ko ang plugin na ito ay may gabay.

2. WP Rocket

WP Rocket ay ang numero unong WordPress premium performance plugin. Kung ikaw ay isang noob, ang ibig kong sabihin ay kung hindi ka nakaranas o komportable sa WordPress, kung gayon ang WP Rocket ay ang pinakamadaling paraan upang alisin ang hindi nagamit na CSS para sa.

Kailangan mong bilhin ang plugin, kapag nagawa mo na, maaari mong i-download ito mula sa iyong account o tingnan ang iyong email para sa isang link sa pag-download.

I-install ang plugin sa pamamagitan ng Dashboard>plugin>Add new>Upload.

Mag-navigate lamang sa mga setting ng WP Rocket pagkatapos ay mag-click sa tab na "File Optimization". Pagkatapos ay mag-scroll pababa at makikita mo ang "Alisin ang Hindi Nagamit na CSS," lagyan ng tsek ang kahon, i-save, at i-clear ang cache.

3. Perfmatters

Mga Perfmatter ay isang premium na plugin na binuo ni Brian Jackson at ng kanyang kapatid na si Brett Jackson. Makakatulong ang plugin na ito na alisin ang hindi nagamit na CSS nang napakadali.

Una, kailangan mong bilhin ang plugin. Pagkatapos ay i-install ito. I-activate ang lisensya. Kapag nag-navigate ka sa mga setting, i-on ang script manager.

Pumunta ka lang sa anumang page o post sa website mo, makikita mo ang icon ng script manager sa dashboard menu, i-click mo ito. Magagawa mong alisin ang hindi nagamit na CSS at JS mula sa pahina o sa buong mundo.

Ang plugin na ito ay isang plugin ng pagganap, ay kasama ng maraming iba pang mga pagpipilian upang mapabilis ang WordPress. Ang pag-alis ng hindi nagamit na CSS/JS ay bahagi nito.

4. CSS JS Manager

CSS JS Manager maaaring partikular na alisin ang CSS o JS mula sa Mobile o Desktop. Depende sa gusto mong maabot.

Maaari ding ipagpaliban ng plugin na ito ang paglo-load ng mga CSS o JS file.

Konklusyon

Kung marami kang hindi nagamit na CSS at JS, mapapansin mo ang malaking pagpapabuti sa bilis at mga marka ng pagganap.

Maaaring imposibleng alisin ang lahat ng hindi nagamit na CSS ngunit maaari mong dalhin ang mga ito sa pinakamababa. Gumagamit ako ng Asset CleanUp para alisin ang hindi nagamit na CSS para sa TargetTrend.

Tandaan, mag-optimize ngunit huwag maging masyadong nahuhumaling dito, maliban kung gusto mo ang hitsura ng iyong site ang pinakamabilis na website sa mundo.

Din basahin ang:

Paano Tanggalin ang mga mapagkukunan ng pag-block sa pag-render sa WordPress

Paano gawing napakabilis ang WordPress

Paano magdala ng trapiko sa iyong blog