Cara meningkatkan skor GTmetrix hingga 100%

Cara mendapatkan Skor di atas 90% atau bahkan 100 Di GTmetrix. OKe semuanya Kali ini saya akan membahas Tentang bagaimana cara mendapatkan skor 100 pada GTmetrix.com. 

Kecepatan pada sebuah website harus Di perhatikan, Karena sangat berpengaruh pada Kenyamanan pengguna.. Jika blog anda lambat yang ada para pengunjung akan kabur karena tidak betah menunggu..

Untuk saya mencoba membuat artikel tentang Kecepatan Di GTmetrix..

Sebenarnya ini bukan murni Pemikiran Saya, Tetapi saya akan mencoba merangkum berbagai Cara atau tutorial pada GTmetrix ini..

Untuk Skor GTmetrix Saya Sendiri Ya terbilang Lumayan Lah.. Anda bisa melihat skor Pada blog saya Lewat link berikut ini.. https://gtmetrix.com/reports/www.furikode.xyz/7fKJX5ZV

Nah gimana? Tertarik Untuk mencoba tutorial tutorial berikut ini untuk mendapatkan Skor Seperti pada Template yang saya pakai?

Apa Itu GTmetrix ?

GTMetrix adalah salah satu tool untuk mengecek kecepatan website yang paling terkenal dan paling banyak digunakan selain Pingdom . 

Jika Dibandingkan dengan tool developer lainnya, GTMetrix cukup mudah digunakan dan pemula juga bisa dengan mudah mempelajarinya. 

Mereka menggunakan kombinasi antara Google PageSpeed Insights dan YSlow untuk menghasilkan nilai dan rekomendasinya..

Bagaimana Cara mendapatkan Skor 100 Di GTmetrix ?

Oke, Saya tidak mengambil semua masalah yang ada di GTmetrix, Melainkan Hanya beberapa saja, Kenapa hanya beberapa?

Karena setiap saya nyoba nyoba template pasti masalah yang muncul sama Saja yang itu itu saja. Jadi saya akan mengambil masalah Yang Paling umum Saja..

Masalah Masalah Itu antara Lain adalah :

1. Reduce DNS Looksup 
2. Minify HTML, CSS, JavaScript 
3. Avoid Landing Page 
4. Serve Scaled image 
5. Optimize Image 
6. Leverage caching browser 
7. Add Expires Header

Oke Sebelum Lebih lanjut saya ingin memberi tau terlebih dahulu, bahwa saya tidak menjamin bisa seratus.

Sebab ada beberapa template yang memang tidak bisa di edit agar 100, Mengapa? Karena ada template template yang saat di coba agar kecepatan naik namun template tersebut bisa berubah..

Ntah itu bentuk nya jadi acak acakan Atau beberapa fitur dari template itu jadi tidak berfungsi.. So Sesuaikan saja dengan template anda Dan satu Lagi.. 

BACKUP TERLEBIH DAHULU TEMPLATE ANDA.

Oke Langsung saja masuk ke yang pertama..

1. Reduce DNS Looksup

Reduce DNS Lookups, bisa juga dikatakan sebagai mengurangi pencarian DNS merupakan sebuah masalah loading blog pada GTmetrix bagian YSlow.

Singkatnya, pada permasalahan ini GTmetrix yang memerintahkan kita untuk mengurangi script-script eksternal yang dihosting pada tempat-tempat yang berbeda.

Contohnya seperti ini. Anda mengakses sebuah blog, dan di blog tersebut terdapat banyak script yang dihosting diluar atau eksternal.

Untuk lebih jelasnya silakan lihat gambar dibawah:

Sudah lihat? Pada ilustrasi di atas blog saya mempunyai 3 Macam script JS yang ingin di masukkan ke blog.

Dikarenakan ukurannya cukup besar, Jadi 3 Script itu saya hosting diluar. Masing masingnya saya host di :

