Compressor Javascript Terbaik

Akhirnya selesai juga proses DNS resolvingnya. 24 jam saya menunggu untuk bisa mengakses Domain di server hosting yang baru. Sebenarnya sejak tadi malam sudah bisa diakses, karena menurut Hostingnya, perubahan DNS cukup memakan waktu maksimal 3 jam. Tapi memang ISP Telkom tidak mendukung saya untuk bisa segera melakukan migrasi Blog Reyzha. Karena tidak tahan menunggu, siang tadi saya memaksakan pointing domain dari laptop saya.

 

Setelah mempublikasikan kembali Blog Reyzha, saya langsung melakukan aktivitas yang biasa saya lakukan ketika membuat Blog Baru. Yaitu ngoprek tema hehe... Tidak seperti biasanya, mungkin penggunaan W3 Total Cache di rumah baru ini agak dibatasi. Saya masih belum bisa menggunakan W3 Total Cache dengan optimal seperti biasanya. Masih saja error untuk rewrite url pada page caching dan minify. Walaupun semua cara sudah saya coba, pesan error belum juga hilang.

 

Akhirnya saya tetap menggunakan W3 Total cache yang mungkin tidak berjalan secara maksimal. Untuk membantu kinerja Blog Reyzha, sementara saya masih mengkompress secara manual file-file yang berada di CDN. Walaupun sebenarnya CDN sayapun juga tidak berjalan sempurna. Saya hanya meminimalkan ukuran file-file eksternal. Untuk CSS tetap saya gabungkan dan mengaktifkan mod_gzip. Lalu untuk javascript masih juga bengkak ukurannya.

 

Lalu saya bertanya pada Om Google, dimana rumah tukang kompres yang bagus untuk javascript :) . Kemudian saya menemukan compressor yang menurut saya ini terbaik dari yang lainnya. Kenapa saya katakan terbaik, karena sistemnya menggunakan beberapa engine dan dikomparasikan atau dibandingkan. Diantaranya:

 JSMin Dojo ShrinkSafe YUI Compressor Packer gzip

Kompresornya akan menghasilkan banyak output yang bisa kita pilih. Diurutkan mulai dari kompresi terbesar hingga yang tanpa kompresi. Jika pada kompresor online lainnya kita mendapatkan sebuah file output, disini langsung banyak. Jadi bisa dipilih mana yang kualitas kompresinya bagus dan scriptnya berjalan dengan baik. Karena terkadang javascript yang dikompres berlebihan bisa menjadi tidak berfungsi.

 

Bagusnya lagi kompresor ini, output javascript yang dihasilkan masih berjalan normal dengan kompresi maksimal yang mencapai hingga 80% bahkan mungkin lebih. Karena file-file yang saya kompres semua saya pilih yang pemampatannya maksimal. Salah satunya dari ukuran 24kb menjadi 4kb. Hebat kan... Sebelumnya saya kompres dengan tools lain dengan hasil yang tidak sebagus itu malah tidak berjalan javascriptnya.

 

OK langsung saja jika Sobat ingin mencoba silakan mengunjungi TKP. Copy paste saja isi javascriptnya kemudian klik Compressorrate It! Tunggu sebentar dan hasilnya silakan dipilih sesuai ukuran yang ditampilkan di tabel. Hasil yang sangat memuaskan akan Anda dapatkan. Waktu prosesnya juga relatif singkat untuk hasil proses yang dihasilkan beberapa engine sekaligus. Baiklah Sobat, Selamat mencoba CompressorRater dan semoga bermanfaat. :)

04.59 | 4 komentar | Selengkapnya

Menggunakan Mode Gzip Compression

Salah satu cara mengkompres halaman situs Anda adalah dengan gzip. Ini akan memperkecil ukuran html file. Jika mengaktifkan melalui .htaccess Anda, tambahkan kode berikut.

Cara 1 Melalui .htaccess

php_value output_handler ob_gzhandler

Untuk spesifikasi, tambahkan juga ini.

<ifModule mod_gzip.c>

  mod_gzip_on Yes

  mod_gzip_dechunk Yes

  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$

  mod_gzip_item_include handler ^cgi-script$

  mod_gzip_item_include mime ^text/.*

  mod_gzip_item_include mime ^application/x-javascript.*

  mod_gzip_item_exclude mime ^image/.*

  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

</ifModule>

Atau bisa juga dengan menambahkan kode berikut ke file-file php satu per satu. Tambahkan kode ini pada file index.php, single.php, 404.php dan halaman lain yang ingin Anda kompres.

Cara 2 Menempatkan Di File-File PHP

<?phpif (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) 
{

ob_start("ob_gzhandler");

}

else {

ob_start();

}
?>

Cara menempatkannya, tepat di atas kode <?php get_header(); ?>
Tapi ada beberapa kasus karena struktur tema-tema yang baru banyak dienkripsi oleh pembuatnya. Jika Anda tidak pandai-pandai mengenal strukturnya untuk mengencode dan menghapus enkripsinya, maka saya sarankan jangan melakukan yang di atas. Alih-alih tidak berfungsi sebagaimana mestinya tetapi malah bisa mengakibatkan error.
 
Untuk alternatifnya, cobalah cara ini pada functions.php Sebelumnya matikan dulu semua plugin penghasil cache yang Anda gunakan, terutama yang mempunyai fungsi untuk kompresi. Tambahkan ini pada functions.php di bawah tag pembuka <?php seperti di bawah ini (Tambahkan yang berwarna merah saja).

Cara 3 Menempatkan Kode Di functions.php

<?php

ob_start("ob_gzhandler");

