Post by dunks » Sat Nov 03, 2012 2:33 pm

Hi All - Mastah2 & Nubii2 ..
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
1. .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.
Hasil Test ane (perhatian! ini sy punya pake oc.1.5.4.1 yah)

theme standard update ,, cocok u/ development ,, style default kaga full compress

modif controller module yg load css dan js (carousel dan slideshow) / btw: yg mau buat versi vqmodnya silahkan

ada tambahan? biar ane post di awal2 sini :)

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>
==============================================================
score gtmetrix : ps:73 ys:89 mayan kebut :)
Last edited by dunks on Fri Dec 28, 2012 5:39 pm, edited 10 times in total.

My Site: HargaSpek.com


User avatar
Active Member

Posts

Joined
Wed Apr 20, 2011 1:19 pm
Location - Jakarta - Indonesia

Post by screenager8 » Mon Nov 05, 2012 12:16 pm

Mau gak mau memang harus dijadikan hanya 1 request saja, biar nilai di YSlow atau Google PageSpeed jadi bagus. Blm pernah coba sih menggabungkan semua javascript menjadi 1... Coba cek extension ini ($260),... dia sudah cukup lengkap untuk mempercepat loading website dengan menggabungkan semua js dan css..

Namun ttp lebih baik klu menggabungkan js dan css pada saat development website, jadi bukan pakai extension.

http://www.opencart.com/index.php?route ... arch=cache

Image

Bukatoko.com | Cara mudah & cepat punya toko online!


User avatar
Active Member

Posts

Joined
Sat Nov 28, 2009 5:45 pm
Location - Jakarta, Indonesia

Post by dunks » Mon Nov 05, 2012 12:29 pm

yup ane sedikit paham tentang itu mas bro,, yg ane mau tanya itu kalo digabung2 ama dikompress masalah kaga ama licence nya? apalagi kalo compressnya extreeme.. gitu lho..

My Site: HargaSpek.com


User avatar
Active Member

Posts

Joined
Wed Apr 20, 2011 1:19 pm
Location - Jakarta - Indonesia

Post by sans » Mon Nov 05, 2012 12:41 pm

dunks wrote:yup ane sedikit paham tentang itu mas bro,, yg ane mau tanya itu kalo digabung2 ama dikompress masalah kaga ama licence nya? apalagi kalo compressnya extreeme.. gitu lho..
Ajarin dong gue cara menggabungkan file javascript, misal untuk file common.js ama tab.js !

kaos jersey, jersey bola, baju bola, baju bola terbaru, baju bola murah


Active Member

Posts

Joined
Tue Dec 07, 2010 9:18 am

Post by dunks » Mon Nov 05, 2012 1:01 pm

Ajarin dong gue cara menggabungkan file javascript, misal untuk file common.js ama tab.js !
ini sedikit contoh dari saya ,, jelek sih , tapi performnya mayan score di gtmetrix.com sampe 85 yslownya

contohnya dah gk ada :D
Last edited by dunks on Fri Dec 28, 2012 5:40 pm, edited 1 time in total.

My Site: HargaSpek.com


User avatar
Active Member

Posts

Joined
Wed Apr 20, 2011 1:19 pm
Location - Jakarta - Indonesia

Post by screenager8 » Tue Nov 06, 2012 8:58 am

@dunks,.... .htaccessnya gimana isinya?
@sans,...... gabungin javascript lagi dicoba nih,... memang musti cari satu per satu dan ada yg panggil script dan styles dari controller,... mungkin dunks bisa kasih list javascript apa aja yg dipakai di Opencart

Image

Bukatoko.com | Cara mudah & cepat punya toko online!


User avatar
Active Member

Posts

Joined
Sat Nov 28, 2009 5:45 pm
Location - Jakarta, Indonesia

Post by sans » Tue Nov 06, 2012 9:40 am

@ dunks:
thanks, atas linknya. Entar file .js hasil combine saya pakai ya.
Itu untuk parameter enable gzip, caranya gimana? apakah lewat cpanel ato menambahkan kode di file .htacess?
Ngomong2 skor untuk YSLOW masih 81.
http://awesomescreenshot.com/0aeledzc6

Ini sekadar share, jangan lupa backup terlebih dahulu file.
Klo untuk css sprite bisa search di google css sprite tool, entar ada website yang membantu membikinkan css selector.

untuk parameter defer parsing bisa pakai code seperti ini:
secara normalnya

Code: Select all

