Mengetahui Kecepatan Website Blog

Google PageSpeed Insights dan Gtmetrix, mungkin sebagian dari Anda sudah mengenal atau mengetahui situs yang menyediakan alat untuk menguji kecepatan website maupun blog Anda. Atau sebagian dari Anda malah belum tahu tentang situs ini.

Ya, dua situs tersebut memang diperuntukkan bagi Anda yang ingin mengetahui seberapa cepat Website atau Blog Anda ketika diakses oleh sebuah komputer.Saya akan memulainya dari Google PageSpeed Insights, situs ini adalah situs resmi milik Google, dalam memberikan penilaian, Google PageSpeed Insights ini memberikan penilaiannya dari dua aspek, yaitu website ataupun blog dari tampilan versi Desktop maupun tampilan versi Mobilenya.

Artikel Lain: Form Tidak Bisa di Maximize Visual Basic

Dalam penilaiannya Google PageSpeed Insights ini juga memberikan saran-sarannya agar website kita menjadi lebih cepat diakses. Contoh saja seperti masalah gambar, css, html dan lain sebagainya. Berikutnya akan Saya jelaskan beberapa diantara saran-saran Google PageSpeed Insights tersebut. Serta bagaimana sebaiknya mengatasi masalah-masalahnya.

Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas.

Maksud dari Saran ini adalah sebaiknya kita menghapus atau merubah script dilaman kita yang terload dahulu sebelum digunakan, atau juga berarti script tersebut membuat laman kita berat untuk diakses karena membutuhkan waktu yang lama untuk merender script ataupun kodenya. Dalam kasus ini kita bisa mengatasi masalah ini dengan beberapa cara. Contoh jika script Css kita adalah Css eksternal, artinya file Css tersebut tidak tertulis langsung dalam tag html kita, maka kita bisa merubahnya agar Css tersebut disatukan dengan html kita.

Contoh untuk masalah eksternal Css yang biasa kita tulis tagnya di web atau blog kita:

<link type=’text/css’ rel=’stylesheet’ href=’https://www.blogger.com/static/v1/widgets/1409279300-widget_css_mobile_2_bundle.css’ />

Kita bisa merubahnya menjadi seperti ini agar tidak mengganggu perenderan:

<style type=’text/css’>

…disini kode Css Anda

</style>

Untuk kasus lain mungkin kita disuruh lebih memilih javascript Asyncron dibanding Javascript biasa, karena javascript Asyncron ini setahu Saya akan di load saat benar-benar dibutuhkan, dan jika tidak dibutuhkan maka tidak akan di load. Jadi untuk Javascript Asyncron ini memang patut diutamakan. Berikut adalah contoh penulisan Javascript Asyncron:

Contoh javascript yang ditulis dalam tag biasa:

<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script>

Contoh Javascript yang ditulis secara Asyncron:

<script>
window.___gcfg = {lang: ‘id’};
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Manfaatkan penyimpanan cache browser.

Dalam hal ini kita bisa melakukannya melalui .htaccess jika kita memilki access ke hostingan kita tentu saja. Contoh untuk mencache melalui .htaccess:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 month”
ExpiresByType image/jpeg “access 1 month”
ExpiresByType image/gif “access 1 month”
ExpiresByType image/png “access 1 month”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 month”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ##

Script .htaccess diatas akan mencache file-file di hostingan kita yang sudah kita jadikan web selama satu bulan. Jadi misalnya ada orang yang baru pertama kali membuka website ataupun blog kita pertama kali mungkin akan terasa berat, tetapi untuk yang kedua kali pasti akan lebih ringan, karena file-file di website kita yang sudah diakses sebelumnya akan disimpan sementara di web browser kita. Anda dapat merubah 1 month dengan 1 year, agar script ataupun filenya disimpan selama 1 tahun, jika memang hal ini dibutuhkan.

Memformat dan mengompresi gambar dengan benar dapat menghemat banyak bita data.

Dalam kasus ini kita disuruh untuk mengoptimalkan gambar, agar website kita tidak terlalu berat karena me load gambar-gambar dengan ukuran yang besar tersebut. Untuk itu kita harus bisa mengompresi gambar, maksudnya adalah memperkecil ukuran gambar bukan dari panjang atau lebarnya tetapi ukurannya. Disarankan untuk menggunakan gambar .png atau .gif dan bisa Anda kompress melalui photoshop ataupun aplikasi Smush it dari yahoo.

Memampatkan kode HTML, termasuk CSS dan JavaScript sebaris apa pun yang ada di dalamnya, dapat menghemat banyak bita data dan mempercepat waktu pengunduhan dan penguraian.

Untuk hal ini kita bisa mengompress ukuran file html kita agar lebih ringan, kecil dan sedikit. Karena prinsip kompress sendiri memang mengoptimalkan ukuran filenya, dan membuang apa-apa yang tidak diperlukan. Sebagai referensi Anda dapat menggunakan tools-tools online di internet seperti Yui Compressor dan sebagainya.

Pada masa jayanya situs iNaVB | Indonesian Visualbasic Developers ini mendapatakan Skor terbaik dari Google PageSpeed Insights untuk tampilan mobile 67 dan untuk versi desktop 93. Anda dapat melihatnya di video dibawah postingan, yang sudah saya dokumentasikan khusus untuk Anda.

Gtmetrix memberikan penilaian yang berbeda dengan Google PageSpeed Insights. Jika pada Google PageSpeed Insights yang dinilai adalah kecepatan dari website atau blog dalam versi mobile dan desktop, untuk Gtmetrix yang dinilai adalah PageSpeed dan YSlow, keduanya dalam tampilan Desktop Version. Meskipun begitu Gtmetrix memberikan saran-saran yang sangat berguna untuk mempercepat loading website maupun blog kita. Diantaranya adalah Add Expires Headers, Make Fewer http Request, Reduce DNS Lookup, Use Cookie Free Domain. dan lain-lain banyak sekali.

Beberapa diantaranya yang saya mengerti adalah Optimize images, dalam hal ini kita disuruh untuk memberikan value (nilai) Panjang dan Lebar images (gambar) kita. Contoh [width=”20px” height=”20px”], dalam penilaian Gtmetrix hal ini dapat mempercepat perenderan gambar yang ada dalam website atau blog kita. Satu lagi yang penting adalah Minimize Redirects, maksudnya adalah jangan terlalu banyak meredirect atau pengalihan halaman di website kita, apalagi pengalihannya ke halaman yang tidak di inginkan oleh pengunjung. Hal ini dapat membuat website kita lebih lambat karena akan membuka halaman lain sebelum halaman yang kita tuju selesai dimuat. Ini juga sangat berpengaruh dimata google. Jika terlalu banyak halaman redirect maka Google bisa memberi Penalty terhadap website dan blog Anda.

Situs iNaVB pernah mendapatkan nilai dari Gtmetrix dengan PageSpeed 98 dan YSlow 86, ini merupakan penilaian terbaik yang pernah Saya alami selama mengelola website ini. Semoga tutorial dan saran yang Saya berikan dapat bermanfaat bagi Anda. Serta jangan lupa Videonya ditonton tentang pembahasan kita mengenai PageSpeed yang ada dibawah postingan. Baca juga artikel sebelumnya tentang Cara Membuat Kalkulator Sederhana Menggunakan Visualbasic .Net.

Download Video
Download Code

 

Tags:

One Comment

  1. Pingback: Membuka aplikasi lain menggunakan excel macro

Leave a Reply

Your email address will not be published. Required fields are marked *