Monday, April 22, 2013

[share] Compressed file² Javascript, CSS buat load website makin ringan

 

 

Feed: Arsip
Posted on: Monday, April 22, 2013 18:29
Author: anonym
Subject: [share] 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 Code:


<?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, :D 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 :P 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 :D
  • Biasanya, sebelum langsung dieksekusi di header.php dengan memanggil CSS file tsb dgn:

PHP Code:


<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 Code:


<?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($filestrrpos($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($content9FORCE_GZIP);
echo 
$compressed;
?>



yg nanti akan ditaruh pada folder yang sama dimana file CSS berada, kemudian di panggil di header.php seperti pada script pemanggil sebelumnya tapi ditambahin dengan

PHP Code:


<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/panggil.php?f0=style.css" type="text/css" media="screen, projection" />





Plugins
selain itu kita bisa gunakan plugins seperti HTML Compression, dimana plugin ini berfungsi utk mengkompressi susunan pemanggilan fungsi² yg udah ter-eksekusi menjadi HTML ketika sebuah website di load, terkecuali hanya utk file² yg mengandung javascript

Integrated functions
ini istilah saya sendiri utk mengurangi penggunaan plugins, selama sebuah fungsi masih bisa di develop didalam sebuah theme maka kita gag perlu menginstall plugins apalagi jika plugins tsb sangatlah simple, kita hanya perlu untuk mengambil fungsi² tsb & mengaplikasikannya didalam file functions.php
e.g Plugins Jangan Suntik-nya om TeguhAditya, kita hanya perlu mengambil fungsinya dan mempaste di file function.php

PHP Code:


global $user_ID; if($user_ID) {
    if(!
current_user_can('level_10')) {
        if (
strlen($_SERVER['REQUEST_URI']) > 255 || 
            
stripos($_SERVER['REQUEST_URI'], "eval(") || 
            
stripos($_SERVER['REQUEST_URI'], "CONCAT") || 
            
stripos($_SERVER['REQUEST_URI'], "UNION+SELECT") || 
            
stripos($_SERVER['REQUEST_URI'], "base64")) {
                echo 
"Sorry, can't inject!";
                @
header("HTTP/1.1 414 Request-URI Too Long");
                @
header("Status: 414 Request-URI Too Long");
                @
header("Connection: Close");
                @exit;
        }
    }




Plugins GZIP Enable

PHP Code:


add_action('init','gzip_enable');

function 
gzip_enable ()
{
    
ob_start('ob_gzhandler');




Plugins WP remove version:

PHP Code:


function wp_minggat()
{
    return 
'';
}

add_filter('the_generator''wp_minggat'); 




Plugins Anti Email Spam Bot

PHP Code:


$anti_callback "anti_callback_entity";

add_filter ('the_content''anti_email_spam'15);

function 
anti_callback_entity ($matches)
{
  
$email substr ($matches[0], 1);
  return 
$matches[1].'<a href="mailto:'.antispambot ($email, true).'">'.antispambot ($email).'</a>';
}

function 
anti_callback_js ($matches)
{
  
// Array[0] = email address
  
$parts explode ('@'substr ($matches[0], 1));
  
$str $matches[1].'<script type="text/javascript">';
  
$str .= 'var username = "'.$parts[0].'"; var hostname = "'.$parts[1].'";';
  
$str .= 'document.write("<a href=" + "mail" + "to:" + username + ';
  
$str .= '"@" + hostname + ">" + username + "@" + hostname + "<\/a>")';
  
$str .= '</script>';
  return 
$str;
}

function 
anti_email_spam ($text)
{
  global 
$anti_callback;
  return 
preg_replace_callback ('/([> ])[A-Z0-9._-]+@[A-Z0-9][A-Z0-9.-]{0,61}[A-Z0-9]\.[A-Z.]{2,6}/i'$anti_callback$text);



dsb..

jQuery/Javascript
terkecuali jika file² jquery tsb custom/kita develop sendiri sesuai dengan kebutuhan, secara umum utk file² jquery saya prefer menggunakan jquery CDN dr Google, Microsoft atau CDN Jquery.com itu sendiri dan menggunakan file ready compressed. tapi kalo file² jQuery tsb merupakan custom, yah kita tetep musti jejelin di host kita sendiri

moga² ada manfaatnya.. nuhun


View article...