Cara Compress CSS, JS, HTML di Wordpress Tanpa Plugin

Cara Compress CSS, JS, HTML di WordPress Tanpa Plugin

Untuk meningkatkan kecepatan loading dari laman situs/blog, Adalah sangat penting untuk memastikan semua aspek pada situs untuk dioptimalkan termasuk HTML, Javascript dan CSS.

Bahkan John Mueller dari Google mengonfirmasi di Twitter bahwa mengkompresi HTML dan CSS adalah sangat berguna. Dia mengatakan, “Sometimes minifying HTML & CSS can reduce the size of the files, so it can certainly be worth looking into that,” saat ada yang menanyakan apakah tindakan meng Compress CSS, JS, HTML bermanfaat.

Berikut tweet tersebut:

https://twitter.com/JohnMu/status/1145227487657517056

Tentu saja itu penting, karena jika laman web membengkak dan besar maka GoogleBot mengalami masalah dalam mengeksekusi konten pada halaman dan akan berdampak pada semua halaman Anda di dalam situs Anda. Namun pada intinya, Compress CSS, JS, HTML di WordPress adalah pilihan yang tepat bukan hanya berguna untuk SEO tetapi juga membuat blog atau website anda nyaman untuk dikunjungi.

Fakta ini tentunya bisa kita manfaat untuk melakukan peningkatan SEO terhadap wesbite kita, saat ini sangat banyak tersedia plugin-plugin yang telah di buat untuk wordpres guna melakukan Compress CSS, JS, HTML di WordPress kita. Namun kali ini kami akan coba membagikan Tip dan cara untuk meng Compress CSS, JS, HTML di WordPress tanpa Plugin.

Cara Compress CSS, JS, HTML di WordPress Tanpa Plugin

Berikut script code fungsional yang dapat digunakan untuk mengkompres baris HTML, Javascript dan CSS, Dengan fungsi untuk menghapus semua spasi tak berguna serta komentar dalam HTML . Fungsi ini juga akan menyimpan komentar penting untuk IE, Google Analytics dan komentar dalam tag skrip.

Anda hanya perlu menambahkan baris code dibawah ini ke file functions.php di template wordpress anda.

Cara Compress CSS, JS, HTML di WordPress Tanpa Plugin
Cara Compress CSS, JS, HTML di WordPress Tanpa Plugin

Script PHP untuk Cara Compress CSS, JS, HTML di WordPress Tanpa Plugin

Script code diBAWAH sudah saya minify, bila ada masalah dan anda menginginkan script aslinya silahkan kunjungi LINK BERIKUT.

<?php 
class WP_HTML_Compression{
protected $compress_css=true;
protected $compress_js=true;
protected $info_comment=true;
protected $remove_comments=true;
protected $html;public function __construct($html){if(!empty($html)){$this->parseHTML($html);}}public function __toString(){return $this->html;}protected function bottomComment($raw,$compressed){$raw=strlen($raw);$compressed=strlen($compressed);$savings=($raw-$compressed)/$raw*100;$savings=round($savings,2);return '<!--HTML compressed, size saved '.$savings.'%. From '.$raw.' bytes, now '.$compressed.' bytes-->';}protected function minifyHTML($html){$pattern='/<(?<script>script).*?<\/script\s*>|<(?<style>style).*?<\/style\s*>|<!(?<comment>--).*?-->|<(?<tag>[\/\w.:-]*)(?:".*?"|\'.*?\'|[^\'">]+)*>|(?<text>((<[^!\/\w.:-])?[^<]*)+)|/si';preg_match_all($pattern,$html,$matches,PREG_SET_ORDER);$overriding=false;$raw_tag=false;$html='';foreach($matches as $token){$tag=(isset($token['tag']))?strtolower($token['tag']):null;$content=$token[0];if(is_null($tag)){if(!empty($token['script'])){$strip=$this->compress_js;}else if(!empty($token['style'])){$strip=$this->compress_css;}else if($content=='<!--wp-html-compression no compression-->'){$overriding=!$overriding;continue;}else if($this->remove_comments){if(!$overriding&&$raw_tag!='textarea'){$content=preg_replace('/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(?:(?!-->).)*-->/s','',$content);}}}else{if($tag=='pre'||$tag=='textarea'){$raw_tag=$tag;}else if($tag=='/pre'||$tag=='/textarea'){$raw_tag=false;}else{if($raw_tag||$overriding){$strip=false;}else{$strip=true;$content=preg_replace('/(\s+)(\w++(?<!\baction|\balt|\bcontent|\bsrc)="")/','$1',$content);$content=str_replace(' />','/>',$content);}}}if($strip){$content=$this->removeWhiteSpace($content);}$html.=$content;}return $html;}public function parseHTML($html){$this->html=$this->minifyHTML($html);if($this->info_comment){$this->html.="\n".$this->bottomComment($html,$this->html);}}protected function removeWhiteSpace($str){$str=str_replace("\t",' ',$str);$str=str_replace("\n",'',$str);$str=str_replace("\r",'',$str);while(stristr($str,'  ')){$str=str_replace('  ',' ',$str);}return $str;}}function wp_html_compression_finish($html){return new WP_HTML_Compression($html);}function wp_html_compression_start(){ob_start('wp_html_compression_finish');}add_action('get_header','wp_html_compression_start'); 
?>

Perhatikan bahwa opsi pengaturan ada pada baris :

protected $compress_css=true; //untuk kompress CSS
protected $compress_js=true; //untuk kompress Javascript
protected $info_comment=true; //untuk membuang comment file
protected $remove_comments=true; //untuk membuang comment file

silahkan anda sesuaikan dengan mengganti opsi true/false

true Berarti anda membolehkannya untuk di Kompres, dan
false berati tidak dilakukan kompres sama sekali


Hasil Nya Setelah di Kompress

Hasil Nya Setelah di Kompres
Hasil Nya Setelah di Kompres

Hasil Nya Sebelum di Kompress

Hasil Nya Sebelum di Kompress
Hasil Nya Sebelum di Kompress

Setelah di kompres maka semua HTML akan di susun dalam satu baris.

BACA:  4 Kesalahan Fatal Yang Sering di lakukan Pada Desain Blog

Script code diatas sudah saya minify, bila anda ingin script aslinya silahkan kunjungi LINK BERIKUT.


disiplin-pakai-masker

Guest Post

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA, Maaf ini untuk menghindari SPAM Robot ! *