12 Cara Mempercepat Loading Website

Mempercepat loading website adalah hal yang sangat penting bagi website kita terutama untuk meningkatkan SEO dan meringankan kinerja server, apa lagi jika trafik dari website kita sangat tinggi. Mempercepat loading website bisa dibilang susah-susah gampang, ya ada cara yang susah ada juga cara yang gampang. Namun, jika kita mampu melakukannya pastinya akan memberikan pengalaman dan kepuasan tersendiri. Nah, disini saya akan membagikan 12 cara untuk sahabat icaksama.com dalam mempercepat loading website.

Dari 12 cara yang akan kita bahas, semuanya bisa digunakan pada website self-hosted namun hanya beberapa cara yang bisa digunakan pada website blogspot, jadi jika kamu ingin mempercepat website blogspot silahkan langsung menuju ke bagian yang support dengan website tipe blogspot. Dan inilah 12 cara mempercepat loading website yang akan kita kupas dalam artikel ini:

  • Lokasi Server
  • Kapasitas Server
  • Gzip Compression
  • Cache
  • DNS Prefetch (Support Blogspot)
  • Defer Parsing Javascript (Support Blogspot)
  • Async Javascript (Support Blogspot)
  • Optimize CSS Delivery (Support Blogspot)
  • Minify HTML, CSS dan Javascript (Support Blogspot)
  • Image Compressing (Support Blogspot)
  • AMP (Accelerated Mobile Page) (Support Blogspot)
  • Testing Tools (Support Blogspot)

12 Cara Mempercepat Loading Website

Beberapa hari ini saya mencoba melakukan research tentang cara-cara menginkatkan kecepatan website karena alasan icaksama.com pindah dari shared hosting ke VPS untuk mempersiapkan website dalam menghadapi trafik yang tinggi. Dan alhasil saya harus melakukan konfigurasi server sendiri.

12 Cara Mempercepat Loading Website

Dalam research yang saya lakukan, saya menemukan 12 cara yang berbeda-beda dalam mempercepat loading website. Saya akan mencoba menjelaskannya dengan sesederhana mungkin dan semoga kamu bisa memahaminya. Sebelum kita membahas tentang cara-cara mempercepat loading website sebenarnya ada 2 alasan utama kenapa saya ingin mempercepat loading website. Pertama adalah karena SEO dan yang kedua adalah server.

SEO (Search Engine Optimization) adalah hal yang sangat penting dalam meningkatkan existensi situs web kita. Untuk apa kita punya website tetapi tidak ada yang bisa membacanya karena SEO website kita sangat rendah dan masuk dalam halaman ke sekian pada search engine.

Terus apa hubungannya mempercepat loading website dengan SEO?

Ya, tentu saja sangat berhubungan.

Sekarang mari kita pikirkan dengan cara apa search engine tahu tentang data pada website kita kalau mereka tidak mengunjunginya? Dalam dunia SEO, istilah ini sering disebut sebagai Crawling.

Crawling adalah istilah dalam search engine dalam merayapi data pada sebuah situs web. Sebagai contoh Google crawler atau yang sering kita sebut googlebot adalah sebuah program yang dikhususkan untuk merayapi dan mengambil data dengan algoritma khusus. Saya pernah mengupas tentang kasus ini, silakan baca artikel Hal Terpenting Dalam SEO.

Dan alasan yang kedua adalah server. Logikanya sederhana yaitu semakin lama website dalam membuka halaman berarti semakin berat server dalam memproses datanya. Dan semakin berat server dalam memproses data maka akan semakin sedikit pengunjung website yang akan diterima oleh server atau bahkan server bisa down. Maka dari itu kita perlu mengurangi kinerja server seminimal mungkin dengan menggunakan teknik cache yang akan kita kupas nanti.

1. Lokasi Server

