Paano Minify ang HTML, CSS at JavaScript Gamit ang Autoptimize Plugin

Nagbibigay halaga ang Google at iba pang Mga Search Engine sa iyong website kung mabilis itong naglo-load. Dahil wala sa mga manonood ang may maraming mga pasyente na maghintay nang matagal upang matingnan ang iyong nilalaman at mayroon ka lamang 1.5 segundo upang makuha ang kanilang pansin. Kung ang iyong site ay tumatagal ng matagal upang buksan, karaniwang nawawalan ka ng iyong mga manonood. Kaya, ito ay mahalaga upang mapabilis ang iyong website. Mayroong maraming mga paraan na maaari mong mai-optimize ang iyong site. Ngunit ang isa sa mga pinakamahalagang bahagi ay Paliitin ang HTML, CSS at JavaScript.


Kung sakaling gumawa ka ng isang pagsubok sa Bilis Google PageSpeed o GTmetrix, marahil nakikita mo ang pagpipilian na iyon.

Ang bawat website na naglo-load na may maraming mga file ay naglalaman ng HTML, CSS at JavaScript. At ang karamihan sa mga file ay may kasamang maraming espasyo, komento, Bloke ng mga limitasyon atbp. Kaya, makabuluhang nangangailangan ng dagdag na oras upang maayos na mai-load nang maayos.

Depende din ito sa kalidad ng Tema. Halimbawa, ang isang kalidad ng kalidad ng tema ay palaging mas mahusay kaysa sa isang Libreng tema. Ang mga premium na tema ay mahusay na naka-code at itinayo ng mga highly skilled developer. Ngunit ang lahat ng mga tema ay hindi pareho at may iba’t ibang uri ng pag-andar. Kaya, sa pamamagitan ng Minifying ang mga HTML, CSS at JavaScript file, maaari mong madiskarteng taasan ang bilis ng iyong site at mapasaya ang iyong mga bisita.

Ano ang Minify at Bakit Mapakinabangan?

Minification ay isang programming language na nag-aalis ng lahat ng mga hindi kinakailangang character mula sa source code nang hindi binabago ang pag-andar nito. Ang mga hindi kinakailangang character na karaniwang naglalaman ng “mga character na puting espasyo, mga bagong linya ng linya, komento, at hadlangan ang mga blocker ”. 

Bago Minify at Pagkatapos Minify

Ginagamit ang mga ito upang magdagdag ng kakayahang mabasa sa code ngunit hindi kinakailangan upang maisagawa ito. Sa ganitong paraan binabawasan ang dami ng code na kailangang ilipat sa web at mai-save ang iyong bandwidth. Kaya sa pamamagitan ng minifying HTML, CSS at JavaScript, madali mong alisin ang mga hindi kinakailangang character mula sa iyong site at makabuluhang tumaas bilis ng site mo. 

Paano Minify ang HTML, CSS at JavaScript

Mayroong dalawang mga paraan na maaari mong Minify ang HTML, CSS & JavaScript. Maaari mo ring gawin sa pamamagitan ng pag-edit ng iyong code ng tema o maaari mong gamitin ang isang plugin ng WordPress, na tinawag Autoptimize. Sa artikulong ito, ipapakita namin sa iyo ang parehong proseso tungkol sa Paano Minify ang HTML, CSS at JavaScript.

Upang malaman ang eksaktong HTML, CSS o JavaScript file na nagdudulot ng isyu, kailangan mong suriin ito sa anumang tool sa pagsubok ng bilis ng site tulad ng Tool ng Google PahinaSpeed o GTmetrix. Dahil hindi lahat ng iyong mga file ay naglalaman ng ganitong uri ng mga hindi kinakailangang character.

Matapos suriin ang resulta ng iyong site, makuha mo ito. Narito ang isang larawan sa ibaba ng aking site na isinasaalang-alang pag-aayos ng CSS at JavaScript.

Minifying Css, JavaScript

Nagtatanggol ito sa kalidad ng iyong tema. Kaya, walang mag-alala kung nakikita mong pareho ang sinabi sa Minify at mas mahusay na makakuha ng isang tema ng Premium.

Mayroong ilang mga online tool na maaari mong Minify ang HTML, CSS at JavaScript code. 

Bago ka gumawa ng anumang pagbabago, kumuha ng isang backup ng file na iyon.

# 1 Minify Code:

Minify ang Tool Tool

