6 cara menaikkan skor kecepatan website pada Google Page Speed Insight

Lebih dari 50% dari lalu lintas online berasal dari perangkat mobile, semua orang mengharapkan sebuah situs yang memuat halaman web dengan cepat. Maka dari itu dalam artikel ini, saya akan menunjukkan bagaimana caranya menaikkan atau meningkatkan skor kecepatan website anda pada Google PageSpeed Insights baik untuk desktop dan mobile sebagai upaya untuk Optimasi Kecepatan Website. Saya menggunakan study kasus pada webite institusi pendidikan tempat saya bekerja yaitu Politeknik Caltex Riau.

Melakukan Optimasi Kecepatan website merupakan prioritas utama untuk user experience (UX) secara keseluruhan, dan juga salah satu dari ratusan paramater penilaian SEO. Berdasarkan data dari Google orang tidak ingin untuk menunggu lebih dari lima detik untuk  memuat halaman web. Jika situs Web Anda tidak cukup cepat untuk load halaman, maka anda akan kehilangan potensial pengunjung.

Latar Belakang Optimasi Kecepatan Website

Awalnya adalah karena ada tugas untuk membuat ulang website (Rebuild) institusi tempat saya bekerja, awalnya website tersebut tidak memiliki skor Google Speed Page Insight yang bagus sehingga perlu dilakukan optimasi kecapatan website untuk mendapatkan hasil yang lebih baik. Salah satu alasan perlu dilakukan optimasi kecepatan website adalah karena kecepatan website adalah salah satu faktor penilaian SEO oleh Google.

Kami telah melakukan beberapa trik sehingga berhasil menaikkan skor Google Speed Page Insight menjadi 95/100 untuk mobile, 95/100 untuk desktop dan 98/100 untuk mobile friendliness. Meskipun belum mendapatkan skor yang sempurna (100/100) tetapi hasil yang didapat sudah sangat bagus (dibandingkan website institusi pendidikan lain).

Bagaimana cara menaikkan atau meningkatkan kecepatan loading halaman website

1. Optimasi Gambar

Google PageSpeed ​​Insights menyarankan kita untuk mengoptimalkan gambar agar dapat memuat halaman lebih cepat dengan mengurangi ukuran file tanpa mengurangi kualitas gambar tersebut. Untuk mengatasi masalah ini, kami melakukan dua hal penting:

• Kompres semua gambar menggunakan alat bantu online yang tersedia. Untuk tools online yang dapat anda gunakan bisa anda lihat pada artikel saya sebelumnya dengan judul 6 Tools Online Terbaik Untuk Kompres Gambar. Tools ini gratis dan dapat mengurangi ukuran file gambar dengan lebih dari 80% dalam beberapa kasus, tanpa mengurangi kualitas gambar.
• Mengurangi ukuran gambar ke dimensi minimal tanpa mengurangi kualitas gambar. Sebagai contoh, jika kita ingin menyimpan gambar pada ukuran 150x150px, maka itulah ukuran gambar yang seharusnya ada di server. Anda tidak harus memiliki gambar yang lebih besar dari apa yang Anda ingin tampilkan untuk dimuat pada halaman web anda, atau mengurangi ukurannya menggunakan CSS atau HTML tag.

Kami melakukan kompresi pada gambar-gambar yang potensial kemudian mengupload ulang versi yang sudah dikompresi pada website. Setelah mengoptimalkan gambar-gambar yang ada, anda harus melakukan kompresi pada setiap gambar yang akan anda upload pada website.

Google juga menawarkan opsi untuk men-download gambar anda yang sudah dioptimalkan, dan anda dapat meng-upload ke server anda. Anda juga dapat melakukan hal yang sama pada JavaScript dan CSS.

2. Minify CSS & JavaScript

Google menyarankan kepada kami bahwa kami harus memperkecil file JavaScript dan CSS kami. Proses minifikasi dapat mengurangi ukuran file anda dengan menghilangkan spasi, karakter, dan komentar putih yang tidak perlu dari file CSS dan JavaScript anda. Seorang prorammer akan sering meninggalkan banyak ruang dan komentar saat melakukan coding. Hal Ini bahkan bisa melipatgandakan ukuran file CSS dan JavaScript anda.

Untuk mengatasi hal ini kami melakukan minify file CSS dan Javascript menggunakan tools online yang tersedia. Untuk daftar tools online yang bisa digunakan sudah saya bahas pada artikel sebelumnya dengan judul Minify HTML, CSS dan Javascript untuk optimasi kecepatan website

Setelah melakukan minify anda juga bisa mendownload file yang sudah diminify pada Google Page Speed Insight. Berikut adalah penampakan setelah berhasil melakukan minify CSS dan Javascript.

3. Memanfaatkan browser caching

Untuk memanfaatkan browser caching kita perlu melakukan konfigurasi Expires Header, dengan adanya expires header maka ketika halaman web kita di load maka akan terjadi dua kondisi yaitu mengambil dari server atau dari cache browser. Expires Headers memberitahu browser berapa lama harus menyimpan file web kita didalam cache browser sehingga pada kunjungan berikutnya browser tidak perlu men-download file lagi. Untuk bagaimana cara konfigurasi Expires Headers telah saya bahas pada artikel saya sebelumnya dengan judul Konfigurasi Expires headers (Browser Caching) pada website

4. Aktifkan Kompresi (Gzip Compression)

Kebanyakan web server dapat mengompres file dalam format gzip sebelum mengirimkannya, baik menggunakan modul pihak ketiga ataupun menggunakan modul yang sudah terpasang. Dengan mengaktifkan kompresi kita dapat mengurangi jumlah waktu yang diperlukan untuk mengunduh sumber daya yang dibutuhkan untuk merender sebuah situs web.  Untuk pembahasan bagaimana cara mengaktifkan Gzip Compression telah saya bahas pada artikel saya sebelumnya dengan judul Mengaktifkan Gzip Compression pada website anda

5. Hilangkan sumber pemblokiran render

Untuk menghilangkan sumber pemblokiran render kami meletakkan semua file Javascript di baris akhir dokumen metode ini dikenal juga dengan nama Defer parsing of JavaScript . Sebenarnya ada cara lain jika anda ingin meletakkan file javascript pada tag head anda bisa menambahkan atribut asinkron HTML saat memuat JavaScript metode ini dikenal juga dengan nama  Asynchronous. Contohnya:

<script async src="my.js">

Kemudian untuk pemanggilan file CSS kami menggunakan metode Asynchronous dengan menggunakan fungsi pemanggilan CSS secara asynchronously.

6. Optimasi mobile experience

Mobile experience adalah tentang bagaimana menampilkan versi seluler responsif untuk semua jenis resolusi, menggunakan font yang benar, dan memiliki sistem navigasi yang bagus. Untuk hal ini kami menggunakan Framework Bootsrap yang sudah menerapkan konsep Responsive Design sehingga website akan terlihat bagus walaupun dibuka diberbagai jenis perangkat. Untuk melakukan pengecekan apakah website anda sudah mobile friendly atau belum silahkan gunakan tool dari google yaitu Mobile-Friendly Test