Monday, April 27, 2015

Cara Meningkatkan Skor GTmetrix

GTmetrix merupakan salah satu tool untuk mengecek kecepatan loading sebuah blog saat dibuka. Mengapa kecepatan blog sangat penting, ini tidak terlepas dari kenyataan tidak semua dapat menikmati internet cepat. Sebuah blog harus dapat dibuka dalam konsisi koneksi minimal terutama konten utama yang berupa tulisan artikel atau gambar.

Pada GTmetrix hasil pengecekan kecepatan blog ditampilkan dalam bentuk skor dan Grade. Skor rata-rata yang dianggap baik adalah 80 dan termasuk dalam Grade B. Pengecekan GTmetrix meliputi beberapa faktor seperti penggunaan cache browser, optimasi image, ukuran image spesifik dan lain-lain.

Untuk memperoleh skor yang tinggi pada GTmetrix kita tinggal memperbaiki tiap-tiap parameter yang bertanda merah seperti berikut ini :
Hal-hal yang mengurangi skor GTmetrix

Empat parameter yang saya capture diatas merupakan permasalahan yang umum terjadi seperti yang saya alami pada blog ini. Semula skor pagespeed pada GTmetrix blog nulis0ilmu ini adalah sebesar 80% dan dengan beberapa perbaikan akhirnya bisa bertambah menjadi 85%.

Berikut ini beberapa langkah untuk meningkatkan skor pagespeed pada GTmetrix:

Manfaatkan cache browser

Cache adalah penyimpanan sementara pada browser untuk sebuah blog yang diset bisa diset untuk expired pada waktu tertentu. Dengan memanfaatkan cache pada browser kita bisa meningkatkan kecepatan loading sebuah blog karena beberapa file tidak perlu diload ulang dari server. Ada beberapa cara untuk menggunakan cache browser seperti penggunaan header expire atau meta tag Cachh-control.

Optimalkan ukuran image

Mengoptimalkan ukuran image berarti kita memperkecil image pada suatu batas yang tidak mungkin diperkecil lagi. Sebuah image akan ditampilkan dalam ukuran tertentu pada blog, jadi pastikan ukuran saat ditampilkan itulah yang menjadi ukuran saat image disimpan.

Selain itu kita bisa menggunakan beberapa tool untuk mengoptimalkan ukuran image seperti GIMP. yang perlu diperhatikan saat mengoptimalkan ukuran image ini diharapkan kita tidak mengormaban kualitas dan tampilan image.

Tentukan dimensi image

Dimensi yang dmaksud adalah ukuran lebar (width) dan tinggi (height) pada sebuah image. Ukuran image yang tidak ditentukan menyebabkan browser melakukan proses "mengira-ngira" ukuran image yang ua terima dan ini dianggap jelek oleh GTmetrix.

Yang harus kita lakukan adalah menaruh tag width dan height pada setiap image seperti contoh berikut ini :
<img width="200px" height="150px" src=..." alt="..." title="..." />

Gunakan tag Async pada source file javascript (.JS)

Maksud dari Async disini adalah asyncronous yang berarti kode html dan file javascript pada halaman blog di load sendiri-sendiri tidak saling menunggu satu sama lain. Hal ini terkait dengan pesan bahwa loading file javascript (.JS) menghalangi proses render halaman blog.

Untuk membuat sebuah file javascript di load secara asyncronous kita bisa menambahkan tag async="async" pada source script file javascript se[erti contoh berikut ini:
 <script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script> 

Selain dari beberapa yang saya ungkapkan diatas tentunya masih ada beberapa cara lainnya untuk memperbaiki skor pagespeed GTmetrix seperti penggunaan CDN, Minify HTML dan CSS serta beberapa cara yang lainnya yang bisa anda eksperimen sendiri. Yang penting dari GTmetrix ini adalah setiap byte begitu berharga dan amat diperhitungkan dalam menentukan skor.

Penasaran siapa yang pernah dapat skor 100% GTmetrix?

Silahkan kiunjungi blog dari salah satu blogger asal Norwegia yang bernama Thomas Bensmann dialamat berikut ini :

https://bensmann.no/full-score-google-pagespeed-pingdom-gtmetrix/

Berikut ini screenshot test GTmetrix-nya :
Screenshot skor GTmetrix 100%

5 komentar:

  1. kalau untuk template bagaimana pak, apa berpengaruh terhadap kecepatan loading blog?

    ReplyDelete
    Replies
    1. Template sangat berpengaruh pada kecepatan loading blog. template yang lebih simple tentu lebih cepat loadingnya.

      Delete
  2. sepertinya menjelaskan kulitnya saja, dagingnya disimpan

    ReplyDelete
  3. Sebenarnya pengaruh terbesar untuk kecepatan loading web itu ada pada jasa hostingnya.

    ReplyDelete
  4. menurut ane sihh lumayan , karna ngliat artikel ini dan lngsng praktek blog ane aga mendingan loading blognya gan ,, makasih juga buat admin walaupun benar kata di ijoel ,, daging ny masih tidak kelihatan untuk pembahasan ini hehehhe

    ReplyDelete