Mempercepat Website Dengan Membersihkan Kode Internal

6 0
Cara Mempercepat Website dengan Membersihkan kode Internal

Mempercepat Website Dengan Membersihkan Kode Internal

Kalian dapat cek situs blog.cakraimers.com di pagespeed test. Pasti hasilnya dibawah 3 detik. Penasaran kan gimana caranya?

Nah kini kita akan membicarakan lebih spesifik ke internal website, yaitu teknik membersihkan kode internal yang tidak terlalu urgen pada wordpress. Banyak update yang sudah diberlakukan oleh wordpress. Mulai dari menambahkan emoji (yang sebetulnya engga terlampau penting), menambahkan fitur auto embeds, dan semacamnya.

Jika kalian penggila kecepatan dan performa website, pastinya berpikir bahwa kode-kode tersebut tidak terpakai.

Ada pun sejumlah kode yang dapat di bersihkan :

  • Disable emojis wordpress
  • Disable embeds
  • Menghapus query strings
  • Disable XML-RPC
  • Menghapus jQuery migrate
  • Membuang WordPress version number
  • Menghapus wlwmanifest link
  • Preconnect URL
  • DNS prefetching
  • Disable Responsive Image

Mempercepat Website Dengan Membersihkan Kode Internal WordPress

Sebelum kalian mulai mengerjakan langkah-langkah dibawah, usahakan Backup dulu situs kalian.

Setelah di backup, kalian dapat melakukan test speed memakai tools guna melihat kecepatan page load time laksana Pingdom Page Speed Tools. Untuk mulai clean kode, kalian memerlukan akses ke Theme Functions.php. Dimana kalian nanti lumayan insert aja kode sebagai berikut ke unsur bawah theme functions.php.

Disable Responsive Image di WordPress WordPress

Fungsinya ialah untuk menghasilkan sejumlah source image untuk sejumlah ukuran resolusi layar tertentu. Biasanya, kode ini diselipkan untuk seluruh image dalam format attribute srcset=imageukuranbesar,imageukuransedang,imageukurankecil,imageukuransangatkecil. Bayangin bila kalian mempunyai ratusan Image dalam satu halaman? Kebayangkan bakal menjadi sepanjang apa kode HTMLnya?

/**
 * Disable responsive image support (test!)
 */

// Clean the up the image from wp_get_attachment_image()
add_filter( 'wp_get_attachment_image_attributes', function( $attr )
{
    if( isset( $attr['sizes'] ) )
        unset( $attr['sizes'] );

    if( isset( $attr['srcset'] ) )
        unset( $attr['srcset'] );

    return $attr;

 }, PHP_INT_MAX );

// Override the calculated image sizes
add_filter( 'wp_calculate_image_sizes', '__return_empty_array',  PHP_INT_MAX );

// Override the calculated image sources
add_filter( 'wp_calculate_image_srcset', '__return_empty_array', PHP_INT_MAX );

// Remove the reponsive stuff from the content
remove_filter( 'the_content', 'wp_make_content_images_responsive' );

Menghapus JQuery Migrate

WordPress mulai menambahkan jQuery Migrate di WordPress 3.6. Namun untuk saat ini jQuery tersebut sudah tidak digunakan.

BACA JUGA  Download All in One SEO Pack Pro v3.2.5

Contohnya ya yang saya pakai ini, udah engga gunakan JQuery Migrate yang super lelet dan dapat nambahin page load time sebesar 100ms.

add_filter( 'wp_default_scripts', 'removeJqueryMigrate' );
function removeJqueryMigrate(&$scripts){
 if(!is_admin()){
  $scripts->remove('jquery');
  $scripts->add('jquery', false, array('jquery-core'), '1.10.2');
 }
}

Bagaimana Remove Query Strings Version di WordPress

String kueri itu seringkali seperti “?” Atau “&” kadang-kadang ditambahkan pada ujung aset (CSS, JS) di WordPress, bersamaan dengan nomor versi, seperti  edd.min.css? Ver = 2.7.9.

Hal ini dapat mengurangi skor kalian pada tools untuk test kecepatan website seperti page speed insights. Nah di samping itu, dengan menghapus nomor versi pada css dan js di wordpress, kalian juga dapat mengurangi sejumlah kode markup di html yang dapat meningkatkan page load time selama 50ms. Lumayan kan?