Lokasi server adalah salah satu hal yang sangat penting kita ketahui sebelum kita mulai mempublish website kita. Lokasi server juga dapat mempercepat loading website karena sangat berhubungan dengan konektivitas antara search engine dan pengunjung. Saya pernah mengalami sebuah kasus dimana search engine tidak bisa menjangkau website icaksama.com yang saat itu servernya masih berada di indonesia karena alasan bandwith yang terlalu kecil. Kasus ini sudah pernah saya kupas pada artikel Hal Pertama Yang Harus Dilakukan Dalam SEO.

Jadi kenapa lokasi server penting? Alasannya sangat sederhana,

Sebagus apapun website yang kamu buat tetapi search engine tidak bisa menjangkaunya lalu apa gunanya?

Berikut adalah hal yang perlu kamu perhatikan sebelum menentukan lokasi server website:

  • Tentukan negara yang jadi target pengunjung utama situs web kamu.
  • Tentukan lokasi server yang bisa di jangkau dengan mudah oleh search engine dan pengunjung.

Sebagai contoh, icaksama.com menargetkan pengunjung dari Indonesia. Dan jika saya hanya memperhatikan lokasi server yang bagus untuk search engine maka saya akan menyewa server yang lokasinya berada di US. Lokasi server yang berada di US memang bagus untuk search engine tetapi lokasinya sangat jauh untuk pengunjung yang kita targetkan yaitu Indonesia. Dan alhasil respond server akan sangat lama jika di akses oleh pengunjung dari indonesia karena lokasi server yang terlalu jauh.

Jadi dari kasus ini saya perlu memperhatikan lokasi server yang bagus untuk search engine dan pengunjung yang saya targetkan yaitu Indonesia. Dari beberapa research yang saya dapatkan, saya menentukan Singapura sebagai lokasi server dari icaksama.com dengan alasan negara maju dengan jumlah penduduk yang sedikit jadi otomatis alokasi bandwith masih sangat besar sehingga dapat mempercepat loading website.

2. Kapasitas Server

Kapasitas server juga dapat mempercepat loading website karena ini berhubungan dengan spesifikasi dari server website kita. Jumlah trafik yang tinggi dan kapasitas server yang minim tentunya akan mengakibatkan kecepatan loading website berkurang. Sebagi contoh, kapasitas server dengan 1G RAM, 1vCPU, 25GB SSD dan 1GB Transfer biasanya hanya mampu menerima 100 request user secara bersamaan. Dan jika website kamu menerima lebih dari 100 request user secara bersamaan maka akan mengakibatkan kecepatan loading halaman berkurang bahkan bisa menyebabkan server down. 100 request user secara bersamaan berbeda dengan jumlah trafik user perhari. 100 request user secara bersamaan itu berarti memaksa server untuk menjalankan 100 request user sekaligus bukan secara berurutan. Bisa kamu bayangkan jika komputer yang kamu gunakan membuka 100 aplikasi secara bersamaan pasti sangat lemot bahkan bisa blue screen.

Jadi sebelum kita menentukan kapasitas server seperti RAM, CPU, Hardisk dan lainnya, terlebih dahulu kita perlu tahu jumlah trafik pengguna dari website. Tidak ada perhitungan pasti untuk menentukan kapasitas server berdasarkan trafik pengguna tapi yang jelas jika website kamu masih baru, kapasitas server dari digitalocean 1G RAM, 1vCPU, 25GB SSD dan 1GB Transfer seharga $5 sudah cukup untuk menangani trafik pengunjung di website kamu yang bisa kamu pesan DISINI.

Namun jika dari hari ke hari trafik pengunjung semakin banyak dan terasa semakin berat, kamu bisa menaikan kapasitas servernya.

Selain kapasitas server, kita juga perlu memikirkan jenis teknologi apa yang akan kita gunakan pada server. Jenis teknologi server yang paling terkenal saat ini ada 2 yaitu Apache dan Nginx (Engine X). Apache merupakan tipe server model lama sedangkan Nginx adalah tipe server model baru yang kabarnya memiliki kecepatan 50x lebih cepat dari server tipe Apache. Namun untuk mengkonfigurasi server Nginx sedikit lebih susah dan mungkin akan saya jelaskan pada artikel berikutnya, jadi silahkan daftarkan email kamu untuk mendapatkan notifikasi update dari icaksama.com.