ob_start("compress");

Kompresi yang dihasilkan lebih baik daripada yang dihasilkan oleh plugin, jika dengan plugin halaman saya terkompres 78%, dengan cara ini bisa 83%. Ada lagi cara yang Ekstrim dengan mengkompres total. Semua file Anda otomatis menjadi 1 baris saja jika dilihat source kodenya. Tapi dari semua cara tadi yang paling aman adalah cara yang melalui file .htaccess Anda. Yaitu cara yang pertama di atas. Anda bisa test hasilnya yang mencapai 80% compressed. Selamat mencoba, Salam... :)

07.01 | 2 komentar | Selengkapnya

Deflate Compression Menghemat Bandwidth

Informasi lama untuk melengkapi perpustakaan Blog Reyzha. Ini adalah salah satu cara yang cukup efektif untuk menghemat penggunaan bandwidth. Dan pastinya membantu meningkatkan kinerja atau mempercepat loading WordPress Anda. Jika server yang Anda gunakan berbasis Apache, salah satu metode yang digunakan adalah mod_deflate untuk kompresi gzipnya. Cara mengaktifkannya tambahkan baris kode berikut pada file .htaccess di folder public_html.

<IfModule mod_gzip.c>

    mod_gzip_on       Yes

    mod_gzip_dechunk  Yes

    mod_gzip_item_include file      .(html?|txt|css|js|php|pl)$

    mod_gzip_item_include handler   ^cgi-script$

    mod_gzip_item_include mime      ^text/.*

    mod_gzip_item_include mime      ^application/x-javascript.*

    mod_gzip_item_exclude mime      ^image/.*

    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

</IfModule>

Untuk menentukan jenis-jenis file yang dikompres sebelum dikirim ke browser pengunjung, tambahkan kode berikut ini.

<ifmodule mod_deflate.c>

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript

</ifmodule>

Atau bisa dengan perintah filesmatch seperti ini.

<ifModule mod_deflate.c>

<filesMatch ".(js|css)$">

SetOutputFilter DEFLATE

</filesMatch>

</ifModule>

Untuk mengoptimalkan, tambahkan setting untuk ETag dan juga expires header seperi di bawah ini.

Header unset ETag

FileETag None

<filesMatch "(?i)^.*.(ico|flv|jpg|jpeg|png|gif|js|css)$">

Header unset Last-Modified

Header set Expires "Fri, 21 Dec 2012 00:00:00 GMT"

Header set Cache-Control "public, no-transform"

</filesMatch>

Gunakan sintaks aman yang ditambahkan untuk menangani browser tertentu yang tidak mendukung metode ini.

<IfModule mod_deflate.c>

SetOutputFilter DEFLATE

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4.0[678] no-gzip

BrowserMatch bMSIE !no-gzip !gzip-only-text/html

workaround to get the desired effect:

BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html

SetEnvIfNoCase Request_URI  .(?:gif|jpe?g|png)$ no-gzip dont-vary

Header append Vary User-Agent env=!dont-vary

</IfModule>

Dengan melakukan langkah-langkah diatas, file-file yang disajikan oleh Blog Anda akan dikompres terlebih dahulu sebelum dikirimkan ke browser pengunjung. Dengan begitu akan meningkatkan pagespeed dan menghemat penggunaan quota Bandwidth Anda.

07.01 | 0 komentar | Selengkapnya

Mengaktifkan Zlib Output Compression

Mungkin tweaking kompresi PHP secara manual bukan hal baru. Bahkan para master telah melakukannya bertahun-tahun yang lalu. Saya menulis ini untuk melengkapi perbendaharaan referensi yang saya pelajari. Siapa tahu bisa berguna, tentunya untuk Sobat yang baru belajar seperti saya kemarin. Berikut adalah cara mengaktifkan kompresi dengan metode zlib output. Ini adalah alternatif jika server hosting yang digunakan tidak mengaktifkan mod_deflate dan mod_gzip. Untuk mengaktifkan kompresi gzip dengan zlib compression, tambahkan kode berikut pada file .htaccess yang ada di root direktori atau public_html.

php_flag zlib.output_compression on

Kenudian untuk menentukan tingkat kompresinya, bisa ditambahkan kode seperti di bawah ini. Atur level yang diinginkan dengan mengganti angka 5. Yang bisa diterapkan hanya 1 sampai 9.

php_flag eaccelerator.enable 1 

php_flag eaccelerator.optimizer 1 

php_flag zlib.output_compression on 

php_value zlib.output_compression_level 5 

Setelah mengaktifkan kompresi, tambahkan expires headers untuk menambah performa. Sertakan kode berikut ini juga pada file .htaccess Anda.

<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> 

Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT" 

Header unset Last-Modified 

Header unset ETag 

FileETag None 

</FilesMatch> 

Dari sini saja sudah bisa dilihat perubahan pada performa WordPress Anda. Lakukan tes di GID Network untuk mengetahui apakah kompresinya berjalan. Dan juga tes kecepatan loadingnya dengan tool dari Google Pagespeed atau GT Metrix. Bandingkan dengan sebelum melakukan langkah-langkah diatas. Sedikit perubahan saja manfaatnya sudah terasa untuk optimalisasi pagespeed. Kebetulan saya sangat senang mempelajari tentang performa atau Blog terutama WordPress. Karena pagespeed lah yang dulu memberikan saya PR3. Optimalkan kinerja Blog Anda, karena itu sangat disukai oleh Mbah Google.
 
Referensi: Alwi's Blog
 

07.01 | 2 komentar | Selengkapnya

