Optimasi Website WordPress Anda dengan Turbolinks dan Pace.js

Kecepatan website merupakan faktor utama dan yang paling kritis untuk terus menerus diawasi. Apalagi website Anda berhubungan dengan penjualan, satu detik semakin lambat loading website Anda, bisa jadi mengurangi revenue atau penghasilan Anda. Nah ada satu tools yang mampu mempercepat website Anda, namanya adalah Turbolinks dan Pace.js. Turbolinks sebenarnya hanya ada pada Ruby On Rails yang memang tujuan utamanya adalah mempercepat loading antar satu halaman ke halaman lain. Kemudian Pace.js adalah tools tambahan yang berguna untuk menginformasikan website sedang dimuat. Berikut ini cara untuk mengintegrasikan kedua hal tersebut pada website Anda.

Install plugin Turbolinks for WordPress

Pertama kali yang harus Anda install adalah plugin bernama Turbolinks for WordPress. Caranya cukup sederhana, masuk ke halaman Plugins -> Add New. Lalu masukkan Turbolinks for WordPress pada search box. Kemudian akan ada plugin wp-turbolinks, install dan aktifkan plugin tersebut.

Install plugin WP Pace

Pace ini akan digunakan untuk loading interface. Sehingga ketika turbolinks melakukan request, maka pace akan mempercantik website Anda sehingga terlihat sedang melakukan loading page. Caranya sama, masuk ke halaman Plugins -> Add New. Lalu masukkan WP Pace pada search box. Cari plugin yang bernama WP Pace (biasanya muncul pada halaman pertama paling atas), kemudian install dan aktifkan plugin tersebut.

Edit Plugin WP Pace

Next, kita rubah sedikit plugin WP Pace, sehingga ketika turbolinks melakukan loading halaman lain, WP Pace secara otomatis trigger dan menampilkan loading. Masuk ke halaman Plugins -> Installed Plugins. Kemudian edit Plugin WP Pace. Anda akan ditujukan pada halaman Plugin Editor. Di sebelah kanan akan ada daftar file dengan header Plugin Files. Pilih file dengan pathname wp-pace/methods/pace_sitewide.php. Kode file tersebut akan terlihat seperti ini.

<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
$options = get_option('pace_options');
if( !isset($pace_sitewide) && is_array($options) && array_key_exists('pace_sitewide', $options) ){ $pace_sitewide = $options['pace_sitewide']; }
if( isset($pace_sitewide) && $pace_sitewide == 1){

wp_enqueue_script( 'pace' , plugins_url('../js/pace.js', __FILE__) );
$pace_dropdown = $options['pace_dropdown'];

//dont know a better or simpler way to output this
$pace_color = $options['pace-color'];
if ( is_user_logged_in() ) { $loggedin = '.pace .pace-progress {margin-top: 32px}'; }else{ $loggedin = "; }
echo '<style>.pace .pace-progress, .pace .pace-activity{background:'. $pace_color .' !important}'. $loggedin .'</style>';
if($pace_dropdown === 'one'){
wp_register_style( 'minimal', plugins_url('../themes/minimal.css', __FILE__) );
wp_enqueue_style( 'minimal' );
}

if($pace_dropdown === 'two'){
wp_register_style( 'flash', plugins_url('../themes/flash.css', __FILE__) );
wp_enqueue_style( 'flash' );
}

if($pace_dropdown === 'three'){
wp_register_style( 'barbershop', plugins_url('../themes/barbershop.css', __FILE__) );
wp_enqueue_style( 'barbershop' );
}

if($pace_dropdown === 'four'){
wp_register_style( 'macosx', plugins_url('../themes/macosx.css', __FILE__) );
wp_enqueue_style( 'macosx' );
}

if($pace_dropdown === 'five'){
wp_register_style( 'fill-left', plugins_url('../themes/fill-left.css', __FILE__) );
wp_enqueue_style( 'fill-left' );
}

if($pace_dropdown === 'six'){
wp_register_style( 'flat-top', plugins_url('../themes/flat-top.css', __FILE__) );
wp_enqueue_style( 'flat-top' );
}

if($pace_dropdown === 'seven'){
wp_register_style( 'cornerindicator', plugins_url('../themes/cornerindicator.css', __FILE__) );
wp_enqueue_style( 'cornerindicator' );
}

if($pace_dropdown === 'eight'){
wp_register_style( 'bounce', plugins_url('../themes/bounce.css', __FILE__) );
wp_enqueue_style( 'bounce' );
}

if($pace_dropdown === 'nine'){
wp_register_style( 'bigcounter', plugins_url('../themes/bigcounter.css', __FILE__) );
wp_enqueue_style( 'bigcounter' );
}

if($pace_dropdown === 'ten'){
wp_register_style( 'centercircle', plugins_url('../themes/centercircle.css', __FILE__) );
wp_enqueue_style( 'centercircle' );
}

}

Ubah kode tersebut menjadi seperti ini.

<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
$options = get_option('pace_options');
function pace_loader_attributes( $url )
{
$optimize = array (
'http://{hostanda}/wp-content/plugins/wp-pace/methods/../js/pace.js?ver=3.8.1′
);

if ( in_array( $url, $optimize ) )
{ // this will be optimized
return "$url' data-pace-options='{ \"restartOnPushState\": true, \"restartOnRequestAfter\": true }";
}

return $url;
}
add_filter( 'clean_url', 'pace_loader_attributes', 11, 1 );
if( !isset($pace_sitewide) && is_array($options) && array_key_exists('pace_sitewide', $options) ){ $pace_sitewide = $options['pace_sitewide']; }
if( isset($pace_sitewide) && $pace_sitewide == 1){

wp_enqueue_script( 'pace' , plugins_url('../js/pace.js', __FILE__));
$pace_dropdown = $options['pace_dropdown'];

//dont know a better or simpler way to output this
$pace_color = $options['pace-color'];
if ( is_user_logged_in() ) { $loggedin = "; }else{ $loggedin = "; }
echo '<style>.pace .pace-progress, .pace .pace-activity{background:'. $pace_color .' !important}'. $loggedin .'</style>';
if($pace_dropdown === 'one'){
wp_register_style( 'minimal', plugins_url('../themes/minimal.css', __FILE__) );
wp_enqueue_style( 'minimal' );
}