Masih dalam kategori "WordPress", kali ini saya akan mencoba sharing bagaimana cara Mengoptimasi dan Meningkatkan Kecepatan (Page Speed) Blog WordPress tanpa menggunakan plugin. Meskipun sudah banyak para master yang membahas trik ini, tapi belum tentu semua pembaca dapat memahami gaya pemaparanya. Dan mudah-mudahan dengan gaya tulisan saya yang "amburadul" ini semua pembaca dapat memahami maksud dari apa yang saya utarakan.
Tingkatkan Page Speed, Browser Caching pada .htaccess
Sebagai langkah pendahuluan untuk meningkatkan page speed pada blog WordPress tanpa harus menggunakan plugin, adalah dengan melakukan sedikit perubahan pada file .htaccess yang berada di direktori blog WordPress Anda. Jika Anda salah satu pengguna WordPress yang gemar menggunakan plugin. Perubahan pada file .htaccess ini akan secara otomatis dilakukan oleh plugin. Dan plugin ini harus tetap ada dan aktif di Wordpress Anda. Meskipun sebenarnya kinerja plugin sudah tidak di perlukan lagi. Jika Anda menghapus plugin tersebut, maka secara otomatis WordPress akan menghapus pula data (perubahan pada file .htaccess) yang telah di ciptakan plugin yang Anda hapus.
Berikut ini adalah .htaccess yang di hasilkan salah satu plugin untuk meninggkatkan Browser Caching. Code-code dalam file .htaccess ini telah menghantarkan score Leverage browser caching blog WordPress saya mencapai angka 100, meskipun saya telah menghapus plugin tersebut, karena sebelum di hapus, file .htaccess terlebih dulu saya backup (nyengir kuda).
# BEGIN Browser Cache
<IfModule mod_mime.c>
AddType text/css .css
AddType text/x-component .htc
AddType application/x-javascript .js
AddType application/javascript .js2
AddType text/javascript .js3
AddType text/x-js .js4
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/json .json
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 A604800
ExpiresByType text/x-component A604800
ExpiresByType application/x-javascript A31536000
ExpiresByType application/javascript A31536000
ExpiresByType text/javascript A31536000
ExpiresByType text/x-js A31536000
ExpiresByType text/html A6300
ExpiresByType text/richtext A6300
ExpiresByType image/svg+xml A6300
ExpiresByType text/plain A6300
ExpiresByType text/xsd A6300
ExpiresByType text/xsl A6300
ExpiresByType text/xml A6300
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/json 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>
AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json
<IfModule mod_mime.c>
# DEFLATE by extension
AddOutputFilter DEFLATE js css htm html xml
</IfModule>
</IfModule>
<FilesMatch "\.(css|htc|js|js2|js3|js4|CSS|HTC|JS|JS2|JS3|JS4)$">
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|XML)$">
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|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|JSON|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)$">
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
</FilesMatch>
# END Browser Cache
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
Minify HTML Tanpa Plugin
Minify, mengecilkan file HTML yang di hasilkan WordPress diperlukan untuk menghasilkan page speed yang lebih optimal. Seperti program open source pada umumnya, file-file WordPress semuanya di sertai "credit", sebuah informasi data si pembuat program tersebut, termasuk di dalam file stylesheet dan JavaSript yang tentunya memberi beban tambahan pada file yang akan di muat. Selain itu tabulasi yang berlebihan juga akan mempengaruhi page speed pada Minify HTML ini.
Untuk mengecilkan (Minify HTML), kita dapat menambahkan kode berikut pada file function.php di dalam theme WordPress yang Anda gunakan.
class WP_HTML_Compression
{
// Settings
protected $compress_css = true;
protected $compress_js = true;
protected $info_comment = true;
protected $remove_comments = true;
// Variables
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;
// Variable reused for output
$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;
// Don't print the comment
continue;
}
else if ($this->remove_comments)
{
if (!$overriding && $raw_tag != 'textarea')
{
// Remove any HTML comments, except MSIE conditional comments
$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;
// Remove any empty attributes, except:
// action, alt, content, src
$content = preg_replace('/(\s+)(\w++(?<!\baction|\balt|\bcontent|\bsrc)="")/', '$1', $content);
// Remove any space before the end of self-closing XHTML tags
// JavaScript excluded
$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');
Menghapus Semua Informasi Versi pada Url Stylesheet dan JavaScript
Menghapus informasi versi, yang umumnya ada pada url stylesheet dan JavaScript WordPress berguna bukan hanya sebagai "cara memproteksi WordPress" dari ulah para hecker. Menghapus semua versi tersebut bermaksud untuk mengilangkan karakter "?" pada url stylesheet dan JavaScript. Mengapa harus di hilangkan? Karena pada sebuah link yang terdapat karakter "?", seperti "stylesheet.css?ver=123" atau "javascript.js?ver=123" tidak dapat di cache dengan baik.
Untuk dapat mengilangkan semua informasi versi yang ada dalam tag head WordPress, Anda dapat menambahkan code di bawah ini pada file function.php di dalam theme WordPress yang Anda gunakan.
_remove_script_version($src) { $parts = explode('?', $src); return $parts[0];
}
add_filter('script_loader_src', '_remove_script_version', 15, 1); add_filter('style_loader_src', '_remove_script_version', 15, 1);
remove_action('wp_head', 'wp_generator');
Script diatas tidak hanya menghilangkan semua versi yang terdapat pada url src stylesheet dan JavaSript, tapi juga menghapus meta generator WordPress yang akan mengancam keamanan blog Anda dari ulah para hecker, jika Anda dengan alasan atau suatu hal yang menyebabkan Anda lebih memilih versi lawas WordPress.
Tapi perlu di ingat, kalau script ini tidak bekerja pada plugin yang memanggil kembali fungsi versi seperti contoh:
$ver = ( ! empty( $wp_scripts->registered[ $d ]->ver ) ) ? $wp_scripts->registered[ $d ]->ver : get_bloginfo( 'version' );
Tingkatkan Page Speed, pada Defer parsing of JavaScript
Ada sebuah plugin WordPress yang berfungsi untuk menunda waktu pemuatan JavaScript yang di muat menggunakan tag src pada bagian header, melalui fungsi wp_enqueue_scripts. Tapi sebaiknya tunda dulu keinginan untuk menginstal plugin tersebut. Karena ada cara lain untuk menunda waktu pemuatan JavaScript, yaitu dengan memindahkan semua src yang memuat JavaScript ke bagian footer. Cara ini meski di lakukan secara manual tanpa plugin, tapi sangat mudah. Tambahkan code dibawah ini pada file function.php theme Anda. Maka menunda waktu pemuatan JavaScript dapat di optimasi tanpa harus menggunakan plugin.
function custom_clean_head() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
}
add_action( 'wp_enqueue_scripts', 'custom_clean_head' );
Cek Page Speed, dan Trik Akhir Optimasi (Minify CSS dan Minify JavaScript)
Langkah optimasi terakhir setelah Anda melakukan semua tips diatas ialah dengan melakukan cek page speed blog WordPress Anda. Dan saya merekomendasikan gtmetrix, jika kebetulan adalah seorang blogger hape seperti saya. Mengapa harus gtmetrix? Karena gtmetrix selain dapat mendeteksi stylesheet dan JavaScript yang belum ter-reduksi secara optimal. Gtmetrix juga menyediakan file yang di optimalkan untuk Anda. Anda hanya perlu meng-import via url, dengan melihat link "see optimized" pada bagian "Minify CSS" atau "Minify JavaScript" jika score kedua bagian tersebut belum mencapai angka yang Anda targetkan, Salam.