Mengaktifkan Kompresi Melalui Function

Selama semalam saya berusaha mengembalikan performa Blog Reyzha. Kompresi yang saya lakukan dengan mode gzip mengakibatkan plugin andalan saya W3 Total Cache tidak berfungsi. Saya kembali bermain di perpustakaan saya,yaitu Alwi's Blog. Semua tehnik yang ada disana saya coba hingga mengkonvert semua file CSS menjadi php agar bisa dikompres dan digabungkan. Dari situ saya mulai ingin mencoba melakukan hal yang sama pada file-file javascript. Dan hasilnya tidak mengecewakan. Pagespeed saya kembali tanpa bergantung lagi pada plugin cache. Saya menemukan satu pengetahuan baru. Bahwa ternyata mengaktifkan gzip compression melalui file-file yang saya konvert menjadi php belumlah optimal. Dari hasil uji coba melakukan test di GID Network,menyatakan bahwa Web Page Not Compressed. Rupanya cara ini hanya mengkompres file-file CSS dan javascript,tapi belum untuk HTML.Wah,bagaimana ya jika semua usaha yang saya lakukan semalam tidak berhasil? Pasti saya akan libur menulis selama beberapa hari hanya untuk memecahkan masalah ini. Akhirnya dengan berbekal rasa penasaran muncullah keinginan untuk mencoba sesuatu. Dengan satu cara yang sangat simpel yang baru terfikirkan oleh saya,ternyata sangat efektif. Test di GID network menunjukkan 78% Compression. Dan ini tanpa plugin yang selama ini menjadi ketergantungan saya. Memang apa yang saya lakukan tetap dengan mengaktifkan kompresi gzip,namun selain saya tempatkan pada file-file php hasil konvert dari CSS dan javascript,juga saya tempatkan pada functions.php,dan ini sangat efektif. Saya hanya menambahkan sedikit di file functions.php seperti ini.

<?php
←Tag pembuka di bagian paling atas functions.php
ob_start("ob_gzhandler");
ob_start("compress");

Kode berwarna merah itu saja yang ditambahkan. Sebenarnya kode ini biasa ditempatkan di bagian index.php,single.php,page.php,404.php,archieves.php,juga search.php secara terpisah. Tapi karena struktur tema yang saya gunakan memang rumit dan banyak enkripsi atau encode,saya cari alternatif lain dengan mencoba menerapkannya di functions.php.Dari semua referensi yang pernah saya baca,belum pernah saya temukan cara mengaktifkan kompresi melalui functions.php,kebanyakan semua melakukannya melalui .htaccess,dan file-file php lainnya. Untuk benar atau tidaknya cara ini,saya juga belum dapat kepastian. Entah ini cara yang benar atau salah,apakah memang cara ini telah lama digunakan atau tidak,saya belum tahu pasti. Tapi yang jelas hasil test GID Network menunjukkan bahwa cara ini bekerja. Tidak hanya itu,test pagespeed GT Metrixjuga menunjukkan pagespeed saya mencapai 91 (A),padahal sebelumnya ketika memakai W3 Total Cache tidak bisa lebih dari poin 85-86. Di Google Pagespeedjuga menjadi 94 dari sebelumnya yang mentok 92 saja.Tidak puas hanya sampai disitu,saya menambahkan lagi beberapa perintah di functions.php. Ini bisa mengkompres semua file secara instan,dan menjadikannya sebaris html. Tapi yang ini jangan dicoba sebelum membackup file tema. Karena akan sulit mengembalikannya seperti semula jika ingin membuka editor. Seperti ini yang saya tambahkan di functions.php.

<?php


ob_start("ob_gzhandler");

ob_start("compress");

// required header info and character set

header("Content-type: text/css; charset: UTF-8");

// duration of cached content (Cache for 1 weeks)

$offset = 60 * 60 * 24 * 7;

$ts = gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";

// cache control to process

header ('Cache-Control: max-age=' . $offset . ', must-revalidate');

//set etag-header

header('ETag: "'.md5($ts).'"');

// expiration header format

$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";

// send cache expiration header to browser

header($ExpStr);

// initialize compress function for white-space removal

ob_start("compress");

// Begin function compress

function compress($buffer) {

// remove comments

$buffer = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $buffer);

// remove tabs, spaces, new lines, etc.

$buffer = str_replace(array("rn", "r", "n", "t", ' ', ' ', ' '), '', $buffer);

// remove unnecessary spaces

$buffer = str_replace('{ ', '{', $buffer);

$buffer = str_replace(' }', '}', $buffer);

$buffer = str_replace('; ', ';', $buffer);

$buffer = str_replace(', ', ',', $buffer);

$buffer = str_replace(' {', '{', $buffer);

$buffer = str_replace('} ', '}', $buffer);

$buffer = str_replace(': ', ':', $buffer);

$buffer = str_replace(' ,', ',', $buffer);

$buffer = str_replace(' ;', ';', $buffer);

return $buffer;}

ob_end_flush();

