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

<?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..

performa web/blog kita bisa cek di hxxps://developers.google.com/speed/articles/use-compression dan hxxp://gtmetrix.com

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

  <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
  
  Spoiler

  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;
?>

  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:

  <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 inilah mengapa file Javascript juga harus di kompresi (baca di point terakhir), krn utk mendukung fitur kompresi berjalan dgn semestinya dan maksimal.
  
  efek dr Plugins HTML Compression ini akan sangat terasa ketika load (mengunjungi web/blog), bandingkan ketika HTML Compression ter-install dan yg tidak terinstall, bisa dilihat dgn page view sources. performa bisa cek di hxxps://developers.google.com/speed/articles/use-compression dan hxxp://gtmetrix.com
• Cache plugins
  Banyak beredar cache plugins, saya gag mau men-judge mana yg bagus dan mana yg gag bagus. kegunaan plugins cache ini bisa diaplikasiken dgn plugin cache jg intinya juga mengurangi load CPU biar memory gag hot krn pengambilan data di MySQL, trutama jika web/blog memiliki trepik yg lumayan gede dan imagesnya berjubel. Di Hostgator sendiri lebih prefer menggunakan WP Super Cache, tapi kkurangannya adl HostGator menerapkan maksimal inode 250K, smentara plugins WP Super Cache bisa menghasilkan ribuan static page dlm waktu sebntar saja trutama web/blog bertraffic besar.
  
  Bisa ditambahin dgn script cache utk .HTACCESS file
  
  Spoiler

  PHP:

  # BEGIN Compress text files
<ifModule mod_deflate.c>
  <filesMatch "\.(css|js|x?html?|php)$">
    SetOutputFilter DEFLATE
  </filesMatch>
</ifModule>
# END Compress text files
 
# BEGIN Expire headers
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
 
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "max-age=2592000, public"
  </filesMatch>
  <filesMatch "\.(css)$">
    Header set Cache-Control "max-age=604800, public"
  </filesMatch>
  <filesMatch "\.(js)$">
    Header set Cache-Control "max-age=216000, private"
  </filesMatch>
  <filesMatch "\.(x?html?|php)$">
    Header set Cache-Control "max-age=600, private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers
 
# BEGIN Turn ETags Off
<ifModule mod_headers.c>
  Header unset ETag
</ifModule>
FileETag None
# END Turn ETags Off
 
# BEGIN Remove Last-Modified Header
<ifModule mod_headers.c>
  Header unset Last-Modified
</ifModule>
# END Remove Last-Modified Header  
  hxxp://www.ads-id.com/forums/showthread.php/154600-ask-plugin-buat-nge-chace-wp-multisite-biar-load-cepet?p=2015757#post2015757

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

Spoiler

PHP:

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 berfungsi mengkompresi sebuah halaman menjadi GZIPped, performa bisa cek di hxxps://developers.google.com/speed/articles/use-compression dan hxxp://gtmetrix.com

Spoiler

PHP:

add_action('init','gzip_enable');

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


Plugins WP remove version:

Spoiler

PHP:

function wp_minggat()
{
    return '';
}

add_filter('the_generator', 'wp_minggat');


Plugins Anti Email Spam Bot

Spoiler

PHP:

$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

 

bahasanya berat

 

yah mo mulai kapan gan kalo cuman jd follower, ngalor melok ngaloor.. ngidul ngikuut ngiduul,
apalagi kalo idup 100% dr hasil onlen, develop blog, perang SEO & memenangkanya dll.. ngupdate blog +nunggu +berharap someone click on your ads for a dime or buying your affiliate product
secara sy kuli onlen dan bukan pegawe negeri

 

Mantab sharenya Gan. Ane sering test loading speed pake GTMetrix dan dikit-dikit bisa ngerti beberapa item yang disarankan GTMetrix untuk diperbaiki supaya load speed lebih baik. Berhubung gak bisa coding, biasanya di wordpress ane coba cari2 plugin ini dan plugin itu aja. Dan beberapa item merah dari hasil GTMetrix belum bisa ane perbaiki. Kalo gak salah salh satunya compress CSS itu.

Ane minat tuk coba2 ngikutin share agan di atas deh.

anyway.. thanks ya Gan.

 

dulu sering ngamatin kecepatan di gtmetrix, namun kemudian ane tinggalin karena beberapa hal gak mudeng. lebih sibuk isi konten, cepet atau gak, urusan lain. Mudah-mudahan dengan cara ini, ane bisa nyempetin praktek dan memperhatikan kecepatan load kembali. thank mastah.

 

Ninggalin jejak dl, besok baru praktek, udah malam

 

wah bingung nih gak paham kata simpelnya gm yah hehe css gk paham dibuat bahasa gini jd stress bacanya

 

mash bingung nih. ctrl + D dulu buat pelajaran tambahan

 

btw kalo javsacriptnya dikompres apakah aman untuk iklan adsense?

 

Ini yg ane cari, keren gan ane TKP dulu. Thanks ya

 

Kalau ane pake trik htaccess untuk mengaktifkan server yang berpengaruh ke kecepetan...

