Zona Hentongerz

pada 11/23/2015 08:24:00 pm

Mengatasi Render Blocking JavaScript dari JQuery

Mengatasi Render Blocking JavaScript dari JQuery

Cara Mengatasi Render-Blocking Javascript dari JQuery S ebelumnya saya mengacuhkan hal ini ketika tahu bahwa Render-Blocking Javascript...

Selengkapnya »

pada 11/23/2015 05:18:00 pm

Cara Optimasi CSS Delivery di Blog

Cara Optimasi CSS Delivery di Blog

Optimize CSS Setiap browser yang di gunakan oleh pengunjung blog anda akan memblokir terlebih dahulu setiap CSS (Cascading Style Sheet)...

Selengkapnya »

pada 11/23/2015 05:12:00 pm

Jangan inline CSS Attribute di element HTML

Jangan inline CSS Attribute di element HTML

Dont Inline CSS at Element HTML Untuk menghindari terjadinya duplikasi css (cascading style sheet) atribut dalam blog anda. Sebisa mung...

Selengkapnya »

pada 11/22/2015 07:30:00 pm

Cara Efektif untuk Mempercepat Situs Web / Blog (SpeedPage)

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi63K5sKZCTjo7imTyhhZ9C7YRTjeEz4FqU-JNCrkk8EQiNlk41N5DHC4x_nrBkCO-47LR9LL00OLZKUz4zEvo9AlWPedAFZtuv7e7YhGOCkoFuP0revzgfzgt70Fdxt_3KdZpzvn0RKs0/s1600/thumnail-kecepatan.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Optimasi Kecepatan Situs Blog" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi63K5sKZCTjo7imTyhhZ9C7YRTjeEz4FqU-JNCrkk8EQiNlk41N5DHC4x_nrBkCO-47LR9LL00OLZKUz4zEvo9AlWPedAFZtuv7e7YhGOCkoFuP0revzgfzgt70Fdxt_3KdZpzvn0RKs0/s320/thumnail-kecepatan.png" title="Optimasi Kecepatan Situs Blog" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Optimasi Kecepatan Situs Blog</td></tr>
</tbody></table>
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.<br />
<br />
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.<br />
<br />
Jadi pengunjung langsung mental begitu saja saat membuka sebuah laman web karena faktor-faktor tertentu. Salah satunya kecepatan.<br />
<br />
Menurut survey yang dilakukan oleh KissMetricks, 40% orang meninggalkan sebuah situs web yang dimuat lebih dari 3 detik. Ini merupakan penyebab pogo-sticking terbesar.<br />
<br />
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.<br />
<br />
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.<br />
<br />
Muncul pertanyaan, Bagaimana mengamankan 40 % pengunjung tersebut ?<br />
<br />
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.<br />
<br />
Apa saja optimasi yang harus saya lakukan ?<br />
Banyak, terdapat ribuan cara yang bisa membuat situs anda dapat dimuat dengan cepat, tapi tidak semuanya efektif.<br />
<br />
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..<br />
<br />
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) :<br />
<br />
<br />
<ol>
<li>Aktifkan pemampatan*</li>
<li>Memperkecil HTML, CSS dan JavaScript**</li>
<li>Optimalkan gambar</li>
<li>Mengurangi waktu respon server*</li>
<li>Manfaatkan penyimpanan cache browser*</li>
<li>Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas</li>
<li>Optimasi tambahan</li>
</ol>
<br />
<br />
Lalu di ujung artikel ini saya juga menambahkan beberapa optimasi tambahan di luar algoritma PageSpeed untuk membuat situs anda semakin cepat.<br />
<br />
* = 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.<br />
** = Hanya secara manual untuk blog berplatform.<br />
<br />
Langsung saja kita bahas berikut ini :<br />
<br />
<span style="font-size: large;"><b><u>Memperkecil Ukuran = Memperkecil Beban</u></b></span><br />
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.<br />
<br />
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 :<br />
<br />
<span style="font-size: large;"><b><u>Memanfaatkan Pemampatan a.k.a Compression di situs anda</u></b></span><br />
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%.<br />
<br />
Lalu bagaimana GZip bisa membuat sebuah situs web menjadi lebih kecil ? Perhatikan ilustrasi berikut :<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6KcAkJObLgc7iyHnK-IFxBPDNygNW0PVJGAuyIKUnXGaJ4nEZ9JYgkhPbslOgxT23r8e8YWDRdh4KBuMjj7ldTYCcdCsa6CFTdtiMJLlsbhFv68GZOQzmWLIlsU_BefMycbUreEAZ2J8/s1600/Ilustrasi+GZIp.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Ilustrasi G-Zip" border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6KcAkJObLgc7iyHnK-IFxBPDNygNW0PVJGAuyIKUnXGaJ4nEZ9JYgkhPbslOgxT23r8e8YWDRdh4KBuMjj7ldTYCcdCsa6CFTdtiMJLlsbhFv68GZOQzmWLIlsU_BefMycbUreEAZ2J8/s640/Ilustrasi+GZIp.png" title="Ilustrasi G-Zip" width="568" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Ilustrasi G-Zip</td></tr>
</tbody></table>
<span style="font-size: large;"><b><u>Bagaimana Mengaktifkan GZip ?</u></b></span><br />
Ini bagian yang paling ditunggu, cara mengaplikasikan GZip ke situs web anda. Caranya sangatlah mudah, cukup tambahkan sintaks berikut ke file .htaccess anda :<br />
<br />
<blockquote class="tr_bq">
<IfModule mod_deflate.c><br />
  # Compress HTML, CSS, JavaScript, Text, XML and fonts<br />
  AddOutputFilterByType DEFLATE application/javascript<br />
  AddOutputFilterByType DEFLATE application/rss+xml<br />
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject<br />
  AddOutputFilterByType DEFLATE application/x-font<br />
  AddOutputFilterByType DEFLATE application/x-font-opentype<br />
  AddOutputFilterByType DEFLATE application/x-font-otf<br />
  AddOutputFilterByType DEFLATE application/x-font-truetype<br />
  AddOutputFilterByType DEFLATE application/x-font-ttf<br />
  AddOutputFilterByType DEFLATE application/x-javascript<br />
  AddOutputFilterByType DEFLATE application/xhtml+xml<br />
  AddOutputFilterByType DEFLATE application/xml<br />
  AddOutputFilterByType DEFLATE font/opentype<br />
  AddOutputFilterByType DEFLATE font/otf<br />
  AddOutputFilterByType DEFLATE font/ttf<br />
  AddOutputFilterByType DEFLATE image/svg+xml<br />
  AddOutputFilterByType DEFLATE image/x-icon<br />
  AddOutputFilterByType DEFLATE text/css<br />
  AddOutputFilterByType DEFLATE text/html<br />
  AddOutputFilterByType DEFLATE text/javascript<br />
  AddOutputFilterByType DEFLATE text/plain<br />
  AddOutputFilterByType DEFLATE text/xml<br />
  # Remove browser bugs (only needed for really old browsers)<br />
  BrowserMatch ^Mozilla/4 gzip-only-text/html<br />
  BrowserMatch ^Mozilla/4\.0[678] no-gzip<br />
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html<br />
  Header append Vary User-Agent<br />