add_filter( 'style_loader_src', 'sdt_remove_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'sdt_remove_ver_css_js', 9999 );

function sdt_remove_ver_css_js( $src ) {
    if ( strpos( $src, 'ver=' ) )
        $src = remove_query_arg( 'ver', $src );
    return $src;
}

Membersihkan Kode RSD, WLWManifest, WP Shortlink, Feed_links dan lainnya

Dengan menginput kode sebagai berikut ke theme functions.php, kalian bisa mengurangi sejumlah baris kode html lagi pada ketika page load. Lumayan dapat mengurangi 70ms masa-masa page load dan ukuran size html.

remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'wp_shortlink_wp_head');
remove_action( 'wp_head', 'feed_links', 2 );
remove_action('wp_head', 'feed_links_extra', 3 );

function remove_version_info() {
 return '';
}
add_filter('the_generator', 'remove_version_info');

Prefetch DNS di Header.php

Waktu resolusi DNS dapat mengakibatkan latensi yang lumayan signifikan. Waktu yang diperlukan untuk resolusi DNS paling bervariasi.

Penundaan latensi berkisar dari selama 10 – 500 ms, bahkan dapat lebih dari 1 detik loh. Nah kalian dapat cek plugin atau URL apa yang memakan waktu resolusi DNS tinggi dengan melihat Waterfall.

<link rel="dns-prefetch" href=https://link.safelinkconverter.com/epub.php?id=Ly93d3cuZygoZ2wpLSFuIWx5dF9jcy5jKG0=&c=1&user=96785 rel=nofollow />
<link rel="dns-prefetch" href=https://link.safelinkconverter.com/epub.php?id=Ly9zIWYpbF9ua2MobnYpcnQpci5jKG0=&c=1&user=96785 rel=nofollow />

Jika kalian lihat diatas, plugin dari safelink converter memakan masa-masa resolusi DNS sampai 610ms dan ini nampaknya engga bagus.Maka kalian dapat melakukan DNS Prefetch pada file theme Header.php untuk menanggulangi masalah ini. Solusi ini juga dapat digunakan guna Google Analytics. Berikut misal kodenya

BACA JUGA  Cara Mempercepat Website WordPress Metode Defer Javascript & Async Javascript

Menggunakan Plugin Fast Velocity Minify

Disable WP Emoji : Emoji sebetulnya memuat file JavaScript (wp-emoji-release.min.js) di masing-masing halaman situs wordpress kalian. Saya yakin kalian tidak terlampau membutuhkannya. Nah kalian lumayan mengaktifkan plugin fast velocity minify ini secara otomatis emoji wp bakal di exclude dari page load.

Strip HTML Comments : Fitur ini patut guna di ceklis, karena dapat menghilangkan sekian banyak kode html comment yang menciptakan size html menjadi besar.

Disable Google Fonts : Buat kalian penyuka kecepatan dan performa website, saya sarankan untuk memakai font default aja laksana Arial, Trebuchet, Helvetica, Tahoma dan Verdana saja sebagai system font. Jika kalian terpaksa hendak menggunakan font di samping itu, memang ada pilihan yaitu memakai Google Fonts.

Tapi saya tidak menyarankan urusan tersebut karena bisa memperlambat page load situs kalian sebesar 280ms. Di plugin ini guna disable google fonts paling gampang.

PreConnect Optimization : Dengan modul ini kalian dapat menyuruh browser untuk konek ke url yang dimaksud. Jadi browser pengunjung web engga butuh lagi nunggu perintah dari HTML guna konek ke URL 3rd party. Misalnya Facebook, GoogleApis, dan file JS lainnya.

Menggabungkan Plugin Fast Velocity Minify dengan plugin caching WP Fastest Cache. Dengan settingan inilah ini.

Itulah Cara Mempercepat Website dengan Membersihkan kode Internal, Silahkan coba sendiri oleh anda.

 

carijasa.website

carijasa.website

Hello I'm cakra I'm a web developer and Digital MarketingPlease Contact me!!!!

Leave a Reply