Cobain deh dijamin wuzz wuzz wuzz

 

ada disini jg gan hxxp://www.ads-id.com/forums/showthread.php/154600-ask-plugin-buat-nge-chace-wp-multisite-biar-load-cepet?p=2015757#post2015757 bisa diaplikasiken dgn plugin cache jg intinya juga mengurangi load CPU biar memory gag hot krn pengambilan data di MySQL

ini ttg code-nya GA kan? kalo iya, tidak masalah gan selama script dipasang di web/blog dan bisa menampilkan iklan GA (tidak error). krn jika script GA trdapat kkliruan kompres maka dia sendiri tdk menampilkan iklan (error) ditunjukkan dengan ..blablabla.. error in line sekian.. dan biasanya halam tsb tidak selesai load hingga footer krn 'tersandung' line dimana terdapat script yg keliru kompresi.

utk kompresi Javascript sebaiknya memang menggunakan tools, banyak yg beredar online secara gratis.

 

gan, klo buat ngecilin secara massal image size yg sudah ada dipostingan gimana ya? saya coba pake wp smush it tapi capek klo satu2 klo ambil yg bulk smush it, blog jadi time out. intinya sih mau ngurangin pemakaian bandwidth blog wallpaper ane. sehari masak sampa 11 GB padahal udah pake cloudflare dan w3 total cache

 

wajar keknya kalo wallpaper blog gede bandwidth-nya gan coba dipake _https://wordpress.org/extend/plugins/ewww-image-optimizer/
trus ditambah images hotlink blocker. tp sebenernya Smush It udah sangat membantu gan, Yahoo! ajah pake script ituh

so far utk masalah images sy menghandle dgn bbrapa trik:

• images secara default ter-upload ke domain-saya.com/images/gambar.jpg dan bukan domain-saya.com/wp-content/upload/2013/Bulan/tanggal/gambar.jpg
• jika pakai timthumb maka timthumb juga diarahkan ke domain-saya.com/images/ termasuk cache foldernya domain-saya.com/images/cache
  timthumb versi sekarang cukup handal krn cache images disimpan dlm bentuk .TXT tp perhatikan security bugs yg sering diincar cracker dgn memanfaatkan loophole script timthumb
• post images di artikel jg sy gunakan script timthumb utk memanggil images, jd reduksi udah dimulai dr sini, dan hanya terload ke ukuran yg sesungguhnya jika visitor mengklik images (sy tidak melemparnya ke halaman generated pages images).
  tp kalo dr cerita agan, pasti akan kerepotan sekali krn tentunya web/blog udah memiliki konten yg seabregh

 

Berarti kalau pakai ini sudah ga perlu w3 total cache gan? (ga mudeng )

Kalau cek di gtmetrix yang sering dapat nilai jelek adalah Remove query strings from static resources gimana ngatasin nya gan? ane coba2 terapin yang dari hasil google masukin code-code di function tapi sepertinya ga fungsi.

 

thanks mastah, ctrl-D buat belajar

 

plugins cache akan lebih baik ttep pake gan,
soalnya plugins cache-kan mampu meng-handle dynamic pages menjadi static pages dan menyimpannya di host (akan dihapus dlm jangka waktu tertentu sesuai settingan kita),

krn yg perlu diingat adl, segala jenis CMS berbasis MySQL/database dlm hal ini WP, berbentuk dynamic krn dia akan 'memanggil' data utk ditampilkan di sebuah halaman (pages), nah kegiatan 'memanggil/meng-query/meng-crawling' data dari database/SLQ inilah yg membuat load CPU naik, hot, panas yg artinya terdapat aktifitas lalu lintas data => imbas dari traffic.

sedangkan script diatas tidak mampu melakukannya dan hanya membuat virtual cache utk sesaat ajah (header handler) dan tidak menyimpannya di host, dan hanya virtual di cache visitor bukan di host si website (juga sementara saja)

Remove query strings => kan ada keterangan resources-nya apaan gan, e.g CSS, javascript dll yg biasanya jg menampilkan URL dimana file² yg bermasalah tersebut tersimpan, nah benerkan-lah di file tsb
e.g CSS, walopun udah kita kompres tapi kalo ada ID, Class yg tidak berfungsi/tidak ada fungsinya maka bagian tsb lebih baik di hapus dari dalam file CSS
begitupun utk file² yg lain, misal yg paling boros adalah penggunaan file jQuery, sering kali krn ketidaktahuan kita kita memakai beberapa file jQuery resources, misalnya jQuery.min dan jQuery UI, yg sebenernya masih bisa dihandle dgn 1 resources ajah, tp krn kita dapetnya online yah akirnya asal tanam.
kecuali jika memang fungsi² masing² file tadi tidak bisa dihandle 1 resources dan atau berfungsi saling melengkapi.

 

Oke mastah segera ane praktekan.. biyar website ane makin wuz waz wuz

 

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

Ninggalin jejak dulu deh

 

Ada yang baru neh saya liat (panggil.php), Nice Share Mastah ..