CSS Minifier

Ano ang CSS minifier?

Nilalayon ng CSS minifier na paliitin ang mga CSS file sa mga website. Ang konseptong ito, na ginagamit bilang katumbas sa Ingles (CSS Minifier), ay may kasamang pagsasaayos sa mga CSS file. Kapag ang mga CSS ay inihanda, ang pangunahing layunin ay para sa mga web site administrator o coder na suriin nang tama ang mga linya. Samakatuwid, ito ay binubuo ng napakaraming linya. May mga hindi kinakailangang linya ng komento at puwang sa pagitan ng mga linyang ito. Ito ang dahilan kung bakit nagiging napakahaba ng mga CSS file. Ang lahat ng mga problemang ito ay inalis gamit ang CSS minifier.

Ano ang ginagawa ng CSS minifier?

Kasama ang mga pagbabagong ginawa sa mga CSS file; nababawasan ang mga sukat, inaalis ang mga hindi kinakailangang linya, tinatanggal ang mga hindi kinakailangang linya ng komento at puwang. Bukod dito, kung higit sa isang code ang kasama sa CSS, tatanggalin din ang mga code na ito.

Mayroong iba't ibang mga plug-in at application para sa mga operasyong ito na maaaring manual na gawin ng karamihan sa mga user. Lalo na para sa mga taong gumagamit ng WordPress system, ang mga prosesong ito ay maaaring i-automate gamit ang mga plugin. Kaya, ang posibilidad ng paggawa ng mga pagkakamali ay inalis at mas epektibong mga resulta ay nakuha.

Ang mga taong hindi gumagamit ng WordPress para sa CSS o hindi gustong mas gusto ang mga umiiral na plugin ay maaari ding gumamit ng mga online na tool. Sa pamamagitan ng pag-download ng CSS sa mga online na tool sa internet, ang mga umiiral na file sa CSS ay nababawasan sa pamamagitan ng paggawa ng mga pagbabago. Matapos ang lahat ng mga proseso ay tapos na, ito ay sapat na upang i-download ang mga umiiral na CSS file at i-upload ang mga ito sa website. Kaya, ang mga operasyon tulad ng CSS Minify o pag-urong ay matagumpay na makukumpleto, at lahat ng posibleng problema na maaaring maranasan sa pamamagitan ng CSS para sa site ay aalisin.

Bakit dapat mong paliitin ang iyong mga CSS file?

Ang pagkakaroon ng mabilis na website ay hindi lamang nagpapasaya sa Google, nakakatulong ito sa iyong website na mas mataas ang ranggo sa mga paghahanap at nagbibigay din ng mas magandang karanasan ng user para sa iyong mga bisita sa site.

Tandaan, 40% ng mga tao ay hindi man lang naghihintay ng 3 segundo para mag-load ang iyong homepage, at inirerekomenda ng Google na mag-load ang mga site sa loob ng 2-3 segundo nang higit pa.

Ang pag-compress gamit ang CSS minifier tool ay may maraming benepisyo;

• Ang mas maliliit na file ay nangangahulugan na ang kabuuang sukat ng pag-download ng iyong site ay nababawasan.
• Ang mga bisita sa site ay maaaring mag-load at ma-access ang iyong mga pahina nang mas mabilis.
• Nakukuha ng mga bisita sa site ang parehong karanasan ng user nang hindi kinakailangang mag-download ng mas malalaking file.
• Ang mga may-ari ng site ay nakakaranas ng mas mababang gastos sa bandwidth dahil mas kaunting data ang ipinapadala sa network.

Paano gumagana ang CSS minifier?

Magandang ideya na i-back up ang mga file ng iyong site bago paliitin ang mga ito. Maaari mo pa itong gawin nang isang hakbang at paliitin ang iyong mga file sa isang pagsubok na site. Sa ganitong paraan masisiguro mong gumagana ang lahat bago gumawa ng mga pagbabago sa iyong live na site.

Mahalaga rin na ihambing ang bilis ng iyong page bago at pagkatapos paliitin ang iyong mga file upang maihambing mo ang mga resulta at makita kung may epekto ang pag-urong.

Maaari mong suriin ang pagganap ng bilis ng iyong pahina gamit ang GTmetrix, Google PageSpeed ​​​​Insights, at YSlow, isang open source na tool sa pagsubok sa pagganap.

Ngayon tingnan natin kung paano gawin ang proseso ng pagbabawas;

1. Manu-manong CSS minifier