Minify Code ay isang tool na All in One Minifying. Maaari itong Paliitin ang iyong JavaScript, CSS at HTML code. Ang kailangan mo lang kopyahin ang HTML o CSS o JavaScript code at i-paste dito. Pagkatapos ay Mag-click sa Minify Pagpipilian. Ang tool na ito ay awtomatikong Minify ang iyong code. Pagkatapos nito, kopyahin ang Minified code sa file na iyon.

Maaari mo ring Minamali ang iyong CSS at JavaScript code tulad ng HTML code na may tool na iyon.

# 2 Willpeavy:

Willpeavy

Ang Willpeavy ay isa pang mahusay na tool upang Paliitin ang HTML mga code. Ang tool na ito ay gumagana sa parehong paraan tulad ng ginagawa ng minify code. Minamin nito ang HTML at anumang CSS o JS na kasama sa iyong markup. Upang magamit ang tool na ito, kailangan mo lamang kopyahin ang iyong code dito at mag-click sa Minify.

Paliitin ang Paggamit ng Autoptimize Plugin

Autoptimize

Kung hindi ka pamilyar sa naturang coding, mas mahusay na gumamit ng isang plugin at inirerekomenda para sa mga nagsisimula. Kaya narito ang Autoptimize plugin para sa WordPress mga gumagamit.

Pinatunayan ang pag-optimize ng lahat ng mga script at istilo ng estilo at ginagawang mas maliit na naglo-load nang mabilis. Binabawasan nito ang lahat ng HTML, CSS & Ang Javascript code mismo at ginagawang magaan ang iyong pahina. Sa Minification, nagdadagdag ang plugin na ito ay nag-e-expire ang mga header at gumagalaw ng mga estilo sa ulo ng pahina at maaaring ilipat ang mga script sa footer.

Paganahin ang Mga Setting ng Inirerekumenda

Madali mong magawa ang lahat ng mga bagay mula sa mga setting ng plugin. Matapos i-activate ang plugin na ito, pumunta sa Mga setting> Autoptimize.  Mag-click sa pindutan ng “Ipakita ang mga advanced na setting”.

Nasa HTML seksyon, suriin ang “I-optimize ang HTML Code” at “Panatilihin ang mga komento ng HTML” para sa mas mabilis na pagganap.

Paganahin ang mga pagpipilian sa HTML

Nasa JavaScript seksyon, paganahin ang “Optimize JavaScript Code”. Maaari mo ring paganahin ang “Force JavaScript in” upang ma-load ang JS nang maaga at mabawasan ang pagkakataon ng mga error sa JS. Sa kaso kung ang iyong JS ay sumisira ng mga script, kung gayon maaari mong paganahin ang “Magdagdag ng try-catch wrapping”.
Paganahin ang Mga Pagpipilian sa JavaScript

Sa CSS seksyon, paganahin ang “Optimize CSS Code”, “Gayundin pagsasama-sama ng inline CSS”. Maaari mo ring paganahin ang “Inline at Defer CSS” kung na-minulate mo ang CSS. Subukan ang tool na ito upang mai-minimize ang iyong CSS at i-paste ito sa kahon.

I-optimize ang mga pagpipilian sa CSS

Ipasok ang iyong CDN URL sa patlang na “CDN Base URL”. Halimbawa, ‘//cdn.example.com/’.

At huling, paganahin ang “I-save ang pinagsama-samang script / css bilang static file”. Ngunit siguraduhing, maayos na mahawakan ng iyong webserver ang compression at pag-expire.

Paganahin ang mga pagpipilian sa CDN

Matapos mong Minamin ang iyong code, huwag kalimutang suriin muli ang bilis ng iyong site. Pagkatapos ihambing ito sa mga nakaraang resulta. Kung nagkakaroon ng problema ang iyong site o hindi nagpakita ng maayos, maaari mong subukan na limasin ang Cache

Konklusyon

Minifying HTML, CSS at JS ay kapaki-pakinabang para sa iyong site. Tinatanggal nito ang mga hindi kinakailangang mga character ng code at pinaliit ang mga ito na palakaibigan sa browser. Sa ganitong paraan maaari mong pagbutihin ang bilis ng pag-load ng site.

Kung nakakatulong ang tutorial na ito upang Minamin ang HTML, CSS at JavaScript, mangyaring ibahagi ang artikulong ito sa Facebook, Twitter, Google+.

Mga Kaugnay na Artikulo,

  • Paano Pag-gamiting Pag-cache ng Browser sa WordPress
  • Paano i-optimize ang Database ng Database Gamit ang WP-Sweep
  • 7 Pinakamahusay na Imahe ng Optimizer para sa WordPress 2017
  • Paano Madaling Paganahin ang Gzip Compression sa WordPress para sa Mas Mabilis na Paglo-load
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map