Compressed file² Javascript, CSS buat load website makin ringan - AMING.id™
Hi, guys! welcome to my blog, AMING.id™ | Register/Sign In

Sunday, 21 April 2013

Compressed file² Javascript, CSS buat load website makin ringan

Trik ini lebih buat End-user Wordpress trutama yg hobby gonta-ganti theme dan gunain theme orang laen, yg artinya jg kita gag tau kkuatan 'jeroan' theme tsb,

Banyak yg gag tau bahwa performa sebuah web/blog selain terpengaruh dr CMS yg dipake jg banyaknya fungsi² tambahan yg dijejalkan e.g javascript (trutama jQuery), dan fungsi² penunjang lainnya, atau jejelin/panggil file tambahan yg lainnya e.g

<?php include(TEMPLATEPATH . '/ini-file-1.php'); ?> <?php include(TEMPLATEPATH . '/ini-file-2.php'); ?> dst...

blon lagi kalo kejar tayang asal install plugins, buwat inilah buwat itulah.. apalagi kalo udah menyangkut ke SEO, saya sendiri pernah dimintain tolong sama seorang temen utk designken theme buat blognya skaligus installin.. dan ketika masuk ke dashboard.. buset dah hampir 60an plugins aktif didalamnya ..

CSS
okey start ke kompres file CSS. banyak dari kita yg menganggap bahwa file CSS hanyalah file utk mengatur susunan, design, warna, font dll aja, dgn file yg memanjang kebawah sampai ratusan bahkan ribuwan lines.. pdahal kita bisa mengkompresnya menjadi satu baris saja dan hal ini selalu saya aplikasikan pd stiap theme yg saya develop ataupun re-coding.. gmana caranya?

  • kita bisa manfaatin free tool compression yg beredar secara online, misal, hxxp://www.homepage-performance.de/en/css-compressor-tool.html , hasil dari kompressi tadi langsung aja kita jadikan file CSS, tapi sblumnya akan lebih baik di backup dulu file²nya, jd kalo ada error masih punya masternya
  • Biasanya, sebelum langsung dieksekusi di header.php dengan memanggil CSS file tsb dgn:
    <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" type="text/css" media="screen, projection" />
    saya melewatkannya melalui sebuah fungsi kompresi sendiri, caranya saya membuat file PHP lain, taruhlah diberi nama panggil.php
    <?php
    $expiry = 3;
    if($_GET["exp"]) {
    $expiry = $_GET["exp"];
    }
    for($i=0; $i<100; $i++) {
    $file = $_GET["f$i"];
    if($file) {
    if(file_exists($file)) {
    $ext = strtolower(substr($file, strrpos($file, ".")));
    if($ext == ".css" || $ext == ".js") {
    $content .= file_get_contents($file);
    if(!$mytype) {
    $mytype = $ext;
    }
    }
    } else {
    $content .= "// FILE NOT FOUND '$file'\n\n";
    }
    } else {
    break;
    }
    }
    if($_GET["cache"]) {
    $expiresOffset = 3600 * 24 * $expiry;
    } else {
    $expiresOffset = 20;
    }
    if($mytype == ".css") {
    $type = "text/css";
    } elseif($mytype == ".js") {
    $type = "text/javascript";
    } else {
    die();
    }
    header("Content-type: $type; charset: UTF-8");
    header("Content-Encoding: gzip");
    header("Expires: " . gmdate("D, d M Y H:i:s", time() + $expiresOffset) . " GMT");
    $compressed = gzencode($content, 9, FORCE_GZIP);
    echo $compressed;
    ?>
by Aming.