Kode berwarna merah saja yang ditambahkan,penempatannya setelah tag pembuka <?php di functions.php. Sebenarnya kode itu saya pelajari dari Blog Bang Alwiyang digunakan untuk mengkompres file-file CSS yang dijadikan PHP. Tapi karena saya selalu ingin coba-coba,saya menerapkannya di functions.php,dan seketika isi halaman saya menjadi sebaris saat saya lihat source kodenya. Sungguh kompresi yang cukup ekstrim.Jika ingin mencoba,backup dulu file-file tema yang Anda gunakan,atau lebih baik mencoba dulu di WordPress offline. Karena semua akan terkompres termasuk ketika Anda masuk dashboard atau halaman Admin,editor html posting Anda pun menjadi terkompres semua.Ternyata optimalisasi performa tidak harus bergantung pada plugin. Yang penting mengenal struktur tema yang dipakai,dan melakukan modifikasi hingga mencapai hasil yang memuaskan. Mungkin sampai disini sharing Reyzha untuk kali ini,saya masih akan menyempurnakan lagi untuk penempatan javascript tema ini.O iya,jika Sobat ada yang berminat untuk mendapatkan tema Maxime seperti ini,akan saya berikan versi optimal hasil modifikasi saya. Diantaranya aktifasi kompresi,optimasi header,tambahan pertanyaan antispam simpel seperti komentar di bawah,dan juga perubahan gambar-gambar background menjadi CSS3 gradient dan penambahan transisi. Jika ada pertanyaan atau tanggapan silakan kirim melalui form komentar.Sekian dulu celotehan saya Sobat,selamat beraktifitas dan Salam... :)

20.04 | 11 komentar | Selengkapnya

Leverage Browser Caching

Salah satu aspek optimasi SEO ternyata juga meliputi pagespeed. Karena mbah Google sendiri juga berkata bahwa: "The Web Should Be Fast". Optimasi pagespeed yang cukup signifikan adalah dengan menambahkan setting browser cache. Ini dimaksudkan untuk menyimpan cache halaman Anda pada browser pengunjung. Ketika halaman Anda diakses, maka browser akan melakukan download file-file yang ditampilkan di halaman Anda. Dan saat pengunjung tersebut membuka kembali halaman Anda, maka browser akan menyajikan cache yang sudah tersimpan sebelumnya. Dengan begitu browser tidak harus selalu melakukan permintaan ke database untuk mendownload kembali semua file jika mengakses halaman Anda lagi.

 



 

Untuk menentukan leverage browser caching, Anda dapat menambahkan kode di bawah ini pada file .htaccess yang ada di direktori Wordpress Anda berada.

# BEGIN Browser Cache
<IfModule mod_mime.c>
AddType text/css .css
AddType application/x-javascript .js
AddType text/x-component .htc
AddType text/html .html .htm
AddType text/richtext .rtf .rtx
AddType image/svg+xml .svg .svgz
AddType text/plain .txt
AddType text/xsd .xsd
AddType text/xsl .xsl
AddType text/xml .xml
AddType video/asf .asf .asx .wax .wmv .wmx
AddType video/avi .avi
AddType image/bmp .bmp
AddType application/java .class
AddType video/divx .divx
AddType application/msword .doc .docx
AddType application/vnd.ms-fontobject .eot
AddType application/x-msdownload .exe
AddType image/gif .gif
AddType application/x-gzip .gz .gzip
AddType image/x-icon .ico
AddType image/jpeg .jpg .jpeg .jpe
AddType application/vnd.ms-access .mdb
AddType audio/midi .mid .midi
AddType video/quicktime .mov .qt
AddType audio/mpeg .mp3 .m4a
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg .mpe
AddType application/vnd.ms-project .mpp
AddType application/x-font-otf .otf
AddType application/vnd.oasis.opendocument.database .odb
AddType application/vnd.oasis.opendocument.chart .odc
AddType application/vnd.oasis.opendocument.formula .odf
AddType application/vnd.oasis.opendocument.graphics .odg
AddType application/vnd.oasis.opendocument.presentation .odp
AddType application/vnd.oasis.opendocument.spreadsheet .ods
AddType application/vnd.oasis.opendocument.text .odt
AddType audio/ogg .ogg
AddType application/pdf .pdf
AddType image/png .png
AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
AddType audio/x-realaudio .ra .ram
AddType application/x-shockwave-flash .swf
AddType application/x-tar .tar
AddType image/tiff .tif .tiff
AddType application/x-font-ttf .ttf .ttc
AddType audio/wav .wav
AddType audio/wma .wma
AddType application/vnd.ms-write .wri
AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType text/x-component A31536000
ExpiresByType text/html A3600
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType text/xml A3600
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/vnd.ms-fontobject A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/x-font-otf A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType image/svg+xml A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType application/x-font-ttf A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
</IfModule>
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html
</IfModule>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
</IfModule>
</IfModule>
<FilesMatch ".(css|js|htc|CSS|JS|HTC)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Rey"
</IfModule>
</FilesMatch>
<FilesMatch ".(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|XML)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Rey"
</IfModule>
</FilesMatch>
<FilesMatch ".(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|WAV|WMA|WRI|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Rey"
</IfModule>
</FilesMatch>
# END Browser Cache

Di dalam script tersebut sudah termasuk setting expire header. Script tersebut adalah hasil adopsi dari plugin W3 Total Cache. Jika Anda sudah menggunakan plugin tersebut, maka tidak perlu menambahkan kode di atas, karena akan ditambahkan secara otomatis. Yang Anda perlukan hanya melakukan setting plugin W3 Total Cache yang benar. Namun jika ingin menambahkan leverage browser caching secara manual tanpa plugin, Anda harus pastikan sudah menambahkan kode: define('WP_CACHE', true); ke dalam file wp-config pada direktori Wordpress Anda. Selamat mempraktekkan, Salam... :)

17.37 | 5 komentar | Selengkapnya

Cara Membuat CDN Sendiri