3. GZip Compression

GZip Compression adalah sebuah metode compressing files yang menggunakan kompresi GZip dengan merubah ukuran file menjadi lebih kecil sebelum dikirimkan ke pengunjung website. GZip Compression juga dapat mempercepat loading website. Mungkin belum banyak orang yang tau tentang teknik ini, karena pada saat saya cari di google hanya beberapa artikel saja yang saya temukan. Bahkan saya yakin bagi developer website belum tentu tahu tentang istilah GZip Compression karena teknik ini berada pada sisi server bukan pada sisi websitenya.

Dari research yang saya lakukan, metode GZip Compression adalah hal paling berpengaruh dalam mempercepat loading website bahkan dapat mempercepat loading website hampir 50%. Namun, konfigurasi GZip Compression pada server Apache dan Nginx berbeda sehingga kamu harus pastikan server jenis apa yang kamu gunakan pada website.

Pada dasarnya default setting GZip Compression pada Apache maupun NGinx sudah diaktifkan namun hanya sebatas aktif sehingga kita perlu mengkonfigurasinya. Namun jika kamu menggunakan shared hosting silahkan cek terlebih daluhu di CPanel atau hubungi penyedia hosting kamu untuk mengaktifkannya. Oke langsung saja, berikut adalah konfigurasi GZIP Compression pada masing-masing server.

Konfigurasi GZip Compression pada Server Apache

Sebenarnya ada 2 metode pada server Apache, pertama kita bisa menggunakan metode GZip(mod_gzip) dan yang kedua bisa menggunakan metode Deflate(mod_deflate).

Lalu metode mana yang akan kita gunakan?

Kedua metode tersebut sebenarnya sama saja dapat mempercepat loading website, namun secara umum kita di sarankan untuk menggunakan metode Deflate(mod_deflate).  Nah, dalam artikel ini saya akan mengupas 2 metode tersebut sekaligus untuk mengantisipasi jika salah satu metode gagal kamu masih bisa menggunakan metode yang lain.

Untuk melakukan konfigurasi pada server Apache, saya akan menggunakan teknik .htaccess, jadi bagi kalian yang belum mengetahui apa itu .htaccess harus mempelajarinya terlebih dahulu atau menunggu saya membuat artikel tersebut.

Setelah kamu mengetahui tentang .htaccess, sekarang saatnya memasang konfigurasi ini ke dalam file .htaccess pada situs web kamu. Berikut adalah settingan menggunakan mod_deflate dan mod_gzip:

Metode Deflate(mod_deflate) Recommended!

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/opentype
  # For Olders Browsers Which Can't Handle Compression
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

Metode GZip(mod_gzip) (Gunkan ini jika metode deflate tidak berhasil!)

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_include handler ^cgi-script$
</ifModule>

Dari konfigurasi diatas bisa kamu lihat, kita mencoba memberitahu ke server untuk melakukan kompresi saat ditemukan jenis file yang telah kita tentukan. Jadi jika kamu mempunya jenis file lain yang ingin dikompresi bisa kamu tambahkan sendiri pada konfigurasi tersebut.

Konfigurasi GZip Compression pada Server NGinx

Konfigurasi GZip Compression pada NGinx sedikit lebih susah dari Apache karena NGinx tidak support dengan teknik .htaccess jadi disarankan kamu berhati-hati dalam mengkonfigurasinya. Berikut adalah langkah-langkah konfigurasi GZip Compression pada Nginx.