• Your JavaScript
• Github 
• Google Drive 
• Wordpress Self Host 

Tanpa disadari, Menaruh script dihost yang berbeda seperti ini dapat menyebabkan loading blog lambat,

Sebab browser akan meminta ke tempat-tempat yang berbeda dan memakan waktu lama  untuk menerima respons dari DNS masing-masing script.,

Untuk Solusinya Sendiri Kalian Bisa melihat pada artikel Mengatasi Reduce DNS Looksup

2. Minify HTML, CSS, Dan ,JS

Masalah ini muncul ketika Script script HTML CSS DAN JS Masih bisa di perkecil ukurannya..

Jadi Misalkan Ada Script seperti ini :

<script                                                                                                                                                        type='text/javascript'> var obj0=document.getElementById(&quot;post1                                                                                                                                             <data:post.id/>&quot;); var obj1=document.getElementById(&quot;post2                                  <data:post.id/>&quot;); var s=obj1.innerHTML;                                             var t=s.substr(0,s.length/2); var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;); if(r&gt;0)                                                                                                           {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>

Kode Tersebut memiliki banyak sekali jarak jarak. Maka untuk meminifi nya ada hanya perlu menghapus jarak tersebut sehingga hasilnya seperti ini :

<script type='text/javascript'> var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;); var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;); if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>

Sangat mudah bukan.. Jika ingin penjelasan yang lebih men detail silahkan Simak di artikel Minify HTML ,CSS ,Dan JavaScript

3. Avoid Landing Page Redirect

Saat mengakses blog saya lewat Komputer/laptop maka url blog saya adalah furikode.xyz ,

Tapi saat dicoba diakses melalui handphone maka link website akan berubah otomatis menjadi furikode.xyz/?m=1.

Kenapa bisa gitu? karena blog mendeteksi sedang diakses menggunakan Handphone

Contoh lain, misalnya nih sekarang blog anda homepagenya berbentuk statis, dengan kata lain mempunyai laman tersendiri ketika pengunjung berada di home page anda.

Mungkin Halaman yang berisikan Kalimat2 sapaan atau Logo dari website yang dimiliki atau sebagainya

Dan yang menjadi masalah juga banyak tutorial yang beretebaran di internet membuat homePage static menggunakan redirect..

Contoh Saya mempunyai halaman furikode.xyz/p/sitemap.html . Maka link dari furikode.xyz akan dialihkan Halaman Tadi

itulah yan biasa disebut dengan redirect ..

..sebuah link/URL yang dialihkan, Seperti dari Link A dialihkan Ke link B, Padahal yang kita mau buka adalah Link A

Tanpa disadari redirect ini bisa menyebabkan loading pada blog menjadi lambat. Mengapa? karena blog akan merequest 2 kali. yaitu ke dan Ke b.

Untuk Mengatasinya Bisa simak Di Artikel yang satu ini Mengatasi Avoid Landing Page Redirect.

4. Serve Scaled Images

Serve Scaled images terjadi akibat Gambar pada blog, sehingga blog pun menjadi Lambat untuk memuat..

Sebagai contoh sedikit.. Anda memiliki gambar yang ukurannya 350 x 350 px Sementara gambar tersebut hanya di tampilkan sebesar 100 x 100 px .

Baca Juga : Cara riset keyword tanpa tools

Hal tersebut tentu saja membuang buang kuota untuk mendownload gambar tersebut karena ukurannya menjadi besar..

Untuk mengatasinya sangatlah mudah, Anda hanya perlu mencari Link gambar yang ukurannya menjadi masalah.

Seperti pada gambar, Jika sudah ketemu maka tinggal ubah saja ukuran Gambar tersebut.

5. Optimize Image

Masalah ini muncul ketika gambar memiliki Ukuran yang terlalu besar.. Sehingga membuat blog menjadi berat..

Untuk mengatasi optimize image ini ada 3 cara Yaitu