<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
Klo defer parsing pakai async

Code: Select all

<script async type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
Untuk optimise image bisa pakai tool dari yahoo smush it, ato mengambil dari gtmetrix untuk versi compresi image

Untuk parameter add expire header bisa dimainkan lewat .htaccess
Ini contoh code di file .htaccess

Code: Select all

 # Turn on Expires and set default to 0
    ExpiresActive On
    ExpiresDefault A0
     
    # Set up caching on media files for 5 weeks
    <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
    ExpiresDefault A3024000
    Header append Cache-Control "public"
    </FilesMatch>
     
    # Set up caching on media files for 5 weeks
    <FilesMatch "\.(gif|jpg|jpeg|png|swf)$">
    ExpiresDefault A3024000
    Header append Cache-Control "public"
    </FilesMatch>
     
    # Set up 1 day caching on commonly updated files
    <FilesMatch "\.(xml|txt|html|js|css)$">
    ExpiresDefault A86400
    Header append Cache-Control "proxy-revalidate"
    </FilesMatch>
     
    # Force no caching for dynamic files
    <FilesMatch "\.(php|cgi|pl|htm)$">
    ExpiresActive Off
    Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
    Header set Pragma "no-cache"
    </FilesMatch>


kaos jersey, jersey bola, baju bola, baju bola terbaru, baju bola murah


Active Member

Posts

Joined
Tue Dec 07, 2010 9:18 am

Post by screenager8 » Tue Nov 06, 2012 10:39 am

Untuk Minify CSS atau JS sebaiknya memang dari saat development. Jadi js dan css sudah di-combine, ada pro-cons nya. CSS atau JS dari extension2 tambahan disatukan.

Tapi bisa jg minify pakai Google Minify http://code.google.com/p/minify/

caranya gampang:

Old
<link rel="stylesheet" type="text/css" media="all" href="catalog/view/theme/default/stylesheet/stylesheet.css" />

New
<link rel="stylesheet" type="text/css" media="all" href="<?php echo $base; ?>min/?f=catalog/view/theme/default/stylesheet/stylesheet.css" />

Buat JS juga gitu,.. hanya menambahkan <?php echo $base; ?>min/?f=

Image

Bukatoko.com | Cara mudah & cepat punya toko online!


User avatar
Active Member

Posts

Joined
Sat Nov 28, 2009 5:45 pm
Location - Jakarta, Indonesia

Post by qahar » Tue Nov 06, 2012 10:44 am

Pakai Minify aja, jadi otomatis combine and compress css 1 request dan js 1 request.
Biar lebih maknyus gabungin .htaccess OpenCart dengan milik html5 boilerplate. Ini untuk memastikan expired header dan non etag sesuai standar.
Kalau dua di atas digabungin, saya pernah dapet maks nilai ySlow (tapi di localhost) sampai 93. Plus punya ekstensi baru buat dijual.. lho.. ;D
Tapi web saya sendiri belum pakai dua teknik di atas wkwkwk :laugh:


edit:
wah kalah cepet 5 menit dari bro screenager :P

User avatar
Expert Member

Posts

Joined
Tue Jun 29, 2010 10:24 pm
Location - Indonesia

Post by screenager8 » Tue Nov 06, 2012 11:44 am

@qahar... ada tips buat kompresi image hasil dari resized Opencart? soalnya ttp aja bermasalah buat Google PageSpeed... image asli memang sudah dikompresi, tapi hasil resize di Opencart, masih blm lossless..

Image

Bukatoko.com | Cara mudah & cepat punya toko online!


User avatar
Active Member

Posts

Joined
Sat Nov 28, 2009 5:45 pm
Location - Jakarta, Indonesia

Post by dunks » Tue Nov 06, 2012 12:54 pm

@dunks,.... .htaccessnya gimana isinya?
ada beberapa line tambahan sih ,, html boilerplate punya bagus banget buat dicustom
Itu untuk parameter enable gzip, caranya gimana? apakah lewat cpanel ato menambahkan kode di file .htacess?
ada beberapa hosting yg membolehkan ,, ada beberapa yg gk membolehkan,, lebih enak pake cdn cloudflare,, cuman gk bisa setting expire header,, btw: gzip menurut saya skrg gk terlalu signifikan banget karena koneksi inet skrg dah kenceng2 koq :) CMIIW

hehe Master smua udah pada Comment nih ,, ayoo keluarin lagi sharing nyaa yaah :)
Ngomong2 gk ada yg Jawab masalah "apakah akan bermasalah dengan lisense nya?" niiih mastah