Untuk mengkonfigurasi GZip pada NGinx kita perlu masuk pada sistem server dan mengubah setting pada file nginx.conf. Silahkan gunakan koneksi ke server via FTP atau SSH. Untuk menggunakan koneksi via FTP bisa menggunakan software FileZila dan untuk SSH cukup menggunakan terminal/command prompt dengan syarat SSH sudah terinstal pada sistem operasi kamu. Pada kasus ini saya akan menggunakan koneksi ke server via SSH pada terminal dengan OS server adalah Ubuntu, silahkan ikuti langkah-langkanya:

Buka terminal dan jalankan perintah berikut:

ssh root@IP_SERVER

Tekan enter dan masukan password kamu. Perintah di atas menunjukan kita akan login sebagai user root.

Setelah kita berhasil login, saatnya kita bermain dengan file nginx.conf. Namun sebelum kita mulai melakukan konfigurasi, ada baiknya kita backup terlib dahulu file tersebut dengan perintah berikut:

cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.backup

(Ulangi perintah dari sini jika gagal!) Setelah file nginx.conf berhasil di backup, saatnya kita mulai konfigurasinya. Silahkan bukan file nginx.conf  dengan perintah berikut:

nano /etc/nginx/nginx.conf

Kemudian cari kata gzip dengan menekan tombol Ctrl+W dan ketikan nama gzip lalu enter. Kita perlu merubah beberapa konfigurasi pada bagian tersebut dengan konfigurasi berikut:

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_proxied any;
gzip_types text/plain text/xml text/css application/javascript application/x-javascript;

Silahkan rubah value sesuai konfigurasi di atas.
Setelah kamu yakin semua telah dirubah sesuai dengan konfigurasi diatas, silahkan tekan (Ctrl+X) – Y – Enter – Enter lalu restart server dengan perintah berikut:

sudo service nginx restart

Jika saat kamu menjalankan perintah tersebut terjadi error, kemungkinan ada masalah pada file nginx.conf yang baru saja kamu rubah. Jika demikian, silahkan ulangi kembali langkah-langkahnya dari atas. Namun jika kamu menyerah, kamu bisa mengembalikan file nginx.conf dari backup file yang telah kita buat sebelumnya dengan perintah berikut:

rm /etc/nginx/nginx.conf && mv /etc/nginx/nginx.conf.backup /etc/nginx/nginx.conf

Jika ada pertanyaan silahkan kirim komentar atau tonton videonya terlebih dahulu di bagian bawah artikel.

4. Cache

Oke, sekarang kita masuk pada bagian cache. 

Dan apa sih itu cache?

Cache adalah tempat penyimpanan data yang sifatnya sementara. Sementara disini maksudnya kita bisa menentukan berapa lama data yang disimpan tersebut akan terhapus secara otomatis. Metode cache yang bisa kita gunakan ada 2 yaitu server cache dan client cache. Namun disini saya hanya akan menjelaskan metode client cache karena pada umumnya sebuah website jarang menggunakan metode server cache.

Lalu, apa hubungannya cache dengan mempercepat loading website?

Tentu saja sangat berhubungan, coba kita pikirkan ada berapa jumlah file yang kita pakai berulang-ulang pada sebuah website di setiap halaman seperti gambar, font, CSS, Javascript, HTML dan masih banyak lagi. File-file tersebut akan terus terdownload ulang oleh pengunjung dan tentu saja akan mengurangi kecepatan situs web kita. Nah, metode cache disini gunanya adalah untuk memberitahukan browser agar tetap menyimpan file-file dengan waktu yang telah kita tentukan sehingga pengunjung tidak perlu mendownload ulang file-file tersebut.

Seperti pada langkah sebelumnya, untuk mengkonfigurasi cache juga memiliki perbedaan antara server Apache dan Nginx. Namun disini saya akan menjelaskan keduanya. Silahkan ikuti langkah-langkah berikut:

Konfigurasi Cache pada Server Apache