</IfModule></blockquote>
<br />
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.<br />
<br />
<span style="font-size: large;"><b><u>Minify HTML, JavaScript dan CSS</u></b></span><br />
Secara sederhana, <i>minify</i> bisa diartikan sebagai menghapus hal-hal yang tidak diperlukan. Jadi melakukan <i>minify</i> pada file HTML, JavaScript, CSS berarti menghapus semua hal-hal yang tidak diperlukan pada file-file tersebut.<br />
<br />
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.<br />
<br />
Melakukan <i>minify</i> bisa mengurangi ukuran file-file situs anda antara 10 - 25%. Lumayan bukan ?<br />
<br />
Agar lebih jelas tentang <i>minify</i> bisa perhatikan contoh CSS berikut :<br />
<br />
Ini yang tidak di <i>minify</i> :<br />
<blockquote class="tr_bq">
html   {<br />
   font: Arial;<br />
   background: #FFF;<br />
   color: #333;<br />
}<br />
/* elemen body */<br />
body   {<br />
   padding: 5rem;<br />
   margin: 10px;<br />
}</blockquote>
Ini yang <i>minified</i> :<br />
<blockquote class="tr_bq">
html{font:Arial;background:#FFF;color:#333}body{padding:5rem;margin:10px;}</blockquote>
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.<br />
<br />
<span style="font-size: large;"><b><u>Untuk situs CMS WordPress</u></b></span><br />
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).<br />
<br />
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.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWD1rfgg-_LpJkx-Xq6ffSIzrmLdH8MEMGxKMmcoQpSNsF2FW39G7sStO6o1i7VlFoPMmx0MHn1imqgyRg-s5SS-lWBSrfN3aeuge7_7BBQCCnFjSJuTghwfHqa19P34a0qT-AmCYKGmA/s1600/WPTotalCache.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="W3 Total Cache" border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWD1rfgg-_LpJkx-Xq6ffSIzrmLdH8MEMGxKMmcoQpSNsF2FW39G7sStO6o1i7VlFoPMmx0MHn1imqgyRg-s5SS-lWBSrfN3aeuge7_7BBQCCnFjSJuTghwfHqa19P34a0qT-AmCYKGmA/s640/WPTotalCache.png" title="W3 Total Cache" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">W3 Total Cache</td></tr>
</tbody></table>
Setelah memasang WP Total Cache, anda akan melihat opsi <i>Performance</i> di sidebar dasbor WordPress anda. Silahkan arahkan tetikus (<i>mouse</i>) ke opsi tersebut, lalu pilih <i>General Setting</i>, lalu gulir ke bagian <i>minify</i>.<br />
<br />
Lalu samakan konfigurasi dengan tabel berikut, namun sebelumnya, jangan lupa aktifkan ekstensi PHP <b>html_tidy</b> atau <b>tidy</b> melalui cPanel atau konfigurasi PhP anda.<br />
<table class="table table-striped table-responsive" style="background-color: white; border-collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: #666666; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; letter-spacing: 0.1px; line-height: 26.4px; margin-bottom: 23px; max-width: 100%; min-height: 0.01%; overflow-x: auto; text-align: justify; width: 860px;"><thead style="box-sizing: border-box;">
<tr style="box-sizing: border-box;"><td style="border-top-width: 0px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;">Opsi</td><td style="border-top-width: 0px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;">Nilai</td></tr>
</thead><tbody style="box-sizing: border-box;">
<tr style="background-color: #f9f9f9; box-sizing: border-box;"><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">Minify</i></td><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;">Centang <i style="box-sizing: border-box;">enable</i></td></tr>
<tr style="box-sizing: border-box;"><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">Minify Mode</i></td><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;">Pilih <i style="box-sizing: border-box;">auto</i>, agar tidak ribet</td></tr>
<tr style="background-color: #f9f9f9; box-sizing: border-box;"><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">Minify cache method</i></td><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;">Pilih <i style="box-sizing: border-box;">disk</i> atau untuk</td></tr>
<tr style="box-sizing: border-box;"><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">HTML Minifier</i></td><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">Default</i></td></tr>
<tr style="background-color: #f9f9f9; box-sizing: border-box;"><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">JS Minifier</i></td><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">JSMin (default)</i></td></tr>
<tr style="box-sizing: border-box;"><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">CSS Minifier</i></td><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">Default</i></td></tr>
</tbody></table>
<u><span style="font-size: x-large;">Situs Non CMS</span></u><br />
<span style="font-size: large;"><u>Metode Otomatis untuk File HTML</u></span><br />
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.<br />
<br />
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/.<br />
<br />
Isi file minify.php tersebut dengan sintaks berikut :<br />
<blockquote class="tr_bq">
<?php<br />
function minify_output($buffer)<br />
{<br />
$search = array(<br />
'/\>[^\S ]+/s',<br />
'/[^\S ]+\</s',<br />
'/(\s)+/s'<br />
);<br />
$replace = array(<br />
'>',<br />
'<',<br />
'\\1'<br />
);<br />
if (preg_match("/\<html/i",$buffer) == 1 && preg_match("/\<\/html\>/i",$buffer) == 1) {<br />
$buffer = preg_replace($search, $replace, $buffer);<br />
}<br />
return $buffer;<br />
}<br />
ob_start("minify_output");<br />
?></blockquote>
Simpan file tersebut. Lalu tambahkan baris berikut ke file php.ini anda :<br />
<blockquote class="tr_bq">
auto_prepend_file = /path_ke_file_minify.php</blockquote>
Jangan lupa ubah path_ke_file_minify.php<br />
<br />
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.<br />
<br />
Perlu dicatat bahwa skrip tersebut tidak melakukan minify untuk file CSS dan JavaScript yang menyatu dengan HTML alias inline CSS dan JS.<br />
<br />
<span style="font-size: large;"><b><u>Metode Manual untuk HTML, CSS dan JavaScript</u></b></span><br />
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.<br />
<br />
Untuk file HTML yang memiliki JavaScript dan CSS, bisa gunakan HTML minifier yang ada di <a href="http://www.willpeavy.com/minifier/" target="_blank">http://www.willpeavy.com/minifier/</a>.<br />
<br />
Untuk file CSS, bisa mengunakan minifier yang ada di <a href="http://cssminifier.com/" target="_blank">http://cssminifier.com/</a><br />
<br />
Untuk file JavaScript, silahkan gunakan JSCompress yang ada di <a href="http://jscompress.com/" target="_blank">http://jscompress.com/</a><br />
<br />
<span style="font-size: large;"><b><u>Optimalkan Ukuran Gambar</u></b></span><br />
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.<br />
<br />
Untuk itu, kita harus bisa mengakali gambar-gambar tersebut agar tidak membuat situs kita lambat, namun tidak merusak kualitas gambar.<br />
<br />
Secara umum untuk mengoptimalkan ukuran gambar, ada 2 cara yang bisa kita lakukan sekaligus, yaitu :<br />
Mengubah ukuran gambar menjadi sesuai kebutuhan dan<br />
Mengoptimalkan setiap piksel pada gambar dengan alat tertentu<br />
<br />
<span style="font-size: large;"><b><u>Mengubah ukuran gambar menjadi sesuai kebutuhan</u></b></span><br />
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 .<br />
<br />
Dengan begitu anda bisa memperkecil ukuran gambar agar situs menjadi lebih ringan.<br />
<br />
<span style="font-size: large;"><b><u>Mengoptimalkan setiap piksel gambar dengan alat tertentu</u></b></span><br />
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.<br />
<br />
Setahu saya, alat ini bekerja dengan mengurangi kedalaman piksel (dpi) pada gambar sehingga sesuai untuk keperluan web dan tanpa mengurangi kualitas gambar.<br />
<br />
Hebatnya, kita tidak akan bisa membedakan (secara visual) mana gambar yang sudah di optimalkan dan yang belum, namun kita bisa membedakannya dengan ukuran.<br />
<br />
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 :<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUPZgR7f9j8vOYe_-ORTFrA-77FiCLV00DPJkyhSSS7Phxy8xrBQxGevIXp48s1rfbWDzFcj_84an3jdKRZvB8ihfhaVZS60ZEM3apJm0tihpUx8dBLhaC2DeR9nAUrrw83AR-91wKwlY/s1600/optimasi+gambar.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Optimasi Gambar" border="0" height="428" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUPZgR7f9j8vOYe_-ORTFrA-77FiCLV00DPJkyhSSS7Phxy8xrBQxGevIXp48s1rfbWDzFcj_84an3jdKRZvB8ihfhaVZS60ZEM3apJm0tihpUx8dBLhaC2DeR9nAUrrw83AR-91wKwlY/s640/optimasi+gambar.png" title="Optimasi Gambar" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Optimasi Gambar</td></tr>
</tbody></table>
Dahulu, alat optimasi gambar yang paling terkenal dan banyak digunakan adalah YSmush.it oleh Yahoo, namun alat tersebut sekarang sudah mati.<br />
<br />
Sekarang saya biasa menggunakan versi web Kraken.io di <a href="http://kraken.io/web-interface" target="_blank">kraken.io/web-interface</a>, menurut saya alat tersebut cukup efektif untuk mengurangi ukuran gambar.<br />
<br />
Ada dua metode pengoptimalan gambar yang tersedia di Kraken.io yang pertama, yaitu :<br />
<br />
<span style="font-size: large;"><b><i><u>Lossless</u></i></b></span><br />
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<br />
<br />
<b><i><u><span style="font-size: large;">Lossy</span></u></i></b><br />
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.<br />
<br />
Sekedar info, saya biasa menggunakan metode lossy.<br />
<br />
<span style="font-size: large;"><b><u>Mengurangi Beban Server</u></b></span><br />
Server menjadi titik krusial pada suatu situs web, kinerja server berpengaruh besar pada performa situs, terutama dalam sisi kecepatan.<br />
<br />
Jika situs anda lambat, bisa jadi karena server anda terbebani oleh situs anda. Biasanya hal ini terjadi pada situs yang memiliki tinggi.<br />
<br />
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 :<br />
<br />
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 :<br />
<br />
<span style="font-size: large;"><b><u>Mengurangi Permintaan File Statis dan Media Dengan cache</u></b></span><br />
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.<br />
<br />
Untuk media, tentu kita sudah tahu seperti apa, bisa berupa gambar, video, flash dan sejenisnya.<br />
<br />
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.<br />
<br />
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.<br />
<br />
Begitu pula dengan konten media pada situs web anda.<br />
<br />
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.<br />
<br />
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.<br />
<br />
Mungkin penjelasan di atas tidak terlalu membantu karena saya tidak pandai menjelaskan dengan kata-kata. Agar lebih paham, mari simak gambar ilustrasi berikut :<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf4sBOb6IR5QaDHi6QaRKED4sLUsLSMzqc5xlowL6LAvUMDz9kq0sEdTXYDBfOIbgJoYqMtVmpFQgJq4Yq3___nGlZM1wXdHgeF-a7KslT6DXchfiSUY_v6SNbkjsOrHQJsXWlvH_-Ing/s1600/ilustrasi+cache.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Ilustrasi Cache" border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf4sBOb6IR5QaDHi6QaRKED4sLUsLSMzqc5xlowL6LAvUMDz9kq0sEdTXYDBfOIbgJoYqMtVmpFQgJq4Yq3___nGlZM1wXdHgeF-a7KslT6DXchfiSUY_v6SNbkjsOrHQJsXWlvH_-Ing/s640/ilustrasi+cache.png" title="Ilustrasi Cache" width="480" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Ilustrasi Cache</td></tr>
</tbody></table>
Lalu bagaimana cara mengaktifkan caching ?<br />
<br />
<blockquote class="tr_bq">
<IfModule mod_expires.c><br />
ExpiresActive On<br />
ExpiresByType image/jpg "access plus 1 month"<br />
ExpiresByType image/jpeg "access plus 1 month"<br />
ExpiresByType image/gif "access plus 1 month"<br />
ExpiresByType image/png "access plus 1 month"<br />
ExpiresByType text/css "access plus 1 week"<br />
ExpiresByType text/x-javascript "access plus 1 week"<br />
ExpiresByType application/x-shockwave-flash "access plus 1 month"<br />
ExpiresByType image/x-icon "access plus 3 month"<br />
ExpiresDefault "access plus 3 days"<br />
</IfModule></blockquote>
<br />
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.<br />
<br />
Jika anda ingin menerapkan caching khusus pada file lain silahkan tambahkan sintaks berikut di bawah sintaks yang baru saja anda tambahkan :<br />
<blockquote class="tr_bq">
ExpiresByType TIPEMIME "access plus WAKTU"</blockquote>
<br />
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.<br />
<br />
Sedangkan WAKTU silahkan ganti dengan lamanya file akan di cache dengan format ANGKA seconds/minutes/days/week/month/year.<br />
<br />
<span style="font-size: large;"><b><u>Situs WordPress</u></b></span><br />
Untuk situs yang menggunakan CMS WordPress, anda bisa menggunakan plugin yang tadi kita gunakan untuk melakukan minify<br />
<br />
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 :<br />
<table class="table table-striped table-responsive" style="background-color: white; border-collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: #666666; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; letter-spacing: 0.1px; line-height: 26.4px; margin-bottom: 23px; max-width: 100%; min-height: 0.01%; overflow-x: auto; text-align: justify; width: 860px;"><thead style="box-sizing: border-box;">
<tr style="box-sizing: border-box;"><td style="border-top-width: 0px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;">Opsi</td><td style="border-top-width: 0px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;">Nilai</td></tr>
</thead><tbody style="box-sizing: border-box;">
<tr style="background-color: #f9f9f9; box-sizing: border-box;"><td class="text-center" colspan="2" style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; text-align: center; vertical-align: top;"><i style="box-sizing: border-box;">Page Cache</i></td></tr>
<tr style="box-sizing: border-box;"><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">Page Cache</i></td><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">Enable</i></td></tr>
<tr style="background-color: #f9f9f9; box-sizing: border-box;"><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">Page Cache Method</i></td><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">Disk: Enhanched</i></td></tr>
<tr style="box-sizing: border-box;"><td class="text-center" colspan="2" style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; text-align: center; vertical-align: top;"><i style="box-sizing: border-box;">Database Cache</i></td></tr>
<tr style="background-color: #f9f9f9; box-sizing: border-box;"><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">Database Cache</i></td><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">Enable</i> untuk situs yang tidak memiliki sistem pendaftaran / masuk (<i style="box-sizing: border-box;">login</i>) karena menyebabkan pengguna baru sulit untuk masuk.</td></tr>
<tr style="box-sizing: border-box;"><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">Database Cache Method</i></td><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">Disk</i></td></tr>
<tr style="background-color: #f9f9f9; box-sizing: border-box;"><td class="text-center" colspan="2" style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; text-align: center; vertical-align: top;"><i style="box-sizing: border-box;">Object Cache</i></td></tr>
<tr style="box-sizing: border-box;"><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">Object Cache</i></td><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">Enable</i></td></tr>
<tr style="background-color: #f9f9f9; box-sizing: border-box;"><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">Object Cache Method</i></td><td style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; vertical-align: top;"><i style="box-sizing: border-box;">Disk</i></td></tr>
<tr style="box-sizing: border-box;"><td class="text-center" colspan="2" style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; line-height: 1.846; padding: 8px; text-align: center; vertical-align: top;"><i style="box-sizing: border-box;">Browser Cache</i></td></tr>
</tbody></table>
<i>Browser Cache</i><span class="Apple-tab-span" style="white-space: pre;"> </span><i>Enable</i> (<b>baca peringatan setelah tabel ini</b>)<br />
<br />
<blockquote class="tr_bq">
Jika tadi anda mengubah file <span style="color: red;">.htaccess</span> untuk mengaktifkan GZip, hapus kembali perubahan tadi. Karena akan bentrok dengan browser cache. Perlu diketahui, secara sederhana Browser Cache = GZip + optimasi cache yang digunakan.</blockquote>
<br />
Lagi-lagi pengguna WordPress dimanjakan dengan plugin.<br />
<br />
<span style="font-size: large;"><b><u>Mengurangi Beban pada Perangkat Pengunjung</u></b></span><br />
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.<br />
<br />
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 ?<br />
<div>
<br /></div>
<div>
<div>
<span style="font-size: large;"><b><u>Mengatasi Pemblokiran Render alias Render Blocking</u></b></span></div>
<div>
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.</div>
<div>
<br /></div>
<div>
Peyebab utama render blocking adalah CSS dan atau JavaScript yang diletakan sebelum tag penutup <span style="color: cyan;"></head></span>, dalam artian sebelum tubuh laman (<span style="color: lime;"><body></span>) dimuat.</div>
<div>
<br /></div>
<div>
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 <span style="color: cyan;"></body></span>.</div>
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVCcytICW9o7nWi0gRM97cb1KWdO-XAQ1fkFocNiMBszD-ePhX-yfF0SXVxJz3hUAMBm4XWYbwYYCjtLvJfLjMC5hQaqWzdxiEVNiHK6ugifDUt-CHLDpovaxI1zg_dLZ7GAyR6ejMi_I/s1600/fix-render-block.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Fix Render Blocking" border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVCcytICW9o7nWi0gRM97cb1KWdO-XAQ1fkFocNiMBszD-ePhX-yfF0SXVxJz3hUAMBm4XWYbwYYCjtLvJfLjMC5hQaqWzdxiEVNiHK6ugifDUt-CHLDpovaxI1zg_dLZ7GAyR6ejMi_I/s640/fix-render-block.png" title="Fix Render Blocking" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Fix Render Blocking</td></tr>
</tbody></table>
<div>
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 :</div>
<div>
<br /></div>
<div>
<div>
<span style="font-size: large;"><b><u>Mengatasi Render Blocking CSS</u></b></span></div>
<div>
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.</div>
<div>
<br /></div>
<div>
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.</div>
<div>
<br /></div>
<div>
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 <span style="color: red;"><style/></span>.</div>
<div>
<br /></div>
<div>
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 <span style="color: cyan;"></head></span> dan memuat CSS tambahan (eksternal) dengan CSS <span style="color: orange;">@import</span> atau JavaScript di atas <span style="color: lime;"></body></span>.</div>
</div>
<div>
<br /></div>
<div>
<blockquote class="tr_bq">
Kenapa tidak menggunakan CSS <span style="color: magenta;">@import</span> ?<br />
Karena CSS <span style="color: magenta;">@import</span> 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</blockquote>
</div>
<div>
<br /></div>
<div>
Agar lebih jelas, perhatikan ilustrasi berikut :</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig52NPlPle44eP2kvyUJJhF130IROsnurRB6LSi4tOOMIdWemb3K1gRfnEP13cPf1G38WFp50rAiHVSdgoESXdijA8HTOLtU_k1F7LNl0khwsrFoGpThsJuVHn55FV9EVG95bIWgikqKw/s1600/fix-render-block.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Fix Render Blocking CSS" border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig52NPlPle44eP2kvyUJJhF130IROsnurRB6LSi4tOOMIdWemb3K1gRfnEP13cPf1G38WFp50rAiHVSdgoESXdijA8HTOLtU_k1F7LNl0khwsrFoGpThsJuVHn55FV9EVG95bIWgikqKw/s640/fix-render-block.png" title="Fix Render Blocking CSS" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Fix Render Blocking CSS</td></tr>
</tbody></table>
<div>
<div>
Agar tidak bingung, mari simak contoh berikut :</div>
</div>
<div>
<blockquote class="tr_bq">
<!DOCTYPE html><br />
<html><br />
<head><br />
  <span style="color: magenta;"><title>Ini Yang Masih Render Blocking CSS</title></span><br />
<span style="color: magenta;">  </span><br />
<span style="color: magenta;">  <link href="/main.css" id="skin-css" rel="stylesheet"></span><br />
<span style="color: magenta;">  <link href="/fa.css" id="fontawesome" rel="stylesheet"></span><br />
</head><br />
<body><br />
  <br />
</body><br />
</html></blockquote>
</div>
<div>
<br /></div>
<div>
Pada kode diatas, kita bisa mengetahui bahwa ada 2 CSS yang menyebabkan render-blocking yaitu CSS utama <span style="color: red;">id="skin-css"</span> dan CSS Tambahan FontAwesome <span style="color: red;">id="fontawesome"</span>. Untuk mengatasinya, maka kita ubah kodenya menjadi :</div>
<div>
<br /></div>
<div>
<span style="font-size: large;"><b>Opsi 1 (CSS <span style="color: red;">@import</span>)</b></span></div>
<div>
<blockquote class="tr_bq">
<!DOCTYPE html><br />
<html><br />
<head><br />
  <title>Ini Yang diatasi dengan CSS @import</title><br />
  <span style="color: magenta;"><style type="text/css" id="page-skin"></span><br />
<span style="color: magenta;">    /* Isi dari main.css */</span><br />
<span style="color: magenta;">  </style></span><br />
</head><br />
<body><br />
  <br />
  <span style="color: magenta;"><style type="text/css" id="import" scoped="scoped"></span><br />
<span style="color: magenta;">    /* Menggunakan CSS Import untuk memasukan CSS FontAwesome di atas body */</span><br />
<span style="color: magenta;">    @import url("/fa.css");</span><br />
<span style="color: magenta;">    /*Jika CSS tambahan Lebih dari satu, tambahkan lagi sintaks berikut diatas ini</span><br />
<span style="color: magenta;">    @import url("URL_CSS"); */</span><br />
<span style="color: magenta;">  </style></span><br />
</body><br />
</html></blockquote>
</div>
<div>
<br /></div>
<div>
<span style="font-size: large;"><b>Opsi 2 (JavaScript)</b></span></div>
<div>
<blockquote class="tr_bq">
<!DOCTYPE html><br />
<html><br />
<head><br />
  <title>Ini Yang diatasi dengan JavaScript</title><br />
 <span style="color: magenta;"> <style type="text/css" id="page-skin"></span><br />
<span style="color: magenta;">    /* Isi dari main.css */</span><br />
<span style="color: magenta;">  </style></span><br />
</head><br />
<body><br />
  <br />
  <span style="color: magenta;"><script type="text/javascript" id="import"></span><br />
<span style="color: magenta;">    // Jangan ubah fungsi berikut sampai tanda berikutnya</span><br />
<span style="color: magenta;">   function getCss(url){$('<link>>',{rel:'stylesheet',type:'text/css','href':url}).appendTo('head');}</span><br />
<span style="color: magenta;">    // Akhir Fungsi</span><br />
<span style="color: magenta;">    // Menggunakan Fungsi di atas untuk untuk memasukan CSS FontAwesome di atas head setelah situs web selesai dimuat</span><br />
<span style="color: magenta;">    getCss('/fa.css');</span><br />
<span style="color: magenta;">    /*Jika CSS tambahan Lebih dari satu, tambahkan lagi sintaks berikut diatas ini</span><br />
<span style="color: magenta;">    getCss('URL_CSS'); */</span><br />
<span style="color: magenta;">  </script></span><br />
</body><br />
</html></blockquote>
</div>
<div>
<br /></div>
<div>
Bagaimana sudah mengerti bukan ? Silahkan eksekusi dan langsung lanjut ke bagian JavaScript.</div>
<div>
<br /></div>
<div>
<div>
<span style="font-size: large;"><b><u>Mengatasi Render Blocking JavaScript</u></b></span></div>
<div>
Untuk mengatasi render blocking JavaScript sangatlah mudah, cukup pindahkan JavaScript anda ke atas tag penutup <span style="color: lime;"></body></span>. Hal ini berlaku untuk JavaScript inline dan eksternal.</div>
<div>
<br /></div>
<div>
Namun, hal ini tetap membuat JavaScript membebani situs anda. Sehingga situs anda tetap terasa berat</div>
<div>
<br /></div>
<div>
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 <span style="color: lime;"></body></span>.</div>
</div>
<div>
<br /></div>
<div>
<blockquote class="tr_bq">
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 <span style="color: lime;"></body></span></blockquote>
</div>
<br />
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 :<br />
<br />
<span style="font-size: large;"><b><u>Metode JavaScript Asingkron dengan HTML5</u></b></span><br />
Ini merupakan metode asingkron paling mudah. Anda hanya perlu menambahkan atribut <span style="color: #ea9999;">async</span> pada elemen <span style="color: red;"><script></span>, pada beberapa CMS yang mengharuskan setiap atribut HTML memerlukan nilai, maka gunakan <span style="color: #f4cccc;">async="async"</span>. Contoh :<br />
<br />
<blockquote class="tr_bq">
<br />
<script src="URL_JAVASCRIPT"><br />
<br />
<script src="URL_JAVASCRIPT" <span style="color: magenta;">async</span>><br />
<br />
<script src="URL_JAVASCRIPT" <span style="color: magenta;">async="async"</span>></blockquote>
<br />
Lanjut ke metode ke dua :<br />
<br />
<span style="font-size: large;"><b><u>Metode JavaScript Asingkron dengan JQuery</u></b></span><br />
<blockquote class="tr_bq">
Pastikan anda sudah memasang JQuery pada situs anda</blockquote>
<br />
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 <span style="color: lime;"></body></span> :<br />
<br />
<blockquote class="tr_bq">
<script>$(window).bind("load",function(){<br />
<span style="color: magenta;">$.getScript("URL_JAVASCRIPT");</span><br />
/* Jika lebih dari satu, tambahkan lagi <span style="color: magenta;">$.getScript("URL_JAVASCRIPT");</span> sebelum <span style="color: magenta;">});</span> */<br />
});<br />
</script></blockquote>
<br />
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.<br />
<br />
<span style="font-size: x-large;"><b>Optimasi Tambahan</b></span><br />
<span style="font-size: large;"><b><u>Optimasi Penggunaan Font dari Google Font</u></b></span><br />
Kebanyakan dari anda banyak yang masih menggunakan beberapa elemen <span style="color: red;"><link></span> untuk menambahkan beberapa font dari Google Font ke situs web anda. Contohnya :<br />
<blockquote class="tr_bq">
<link href="//fonts.googleapis.com/css?family=<span style="background-color: yellow;">Lato:400,700,400italic,700italic</span>" rel="stylesheet"><br /><link href="//fonts.googleapis.com/css?family=<span style="background-color: yellow;">Oswald:700</span>" rel="stylesheet"></blockquote>
<br />
Tahukah anda bahwa 2 font tadi bisa digabungkan untuk mengurangi HTTP <i>Request</i>, bagaimana caranya ? Dengan mengubahnya menjadi :<br />
<br />
<link href="//fonts.googleapis.com/css?family=<span style="background-color: yellow;">FONT1|FONT2|FONT3|DST</span>" rel="stylesheet"><br />
<br />
Contoh pada kasus di atas :<br />
nb :bagian yang saya tandai adalah font anda<br />
<blockquote class="tr_bq">
<link href="//fonts.googleapis.com/css?family=<span style="background-color: yellow;">Lato:400,700,400italic,700italic|Oswald:700</span>" rel="stylesheet"></blockquote>
<br />
Namun, sintaks di atas tidak valid HTML5 untuk membuatnya valid HTML5, anda bisa men-<i>dencode</i> | menjadi <span style="color: red;">%7C</span>, contohnya (masih menggunakan kasus di atas) :<br />
<blockquote class="tr_bq">
<link href="//fonts.googleapis.com/css?family=<span style="background-color: yellow;">Lato:400,700,400italic,700italic%7COswald:700</span>" rel="stylesheet"></blockquote>
<div>
<br /></div>
<div>
Bagaimana menyatukan dua URL Google Font diatas bisa membuat situs anda lebih cepat ? Sudah saya bocorkan tadi, dengan mengurangi HTTP <i>Request</i>, 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 <span style="color: #f4cccc;"><link></span> = jumlah waktu pergi, jumlah font = Jumlah benda)</div>
<div>
<br /></div>
<div>
<div>
<span style="font-size: large;"><b><u>Menghapus Entity Tag</u></b></span></div>
<div>
Sebelumnya kita bahas dulu tentang <i>entity tag</i> atau akrab di sebut <i>e-tag</i>, <i>e-tag</i> merupakan suatu mekanisme yang membuat kode unik untuk menentukan kesamaan file yang ada di <i>cache</i> dengan yang ada di server.</div>
<div>
<br /></div>
<div>
Jadi e-tag ini bekerja sebagai validator tambahan file <i>cache</i>, meskipun fungsi ini sudah dilakukan oleh web server dengan kode respon HTTP 304.</div>
<div>
<br /></div>
<div>
Nah, yang jadi permasalahan, <i>e-tag</i> 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 <i>cache</i> tidak bekerja, dan menyebabkan <i>cache</i> tidak berfungsi.</div>
<div>
<br /></div>
<div>
Hal ini juga berlaku pada <i>clustered server</i>.</div>
<div>
<br /></div>
<div>
Selain itu e-tag membuat ukuran http <i>response header</i> menjadi lebih besar dan tetunya tidak efektif (meskipun hanya beberapa byte).</div>
<div>
<br /></div>
<div>
Untuk itu, setiap server yang memanfaatkan cache disarankan untuk menonaktifkan fungsi e-tag, caranya ? Dengan menambahkan dua baris berikut di akhir file <span style="color: red;">.htaccess</span> anda :</div>
</div>
<div>
<blockquote class="tr_bq">
Header unset ETag<br />FileETag None</blockquote>
</div>
<div>
<br /></div>
<div>
Sintaks tadi akan menghapus <i>entity tag</i> dari semua file dan akan membuat <i>e-tag</i> semua file menjadi <i>none</i> alias kosong.</div>
<div>
<br /></div>
<div>
<span style="font-size: x-small;"><i>Sumur : http://www.webmastermsm.com/2015/06/panduan-mempercepat-situs.html</i></span></div>