Ang manu-manong pag-urong ng mga file ay nangangailangan ng malaking oras at pagsisikap. Kaya mayroon ka bang oras upang alisin ang mga indibidwal na puwang, linya at hindi kinakailangang code mula sa mga file? Hindi siguro. Bukod sa oras, ang proseso ng pagbabawas na ito ay nagbibigay din ng higit na puwang para sa pagkakamali ng tao. Samakatuwid, ang pamamaraang ito ay hindi inirerekomenda para sa pag-urong ng mga file. Sa kabutihang palad, maraming mga libreng online na tool sa minification na nagbibigay-daan sa iyong kopyahin at i-paste ang code mula sa iyong site.

Ang CSS minifier ay isang libreng online na tool para maliitin ang CSS. Kapag kinopya at i-paste mo ang code sa field ng text na "Input CSS", pinapaliit ng tool ang CSS. May mga opsyon upang i-download ang minified na output bilang isang file. Para sa mga developer, nagbibigay din ang tool na ito ng API.

Ang JSCompress , ang JSCompress ay isang online na JavaScript compressor na nagbibigay-daan sa iyong i-compress at bawasan ang iyong mga JS file hanggang 80% ng kanilang orihinal na laki. Kopyahin at i-paste ang iyong code o i-upload at pagsamahin ang maraming file na gagamitin. Pagkatapos ay i-click ang "Compress JavaScript - Compress JavaScript".

2. CSS minifier na may mga PHP plugin

Mayroong ilang magagandang plugin, parehong libre at premium, na maaaring paliitin ang iyong mga file nang hindi kinakailangang gumawa ng mga manu-manong hakbang.

• Pagsamahin,
• maliitin,
• refresh,
• Mga Plugin ng WordPress.

Ang plugin na ito ay higit pa sa pagpapaliit ng iyong code. Pinagsasama nito ang iyong mga CSS at JavaScript file at pagkatapos ay pinaliit ang mga file na ginawa gamit ang Minify (para sa CSS) at Google Closure (para sa JavaScript). Ginagawa ang pagpapaliit sa pamamagitan ng WP-Cron upang hindi ito makaapekto sa bilis ng iyong site. Kapag nagbago ang nilalaman ng iyong mga file ng CSS o JS, muling ire-render ang mga ito para hindi mo na kailangang alisan ng laman ang iyong cache.

Ang JCH Optimize ay may ilang magagandang feature para sa isang libreng plugin: pinagsasama at pinapaliit nito ang CSS at JavaScript, pinapaliit ang HTML, nagbibigay ng GZip compression upang pagsamahin ang mga file, at sprite rendering para sa mga larawan sa background.

CSS Minify , Kailangan mo lang i-install at i-activate para maliitin ang iyong CSS gamit ang CSS Minify. Pumunta sa Mga Setting > CSS Minify at paganahin ang isang opsyon lang: I-optimize at maliitin ang CSS code.

Fast Velocity Minify Sa mahigit 20,000 aktibong pag-install at limang-star na rating, ang Fast Velocity Minify ay isa sa mga pinakasikat na opsyon na available para sa pag-urong ng mga file. Upang magamit ito, kailangan mo lamang i-install at i-activate.

Pumunta sa Settings > Fast Velocity Minify. Dito makikita mo ang ilang mga opsyon para sa pag-configure ng plugin, kabilang ang mga advanced na JavaScript at CSS na pagbubukod para sa mga developer, mga opsyon sa CDN, at impormasyon ng server. Ang mga default na setting ay gumagana nang maayos para sa karamihan ng mga site.

Ang plugin ay gumaganap ng pag-urong sa frontend sa real time at sa panahon lamang ng unang hindi naka-cache na kahilingan. Pagkatapos maproseso ang unang kahilingan, ihahatid ang parehong static na cache file sa iba pang mga page na nangangailangan ng parehong hanay ng CSS at JavaScript.

3. CSS minifier na may mga plugin ng WordPress

Ang CSS minifier ay isang karaniwang tampok na karaniwan mong makikita sa mga plugin ng pag-cache.

• WP Rocket,
• W3 Kabuuang Cache,
• WP SuperCache,
• WP Pinakamabilis na Cache.

Inaasahan namin na ang mga solusyon na ipinakita namin sa itaas ay napaliwanagan ka kung paano gawin ang CSS minifier at mauunawaan mo kung paano mo ito mailalapat sa iyong website. Kung nagawa mo na ito dati, ano pa ang mga paraan na ginamit mo para mapabilis ang iyong website? Sumulat sa amin sa seksyon ng mga komento sa Softmedal, huwag kalimutang ibahagi ang iyong mga karanasan at mungkahi upang mapabuti ang aming nilalaman.