Technology

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 wppace/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’ );
}

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 {hostanda} sesuai dengan host atau domain Anda, misalkan saja Mediabisnisonline.com. Demonya Anda bisa lihat pada website Mediabisnisonline.com ini atau Mgufron.comSelamat mencoba dan semoga bermanfaat. :)

           

Artikel Terkait

12 komentar

  • 28 March 2014 - pukul 4:01

    Maaf min apakah plugin diatas support untuk semua jenis theme yaa. terimakasih infonya..

    • 29 March 2014 - pukul 9:46

      Untuk pemakaian plugin diatas, saya sudah melakukan uji coba pada 2 website dengan tema yang berbeda, dan hasilnya berjalan dengan baik dan normal, tanpa merusak themes yang dipakai. :-).

  • 25 July 2017 - pukul 15:03

    I think this is one of the most important information for me. And i’m glad reading your article. But wanna remark on some general things, The site style is perfect, the articles is really excellent : D. Good job, cheers

  • 25 July 2017 - pukul 15:40

    Wow! This could be one particular of the most useful blogs We have ever arrive across on this subject. Actually Excellent. I am also an expert in this topic therefore I can understand your effort.

  • 25 July 2017 - pukul 16:20

    fantastic put up, very informative. I wonder why the opposite experts of this sector do not realize this. You must continue your writing. I’m sure, you’ve a huge readers’ base already!

  • 25 July 2017 - pukul 16:50

    Good info and straight to the point. I don’t know if this is actually the best place to ask but do you folks have any ideea where to employ some professional writers? Thanks :)

  • 25 July 2017 - pukul 18:34

    I keep listening to the news update lecture about receiving boundless online grant applications so I have been looking around for the finest site to get one. Could you advise me please, where could i find some?

  • 25 July 2017 - pukul 18:46

    Somebody essentially help to make seriously articles I would state. This is the very first time I frequented your website page and thus far? I amazed with the research you made to make this particular publish extraordinary. Fantastic job!

  • 25 July 2017 - pukul 18:57

    Thank you so much for giving everyone remarkably memorable chance to read articles and blog posts from this blog. It is often so fantastic and stuffed with amusement for me and my office peers to visit your web site at a minimum 3 times every week to find out the fresh items you will have. And indeed, we are certainly happy for the beautiful thoughts served by you. Selected 2 ideas in this article are basically the most impressive we’ve ever had.

  • 25 July 2017 - pukul 19:25

    I’m still learning from you, as I’m trying to reach my goals. I certainly liked reading everything that is posted on your site.Keep the information coming. I enjoyed it!

  • 25 July 2017 - pukul 21:37

    I’ve been browsing online more than 3 hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. In my opinion, if all web owners and bloggers made good content as you did, the web will be much more useful than ever before.

  • 21 August 2017 - pukul 11:42

    Your writing style has been surprised me. Thanks, quite nice post.

Berikan Komentar

Your email address will not be published. Required fields are marked *