Untuk mengkonfigurasi cache pada server apache caranya hampir sama seperti konfigurasi GZip Compression yaitu cukup menggunakan file .htaccess. Silahkan buka kembali file .htaccess yang ada pada website kamu dan masukan kode berikut di bagian paling atas:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access 1 year"
  ExpiresByType image/jpeg "access 1 year"
  ExpiresByType image/gif "access 1 year"
  ExpiresByType image/png "access 1 year"
  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 year"
  ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

Konfigurasi Cache pada Server NGinx

Tidak seperti konfigurasi cache pada Apache, untuk mengkonfigurasi cache pada server Nginx jauh berbeda seperti konfigurasi GZip Compression dan sedikit lebih sulit jadi kamu harus berhati-hati. Saya tidak bertanggung jawab jika terjadi kesalahan yang fatal. Jika kamu tidak memiliki pengalaman dalam hal ini lebih baik lewati bagian ini. Namun jika kamu yakin, silahkan ikuti langkah-langkah dibawah dan kirim komentar jika ingin bertanya.

Sebelum melakukan konfigurasi, yang pertama harus kamu lakukan adalah mengecek website kamu saat ini menggunakan http atau https karena hal tersebut berhubungan pada konfigurasi nanti. Seperti langkah sebelumnya, kamu bisa menggunakan koneksi via FTP atau SSH. Namun disini saya akan mencontohkannya menggunakan koneksi ssh pada server Ubuntu. Langsung saja ikuti langkah-langkah berikut.

Buka terminal dan jalankan perintah berikut:

ssh root@IP_SERVER

Tekan enter dan masukan password kamu. Perintah di atas menunjukan kita akan login sebagai user root.

Setelah kita berhasil login, saatnya kita masuk pada direktori site-available pada nginx menggunakan perintah berikut:

cd /etc/nginx/sites-available/

Nah, dari sini kamu harus memastikan website kamu menggunakan custom konfigurasi atau menggunakan default konfigurasi. Biasanya nama file konfigurasinya sama seperti nama domain website kamu, sebagai contoh: example.com.conf. Namun jika tidak berarti kamu menggunakan default configurasi dengan nama file  default.conf. Lebih jelasnya silahkan jalankan perintah berikut untuk melihat file apa saja yang ada dalam direktori:

ls

Jika kamu melihat tidak ada nama file selain default.conf berarti website kamu menggunakan default konfigurasi. Namun jika ada nama file sama seperti nama domain berarti kamu menggunakan custom konfigurasi. Sekarang buka file konfigurasi dengan perintah berikut:

nano GANTI_DENGAN_NAMA_FILE

Nah, sekarang saatnya kita menambahkan program untuk cache, namun sebelum itu pastikan apakah website kamu menggunakan http atau https. Jika website kamu menggunakan http biasanya hanya ada 1 block server dengan listen ke port 80. Namun, jika kamu menggunakan https biasanya ada 2 block server dengan listen 80 dan listen 443. Jika kamu sudah memastikan hal tersebut, sekarang tambahkan program berikut di dalam block server, jika http  masukan pada block server dengan listen 80 dan jika https masukan pada block server dengan listen 443.

location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
  expires 1y;
}

Dengan program diatas, server akan memberitahukan browser untuk melakukan caching pada jenis file yang telah kita tentukan dan boleh dihapus jika cache sudah 1 tahun. Jika kamu ingin menambahkan jenis file lain silahkan tambahkan sendiri pada konfigurasi di atas. Jika konfigurasi diatas sudah di tambahkan, kurang lebih akan terlihat seperti ini:

server {
    ...
    location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
      expires 1y;
    }
    ...
}

Silahkan tekan (Ctrl+X) – Y – Enter – Enter dan kemudian restart system controll dari nginx dengan perintah berikut:

sudo systemctl restart nginx

Jika terjadi error silahkan cek kembali pada file konfigurasi apakah pemasangannya sudah benar atau belum. Jika anda menyerah silahkan hapus kembali konfigurasi tadi dan restart system controllnya. Jika ada pertanyaan silahkan tanyakan di kolom komentar.

5. DNS Prefetch (Support Blogspot)