1. Mengubah ekstensi Gambar
2. Mengompress Gambar
3. Menghapus Snippet count

5.1 Megubah ekstensi gambar.

Bisa Dilihat Gambar Yang memiliki Ekstensi PNG Memiliki ukuran lebih kecil dari pada PNG Dan JPG. Jadi Usahakan menggunakan Gambar ber ekstensi PNG ya..

Dan alasan untuk mengubah ekstensi adalah

1. Ukuran Lebih kecil
2. Tetap jernih jika di zoom
3. Bisa di kompres tanpa mengurangi kualitas

5.2. Mengompres Gambar

Untuk yang kedua ini Cukup simple karena anda hanya tinggal megupload gambar pada web web pengompress secara online

Namun tentu efek samping nya kualitas menjadi sedikit menurun.. Beberapa web yang bisa mengomoress antara lain

1. compresspng.com (Untuk Gambar Ekstensi PNG)
2. compressjpeg.com (Untuk Gambar Ekstensi JPEG)
3. gifcompressor.com (Untuk Gambar Ekstensi GIF)

5.3. Menghapus snippet count

Cari kode berikut ini atau yang mirip seperti ini Pada Template Blog anda

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>

Jika sudah maka ubah menjadi seperti ini

<div class='snippets'><data:post.snippet/></div>

6. Leverage Caching Browser

Leverage Browser Caching atau dalam bahasa Indonesianya memanfaatkan penyimpanan cache browser .

Terjadi Sebab ada satu/lebih sumber daya yang tidak dipakai oleh si pengguna pemilik browser

Gambarannya seperti ini..

Saat anda membuka blog saya. Maka browser akan mendownload /script/abcd.js. Lalu anda keluar dari website saya, Setelah beberapa saat anda mengunjungi kembali website saya..

Baca Juga : Cara mendapat skor 100 di PageSpeed insight

Tetapi Anda harus mendownload kembali /script/abcd.js, Padahal kan tadi sudah..

Itulah yang dinamakan dengan Leverage caching browser.. Anda kharu mendownload ulang script yang tadi sudah di download.. 

Jika hal seperti itu terjadi tentu membuat boros waktu dan kuota internet

Untuk penjelasannya Secara Detail Silakan Lihat Mengatasi Leverage Caching Browser

7. Add Expires Header

Untuk yang terakhir ini terbilang Yang paling sulit dari yang sebelum sebelum nya..

Expires header sendiri adalah suatu permasalahan yang terjadi Pada sebuah blog, Yang penyebabnya adalah penggunaan cache yang kurang maksimal.

Untuk masalah yang satu ini tergolong Mendapatkan prioritas tinggi.. Jadi jangan heran ya kalau kalian mendapatkan masalah seperti ini..

Add expires header ini berkaitan dengan Gambar, Script css, dan juga JavaScript.. Jadi saat anda membuka suatu website pasti browser akan mendownload Bagian dari web itu..

Jika tidak menggunakan expires header saat anda berkunjung kembali ke website yang sama makan anda tidak perlu mendownloadnya kembali..

Tetapi Jika menggunakan expires header maka anda tidak perlu mendownload lagi bagian bagian dari website tersebut karena sudah tersimpan.

Karena Penjelasannya Panjang jadi Sudah dipisah dan silahkan dibaca cara untuk mengatasi nya.. Cara mengatasi add expires Header.

Penutup

Nah itulah Artikel tentang Mendapatkan Skor 100 Di GTmetrix .. Memang itu tidak mudah dan saya sendiri belum bisa melakukan semuanya..

Seperti yang saya bilang, Artikel artikel tersebut saya kumpulkan dari berbagai sumber dan beberapa saja yang terapkan sendiri..

Okelah semoga artikel ini berguna, Saya akhir salam..

BERITA LENGKAP DI HALAMAN BERIKUTNYA

Halaman Berikutnya

Subscribe to receive free email updates: