Cara Efektif untuk Mempercepat Situs Web / Blog (SpeedPage)

Optimasi Kecepatan Situs Blog

Satu hal yang paling sering membuat orang kesal saat sedang berselancar di internet adalah lambatnya sebuah laman web dimuat. Ya dan hal tersebut membuat orang-orang langsung meninggalkan laman tersebut, dan menciptakan efek pogo-sticking.

Sedikit keluar jalur terlebih dahulu, Tahukah anda apa itu pogo-sticking ? Pogo-sticking merupakan saat dimana seseorang langsung menekan tombol kembali (kembali ke halaman sebelumnya) atau menutup laman tersebut sesaat setelah dibuka.

Jadi pengunjung langsung mental begitu saja saat membuka sebuah laman web karena faktor-faktor tertentu. Salah satunya kecepatan.

Menurut survey yang dilakukan oleh KissMetricks, 40% orang meninggalkan sebuah situs web yang dimuat lebih dari 3 detik. Ini merupakan penyebab pogo-sticking terbesar.

Daritadi saya bercerita tentang pogo-sticking, memang sebenarnya apa dampak dari pogo-sticking ? Pogo-sticking berdampak dapat meningkatkan rasio pentalan (bounce rate) situs anda, dan tentunya dapat menurunkan peringkat situs anda di mesin pencari.

Selain itu karena lambatnya situs web dapat membuat situs anda kehilangan 40% pelanggan potensial situs anda (terutama jika situs anda merupakan situs komersil). Sangat disayangkan bukan apabila kita harus kehilangan separuh pengunjung situs anda begitu saja.

Muncul pertanyaan, Bagaimana mengamankan 40 % pengunjung tersebut ?

Jika anda ingin mengamankan 40% pengujung tersebut, maka anda harus membuat situs web anda bisa di muat dalam 1 kedipan mata, bahkan kurang (1 kedipan = 3 - 6 detik). Tentunya hal tersebut tidak mudah, diperlukan beberapa optimasi teknis agar situs anda bisa mempercepat situs anda agar bisa mengamankan 40% pelanggan potensial anda.

Apa saja optimasi yang harus saya lakukan ?
Banyak, terdapat ribuan cara yang bisa membuat situs anda dapat dimuat dengan cepat, tapi tidak semuanya efektif.

Anda beruntung bisa menemukan artikel ini, pada kesempatan ini, karena saya kan memberikan 5 teknik mempercepat situs paling efektif, teknik tersebut saya buat berdasarkan algoritma yang diberikan oleh PageSpeed Insight ditambah beberapa optimasi tambahan..

Untuk itu sebaiknya anda mengecek dulu situs anda di PageSpeed sebelum memulai optimasi, agar optimasi berjalan efektif. Berikut algoritma PageSpeed yang saya gunakan di artikel ini (klik untuk langsung menuju solusinya) :

Aktifkan pemampatan*
Memperkecil HTML, CSS dan JavaScript**
Optimalkan gambar
Mengurangi waktu respon server*
Manfaatkan penyimpanan cache browser*
Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas
Optimasi tambahan

Lalu di ujung artikel ini saya juga menambahkan beberapa optimasi tambahan di luar algoritma PageSpeed untuk membuat situs anda semakin cepat.

* = Tidak bisa diaplikasikan pada blog yang menggunakan platform seperti Blogger, WordPress (non Self-Hosted), Tumblr, dan sejenisnya karena tidak memiliki akses server yang cukup, selain itu biasanya dari pihak platform sudah melakukan optimasi tersebut sehingga tidak perlu dilakukan lagi oleh pengguna.
** = Hanya secara manual untuk blog berplatform.

Langsung saja kita bahas berikut ini :

Memperkecil Ukuran = Memperkecil Beban
Memperkecil ukuran situs anda merupakan cara paling ampuh mempercepat situs anda, seperti yang kita ketahui, file yang berukuran kecil akan bisa diunduh lebih cepat dari file besar.

Namun kita tidak perlu bingung, anda tidak perlu membuang sebagian konten anda atau menghapus beberapa elemen di situs anda, karena ada beberapa teknik yang bisa anda lakukan untuk memperkecil situs anda dengan beberapa teknik berikut :

Memanfaatkan Pemampatan a.k.a Compression di situs anda
Ya, metode pemampatan situs web atau lebih dikenal dengan GZip dapat mengurangi ukuran situs anda sampai dengan 70%. Menurut data dari checkgzipcompression.com, dari 9.268 situs yang di cek, 85,4% situs sudah menggunakan GZip dan rata-rata ukurannya berkurang 50%.

Lalu bagaimana GZip bisa membuat sebuah situs web menjadi lebih kecil ? Perhatikan ilustrasi berikut :

Ilustrasi G-Zip

Bagaimana Mengaktifkan GZip ?
Ini bagian yang paling ditunggu, cara mengaplikasikan GZip ke situs web anda. Caranya sangatlah mudah, cukup tambahkan sintaks berikut ke file .htaccess anda :

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Sintaks diatas berisi komando untuk melakukan kompresi pada file-file sumberdaya web umum yang bisa di kompres. Sitaks di atas juga bekerja pada hampir semua server web yang mendukung .htaccess.

Minify HTML, JavaScript dan CSS
Secara sederhana, minify bisa diartikan sebagai menghapus hal-hal yang tidak diperlukan. Jadi melakukan minify pada file HTML, JavaScript, CSS berarti menghapus semua hal-hal yang tidak diperlukan pada file-file tersebut.

Namun, bukan berarti menghapus elemen-elemen HTML, CSS atau JavaScript yang ada, tapi maksud dari bagian-bagian yang tidak diperlukan adalah spasi, indentasi atau tab, komentar, dan hal-hal lainnya.

Melakukan minify bisa mengurangi ukuran file-file situs anda antara 10 - 25%. Lumayan bukan ?

Agar lebih jelas tentang minify bisa perhatikan contoh CSS berikut :

Ini yang tidak di minify :

html {
font: Arial;
background: #FFF;
color: #333;
}
/* elemen body */
body {
padding: 5rem;
margin: 10px;
}

Ini yang minified :

html{font:Arial;background:#FFF;color:#333}body{padding:5rem;margin:10px;}

Memang hal-hal yang di hapus merupakan hal-hal yang bersifat membantu dalam proses pengembangan, namun pengunjung situs anda tidak memerlukan hal-hal tersebut sehingga lebih baik di hapus setelah masa pengembangan.

Untuk situs CMS WordPress
Untuk pengguna WordPress sebetulnya tidak perlu di bingungkan dengan masalah minify, karena terdapat sebuah plugin yang bisa membantu, yaitu W3Total Cache, selain untuk minify, plugin ini bisa digunakan untuk caching (dibahas di bawah nanti).

Dengan plugin ini anda akan mendapatkan kode normal (tidak di minify) pada editor, namun mendapatkan output kode (yang di tampilkan ke pengujung) berbentuk minified. Sehingga proses pengembangan situs WordPress anda tetap mudah, namun tetap memberikan kode yang dioptimalkan untuk kecepatan.

W3 Total Cache

Setelah memasang WP Total Cache, anda akan melihat opsi Performance di sidebar dasbor WordPress anda. Silahkan arahkan tetikus (mouse) ke opsi tersebut, lalu pilih General Setting, lalu gulir ke bagian minify.

Lalu samakan konfigurasi dengan tabel berikut, namun sebelumnya, jangan lupa aktifkan ekstensi PHP html_tidy atau tidy melalui cPanel atau konfigurasi PhP anda.

Opsi	Nilai
Minify	Centang enable
Minify Mode	Pilih auto, agar tidak ribet
Minify cache method	Pilih disk atau untuk
HTML Minifier	Default
JS Minifier	JSMin (default)
CSS Minifier	Default

Situs Non CMS
Metode Otomatis untuk File HTML
Untuk situs yang tidak menggunakan CMS, anda harus melakukan minify secara manual. Namun, jika anda memiliki akses ke file php.ini pada server anda, anda bisa melakukan minify secara otomatis untuk file HTML melalui skrip PHP.

Untuk melakukan minify otomatis HTML ini, silahkan buat file bernama minify.php di luar folder root hosting anda, jika biasanya folder root hosting anda adalah /home/username_anda/public_html, maka buat file minify.php di /home/username_anda/.

Isi file minify.php tersebut dengan sintaks berikut :

<?php
function minify_output($buffer)
{
$search = array(
'/\>[^\S ]+/s',
'/[^\S ]+\</s',
'/(\s)+/s'
);
$replace = array(
'>',
'<',
'\\1'
);
if (preg_match("/\<html/i",$buffer) == 1 && preg_match("/\<\/html\>/i",$buffer) == 1) {
$buffer = preg_replace($search, $replace, $buffer);
}
return $buffer;
}
ob_start("minify_output");
?>

Simpan file tersebut. Lalu tambahkan baris berikut ke file php.ini anda :

auto_prepend_file = /path_ke_file_minify.php

Jangan lupa ubah path_ke_file_minify.php

Sekedar informasi, skrip minify otomatis berikut bekerja dengan otomatis menambahkan file minify.php ke setiap file file berekstensi *.php. Untuk itu, anda harus menggunakan mengganti ekstensi file .html menjadi .php untuk setiap file HTML anda.

Perlu dicatat bahwa skrip tersebut tidak melakukan minify untuk file CSS dan JavaScript yang menyatu dengan HTML alias inline CSS dan JS.

Metode Manual untuk HTML, CSS dan JavaScript
Jika metode di atas tidak bekerja, maka anda harus melakukan minify secara manual, caranya adalah memasukan kode anda pada alat minify online yang saya sebutkan nanti, lalu masukan kembali kode yang dihasilkan dari alat tersebut.

Untuk file HTML yang memiliki JavaScript dan CSS, bisa gunakan HTML minifier yang ada di http://www.willpeavy.com/minifier/.

Untuk file CSS, bisa mengunakan minifier yang ada di http://cssminifier.com/

Untuk file JavaScript, silahkan gunakan JSCompress yang ada di http://jscompress.com/

Optimalkan Ukuran Gambar
Terkadang, gambar bisa menjadi penyebab utama kenapa suatu situs web menjadi lambat. Namun jika suatu situs web tidak menggunakan gambar, maka situs web tersebut akan cenderung membosankan. Sekarang bayangkan saja jika anda membaca artikel ini tanpa adanya gambar ilustrasi, pastinya anda tidak akan membaca sejauh ini.

Untuk itu, kita harus bisa mengakali gambar-gambar tersebut agar tidak membuat situs kita lambat, namun tidak merusak kualitas gambar.

Secara umum untuk mengoptimalkan ukuran gambar, ada 2 cara yang bisa kita lakukan sekaligus, yaitu :
Mengubah ukuran gambar menjadi sesuai kebutuhan dan
Mengoptimalkan setiap piksel pada gambar dengan alat tertentu

Mengubah ukuran gambar menjadi sesuai kebutuhan
Untuk bagian ini kita buat singkat saja, contohnya saat anda membutuhkan gambar berukuran 200x200 piksel, maka daripada anda menggunakan gambar berukuran 400x400 piksel yang diskalakan menggunakan HTML atau CSS, maka lebih baik ubah ukuran /resolusi gambar tersebut sesuai kebutuhan anda .

Dengan begitu anda bisa memperkecil ukuran gambar agar situs menjadi lebih ringan.

Mengoptimalkan setiap piksel gambar dengan alat tertentu
Untuk hal ini saya kurang mengerti bagaimana cara kerjanya. Namun yang saya rasakan, ukuran gambar yang sudah dioptimalkan bisa berkurang antara 25-70%, tergantung ukuran dan kualitas gambar.

Setahu saya, alat ini bekerja dengan mengurangi kedalaman piksel (dpi) pada gambar sehingga sesuai untuk keperluan web dan tanpa mengurangi kualitas gambar.

Hebatnya, kita tidak akan bisa membedakan (secara visual) mana gambar yang sudah di optimalkan dan yang belum, namun kita bisa membedakannya dengan ukuran.

Contohnya, pada gambar ilustrasi GZip di atas, sebelum saya melakukan optimasi gambar, gambar tersebut berukuran 99kb, namun setelah saya optimasi, gambar tersebut hanya berukuran kurang lebih 32kb, sangat hebat bukan ? Tidak percaya ? Lihat gambar berikut :

Optimasi Gambar

Dahulu, alat optimasi gambar yang paling terkenal dan banyak digunakan adalah YSmush.it oleh Yahoo, namun alat tersebut sekarang sudah mati.

Sekarang saya biasa menggunakan versi web Kraken.io di kraken.io/web-interface, menurut saya alat tersebut cukup efektif untuk mengurangi ukuran gambar.

Ada dua metode pengoptimalan gambar yang tersedia di Kraken.io yang pertama, yaitu :

Lossless
Metode ini akan memperkecil ukuran gambar tanpa mengubah satu piksel-pun dari gambar, sehingga metode ini didisain untuk gambar yang harus di lihat secara detail atau untuk yang mengutamakan kualitas

Lossy
Metode ini akan memperkecil ukuran gambar dengan algoritma khusus dari kraken.io yang akan mengubah gambar menjadi sangat kecil, dan terkadang mengurangi kualitas pada beberapa format gambar. Namun perbedaan tersebut tidak dapat di lihat oleh mata manusia.

Sekedar info, saya biasa menggunakan metode lossy.

Mengurangi Beban Server
Server menjadi titik krusial pada suatu situs web, kinerja server berpengaruh besar pada performa situs, terutama dalam sisi kecepatan.

Jika situs anda lambat, bisa jadi karena server anda terbebani oleh situs anda. Biasanya hal ini terjadi pada situs yang memiliki tinggi.

Jika sebuah server sudah terbebani oleh sebuah situs web, maka akan terjadi penurunan kecepatan respon server. Apa dampaknya ? Dampak terburuknya adalah situs anda menjadi sulit di akses, dan akan menampilkan laman seperti ini :

Mengesalkan bukan ? Oleh karena itu anda harus mengurangi beban server, selain dengan mengurangi aplikasi yang berjalan pada server dan mengurangi plugin ada cara lain yang bisa diterapkan, apakah itu ? Silahkan simak berikut ini :

Mengurangi Permintaan File Statis dan Media Dengan cache
Rata-rata 35 - 70% sumberdaya teks situs web merupakan file statis. File statis merupakan file yang tidak sering diperbarui pada situs web, biasanya berisi fungsi-fungsi dari suatu situs web. Biasanya berupa JavaScript, CSS dan sejenisnya.

Untuk media, tentu kita sudah tahu seperti apa, bisa berupa gambar, video, flash dan sejenisnya.

Sekarang mari kita bahas tentang cache atau dalam bahasa Indonesia disebut tembolok. Seperti kita ketahui, setiap kali seseorang mengunjungi suatu situs web, maka secara normal akan mengunduh setiap sumberdaya yang dibutuhkan, dan terus begitu, meskipun sumberdaya tersebut sama pada setiap laman pada situs tersebut.

Nah, hal itulah yang akan kita manfaatkan, kita akan membuat sumberdaya statis yang digunakan pada semua laman situs web anda tidak perlu di unduh setiap saat, namun hanya saat kunjungan pertama, sisanya akan menggunakan file yang diunduh pada kunjungan pertama dan akan diperbarui pada siklus tertentu.

Begitu pula dengan konten media pada situs web anda.

Sehingga metode caching merupakan cara agar file statis tidak selalu harus di download dari server, sehingga server tidak selalu memberikan file statis, dan beban server menjadi ringan. Selain itu, teknik ini juga menghemat bandwith pengunjung karena tidak harus terus-menerus mengunduh file statis.

Perlu diingat, hal ini akan menyulitkan proses pengembangan situs web, karena setiap perubahan yang anda lakukan pada file statis tersebut tidak bisa di lihat secara real-time, karena harus menunggu siklus pembaruan file statis, untuk itu aplikasikan teknik ini setelah situs web anda selesai dikembangkan.

Mungkin penjelasan di atas tidak terlalu membantu karena saya tidak pandai menjelaskan dengan kata-kata. Agar lebih paham, mari simak gambar ilustrasi berikut :

Ilustrasi Cache

Lalu bagaimana cara mengaktifkan caching ?

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/x-javascript "access plus 1 week"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 3 month"
ExpiresDefault "access plus 3 days"
</IfModule>

Kode di atas merupakan kode untuk menerapkan caching pada file-file situs web yang umum, seperti gambar (*.jpg, *.jpeg, *.gif, *.png) (cache 1 bulan), CSS (cache 1 minggu), JavaScript (cache 1 minggu), Animasi flash (cache 1 bulan), Favicon (*.ico) (cache 3 bulan). Untuk file lain yang tidak disebutkan tadi akan di cache selama 3 hari.

Jika anda ingin menerapkan caching khusus pada file lain silahkan tambahkan sintaks berikut di bawah sintaks yang baru saja anda tambahkan :

ExpiresByType TIPEMIME "access plus WAKTU"

Untuk TIPEMIME silahkan ganti dengan tipe MIME dari jenis file yang akan di cache, pastikan juga MIME dari jenis file tersebut sudah terdaftar pada server anda.

Sedangkan WAKTU silahkan ganti dengan lamanya file akan di cache dengan format ANGKA seconds/minutes/days/week/month/year.

Situs WordPress
Untuk situs yang menggunakan CMS WordPress, anda bisa menggunakan plugin yang tadi kita gunakan untuk melakukan minify

Dengan asumsi anda telah memasang WP Total Cache, anda hanya mengarahkan kursor ke menu Performance dan pilih General Settings dan samakan konfigurasi dengan tabel berikut :

Opsi	Nilai
Page Cache
Page Cache	Enable
Page Cache Method	Disk: Enhanched
Database Cache
Database Cache	Enable untuk situs yang tidak memiliki sistem pendaftaran / masuk (login) karena menyebabkan pengguna baru sulit untuk masuk.
Database Cache Method	Disk
Object Cache
Object Cache	Enable
Object Cache Method	Disk
Browser Cache

Browser Cache Enable (baca peringatan setelah tabel ini)

Jika tadi anda mengubah file .htaccess untuk mengaktifkan GZip, hapus kembali perubahan tadi. Karena akan bentrok dengan browser cache. Perlu diketahui, secara sederhana Browser Cache = GZip + optimasi cache yang digunakan.

Lagi-lagi pengguna WordPress dimanjakan dengan plugin.

Mengurangi Beban pada Perangkat Pengunjung
Tidak semua pengujung situs anda menggunakan perangkat high-end atau memiliki koneksi internet yang cepat. Jika pengujung situs anda menggunakan perangkat low-end atau memiliki koneksi internet lambat, atau bahkan keduanya, situs anda akan menjadi sangat lambat.

Untuk itu, kita perlu melakukan optimasi pada cara situs kita di muat pada perangkat pengunjung, bagaimana caranya ? Secara keseluruhan ada 1 cara yang efektif dapat mempercepat situs anda, apakah itu ?

Mengatasi Pemblokiran Render alias Render Blocking

Render blocking merupakan keadaan dimana seseorang hanya melihat halaman kosong saat mengunjungi suatu situs web, dikarenakan ada sumberdaya (biasanya JavaScript atau CSS) yang dimuat dan dieksekusi sebelum laman web ditampilkan.

Peyebab utama render blocking adalah CSS dan atau JavaScript yang diletakan sebelum tag penutup </head>, dalam artian sebelum tubuh laman (<body>) dimuat.

Lalu bagaimana cara mengatasi render blocking ? Secara sederhana, cara mengatasinya adalah dengan memuat sumberdaya penyebab render blocking setelah tubuh laman utama, atau secara kasar memindahkan JavaScript dan CSS ke sebelum tag penutup </body>.

Fix Render Blocking

Namun jangan langsung eksekusi dulu, karena ada beberapa hal yang harus dipahami sebelum mengatasi render blocking. Karena mengatasi render blocking CSS dan JavaScript sangatlah berbeda, untuk itu saya meminta anda untuk membaca penjelasan keduanya berikut ini :

Mengatasi Render Blocking CSS

Mengatasi render blocking CSS merupakan salah satu hal yang rumit, karena pada beberapa kasus, anda harus merombak CSS anda. Meskipun begitu, render blocking CSS hanya terjadi pada CSS Eksternal.

Selain itu pada beberapa kasus render blocking merusak tampilan blog pada saat 1-2 detik pertama ditampilkan. Tapi apa salahnya mencoba bukan ? Jadi mari kita bahas metodenya.

Jika situs anda tidak memiliki CSS Eksternal Tambahan atau CSS Font seperti FontAwesome, atau CSS Font dari GoogleFont, maka secara sederhana anda bisa mengubah CSS eksternal menjadi CSS Inline / sebaris dengan elemen <style/>.

Jika situs anda memiliki CSS Eksternal atau CSS Font Eksternal, satu-satunya metode yang efektif mengatasi render blocking CSS adalah dengan memisahkan CSS utama yang membentuk template dengan CSS tambahan seperti CSS font eksternal, lalu menambahkan CSS Utama sebagai CSS inline diatas </head> dan memuat CSS tambahan (eksternal) dengan CSS @import atau JavaScript di atas </body>.

Kenapa tidak menggunakan CSS @import ?
Karena CSS @import menyebabkan semua sumberdaya eksternal pada peramban Internet Explorer tidak bisa di muat secara pararel, sehingga harus di muat satu per satu dan menyebabkan situs web di muat lebih lambat. Namun jika memang situs anda tidak di buat untuk Internet Explorer, anda bisa mengabaikan ini

Agar lebih jelas, perhatikan ilustrasi berikut :

Fix Render Blocking CSS

Agar tidak bingung, mari simak contoh berikut :

<!DOCTYPE html>
<html>
<head>
<title>Ini Yang Masih Render Blocking CSS</title>

<link href="/main.css" id="skin-css" rel="stylesheet">
<link href="/fa.css" id="fontawesome" rel="stylesheet">
</head>
<body>

</body>
</html>

Pada kode diatas, kita bisa mengetahui bahwa ada 2 CSS yang menyebabkan render-blocking yaitu CSS utama id="skin-css" dan CSS Tambahan FontAwesome id="fontawesome". Untuk mengatasinya, maka kita ubah kodenya menjadi :

Opsi 1 (CSS @import)

<!DOCTYPE html>
<html>
<head>
<title>Ini Yang diatasi dengan CSS @import</title>
<style type="text/css" id="page-skin">
/* Isi dari main.css */
</style>
</head>
<body>

<style type="text/css" id="import" scoped="scoped">
/* Menggunakan CSS Import untuk memasukan CSS FontAwesome di atas body */
@import url("/fa.css");
/*Jika CSS tambahan Lebih dari satu, tambahkan lagi sintaks berikut diatas ini
@import url("URL_CSS"); */
</style>
</body>
</html>

Opsi 2 (JavaScript)

<!DOCTYPE html>
<html>
<head>
<title>Ini Yang diatasi dengan JavaScript</title>
<style type="text/css" id="page-skin">
/* Isi dari main.css */
</style>
</head>
<body>

<script type="text/javascript" id="import">
// Jangan ubah fungsi berikut sampai tanda berikutnya
function getCss(url){$('<link>>',{rel:'stylesheet',type:'text/css','href':url}).appendTo('head');}
// Akhir Fungsi
// Menggunakan Fungsi di atas untuk untuk memasukan CSS FontAwesome di atas head setelah situs web selesai dimuat
getCss('/fa.css');
/*Jika CSS tambahan Lebih dari satu, tambahkan lagi sintaks berikut diatas ini
getCss('URL_CSS'); */
</script>
</body>
</html>

Bagaimana sudah mengerti bukan ? Silahkan eksekusi dan langsung lanjut ke bagian JavaScript.

Mengatasi Render Blocking JavaScript

Untuk mengatasi render blocking JavaScript sangatlah mudah, cukup pindahkan JavaScript anda ke atas tag penutup </body>. Hal ini berlaku untuk JavaScript inline dan eksternal.

Namun, hal ini tetap membuat JavaScript membebani situs anda. Sehingga situs anda tetap terasa berat

Untuk itu, satu-satunya cara untuk menghilangkan render blocking JavaScript dan menghilangkan beban yang di bawa JavaScript adalah memuatnya secara asynchronous atau dalam bahasa Indonesia disebut asingkron setelah memindahkannya ke atas </body>.

Tidak semua JavaScript bisa di muat secara asingkron (seperti JQuery), jika JavaScript tersebut tidak berfungsi setelah di muat asingkron, maka cukup di simpan di atas </body>

Untuk membuat JavaScript asingkron, ada 3 metode yang bisa digunakan, namun karena salah satu metode sudah terlalu usang dan sudah tidak efektif, maka akan saya sebutkan 2 metode yaitu :

Metode JavaScript Asingkron dengan HTML5
Ini merupakan metode asingkron paling mudah. Anda hanya perlu menambahkan atribut async pada elemen <script>, pada beberapa CMS yang mengharuskan setiap atribut HTML memerlukan nilai, maka gunakan async="async". Contoh :

<script src="URL_JAVASCRIPT">

<script src="URL_JAVASCRIPT" async>

<script src="URL_JAVASCRIPT" async="async">

Lanjut ke metode ke dua :

Metode JavaScript Asingkron dengan JQuery

Pastikan anda sudah memasang JQuery pada situs anda

Untuk metode ini, maka sintaks yang digunakan untuk memuat JavaScript sedikit berbeda. Silahkan gunakan sintaks tersebut untuk memuat JavaScript secara asingkron, jangan lupa simpan di atas </body> :

<script>$(window).bind("load",function(){
$.getScript("URL_JAVASCRIPT");
/* Jika lebih dari satu, tambahkan lagi $.getScript("URL_JAVASCRIPT"); sebelum }); */
});
</script>

Cukup mudah bukan ? Jangan hanya puas dengan 5 optimasi berdasarkan algoritma PageSpeed yang tadi saya bahas, sebagai bonus saya tambahkan beberapa optimasi tambahan yang tentunya cukup efektif untuk membuat situs web anda bisa di muat secepat kilat.

Optimasi Tambahan
Optimasi Penggunaan Font dari Google Font
Kebanyakan dari anda banyak yang masih menggunakan beberapa elemen <link> untuk menambahkan beberapa font dari Google Font ke situs web anda. Contohnya :

<link href="//fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">

Tahukah anda bahwa 2 font tadi bisa digabungkan untuk mengurangi HTTP Request, bagaimana caranya ? Dengan mengubahnya menjadi :

<link href="//fonts.googleapis.com/css?family=FONT1|FONT2|FONT3|DST" rel="stylesheet">

Contoh pada kasus di atas :
nb :bagian yang saya tandai adalah font anda

<link href="//fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Oswald:700" rel="stylesheet">

Namun, sintaks di atas tidak valid HTML5 untuk membuatnya valid HTML5, anda bisa men-dencode | menjadi %7C, contohnya (masih menggunakan kasus di atas) :

<link href="//fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic%7COswald:700" rel="stylesheet">

Bagaimana menyatukan dua URL Google Font diatas bisa membuat situs anda lebih cepat ? Sudah saya bocorkan tadi, dengan mengurangi HTTP Request, ibaratkan begini, anda pergi dua kali ke suatu tempat untuk mengambil 2 benda dengan pergi ke suatu tempat 1 kali untuk mengambil 2 benda, mana yang lebih cepat ? Tentunya mengambil 2 benda dalam satu kali pergi. (Jumlah Elemen <link> = jumlah waktu pergi, jumlah font = Jumlah benda)

Menghapus Entity Tag

Sebelumnya kita bahas dulu tentang entity tag atau akrab di sebut e-tag, e-tag merupakan suatu mekanisme yang membuat kode unik untuk menentukan kesamaan file yang ada di cache dengan yang ada di server.

Jadi e-tag ini bekerja sebagai validator tambahan file cache, meskipun fungsi ini sudah dilakukan oleh web server dengan kode respon HTTP 304.

Nah, yang jadi permasalahan, e-tag di buat unik berdasarkan identifikasi file dan juga server, sehingga jika anda menggunakan CDN, maka e-tag di server anda dan server CDN tentunya akan berbeda, dan pastinya menyebabkan validasi file cache tidak bekerja, dan menyebabkan cache tidak berfungsi.

Hal ini juga berlaku pada clustered server.

Selain itu e-tag membuat ukuran http response header menjadi lebih besar dan tetunya tidak efektif (meskipun hanya beberapa byte).

Untuk itu, setiap server yang memanfaatkan cache disarankan untuk menonaktifkan fungsi e-tag, caranya ? Dengan menambahkan dua baris berikut di akhir file .htaccess anda :