My Site: HargaSpek.com


User avatar
Active Member

Posts

Joined
Wed Apr 20, 2011 1:19 pm
Location - Jakarta - Indonesia

Post by screenager8 » Tue Nov 06, 2012 1:30 pm

Mungkin tetap mencantumkan comment yg di atas deh... bbrp ratus kata kyknya tidak terlalu signifikan. Rata2 jg mereka supply minify...

Sejauh ini sudah bisa (localhost) PageSpeed:94 dan YSlow:95. Masih mentok di Defer parsing of JavaScript dan blm coba pindah image ke sub-domain.

Sejauh ini yg sudah dilakukan (masih di localhost):

1. CSS Sprite untuk imag2 yg sering muncul
2. Mengbah image menjadi Data-Url biar gk repot soal image width & height
3. .htaccess dari HTML5 Boilerplate
4. Combine JS & CSS manual dan install Google Minify
5. GZIP Compression
6. Optimize semua image

Apa skor bisa 100? soalnya cek http://id.yahoo.com/ skornya PageSpeed:81, YSlow:80...hehehehe
Google.com.... skornya PagSpeed:97, YSlow:98

Image

Bukatoko.com | Cara mudah & cepat punya toko online!


User avatar
Active Member

Posts

Joined
Sat Nov 28, 2009 5:45 pm
Location - Jakarta, Indonesia

Post by dunks » Tue Nov 06, 2012 1:44 pm

Oke bro @screenager ,, ane coba buat standardnya kali yaah nanti ane zip ane share disini ,, combine js dan css homenya default OC ,, truss masalahnya ada module yg load style dan js melalui controller,, nanti bagi yg bisa tolong bisa buatin versi VQmods buat rubah supaya kaga load style dan js nya sperti module slideshow dan carousel ,,

btw Facebook doang paling mentok PS 99 , Yslow 99 :)

My Site: HargaSpek.com


User avatar
Active Member

Posts

Joined
Wed Apr 20, 2011 1:19 pm
Location - Jakarta - Indonesia

Post by dunks » Tue Nov 06, 2012 2:22 pm

ada 2 file di controller yg load style dan js ke homepage :

1. catalog/controller/module/slideshow.php diganti jadi seperti ini ada di line2 atas koq

Code: Select all

//		$this->document->addScript('catalog/view/javascript/jquery/nivo-slider/jquery.nivo.slider.pack.js');
//		
//		if (file_exists('catalog/view/theme/' . $this->config->get('config_template') . '/stylesheet/slideshow.css')) {
//			$this->document->addStyle('catalog/view/theme/' . $this->config->get('config_template') . '/stylesheet/slideshow.css');
//		} else {
//			$this->document->addStyle('catalog/view/theme/default/stylesheet/slideshow.css');
//		}
2. catalog/controller/module/carousel.php diganti jadi seperti ini ada di line2 atas koq

Code: Select all

//		$this->document->addScript('catalog/view/javascript/jquery/jquery.jcarousel.min.js');
//		
//		if (file_exists('catalog/view/theme/' . $this->config->get('config_template') . '/stylesheet/carousel.css')) {
//			$this->document->addStyle('catalog/view/theme/' . $this->config->get('config_template') . '/stylesheet/carousel.css');
//		} else {
//			$this->document->addStyle('catalog/view/theme/default/stylesheet/carousel.css');
//		}
yang bisa bikin vqmod bikinin yaah :D

My Site: HargaSpek.com


User avatar
Active Member

Posts

Joined
Wed Apr 20, 2011 1:19 pm
Location - Jakarta - Indonesia

Post by qahar » Thu Nov 08, 2012 1:15 am

screenager8 wrote:@qahar... ada tips buat kompresi image hasil dari resized Opencart? soalnya ttp aja bermasalah buat Google PageSpeed... image asli memang sudah dikompresi, tapi hasil resize di Opencart, masih blm lossless..
Saya pengen coba pakai Image Manipulation class tapi belum nemu yg mantap dihati. Salah satu problem oc Image manipulationnya kurang bagus :p

Saya sempat punya ide kalau semua product image misalnya di Product Listing (category) menggunakan metode asynchronous. Jadi load Html Layout dulu and tampilkan keterangan load image, kemudian baru di panggil produk imagenya. Kalau perlu biar lebih keren, load image-nya di trigger saat user scroll ke bawah. Bisa jadi ekstensi bagus nih, ayo yg mau buat silahkan :)