Mungkin Anda sudah tahu fungsi penggunaan CDN. Ini berkaitan dengan Optimasi penggunaan plugin W3 Total Cache. Anda bisa memanfaatkan layanan CDN berbayar ataupun yang gratis. Tetapi di sini Rey akan tunjukkan cara mudah membuat CDN sendiri. Anda bisa mencoba dengan domain dan hosting gratis seperti yang akan saya contohkan. Yang harus diperhatikan bahwa Anda telah menginstal plugin W3 Total Cache.

 

Pertama buat dulu domain gratis dan aktifkan hostingnya. Setelah itu, Tidak usah melakukan perubahan pada DNS Zone Editor di cpanel server hosting Anda. Langsung saja lihat detail akun di cpanel domain CDN Anda, dan perhatikan pada detail transfer file. Buka blog utama Anda (Blog yang akan menggunakan CDN ini), dan buka pengaturan CDN di plugin W3 Total Cache.

 

Isikan sesuai detail FTP pada domain yang Anda pakai sebagai CDN tadi. misalnya pada ftp hostname isikan ftp.domaincdn.co.cc, kemudian isikan pula FTP username dan password yang sesuai dengan detail domain CDN tadi. Contohnya perhatikan gambar berikut ini.

Misalnya detail FTP domain yang dipakai untuk CDN seperti ini:

Maka pada pengaturan CDN di plugin W3 Total Cache Blog Anda isikan seperti di bawah ini:

 

Untuk memastikan silakan klik dulu Test FTP server, jika sudah berhasil maka akan muncul notifikasi Test passed. Berarti FTP domain CDN Anda telah terotentikasi dan bisa diaktifkan. Langsung saja klik tombol Save all settings dan CDN Anda sudah aktif. Kemudian lanjutkan dengan setting CDN di bagian general, pilih centang bagian mana saja yang ingin Anda sajikan menggunakan CDN, dan jangan lupa klik upload di bagian-bagian tersebut, dan start. Ketika Anda menggunakan gambar pada posting, maka otomatis gambar tersebut juga diupload ke database CDN, serta linknya juga berubah dengan sendirinya. Jadi, untuk data-data yang ingin dilayani dengan CDN, Anda tidak perlu merubah secara manual link-link pada data-data tersebut. karena semua otomatis dilakukan oleh plugin W3 Total Cache.

 

Setting CDN ini langsung aktif, dengan catatan domain untuk CDN telah resolved terpoin ke hostingnya. Berbeda jika Anda menggunakan subdomain dan melakukan perubahan DNS record ke Blog Anda, akan diperlukan waktu lagi menunggu propagasi selesai. Kenapa dengan cara ini bisa langsung aktif, karena ini menggunakan mode pull, atau menarik server CDN dengan plugin W3 Total Cache. Dan kelebihannya lagi, CDN dengan domain dan hosting sendiri, tentunya tidak menambah penggunaan kapasitas database Blog utama Anda. Namun jika membuat CDN dengan subdomain, akan menambah kapasitas pemakaian database, karena file-file akan diduplikasi dan disimpan di database CDN.

Itulah tadi cara saya membuat CDN sendiri, jika ada yang kurang, silakan Anda tambahkan, atau jika ada yang salah boleh Anda koreksi. Selamat mencoba semoga bermanfaat dan salam... :)

06.20 | 7 komentar | Selengkapnya

CloudFlare Di Plugin W3 Total Cache

Sudah tahukah Anda mengenai CloudFlare? Ya, layanan CDN yang disediakan cloudflare.com untuk optimasi kinerja dan menghemat bandwidth Blog atau Web Anda. Apa itu CDN? CDN atau Cloud Data Network adalah layanan yang menyebarkan data dari server Anda ke berbagai server di dunia. Asumsinya seperti ini, misalnya jika Anda mengakses Google dari sini, otomatis CDN menyajikan google.co.id yang servernya berada di Indonesia. Tentu dengan server yang lebih dekat dengan pengunjung, akan lebih ringan beban pengiriman datanya. Sehingga loadingpun terasa lebih cepat. CloudFlare menawarkan jasa CDN gratis, selain CDN CloudFlare sendiri juga memberikan security atau firewall untuk halaman Anda. Tidak itu saja, tersedia pula beberapa macam webmaster tools yang bisa digunakan. Untuk lebih lanjut settingnya, silakan mendaftar saja dulu di CloudFlare.

 

Sobat Rey di seluruh Tanah Air, kali ini Rey akan berbagi pengalaman saat mengaktifkan CloudFlare di Wordpress dengan plugin W3 Total Cache. Sebenarnya sangat mudah, hanya mendaftar ke CloudFlare untuk mendapatkan API key. Kemudian API key tersebut disimpan pada pengaturan W3 Total Cache pada tab general di bagian Network Performance & Security powered by CloudFlare. Masukkan email Anda, isikan API key yang Anda dapatkan dari CloudFlare dan domain. Untuk security level saya pilih high dan development mode saya pilih off. Dan selesai, klik save all settings.

 

Sebenarnya CloudFlare tidak langsung berjalan dengan begitu saja. Coba Anda pasang badge yang disediakan CloudFlare, jika tidak menyala gambar awan berwarna orange, berarti CloudFlare tidak berjalan untuk halaman Anda. Anda diharuskan melakukan perubahan DNS untuk dapat menggunakan layanan CloudFlare. Jika defaultnya domain Anda memiliki 4 DNS record seperti domain.com dipoinkan menuju ns1.hostinganda.com dan seterusnya, maka Anda diharuskan merubahnya. Yang pertama ke jay.ns.cloudflare.com, dan yang kedua ke may.ns.cloudflare.com, sedangkan yang ketiga dan keempat harus dihapus.

 

