Kita smua tau kan ,, nobody like SLOW WEBSITE ,, huh? sampe2 Robot pun males ketemu website lemot,, apalagi orang hehehe iya kan?, Kesimpulannya ane disini mau mengajak Mastah2 disini untuk share pengetahuannya tentang cara mempercepat load website.. mau ?
Materi nya ,, :
- YSLOW & Pagespeed : disini penjelasannya -->
https://github.com/marcelduran/yslow/wiki
https://developers.google.com/speed/pagespeed/
Apa yg terpenting ? ini yg menurut ane paling penting :
No. 1 -> Minimize HTTP Requests
yang saya ketahui disini Default theme OC mempunyai 8 external Javascript scripts, 5 external stylesheets
No. 2 -> Leverage browser caching & Expire Header,, jadi next load nya bakal using cache
No. 3 -> Gzip Compression / Deflate ( kalo tersedia )
Info Tools Online untuk mengukur seberapa cepat Load Website yg kamu punya :
Tutorial dari bro @screenager8
Hasil Test ane (perhatian! ini sy punya pake oc.1.5.4.1 yah) ada tambahan? biar ane post di awal2 sini1. .htaccess dari HTML5Boilerplate (http://html5boilerplate.com/). Ini yg harus pertama dilakukan, krn mengubah skor PageSpeed dari 34 menjadi 87!!!
2. CSS Sprite untuk image2 yg sering dipakai, seperti yg ada di folder /themes/default/images/
3. Ganti image menjadi DataUrl. Lihat pro-cons-nya, krn DataUrl tidak support IE7 ke bawah.
4. Semua image harus punya atribut HEIGHT & WIDTH. ada bbrp image Opencart yg gak ada, jadi harus utak-atik kode.
==> disini cara nya http://forum.opencart.com/viewtopic.php?f=121&t=20057
5. Compress semua image pakai Lossless, contoh pakai JPEGMini (http://www.jpegmini.com/). Problemnya, sewaktu Opencart resize image tsb, hasilnya tidak dikompresi dengan baik.
6. Gabung semua Javascript & CSS. Musti hati2 untuk combine JS dan CSS terutama mengenai uturannya. Hasilnya kalau bisa hanya 1 javascript dan 1 css. Banyak file javascript yg tidak dipakai tetapi ada di folder.
7. Minify Javascript & CSS. Kalau bisa pakai aplikasi, tetapi bisa jg pakai Google Minify (http://code.google.com/p/minify/).
8. GZIP Compression. Pastikan web hostingnya menyalakan modul ini.
Code: Select all
.htaccess ane tanpa Gzip ,, karena host gk support deflate :(
==============================================================
# Proper MIME type for all files
# JavaScript
AddType application/javascript js jsonp
AddType application/json json
# Audio
AddType audio/mp4 m4a f4a f4b
AddType audio/ogg oga ogg
# Video
AddType video/mp4 mp4 m4v f4v f4p
AddType video/ogg ogv
AddType video/webm webm
AddType video/x-flv flv
# SVG
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
# Webfonts
AddType application/vnd.ms-fontobject eot
AddType application/x-font-ttf ttf ttc
AddType application/x-font-woff woff
AddType font/opentype otf
# Assorted types
AddType application/octet-stream safariextz
AddType application/x-chrome-extension crx
AddType application/x-opera-extension oex
AddType application/x-shockwave-flash swf
AddType application/x-web-app-manifest+json webapp
AddType application/x-xpinstall xpi
AddType application/xml rss atom xml rdf
AddType image/webp webp
AddType image/x-icon ico
AddType image/icon png
AddType text/cache-manifest appcache manifest
AddType text/vtt vtt
AddType text/x-component htc
AddType text/x-vcard vcf
<IfModule mod_headers.c>
Header set Connection Keep-Alive
Header append Vary Accept-Encoding
</IfModule>
FileETag MTime Size
Options +FollowSymlinks
Options -Indexes
<FilesMatch "\.(tpl|ini|log)">
Order deny,allow
Deny from all
</FilesMatch>
RewriteEngine On
RewriteBase /
RewriteRule ^sitemap.xml$ index.php?route=feed/google_sitemap [L]
RewriteRule ^googlebase.xml$ index.php?route=feed/google_base [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !.*\.(ico|gif|jpg|jpeg|png|js|css)
RewriteRule ^([^?]*) index.php?_route_=$1 [L,QSA]
# Redirect non www to www
RewriteCond %{HTTP_HOST} ^[^.]+\.[^.]+$
RewriteCond %{HTTPS}s ^on(s)|
RewriteRule ^ http%1://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
# Feed
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/icon "access plus 1 year"
# Media: images, video, audio
ExpiresByType audio/ogg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/ogg "access plus 1 year"
ExpiresByType video/webm "access plus 1 year"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 year"
# Webfonts
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType font/opentype "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
# CSS and JavaScript
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
</IfModule>
==============================================================