- Beranda
- Komunitas
- Tech
- Website, Webmaster, Webdeveloper
optimasi halaman web supaya ngacir, gan (contoh kasus)


TS
zuperbayu
optimasi halaman web supaya ngacir, gan (contoh kasus)
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
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
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
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
Code:
<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
Code:
<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
Diubah oleh zuperbayu 05-07-2015 06:19
0
856
2


Komentar yang asik ya
Urutan
Terbaru
Terlama


Komentar yang asik ya
Komunitas Pilihan