Tetapi perlu Anda perhatikan lagi jika ingin menggunakan layanan ini. Karena setelah saya mencoba melakukan cek DNS health, menunjukkan warna merah. Pasti dikarenakan terjadi crash pada NS recordnya. Dari domain menuju server, sedangkan dari server dialihkan ke CloudFlare. Setelah berfikir kembali akhirnya saya putuskan untuk tidak menggunakan CloudFlare. Karena menurut saya CloudFlare tidak optimal untuk menunjang pagespeed (saya menggunakan versi yang free). Namun jika Anda berniat menggunakan versi premium, mungkin saja berbeda hasilnya. Dan jangan lupa share kalau ada informasi lain tentang CloudFlare.

 

Sebenarnya bisa juga membuat CDN dengan subdomain, untuk caranya silakan mengunjungi artikel Cara Membuat CDN Dengan Subdomain. Tetapi menurut saya jika menggunakan subdomain akan menambah penggunaan kapasitas database. Karena akan menghasilkan duplikat untuk beberapa konten yang akan disajikan dengan CDN. Akhirnya saya mencoba menggunakan domain dan hosting gratisan sebagai server CDN Blog Reyzha. Kemudian saya mengaktifkannya dengan plugin W3 Total Cache. Untuk cara setting CDN dengan domain dan hosting lain, akan saya tuliskan pada kesempatan berikutnya. Semoga bermanfaat, salam... :)

 

04.01 | 0 komentar | Selengkapnya

Cara Mudah Menginstal W3 Total Cache

 
Pertama instal dulu plugin W3 Total Cache. Dengan menonaktifkan dulu semua plugin cache yang Anda gunakan. Kemudian ubah setting permission pada wp-content untuk sementara. Caranya dengan permission folder wp-content dengan chmod, dan mengubahnya ke poin 777. Kemudian instal plugin W3 Total Cache, dan aktifkan. Setelah plugin diaktifkan dengan benar, kembalikan chmod permission untuk wp-content ke poin 755. Ini adalah cara standar sesuai petunjuk W3TC Installation.

 

Setting W3 Total Cache dengan pengaturan standar, pada tab "General" dan aktifkan page cache dengan metode disc: enhanced, kemudian terapkan mode disk untuk minify, database cache, dan object cache. Untuk tab lainnya, preset pengaturan standard telah otomatis diaktifkan.
Jika pada saat menginstal muncul peringatan seperti ini:

It appears Page Cache URL rewriting is not working. If using apache, verify that the server configuration allows .htaccess or if using nginx verify all configuration files are included in the configuration.

atau seperti ini,

It appears Minify URL rewriting is not working. If using apache, verify that the server configuration allows .htaccess or if using nginx verify all configuration files are included in the configuration.

Maka lakukan chmod pada file .htaccess di direktori wordpress Anda ke poin 777. Setelah itu refresh halaman setting W3 Total Cache, jika peringatan sudah hilang, kembalikan permission setting .htaccess ke poin semula.

 

Untuk CDN dan CloudFlare, sementara jangan diaktifkan dulu, kecuali jika Anda sudah menyiapkan server CDN dan akun CloudFlare. Setelah selesai menginstal dan mengaktifkan W3 Total Cache, silakan Anda bandingkan performa Blog Anda sekarang dengan sebelumnya. Anda dapat cek di http://developers.google.com/pagespeed, atau di http://gtmetrix.com, ataupun menginstal extensi page speed di browser. Untuk memastikan plugin bekerja, coba Anda lihat di bagian bawah page source halaman Anda. Akan ada komen yang kira-kira seperti ini:

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/ -->

Minified using disk: basic
Page Caching using disk: enhanced
Database Caching using disk: basic
Object Caching 747/753 objects using disk: basic

Served from: reyzha.com @ 2012-02-27 23:39:21 -->

Akan saya uraikan optimasi lanjutan ke aktifasi fungsi CDN dan CloudFlare pada kesempatan berikutnya. (Versi Blog Reyzha) berdasarkan pengalaman saya termasuk halangan, rintangan, ujian, cobaan, dan godaan, berupa trouble-trouble yang sempat saya alami. Idih... serem ya kata-kata Rey, hix hix hix. Semoga uraian singkat ini cukup bermanfaat, salam... :)

06.37 | 0 komentar | Selengkapnya

Kecepatan Optimal Tidak Bisa Secepatnya

Jangan buru-buru mengabaikan judul yang tidak menarik ini. Mungkin Anda menilai judul posting yang tidak menjual dan tidak jelas. Di sini Rey ingin berbagi sedikit pengalaman ketika saya terus-terusan terfokus mempelajari performa untuk loading Blog (berharap agar lebih SEO). Benar, kecepatan optimal tidak bisa secepatnya. Mungkin perlu penjelasan kenapa saya tulis demikian. Saya adalah orang yang suka dengan hal-hal instan untuk sesuatu yang saya inginkan. Ketika saya mendapatkan komplain mengenai Blog Reyzha yang lemot, saya langsung belajar menemukan solusi. Karena sifat saya yang selalu mencoba untuk perfeksionis, malah menyita terlalu banyak konsentrasi untuk hal lain. Saya kehilngan banyak inspirasi untuk posting, juga untuk mempelajari yang lainnya.

 

Awalnya saya sudah menemukan plugin wordpress yang cukup bagus. Dimulai dari Quick Cache (Speed Without Compromise), namanya membuat saya tertarik. Namun demikian, Rey merupakan orang yang selalu ingin mencoba dan membandingkan. Kemudian saya mencoba plugin-plugin cache lainnya, serta mencoba untuk menstack. seperti WP Super Cache, DB Cache Reloaded Fix, sampai W3 Total Cache. Dari semua yang sudah Rey coba, W3 Total Cache lah yang tampaknya bisa menarik perhatian saya. Saya coba mengaktifkan semua fitur di W3 Total Cache, termasuk CDN dan CloudFlare (versi yang gratisan pastinya).

 

