hari ini saya belajar bagaimana mengoptimize web supaya loadingnya ngacir..
saya menggunakan gtmatrix untuk menganalisa dan melaksanakan rekomendasinya.

nah ini adalah study kasus, saya menggunakan blog saya sebagai contoh
semoga menjadi inspirasi dan burguna bagi agan semua.

pertama buka gtmetrix.com
dan test salah satu halamannya...
ini hasilnya gan



oke, saatnya memperhatikan rekomendasi dari gtmetrix

yang berwarna merah dan kuning adalah rekomendasi gtmatrix yang seharusnya agan benahi.


dari situ dapat dilihat bahwa ada image yang pada code htmlnya tidak disebutkan ukuran dimensinya, jadi untuk membenahi, tambahi property dimension pada code imagenya contohnya seperti ini

<img src=".../image.jpg" alt="image" width="693" height="195" />

selanjutnya rekomendasi gtmetrix yang kedua

tidak begitu mengerti bagaimana membenahinya, tapi saya tau ini berhubungan dengan js dari facebok yang asalnya dari code social plugin facebook comment, ... saya memilih menghapus plugin ini, karena komentar belum begitu penting. atau nanti pake form komentar biasa saja.


rekomendasi berikutnya yaitu optimalasi cache browser, dan kompresi gzip.
gtmatrix merekomendasikan memasang code ini pada .htaccess , ... ini bisa diterapkan langsung ke .htaccess agan

<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>

## EXPIRES CACHING ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg "access plus 1 year"

ExpiresByType image/jpeg "access plus 1 year"

ExpiresByType image/gif "access plus 1 year"

ExpiresByType image/png "access plus 1 year"

ExpiresByType text/css "access plus 1 month"

ExpiresByType application/pdf "access plus 1 month"

ExpiresByType text/x-javascript "access plus 1 month"

ExpiresByType application/x-shockwave-flash "access plus 1 month"

ExpiresByType image/x-icon "access plus 1 year"

ExpiresDefault "access plus 2 days"

</IfModule>

## EXPIRES CACHING ##

dan setelah ditest kembali, ini hasilnya gan


lumayan kan gan, daripada lumanyun

oh iya, ini ada tool untuk optimaliasi css dan file js
http://www.cleancss.com/css-minify/

silahkan agan share juga tips optimalisasi pada halaman web agan, moga berguna