DNS Prefetch adalah upaya untuk menyelesaikan nama domain sebelum pengguna mencoba mengikuti tautan yang ada di dalam website seperti external css, javascript, gambar dan lainnya. Untuk lebih jelasnya silahkan baca disini DNS Prefetch. Jadi sebelum kamu menggunakan DNS-Prefetch, kamu harus mengetahui external url yang kamu pakai pada website kamu kemudian tambahkan program berikut setelah tag <head>:

<link rel="dns-prefetch" href="//external_domain1.com">
<link rel="dns-prefetch" href="//external_domain2.com">
<link rel="dns-prefetch" href="//external_domain3.com">
<link rel="dns-prefetch" href="//external_domain4.com">
<link rel="dns-prefetch" href="//external_domain5.com">

Tidak terlau sulit kan? Untuk memudahkan kamu dalam mencari external url yang kamu gunakan pada website, silahkan buka halaman website kemudian Kilk Kanan – Inspect atau gunakan (Ctrl-Shit-I) – Klik tab Network – kemudian arahkan mosue pada url yang terlihat seperti gambar berikut:

Mempercepat Loading Website icaksama.com

Sekarang tinggal kamu tambahkan semua dns-prefetch dari external url ke dalam website. Tambahkan cukup nama domainnya saja. Sebagai contoh:

<link rel="dns-prefetch" href="//cdn-1.wp.nginx.com">

6. Defer Parsing Javascript (Support Blogspot)

Defer parsing javascript atau menunda parsing javascript adalah sebuah teknik yang digunakan untuk menunda file javascript dieksekusi sampai konten website selesai dimuat. File javascript tetap didownload secara bersamaan dengan konten website namun eksekusinya dimulai saat seluruh konten website selesai dimuat. Berikut adalah simulasinya:

Defer-Execution Mempercepat Loading Website icaksama.com

Dalam sebuah website sering kita menggunakan banyak sekali file javascript, hal ini sebenarnya dapat mengganggu dan memperlambat browser dalam memuat website karena javascript memakan banyak sekali proses untuk dieksekusi. Javascript juga paling tidak disukai oleh search engine karena dianggap memblock proses rendering website.

Untuk menggunakan teknik ini tidak terlalu susah, kamu hanya perlu memasukan attribut defer pada tag <script>. Lihat contoh berikut:

<script defer="defer" src="file-javascript-kamu.js">

Perlu diingat, untuk menggunakan teknik ini kamu harus berhati-hati karena tidak semua file javascript bisa di defer. Sering kali javascript yang di defer bisa merusak tampilan pada website kamu. Jadi cek website kamu setiap kamu mencoba men-defer file javascript.

7. Async Javascript (Support Blogspot)

Async javascript atau asynchronous javascript adalah proses dimana content dan file javascript didownload secara bersamaan namun proses eksekusinya secara asynchronous. Asynchronous disini maksudnya adalah mengeksekusi dengan mem-pause HTML parsing hingga eksekusi javascript selesai. Berikut adalah simulasinya:

Async-Execution Mempercepat Loading Website icaksama.com

Berbeda dengan defer parsing javascript, async javascript dapat memblock parsing HTML jika proses eksekusinya terlalu lama dan alhasil dapat mengurangi kecepatan website. Namun async javascript dapat digunakan jika defer javascript tidak cocok dengan website kamu.

Untuk menggunakan teknik ini tidak terlalu susah, kamu hanya perlu memasukan attribut async pada tag <script>. Lihat contoh berikut:

<script async="async" src="file-javascript-kamu.js">

Perlu diingat, teknik ini juga bisa merusak tampilan pada website kamu. Jadi cek website kamu setiap kamu mencoba men-async file javascript.

8. Optimize CSS Delivery (Support Blogspot)

Optimize CSS Delivery atau optimasi pengiriman CSS adalah teknik untuk memaksimalkan proses pengiriman css tanpa mengganggu proses rendering HTML. Teknik ini hampir sama dengan defer parsing javascript dimana proses eksekusi CSS dilakukan setelah semua kontent selesai dimuat.

