Cara Meningkatkan Loading Blog di PageSpeed Insights
Cara Meningkatkan Loading Blog - Beberapa hari ini saya disibukan dengan mengoprek-oprek blog saya ini terkait meningkatkan loading blog dengan menggunakan PageSpeed Insights miliknya Google. Karena saya merasa sayang jika tampilan blog sudah responsive, user friendly, mobile friendly dan super SEO tapi tidak didukung dengan kecepatan loading blog yang mumpuni.
Saya yakin, saat ini bukan saya saja yang melakukannya tapi para pemilik blog saling berlomba lomba membenahi blognya masing masing, untuk mendapatkan kecepatan loading blog yang maksimal baik dari tampilan dekstop maupun tampilan mobily (HP). Haa, lalu bagaimana dengan blog anda ?
Cara Meningkatkan Loading Blog di PageSpeed Insights.
Baiklah disini saya akan share tentang perbaikan-perbaikan yang telah dilakukan. Jadi disini akan saya jelaskan dengan versi saya dengan harapan mudah dimengerti :
1. Render Blocking CSS Font Awesome
Jika anda menggunakan font Awesome Icon eksternal untuk digunakan di blog anda, maka pasti terjadi blocking terhadap CSS Font Awesome, untuk mengatasinya hapus link pemanggilan CSS Font Awesome Icon eksternal yang kamu gunakan, biasanya terletak diantara
Lalu gunakan script dibawah ini, copykan persis diatas kode </body>
2. Optimalkan Pengiriman Google Font CSS
Sama seperti diatas bahwa jika anda menggunakan font eksternal dalam hal ini dari Google Font Web, maka akan terjadi blocking terhadap pemanggilan jenis font yang kamu gunakan. Untuk mengatasinya hapus link pemanggilan CSS Google Font eksternal yang kamu gunakan, biasanya terletak diantara
Untuk penjelasan lengkapnya silahkan baca pada artikel Cara Mengoptimalkan Pengiriman Google Font CSS valid HTML5
3. Optimalkan Gambar
Saya sadar bahwa semua gambar yang saya muat diblog ini saya olah menggunakan aplikasi Adobe Photoshop dengan proses "Save As" biasa saja, yang semestinya gambar tersebut masih bisa di kompress sehingga ukuran filenya lebih kecil lagi. Untuk melakukannya, saya melakukan "Save for Web" dan menguploadnya kembali ke internet.
Cara lain agar ukuran gambar bisa menjadi kecil, yaitu dengan menggunakan tool online seperti: Compresspng.com, ataupun tool Compressjpg.com, cara cukup mudah yaitu tinggal upload lalu hasilnya kita download.
4. Ubah target ketuk seperlunya
Pada tampilan di HP (Mobile) blog saya mengalami error di bagian ini. Yang perlu diperhatikan adalah semua tautan/tombol laman Anda cukup besar untuk diketuk dengan mudah oleh pengguna di layar sentuh.
Berikut pesan kesalahannya :
Beberapa tautan/tombol di laman web mungkin terlalu kecil untuk bisa diketuk dengan mudah pada layar sentuh oleh pengguna. Pertimbangkan untuk memperbesar target ketuk ini guna memberikan pengalaman pengguna yang lebih baik.
Target ketuk berikut berada di dekat target ketuk di sekitarnya dan mungkin butuh ruang tambahan.
Target ketuk <a href="https://plus.g…04088445374338" class="g-profile">Hanyalah</a> dan 9 lainnya berdekatan dengan target ketuk yang lain.
Dalam kasus saya adalah link icon author yang sekaligus satu kesatuan dengan link google plus
Untuk memperbaikinya saya melakukan perubahan ukuran font terhadap kode :
Silahkan sesuaikan dengan CSS pada masing-masing blog, selain itu juga Widget Google + saya hapus juga karena tautan yang terlalu kecil, sementara saya belum menemukan cara untuk mengubah ukuran font terhadap widget tersebut.
5. Manfaatkan penyimpanan Cache Browser
Ini biasa disebut dengan Leverage browser Expires Headers berkaitan dengan halaman sebuah web seperti gambar, css, javascript, dan sebagainya. Sehingga, saat membuka kembali halaman web yang sama, maka halaman web akan semakin cepat terbuka, karena file yang pada awalnya harus di unduh, sekarang sudah tersimpan di dalam media penyimpanan.
Untuk mengatasi hal tersebut,anda bisa menambahkan script, letakkan kode di bawah ini tepat di atas kode
Untuk kasus ini, perubahan expires header di bagian Yslow pada halaman Gmetrix bisa di lihat hasilnya sehari kemudian.
6. Memperkecil CSS
Untuk memperkecil ukuran CSS blog, saya menggunakan tool kompress buatan Minifier dengan nama MINIFY A JAVASCRIPT OR CSS FILE
7. Hapus JavaScript yang memblokir render
Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas. Disini saya diminta untuk menghapus link javascript eksternal, seperti dibawah :
Yang saya lakukan adalah merubah dan menambahkan kode
Artikel Cara Meningkatkan Loading Blog di PageSpeed Insights ini akan saya updated sesuai perubahan-perubahan terhadap blog ini.
Selanjutnya, yang masih harus dikerjakan dan belum terselesaikan adalah :
Saya yakin, saat ini bukan saya saja yang melakukannya tapi para pemilik blog saling berlomba lomba membenahi blognya masing masing, untuk mendapatkan kecepatan loading blog yang maksimal baik dari tampilan dekstop maupun tampilan mobily (HP). Haa, lalu bagaimana dengan blog anda ?
Cara Meningkatkan Loading Blog di PageSpeed Insights.
Baiklah disini saya akan share tentang perbaikan-perbaikan yang telah dilakukan. Jadi disini akan saya jelaskan dengan versi saya dengan harapan mudah dimengerti :
1. Render Blocking CSS Font Awesome
Jika anda menggunakan font Awesome Icon eksternal untuk digunakan di blog anda, maka pasti terjadi blocking terhadap CSS Font Awesome, untuk mengatasinya hapus link pemanggilan CSS Font Awesome Icon eksternal yang kamu gunakan, biasanya terletak diantara
<head> dan </head> seperti dibawah :<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/ >Lalu gunakan script dibawah ini, copykan persis diatas kode </body>
<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
//]]>
</script>2. Optimalkan Pengiriman Google Font CSS
Sama seperti diatas bahwa jika anda menggunakan font eksternal dalam hal ini dari Google Font Web, maka akan terjadi blocking terhadap pemanggilan jenis font yang kamu gunakan. Untuk mengatasinya hapus link pemanggilan CSS Google Font eksternal yang kamu gunakan, biasanya terletak diantara
<head> dan </head> seperti dibawah :<link href='https://fonts.googleapis.com/css?family=Poppins:400,300,700,500,600' rel='stylesheet' type='text/css'/>Untuk penjelasan lengkapnya silahkan baca pada artikel Cara Mengoptimalkan Pengiriman Google Font CSS valid HTML5
3. Optimalkan Gambar
Saya sadar bahwa semua gambar yang saya muat diblog ini saya olah menggunakan aplikasi Adobe Photoshop dengan proses "Save As" biasa saja, yang semestinya gambar tersebut masih bisa di kompress sehingga ukuran filenya lebih kecil lagi. Untuk melakukannya, saya melakukan "Save for Web" dan menguploadnya kembali ke internet.
Cara lain agar ukuran gambar bisa menjadi kecil, yaitu dengan menggunakan tool online seperti: Compresspng.com, ataupun tool Compressjpg.com, cara cukup mudah yaitu tinggal upload lalu hasilnya kita download.
4. Ubah target ketuk seperlunya
Pada tampilan di HP (Mobile) blog saya mengalami error di bagian ini. Yang perlu diperhatikan adalah semua tautan/tombol laman Anda cukup besar untuk diketuk dengan mudah oleh pengguna di layar sentuh.
Berikut pesan kesalahannya :
Beberapa tautan/tombol di laman web mungkin terlalu kecil untuk bisa diketuk dengan mudah pada layar sentuh oleh pengguna. Pertimbangkan untuk memperbesar target ketuk ini guna memberikan pengalaman pengguna yang lebih baik.
Target ketuk berikut berada di dekat target ketuk di sekitarnya dan mungkin butuh ruang tambahan.
Target ketuk <a href="https://plus.g…04088445374338" class="g-profile">Hanyalah</a> dan 9 lainnya berdekatan dengan target ketuk yang lain.
Dalam kasus saya adalah link icon author yang sekaligus satu kesatuan dengan link google plus
class='g-profile' di bawah Judul Artikel dianggap terlalu kecil. Untuk memperbaikinya saya melakukan perubahan ukuran font terhadap kode :
.date-header { font-size:16px; }Silahkan sesuaikan dengan CSS pada masing-masing blog, selain itu juga Widget Google + saya hapus juga karena tautan yang terlalu kecil, sementara saya belum menemukan cara untuk mengubah ukuran font terhadap widget tersebut.
5. Manfaatkan penyimpanan Cache Browser
Ini biasa disebut dengan Leverage browser Expires Headers berkaitan dengan halaman sebuah web seperti gambar, css, javascript, dan sebagainya. Sehingga, saat membuka kembali halaman web yang sama, maka halaman web akan semakin cepat terbuka, karena file yang pada awalnya harus di unduh, sekarang sudah tersimpan di dalam media penyimpanan.
Untuk mengatasi hal tersebut,anda bisa menambahkan script, letakkan kode di bawah ini tepat di atas kode
</head><include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>
<meta http-equiv="expires" content="sat, 02 jun 2020 00:00:00 GMT"/>Untuk kasus ini, perubahan expires header di bagian Yslow pada halaman Gmetrix bisa di lihat hasilnya sehari kemudian.
6. Memperkecil CSS
Untuk memperkecil ukuran CSS blog, saya menggunakan tool kompress buatan Minifier dengan nama MINIFY A JAVASCRIPT OR CSS FILE
7. Hapus JavaScript yang memblokir render
Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas. Disini saya diminta untuk menghapus link javascript eksternal, seperti dibawah :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>Yang saya lakukan adalah merubah dan menambahkan kode
async seperti terlihat dibawah ini :<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>Artikel Cara Meningkatkan Loading Blog di PageSpeed Insights ini akan saya updated sesuai perubahan-perubahan terhadap blog ini.
Selanjutnya, yang masih harus dikerjakan dan belum terselesaikan adalah :
- Aktifkan Pemampatan - Aktifkan Kompresi (Desktop/Selular)
- Optimalkan Pengiriman CSS (Selular)
- Hindari pengalihan laman landas (Selular)
- Manfaatkan penyimpanan cache browser (Selular)
No comments