Jadi kalau di test atau halaman di load seharusnya ga kenceng, tapi kenceng banget. Coz gambar produk tidak langsung di load saat render halaman.

User avatar
Expert Member

Posts

Joined
Tue Jun 29, 2010 10:24 pm
Location - Indonesia

User avatar
Active Member

Posts

Joined
Tue Mar 20, 2012 8:39 am
Location - Indonesia

Post by sans » Thu Nov 08, 2012 12:48 pm

WAH Mastah2 pada kumpul.
ane gelar tikar aja disini.
Silahkan dilanjutkan diskusinya yang menarik ini.
Saya yakin semua website/online store yang menggunakan ilmu hasil diskusi di thread ini bakal dapet grade A (90% lebih).

kaos jersey, jersey bola, baju bola, baju bola terbaru, baju bola murah


Active Member

Posts

Joined
Tue Dec 07, 2010 9:18 am

Post by dunks » Thu Nov 08, 2012 1:31 pm

Saya sempat punya ide kalau semua product image misalnya di Product Listing (category) menggunakan metode asynchronous. Jadi load Html Layout dulu and tampilkan keterangan load image, kemudian baru di panggil produk imagenya. Kalau perlu biar lebih keren, load image-nya di trigger saat user scroll ke bawah. Bisa jadi ekstensi bagus nih, ayo yg mau buat silahkan :)

Jadi kalau di test atau halaman di load seharusnya ga kenceng, tapi kenceng banget. Coz gambar produk tidak langsung di load saat render halaman.
mantap nih,, ada 2 pilihan yg cocok kayanya :

1. Lazy Load
2. JAIL aka Jquery Asynchronous Image Loader https://github.com/sebarmeli/JAIL

monggo ane coba yaaa,,

Keren juga Jail nya nih hasil test ane http://www.bukalaptop.com/desktops

My Site: HargaSpek.com


User avatar
Active Member

Posts

Joined
Wed Apr 20, 2011 1:19 pm
Location - Jakarta - Indonesia

Post by screenager8 » Thu Nov 08, 2012 3:45 pm

Kemarin sempat coba mengubah semua image menjadi DataURL dan error/problem dgn Optimize image sudah tidak ada lagi. Cuma blm ditest pengaruhnya apa dari segi loading, apakah lebih cepat atau lebih lambat (kalau gak salah, Data URL tidak di-cache), blm juga dicek di berbagai browser. Tapi trend saat ini sih untuk image memakai DataUrl. Keuntungannya antara lain... single HTML request, karena image2 itu dipanggil bersamaan dgn panggilan kode HTML.

Contoh mengubah image menjadi data URL

Controller (latest.php)

Dari:

Code: Select all

'thumb'   	 => $image,
Menjadi:

Code: Select all

'thumb'   	 => base64_encode(file_get_contents($image)),
Nanti di View (latest.tpl)

Dari:

Code: Select all

<img height="auto" width="<?php echo $product['width']; ?>" src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" />
Menjadi:

Code: Select all

<img height="auto" width="<?php echo $product['width']; ?>" src="data: image/jpeg;base64,<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" />

Terakhir kali berhasil sampai rate PageSpeed:95 dan YSlow:96... tapi itu di themes custom,... mau coba di themes standard opencart sekalian dokumentasi step2nya...

Waktu itu juga pernah lihat jquery untuk responsive layout, jadi me-resize image realtime sesuai ukuran browser, tentu cara ini ada pro-consnya jg, misalnya penggunaan memory yg lebih banyak..

Layak didiskusikan dampak image menjadi Data URL,.. klu pakai DataURL, image dianggap sebagai inline HTML,... jadi loadnya bersamaan dgn HTML.

Image

Bukatoko.com | Cara mudah & cepat punya toko online!


User avatar
Active Member

Posts

Joined
Sat Nov 28, 2009 5:45 pm
Location - Jakarta, Indonesia

Post by dunks » Thu Nov 08, 2012 4:04 pm

wow image data url,, makin ganteng ajee nih ... coba ah..

benefitnya Jelas banget buat speed nih,, cuman benefitnya buat SEO gmn yah?? ada info

My Site: HargaSpek.com


User avatar
Active Member

Posts

Joined
Wed Apr 20, 2011 1:19 pm
Location - Jakarta - Indonesia
Who is online

Users browsing this forum: No registered users and 9 guests