Untuk menggunakan teknik ini kamu harus memasukan semua link file CSS kedalam tag <noscript> dengan id=”deferred-stylessebelum tag </body> sebagai berikut:

<noscript id="deferred-styles">
  <link rel="stylesheet" type="text/css" href="css-file1.css"/> 
  <link rel="stylesheet" type="text/css" href="css-file2.css"/>
  <link rel="stylesheet" type="text/css" href="css-file3.css"/>
</noscript>

Kemudian tambahkan program javascript berikut juga diatas tag </body>:

<script>
    var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
    };
    var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    if (raf) raf(function() {
        window.setTimeout(loadDeferredStyles, 0);
    });
    else window.addEventListener('load', loadDeferredStyles);
</script>

Jika kedua program di atas sudah kamu tambahkan selanjutnya kamu tinggal menambahkan link CSS saja ke dalam tag <noscript>. Namun perlu diingat, teknik ini juga bisa merusak tampilan website kamu jadi test website kamu setiap menambahkan link css ke dalam tag <noscrpit>.

9. Minify HTML, CSS dan Javascript (Support Blogspot)

Minify atau mengecilkan adalah upaya untuk mengecilkan ukuran file sekecil mungkin dengan menghapus semua karakter tidak penting seperti space serta membuatnya menjadi 1 baris jika memungkinkan. Teknik ini sebenarnya bertujuan untuk mengecilkan ukuran file yang digunakan pada website hingga sekecil mungkin agar size website yang didownload oleh pengunjung juga sedikit sehingga dapat mempercepat loading website.

Untuk melakukan minify pada HTML, CSS dan Javascript rekomendasi dari Google silahkan gunakan website-website berikut:

Minify HTML: HTMLMinifier

Minify CSS dan Javascript: Minifier

Kamu juga perlu hati-hati dalam minify HTML, CSS dan Javascript karena hal ini juga dapat merusak tampilan website kamu. Jadi pastikan test terlebih dahulu setiap kamu melakukan minify file.

10. Image Compressing (Support Blogspot)

Image Compressing adalah cara untuk memperkecil size dan resolusi gambar tanpa merubah kualitas pada gambar tersebut. Tujuan dari image compressing adalah untuk membuat website lebih cepat untuk dimuat karena pengunjung akan mendownload ukuran gambar yang lebih kecil.

Sebagai contoh, misalkan dalam sebuah artikel terdapat 2 gambar dimana gambar pertama digunakan sebagai gambar dalam artikel dan gambar kedua digunakan sebagai feature image. Perhatikan contoh berikut:

image compressing Mempercepat Loading Website icaksama.com

Pada umumnya kita hanya menggunakan 1 gambar saja yang digunakan sebagai gambar dalam artikel sekaligus sebagai fitur image seperti pada contoh gambar di atas. Itu adalah kasus yang salah, seharusnya kita membuat 2 gambar yang ukurannya berbeda sehingga sehingga saat gambar muncul sebagai fitur image maka pengunjung hanya mendownload ukuran gambar yang kecil saja. Hal ini terjadi pada website icaksama.com, saya dulu sudah terlanjur menggunakan 1 gambar saja dan alhasil saat saya mengaktifkan fitur popular post gambar ukuran besarlah yang akhirnya keluar:

Mempercepat Loading Website1 icaksama.com

Oleh karena itu performace dari icaksama.com sedikit berkurang karena alasan image compressing. Jadi sebelum kamu mempublish artikel, ada baiknya siapkan gambar-gambar yang berbeda sesuai kebutuhan. Silahkan gunakan website berikut untuk mengkompresi gambar dengan lebih mudah Image Compressor. Atau bagi kamu para pengguna WordPress bisa menggunakan plugin reSmush.it untuk mengkompresi gambar yang sudah ada atau yang akan diupload.

