Skip to main content

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 





Comments

  1. setelah menerapkan cara2 diatas akhir skor kcepatan blog saya jadi sedikit meningkat.

    ReplyDelete
  2. wah ini yang saya cari-cari

    ReplyDelete
  3. Kebetulan skor blog saya di versi mobile sangat hancur, walau di versi dekstop udh bagus..
    Izin coba gan.. makasih infonya

    ReplyDelete
  4. https://gtmetrix.com/reports/pcr.ac.id/z9LIEO5U
    PageSpeed Score (67%)
    Total Page Size 3.01MB buat dekstop hasil yg 98% itu tes dmn min?

    ReplyDelete
  5. berarti ini harus masuk google console ya min ?

    ReplyDelete

Post a Comment

Popular posts from this blog

Tutorial SQL Injection Menggunakan SQLMap

Kali ini kita akan membahas tutorial hacing dengan teknik SQL Injection menggunakan tool SQLMap untuk melakukan hacking atau serangan pada website berbasis data dengan tujuan untuk menemukan kerentanan keamanan pada website tersebut. SQL Injection adalah teknik injeksi code yang digunakan untuk melakukan serangan pada aplikasi web berbasis data di mana pernyataan malicious SQL dimasukkan ke dalam entri untuk di eksekusi (misalnya untuk menampilkan konten database ke penyerang). SQL injection dapat mengeksploitasi kerentanan keamanan pada perangkat lunak aplikasi, misalnya saat user salah melakukan filter inputan untuk pengiriman karakter yang disematkan dalam pernyataan SQL atau inputan user tidak diketik dengan benar dan tanpa diduga dieksekusi. SQL Injection lebih dikenal sebagai vektor serangan untuk sebuah situs web namun juga dapat digunakan untuk menyerang semua jenis database SQL. Apa itu SQLMap SQLMap adalah salah satu tool otomatis untuk melakukan SQL Injection yang

Penjumlahan dan pengurangan tanggal di PHP

Penjumlahan (tambah) dan pengurangan (kurang) tanggal di PHP sering  kita jumpai di beberapa kasus pembuatan sistem seperti pembuatan fitur peminjaman, perizinan, pemesanan dan lain-lain. Kali ini kita akan membahas bagaimana  suatu tanggal dapat di tambah atau di kurangi dengan hari, bulan dan tahun. Ok langsung saja kita bahas materinya!

Cara membuat Hak Akses (Privileges) pada user SQL Server (Grant dan Revoke)

Pada tutorial kali ini kita akan belajar bagaimana cara membuat atau memberi grant atau revoke hak akses (Privileges) pada user di SQL Server menggunakan syntax Transact SQL (T-SQL). Anda dapat memberi GRANT dan REVOKE hak akses pada berbagai objek database di SQL Server. Kali ini kita akan melihat bagaimana memberi dan menghapus hak akses pada tabel di SQL Server. Memberikan permissions dan menghapus permissions tidak terlalu sulit dilakukan di dalam SQL Server, hanya butuh beberapa waktu untuk menentukan permissions apa yang harus diterapkan. Sebelumnya anda harus membuat user dahulu pada SQL Server, setelah itu baru kita bisa memberi Hak Akses. Berikutnya pastikan anda sudah membuat atau menjalankan script dibawah ini. [USE [nama_database] GO CREATE USER [nama_user] FOR LOGIN [nama_user]] Grant Hak Akses (Privileges) pada  tabel Anda dapat memberi (Grant) berbagai hak akses ke tabel pada user. Hak akses ini bisa berupa kombinasi SELECT, INSERT, UPDATE, DELETE, REFERENCES