Paano Pinaliit ang CSS / JavaScript Files sa WordPress

Gusto mo bang ibawas ang mga file sa iyong WordPress site? Ang pag-minimize sa iyong mga file sa WordPress CSS at Javascript ay maaaring mag-load nang mas mabilis at mapabilis ang iyong WordPress site. Sa gabay na ito, ipapakita namin sa iyo kung paano i-minimize ang mga file ng CSS / Javascript sa WordPress upang mapabuti ang pagganap at bilis.

Paano Pinaliit ang CSS / JavaScript Files sa WordPress

Ano ang Minify at Kailan Kailangan Mo Ito?

Ang terminong ‘Minify’ ay ginagamit upang ilarawan ang isang paraan na ginagawang mas maliit ang laki ng file ng iyong website. Nakakamit nito ang layuning ito sa pamamagitan ng pag-alis ng mga puting espasyo, mga linya, at hindi kinakailangang mga character mula sa source code.

Karaniwan ito ay inirerekomenda na gagamitin lamang para sa mga file na ipinadala sa mga browser ng gumagamit. Kabilang dito ang mga file na HTML, CSS, at JavaScript. Maaari mo ring i-minimize ang mga file ng PHP, ngunit ang PHP ay isang server-side programming language at minifying hindi nito mapapabuti ang bilis ng pag-load ng pahina para sa iyong mga gumagamit.

Ang malinaw na bentahe ng minifying file ay pinabuting WordPress bilis at pagganap. Mas mabilis ang mga compact na file upang i-load at pagbutihin ang bilis ng iyong site.

Gayunpaman, ang ilang mga eksperto ay naniniwala na ang pagpapabuti ng pagganap ay napakaliit para sa karamihan sa mga website at hindi nagkakahalaga ng problema. Binabawasan lamang ng minification ang ilang kilobytes ng data sa karamihan sa mga site ng WordPress. Maaari mong bawasan ang higit pang pageload oras sa pamamagitan lamang ng pag-optimize ng mga imahe para sa web.

Narito ang isang halimbawa ng normal na CSS code:

katawan {
margin: 20px;
padding: 20px;
kulay: # 333333;
background: # f7f7f7;
}
h1 {
laki ng font: 32px;
kulay # 222222;
margin-bottom: 10px;
}

Pagkatapos na mapaliit ang code magiging ganito:

katawan {margin: 20px; padding: 20px; kulay: # 333; background: # f7f7f7} h1 {font-size: 32px; margin-bottom: 10px}

Kung sinusubukan mong makamit ang 100/100 na iskor sa tool ng Google Pagespeed o GTMetrix, pagkatapos ay ang pagbabawas ng CSS at JavaScript ay makabuluhang mapabuti ang iyong iskor.

Ang pagkakaroon ng sinabi na tingnan natin kung paano madaling ibahin ang CSS / JavaScript sa iyong WordPress site.

I-minimize ang CSS / Javascript sa WordPress

Ang unang bagay na kailangan mong gawin ay i-install at i-activate ang plugin ng Mas Pinahusay na WordPress Minify. Para sa higit pang mga detalye

Sa pag-activate, ang plugin ay magdaragdag ng isang bagong item sa menu na may label na ‘BWP Minify’ sa iyong WordPress admin bar. Ang pag-click dito ay magdadala sa iyo sa pahina ng mga setting ng plugin.

BWP I-minimize ang mga setting

Sa pahina ng mga setting, kailangan mong suriin ang unang dalawang pagpipilian upang awtomatikong i-minimize ang mga file ng JavaScript at CSS sa iyong WordPress site.

Maaari mo na ngayong mag-click sa pindutang I-save ang Mga Pagbabago upang i-imbak ang iyong mga setting.

Maraming iba pang mga advanced na opsyon sa pahinang ito. Ang mga default na setting ay gagana para sa karamihan ng mga website, ngunit maaari mong suriin at baguhin ang mga pagpipiliang ito sa isang kaso ayon sa kaso.

Susunod, kailangan mong magtungo sa iyong website. Mag-right click kahit saan at pagkatapos ay piliin ang ‘Tingnan ang Pinagmulang Pahina’ mula sa menu ng browser.

Tingnan ang mapagkukunan ng pahina ng isang WordPress site

Makikita mo na ngayon ang HTML source code na binuo ng iyong WordPress site. Kung titingnan mo nang mabuti, mapapansin mo na ang plugin na ito ay mag-load ng mga file ng CSS / JavaScript mula sa sariling folder ng plugin sa halip ng iyong mga tema at plugin ng WordPress.

Ito ang minified na mga bersyon ng iyong orihinal na mga file na CSS at JavaScript. Ang mas mahusay na WordPress Minify plugin ay panatilihin ang mga ito na naka-cache at maglingkod sa minified bersyon sa mga browser.

Iyon lang