11. AMP (Accelerated Mobile Page) (Support Blogspot)

AMP atau Accelerated Mobile Page adalah sebuah teknologi open-source terbaru yang sedang populer saat ini yang mampu membuat website lebih cepat, lebih cantik dan memiliki performance yang tinggi, lebih jelasnya silahkan kunjungi halaman berikut AMPProject. Pada awalnya AMP tidak sepopuler sekarang, namun semenjak facebook dan twitter menggunakan teknologi baru yang mampu mempercepat loading website kabarnya google mulai melirik sebuah project yang belum lama diluncurkan bernama AMPProject yang disarankan untuk para webmaster yang ingin meningkatkan performance situs websitenya khusus untuk mobile.

AMP berbeda dengan responsive web, biarpun keduanya support untuk mobile namun tetap saja responsive web masih menggunakan program standar yang digunakan untuk versi desktop. Sedangkan AMP menganjurkan website kita membuang seluruh program standar CSS, HTML dan Javascript menggunakan program AMP. Sehingga membuat website dengan AMP sangatlah sulit apa lagi untuk website yang sudah dibuat khusus untuk desktop biarpun memiliki fitur responsive web.

Untuk itu saya sarankan kamu membuat website baru khusus untuk AMP tanpa merubah program website versi desktop yang sudah ada dan bagi kamu para pengguna blogspot saya sarankan pasang template yang memang sudah mendukung versi AMP. Mungkin nanti akan saya kupas tentang cara membuat AMP pada website dan blogspot pada artikel berikutnya jadi tetaplah terhubung dengan icaksama.com dengan mendaftarkan email kamu dibagian bawah artikel.

Saya tidak menjelaskan secara detail bagaimana program AMP pada artikel ini, namun untuk mengarahkan website versi desktop dengan AMP, kamu perlu memberikan tag <link rel=”amphtml”> pada versi desktop dibagian <head> menuju ke halaman AMP dengan program berikut:

<link rel="amphtml" href="https://www.icaksama.com/amp/">

Sedangkan untuk website AMP juga sama, kamu perlu memberikan tag  <link rel=”amphtml”> dibagian <head> menuju halaman website versi desktop dengan program berikut:

<link rel="amphtml" href="https://www.icaksama.com">

Dengan demikian search engine google dapat mendeteksi halaman AMP yang terhubung dengan halaman website versi desktop. Sehingga search engine dapat mengarahkan pengunjung ke halaman AMP jika pengunjung menggunakan mobile dan begitu juga sebaliknya. Untuk membuat program AMP, kamu dapat mempelajarinya dari situs resminya langsung disini AMPProject.

Dan bagi kalian yang menggunakan WordPress tidak perlu khawatir karena ada plugin yang dapat membuat website kamu support dengan AMP. Saya menyarankan plugin AMP For WP karena menurut saya plugin ini lebih fleksibel untuk di konfigurasi, dan untuk konfigurasinya mungkin akan saya jelaskan pada artikel berikutnya jadi tetaplah terhubung dengan icaksama.com dengan mendaftarkan email kamu dibagian bawah artikel.

12. Testing Tools (Support Blogspot)

Dan akhirnya kita masuk pada cara terakhir versi icaksama.com. Setelah kita melalui banyak tahap di atas yang menyebalkan, sekarang saatnya kita menguji coba kecepatan website kita pada website Testing Tools. Website ini menunjukan bagaimana search engine dan pengunjung melihat kecepatan website kita dan memberikan score page speed  pada website kita. Silahkan test website-website kamu pada link berikut dan semoga cara-cara di atas dapat memberikan score yang tinggi.

Jika terdapat peringatan pada hasil test, silahkan gunakan cara-cara diatas untuk memperbaiki masalah tersebut. Demikian artikel dari saya, semoga dapat membantu kamu dalam mempercepat loading website. Jika ada pertanyaan silahkan kirim dikomentar. Salam

Leave a comment