FOLLOW www.instagram.com/ml_freak
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 :
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.
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.
Untuk lebih jelasnya silakan lihat gambar dibawah:
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("post1 <data:post.id/>"); var obj1=document.getElementById("post2 <data:post.id/>"); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf("<br>"); if(r>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("post1<data:post.id/>"); var obj1=document.getElementById("post2<data:post.id/>"); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf("<br>"); if(r>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.
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
- Mengubah ekstensi Gambar
- Mengompress Gambar
- Menghapus Snippet count
Dan alasan untuk mengubah ekstensi adalah
- Ukuran Lebih kecil
- Tetap jernih jika di zoom
- Bisa di kompres tanpa mengurangi kualitas
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
- compresspng.com (Untuk Gambar Ekstensi PNG)
- compressjpeg.com (Untuk Gambar Ekstensi JPEG)
- 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='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSnippet("summary<data:post.id/>");</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..
Jangan lupa share dan baca artikel lainnya
0 komentar untuk Cara agar blog mendapatkan Skor 100 Di GTmetrix .