Saya cukup puas dengan hasil test google page speed bertahan di atas 80%, Dan YSlow test selalu di atas 90%. Tidak cukup puas, saya membandingkan dengan beberapa blog yang pernah saya kunjungi. Dan lama kelamaan, hasil google page speed 80% tidak memuaskan bagi saya. Dari beberapa artikel Rey menemukan tehnik-tehnik lain yang ingin Rey coba. Akhirnya saya putuskan untuk sembuh dari ketergantungan terhadap W3 Total Cache.

 

Dengan sedikit modifikasi di file .htaccess untuk mengaktifkan expire header dan beberapa modul kompresi, ternyata sangat mengejutkan. Google page speed menunjukkan angka 92% hingga 97%, dan itu tanpa plugin. Kemudian berlanjut dengan mencari lagi apa yang bisa saya lakukan untuk semakin meningkatkan perform. Mulai dari mens-prite gambar-gambar tema, melakukan kompresi satu per satu pada semua file php, html, css, dan javascript. Ternyata masih ada saja yang kurang, YSlow saya menurun dan merekomendasikan penggunaan CDN.

 

Rey memutuskan untuk kembali rujuk dengan W3 Total Cache agar bersedia menjadi pendamping hidup Blog Reyzha lagi. Ya, saya akan mencoba untuk puas walaupun ini berarti poin google page speed saya kembali turun. CloudFlare kembali saya pakai dan saya ingin memastikan apakah itu bekerja. Cara yang termudah saya pasang saja CloudFlare Badge. Tapi ternyata tidak menyala orange warna awannya. Kenapa, mungkin karena saya batalkan propagasi domain ke server rujukan CloudFlare. Sebelumnya saya menurut saja, tapi itu membuat DNS health saya merah. Tanpa pikir panjang poin-poin DNS saya kembalikan ke default.

 

Untuk yang ingin mencoba menyempurnakan performa Blognya, jangan terlalu fokus seperti Rey. Ternyata eh ternyata, membuat cache yang salah setting juga bisa mengacaukan dunia persilatan. Yang perlu diperhatikan adalah untuk selalu membuat cache baru setiap update, dan mengirimkan informasi yang benar saat dikunjungi robotnya Om Google dan kawan-kawannya. Mengenai contoh optimasi setting W3 Total Cache (Versi Blog Reyzha) akan Rey luncurkan di lain kesempatan.

 

Kesimpulannya, mengoptimalkan performa Blog butuh waktu dan pemahaman. Kita pahami dulu apa yang kurang, dan mencari apa lagi yang bisa ditingkatkan. Jangan tergesa-gesa mencoba apa yang kita baca, pelajari juga referensi lain yang mungkin lebih simpel dan useful. Karena saya sempat mengalami beberapa kali konflik konfigurasi. Malah database sempat saya reset karena sudah gelap mata. Posting yang baru berjumlah 30 saya relakan tanpa backup. Hehehe, dont try this at home. Semoga curhatan Rey tadi bermanfaat, salam... :)

07.26 | 0 komentar | Selengkapnya

Optimisasi Gambar Tema Dengan Sprite

Pernahkah Anda mencoba menggabungkan gambar-gambar statis bawaan tema menjadi sebuah gambar? Itu akan memperkecil ukuran CSS tema sehingga menambah kecepatan loading blog Anda. Misalnya untuk gambar icon daftar kategori, background tanggal, banner di header blog, gambar footer, atau background tema. Dengan tehnik sprite, gambar-gambar itu akan digabungkan dan dapat ditampilkan pada posisi yang sesuai dengan merubah atau menambahkan sedikit atribut pada CSS Anda.

 

Caranya langsung saja menuju spriteme.org, dan Anda lihat pada Installation. Di situ ada link SpriteMe, simpan ke bookmark dan tampilkan bookmark bar untuk menggunakannya. Mungkin pada setiap browser berbeda-beda cara untuk menampilkan bookmark bar. Jika Anda menggunakan Google Chrome, tekan Ctrl+Shift+B untuk menampilkan bookmark bar, kemudian drag (seret) link SpriteMe ke bookmark bar. Untuk Firefox, yang mudah adalah dengan klik kanan pada window Firefox (bagian atas), kemudian aktifkan atau centang pada bilah alat markah / bookmark bar, dan kemudian drag link SpriteMe ke bookmark bar. Sedangkan pada IE, caranya sama dengan Firefox, klik kanan di bagian window dan centang Favorites bar lalu drag SpriteMe.

 

Setelah terpasang bookmark SpriteMe, Anda bisa menggabungkan gambar di halaman mana saja pada blog Anda. Misalnya gambar-gambar untuk single page / single post. Mungkin di situ Anda menampilkan share form yang ada gambar-gambar iconnya. Dan mungkin ada gambar lain sebagai icon untuk menuju next page, icon subscribe / rss, dan icon daftar related post, seperti pada Blog Reyzha. Anda buka salah satu single post di blog Anda, kemudian klik bookmark SpriteMe yang sudah tersimpan tadi. SpriteMe akan mendeteksi gambar-gambar yang ada pada halaman tersebut. Kemudian anda dapat menggabungkan gambar-gambar tersebut menjadi satu. Anda klik pada make sprite, dan simpan gambar yang muncul, kemudian upload ke database anda. Kemudian klik pada export CSS untuk melihat panduan memodifikasi file CSS Anda.

 

