Tolong pilih kategori sesuai, jenis posting (pertanyaan atau bukan) dan sertakan tag/topik yang sesuai misal komputer, php, mysql, dll.
Promosi atau posting tidak pada tempatnya akan kami hapus.
Mencantumkan kode program di posting Anda, tolong ikuti aturan yang sesuai, baca http://diskusiweb.com/discussion/39204/aturan-cara-menyisipkan-kode-program-di-diskusiweb

Baca cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Belajar kompresi image and javascript di website

Selamat Sore,

Mau tanya lagi nih, saya mau bikin website penuh dengan image dan javanya, contohnya: http://designslounge.com/

- Kalau boleh sharing step - step yang dipelajari untuk refrensi saya? Saya belum paham bagaimana biar pertama kali user berkunjung website bisa langsung di akses dengan cepat tidak pada kunjungan selanjutnya baru bisa diakses cepat karena cache.
- Kalau ga salah (lupa baca apa denger dari orang) ada pengaturan yang kita lakukan diserver juga ya supaya bisa lebih cepat diakses websitenya?

Mohon maaf kalau pertanyaannya mungkin terlalu sederhana, kalau blajar dari Mbah rasanya kurang tanpa diskusi.

Salam,

Sun4son

Tanggapan

  • edited October 2013
    1.
    situs yg elo rujuk pake wordpress 3.6
    engine cms yg sudah mapan, dan tentunya optimasi sudah dilakukan dimana-mana disisi server scripting

    2.
    gambarnya ukuran file nya kecil, mungkin rata-rata 25KB atau kurang
    gw sampling 2 buah, cuma dapet ukuran 29.6KB & 15KB

    3.
    kalo halaman html nya di save di lokal, totalnya cuma 911KB
    masih gede juga, pasti kerasa berat juga kalo dibuka dari koneksi yg cuma 56Kbps
    kalo dari koneksi 1Mbps, ya cepet

    4.
    semua javascript dan css ada di lokal server dia sendiri
    bukan model website yg kadang pake js yg ada di server orang lain
    misal ada yg build web, tapi js jquery nya ada di google
    kalo semua di server sendiri, kecepatan load relatif sama
    tapi kalo mix dgn server lain, tergantung koneksi ke dua tempat

    5.
    ikuti model google, semua halaman di hilangkan spasi dan newline nya
    termasuk utk css dan js nya
    lumayan buat mengurangi ukuran halaman

    6.
    kalo elo liat js yg elo pake buat rujukan, semua pake yg versi .min atau .pack
    artinya emang sudah di kompres semua kaya yg gw tulis di nomer 5.

    7.
    yg masalah server juga masalah cache juga
    kalo halaman jarang di update, mending di cache jadi halaman html
    tanpa perlu baca db
    wordpress juga pake cache html

    8.
    koding yg baik
    biasanya optimasi berbanding terbalik dengan rapid development
    kalo optimasi cenderung hardcore
    kalo rapid development cenderung pake framework

    9.
    kalo ukuran page sudah kelewat besar meskipun sudah di kompres
    bisa coba pake ob_gzhandler supaya halaman di kompres dengan gzip sebelum di kirim ke browser
    tapi itu hanya bisa dibuka dengan browser yg support / bisa membuka compressed page



    yg elo jadikan rujukan masih pake framework jquery, jadi sebenernya masih bisa di optimasi lagi
    cenderungnya mungkin hanya untuk efek interface

    halamannya kagak di kompres semodel google, jadi masih bisa dimampatkan lagi

    yg gw track dari halaman yg diterima browser gw, kagak pake gzhandler, kemungkinan developer beranggapan halaman masih kecil
  • edited October 2013
    1. situs yg elo rujuk pake wordpress 3.6
    engine cms yg sudah mapan, dan tentunya optimasi sudah dilakukan dimana-mana disisi server scripting
    - Oh,, saya lagi belajar pakai drupal.

    2. gambarnya ukuran file nya kecil, mungkin rata-rata 25KB atau kurang
    gw sampling 2 buah, cuma dapet ukuran 29.6KB & 15KB
    - Kalau ukurang gambarnya besar gimana? Apalagi gambarnya dijadiin background full yang ga bisa di repeat.

    3.kalo halaman html nya di save di lokal, totalnya cuma 911KB
    masih gede juga, pasti kerasa berat juga kalo dibuka dari koneksi yg cuma 56Kbps
    kalo dari koneksi 1Mbps, ya cepet

    - Hm, gimana cara tahu seberapa cepat aksesnya dari 56Kbps atau yang lainnya? ada toolsnya atau apa?

    4.semua javascript dan css ada di lokal server dia sendiri
    bukan model website yg kadang pake js yg ada di server orang lain
    misal ada yg build web, tapi js jquery nya ada di google
    kalo semua di server sendiri, kecepatan load relatif sama
    tapi kalo mix dgn server lain, tergantung koneksi ke dua tempat
    - Iya sih, udah pernah coba load filenya dari tempat lain kayak google, kadang lama banget. Tapi, kalau di server sendiri juga bisa lama karena banyak CSS dan javascript yang diload. 

    5.ikuti model google, semua halaman di hilangkan spasi dan newline nya
    termasuk utk css dan js nya
    lumayan buat mengurangi ukuran halaman

    - Nah kalau ini yang bener kita upload yang udah dihilangkan semua newlinenya atau kita upload yang ga di kompres? Pernah bikin yang generate di server, hostingnya jadi cepet penuh karena dia semacam double gtu filenya, kompres dan yang tidak dikompress.

    6.kalo elo liat js yg elo pake buat rujukan, semua pake yg versi .min atau .pack
    artinya emang sudah di kompres semua kaya yg gw tulis di nomer 5.

    -  Yang ini saya paham.

    7.yg masalah server juga masalah cache juga
    kalo halaman jarang di update, mending di cache jadi halaman html
    tanpa perlu baca db
    wordpress juga pake cache html
    - Ok, saya cari informasi lebih lagi mengenai ini.

    8.koding yg baik
    biasanya optimasi berbanding terbalik dengan rapid development
    kalo optimasi cenderung hardcore
    kalo rapid development cenderung pake framework
    -  Kurang paham, contoh sederhananya gimana?

    9.kalo ukuran page sudah kelewat besar meskipun sudah di kompres
    bisa coba pake ob_gzhandler supaya halaman di kompres dengan gzip sebelum di kirim ke browser
    tapi itu hanya bisa dibuka dengan browser yg support / bisa membuka compressed page

    - Tapi ini perlu banget ga Mas? kalau ga semua browser support?


    yg elo jadikan rujukan masih pake framework jquery, jadi sebenernya masih bisa di optimasi lagi
    cenderungnya mungkin hanya untuk efek interface

    halamannya kagak di kompres semodel google, jadi masih bisa dimampatkan lagi

    yg gw track dari halaman yg diterima browser gw, kagak pake gzhandler, kemungkinan developer beranggapan halaman masih kecil

    - Halaman masih kecil atau udah gede di lihat dari aspek apa aja? 

  • edited October 2013
    ini aja dulu dipahami :

    yg namanya buka halaman web itu seperti halnya download
    request ke servernya cuma makan bandwidth kecil
    tapi nerima halamannya itu sama kaya download

    elo download file kecil dibanding file besar cepet mana ?

    kalo download file, gampang ngeliatnya, soalnya satu file utuh yg di download
    ukurannya langsung keliatan

    tapi kalo halaman web terpecah-pecah
    - halaman web itu sendiri
    - image-image nya
    - file-file eksternalnya (js, css)

    cara paling gampang kalo mau liat : berapa sih besar halaman web yg gw bikin ?
    buka pake browser, save as html
    itu bakal tersimpan di lokal :
    - halaman web nya -> jadi file html
    - konten yg terpisah (image, css, js) -> tersimpan dalam folder dgn nama sama dengan nama halaman html

    tinggal select saja keduanya di windows explorer, lalu klik kanan, lihat properties
    pan keliatan total ukuran file nya
    itu ukuran yg di download browser saat buka halaman
    semakin besar ukuran halaman web + konten terpisahnya -> semakin berat / lama load nya

    yg elo rujuk total halamannya gw sampling 911KB (911 Kilo byte)

    jumlah file yg di download kagak signifikan membuat load jadi berat
    memang bolak balik request meminta file ke server, tapi pengaruh ke load minim
    yg lebih signifikan berpengaruh ke load halaman web itu ukuran per file nya

    10 file @ 1KB = 10KB + (10 x request)
    dibanding 1 file @ 1MB = 1MB + (1x request)
    tetep lebih berat load yg 1MB
    bukan jumlah yg lebih berpengaruh, tapi ukuran file nya



    lalu masalah kecepatan koneksi

    kagak semua orang punya koneksi dengan kecepatan sama
    tergantung isp

    misal telkomnet instant (tni)
    itu kalo kagak salah speed nya cuma 56Kbps = 56 Kilobits per second
    ini cuma contoh itungan kasar ...
    1 kilobit = 1000 bit, 56 kilobit = 56.000 bit
    8 bit = 1 byte, 56.000 bit = 7.000 byte = 7KB
    artinya per detik kalo pake isp tni cuma bisa download 7KB
    sementara besar halaman : 911KB
    jadi utk membuka halaman tersebut butuh waktu +/- 130 detik = +/- 2 menit lebih ...
    apa bisa dibilang cepat ?

    itu juga tergantung stabil / kagaknya koneksi



    masalah gambar gedhe dalam bentuk ukuran pixel x pixel nya ... kagak masalah
    yg bikin masalah kalo ukuran file gambarnya yg gedhe ... misal pake background yg ukuran file nya saja sudah 3MB :D

    misal gini, gambar ukuran 2000px x 2000px kalo cuma plain warna putih doang ...
    kalo pake format gif paling jadi file berukuran 4KB doang

    tapi kalo itu foto panorama, bisa jadi ukuran filenya jadi sekian MB
    ukuran filenya yg bikin berat, bukan ukuran gambarnya

    jadi kalo gambar besar, sebaiknya pake format yg bisa di kompres, misal pake format jpeg
    tapi jpeg itu kompresinya lossy, semakin besar tingkat kompresi, kemakin "buram" gambarnya

    kalo kagak punya pilihan desain harus pake background image penuh ...
    ya pinter-pinter aja ngatur tingkat kompresi nya
    gambar masih dalam batas jelas terlihat
    tapi ukuran juga masuk akal

    bg image ukuran file 100KB-150KB masih bisa dipake
    tapi itu pun ngeliat ukuran halaman web secara total
    kalo masih kegedean, ya turunin lagi ukuran file bg nya



    dah, sudah panjang gw nulisnya
    tanya satu-satu aja biar fokus pengen tau yg mana ...

    kalo mau testing speed isp, bisa coba speedtest.net
  • hehehe, taro di tutorial DW pak :-bd
Sign In or Register to comment.