Buka style.css pada editor tema Anda. Dan cari gambar-gambar yang sesuai dengan yang ditampilkan SpriteMe Export CSS. Rubahlah link atau nama gambar di CSS sesuai dengan gambar yang Anda upload tadi. Karena gambar-gambar yang semula terpisah sendiri-sendiri kini menjadi satu, maka perlu tag tambahan untuk memanggil gambar-gambar tersebut sesuai pada posisi masing-masing. Untuk melakukan ini, Anda perlu fokus dan konsentrasi. Karena salah mengedit, gambar bisa berantakan atau mungkin tidak muncul. Alangkah baiknya jika Anda membackup css terlebih dahulu untuk mengembalikan seandainya terjadi kesalahan. Ubah link pada gambar di CSS semula dengan link gambar hasil gabungan tadi, dan tambahkan tag posisi yang ditunjukkan di SpriteMe Export CSS.

 

Yang perlu diperhatikan dalam merubah url gambar, yang pertama format gambar. Kemungkinan gambar bawaan tema bermacam-macam, ada yang png dan ada yang gif. Untuk itu rubahlah sesuai gambar yang Dihasilkan dari SpriteMe. Kemudian perhatikan jika ada tag repeat, letakkan kode background-position setelah tanda titik koma di belakang atribut repeat. Perhatikan url gambar, rubah saja link nya, jangan copas langsung dari SpriteMe Export CSS. Karena akan selalu diikuti titik koma setelah url,sedangkan atribut repeat berada di dalam tag background, tidak terpisah dengan url. Sedangkan background-position harus dipisahkan dengan tag repeat.

 

Setelah semua url gambar yang termasuk dalam sprite tadi selesai Anda modofikasi, simpan CSS, dan lihat hasilnya. Jika masih ada kesalahan posisi atau gambar tidak muncul, periksa lagi CSS Anda. Pastikan tag yang Anda rubah sudah benar, jika tidak bisa menemukan kesalahannya, kembalikan dengan CSS yang di backup sebelumnya. Lalu mulai modofikasi lagi sampai berhasil dengan benar. Setelah berhasil melakukan sprite, Anda bisa cek dengan membuka halaman blog Anda dan klik SpriteMe di bookmark bar. Jika semua gambar telah disprite, maka yang muncul hanya Non-Sprited Images.

 

Mensprite gambar tema mempengaruhi kecepatan loading blog Anda. Test kecepatan loading bog Anda di Page Speed. Hasil test tidak akan menunjukkan rekomendasi untuk sprite gambar, jika Anda sudah mensprite gambar-gambar tema. Mungkin agak repot, tapi ini akan bermanfaat untuk Anda. Mengurangi beban loading, mengurangi pemakaian diskspace, karena gambar-gambar sebelumnya yang terpisah-pisah dapat Anda hapus. Selain itu juga menghemat penggunaan bandwith. Dan yang terpenting ini mempengaruhi SEO, sudah tahukah prediksi SEO Rank blog Anda.

 

Semoga sedikit informasi tadi bermanfaat untuk Sobat Rey semuanya. Salam :)

05.28 | 8 komentar | Selengkapnya

Menguji Kecepatan Loading Blog

Suatu ketika saya mendapatkan komentar bahwa loading Blog Reyzha terlalu berat. Ya... suatu masukan yang sangat penting bagi saya. Sebelumnya saya tidak pernah memikirkan bahwa loading blog saya ini memang terlalu berat. Karena begitu banyaknya widget dan gambar-gambar yang saya pajang. Akhirnya berhari-hari saya cuma belajar cara-cara mengoptimalkan kecepatan loading blog.
 
Akhirnya sedikit demi sedikit saya mulai memperbaikinya. Belum bisa dikatakan optimal blog saya ini, karena page speed score yang saya peroleh belum pernah bertahan di grade 90. Saya tahu karena banyaknya gambar yang sebenarnya bisa digabungkan dengan Sprite. Serta banyaknya query string dan juga javascript yang saya pakai. Saat ini saya masih mempelajari untuk mengoptimalkan lagi. Kebetulan saya masih belum yakin untuk merombak total. Jadi mulai sedikit-sedikit dulu.
 
Untuk Sobat yang belum memperhatikan kecepatan loading blognya, mulai sekarang cobalah menguji dan memperbaikinya. Sobat bisa gunakan cara online, ataupun menginstal extensi page speed pada browsernya. Untuk cara online, Sobat bisa mencoba di: Page Speed Online. Atau di: GTmetrix. Sebenarnya masih ada situs penyedia page speed tools yang lainnya, seperti webpagetest.org, iwebtool.com, tools.pingdom.com, selfseo.com, linkvendor.com, siteloadtest.com, dan masih banyak lagi.
 
Dengan melakukan test page speed, Sobat akan mendapatkan saran tetang apa saja yang bisa dilakukan untuk optimasi kecepatan loading blog. Tentunya kecepatan itu sendiri berpengaruh terhadap minat pengunjung untuk berada di blog Sobat. Dan yang lebih penting adalah bisa pengaruh terhadap SERP (Search Engine Result Page).
 
Selain test secara online, Anda juga bisa menambahkan extensi pada browser seperti Firebug, YSlow (Yahoo!), dan juga Page Speed (Google). Selamat berpacu balap adu kecepatan loading blog dengan rekan Anda.
 
Salam :)
 

01.27 | 0 komentar | Selengkapnya