Halo dan salam kenal. Saya member baru mohon pencerahannya dari suhu2 disini.
Saya punya website yang baru di design ulang. Waktu saya tanya kenapa loadingnya lama, saya dikasih tau kalo website saya kebanyakan HTTP request. Saya searching dan ada beberapa cara buat ngurangin request itu seperti ngunrangin jumlah CSS dan jumlah gambar. CSS udah dikurangin dan digabungin jadi 1 file tapi gambar kan gak bisa dikurangin. Bagaimana ya caranya supaya bisa ngurangin HTTP request yang katanya ngeberatin website saya.
Mohon petunjuknya, suhu2.
Trims.
salam kenal pak. pas di redesign, harusnya bilang buat diubah juga CSSnya. dan juga script2 seperti javascript dan flash juga dikurangin. pake yang perlu2 aja.
Salam kenal pak. Sebelumnya kalau tidak salah pernah dibahas disini mengenai ngurangin request HTTP tapi belom mendetail sih.
Mungkin saya bisa sedikit kasih masukkan, HTTP request itu seperti jumlah paket yang diminta oleh browser kepada server. Dan size adalah isi dari tiap paket itu. Supaya speed website meningkat (selain faktor server), adalah dengan cara ngurangin jumlah paket itu beserta isinya.
Mungkin susah dijabarin secara luas karena tiap website pasti punya struktur design yang berbeda. Tapi pada umumnya yang pasti, jumlah paket yang diminta bisa dikurangin dengan cara ngurangin beberapa aspek di design seperti script2, gambar dan css.
Kalau hal diatas udah dilakuin, atau seandainya gak mau dilakuin, bisa juga pake step berikut:
Gabung file2. File CSS dan script gak perlu banyak2. Jadiin sesedikit mungkin.
CSS Sprites. Buat ngegabung semua atau sebagian file gambar jadi 1 gambar. (1 file berisi banyak gambar = 1 request).
Image Maps. Teknik yang jarang dipake tapi seandainya bisa diterapin, request buat banyak link gambar bisa dikurangin jadi 1.
Welcome :) minimize css bisa juga. Terus gambar jangan upload yang gede2. File jpeg atau png yang udah dikecilin.
Maaf pak Anton, kalo itu cuma ngrangin ukuran per requestnya. Kalo mau ngurangin jumlahnya, harus tahu apa aja yang di load di website. Bisa coba gtmetrix.com. Disana ada rekomendasi2 cara nguranginnya.
hehe. thanks buat ralatnya. jadi sering mampir di gtmetrix tapi sayangnya yang gratisan terbatas :(
ijin nyimak pak
Thanks buat komen2nya yang membantu. Sekarang ini file gambar sudah dikecilin ukurannya untuk ngatasin halaman2 yang berat karena gambar. Untuk sementara HTTP request baru bisa dikurangin.
@Rudiansyah: kalau pake CSS Sprite bisa semua gambar ya?
css sprite bisa aja dipakein kesemua gambar. tapi gak efisien dan gak efektif. css sprite bagusnya buat gambar2 yang jarang atau gak pernah berubah dan ada di banyak halaman.
jadi misalnya ada gambar "panah" buat navigasi scrolling misalnya. atau background website yang sama di semua halaman dan gambar2 navigasi di menu. ini semua bisa digabungin jadi 1 gambar treus di sprite.
kalo gambar yang di blog kan beda2. satu halaman punya gambar A dan halaman berikutnya punya gambar B. jadi kalo sprite, gambar itu diload sama css pas pengunjung pertama kali dateng. makin banyak gambar di sprite, makin gede juga size css-nya karena perintah yang gak dibutuhin pada saat itu karena umpamanya dia lagi buka halaman home page doang.
kelemahan lainnya dari sprite yang pasti adalah susah buat ngedit. bayangin aja buat ngubah 1 gambar kita harus ke ngotak-atik file css-nya. jadi sprite gak efektif kalo dipake buat gambar yang individual.
trims buat petunjuknya suhu :)
mau nanya kalo website gak loading sempurna itu karena apa ya? jadi gak loading beberapa gambar doang. atau tampilannya kacau tapi content teks lengkap.
wah, bisa macem2 sebabnya... mulai request time-out, respond server yang lelet, posisi javascript, setting cdn lagi gak bener, dll. coba di hard refresh atau clear cookies dulu sebelum coba lagi. kalau masih berlanjut, bisa juga karena ada masalah.
bisa juga websitenya lagi gak bener. banyak kemungkinannya.
css mungkin gak ya? kalau gak ngeload udah pasti gak ada design kan?
lagi pake proxy mungkin pak rama. soalnya kadang kalo proxy aktif dan udah lama, dan untuk beberapa website, tampilannya berantakan. gak tau kenapa tapi saya belom lama ini ngalamin.
proxy kelihatannya. hehe... kok bisa gitu ya? thanks :)
bener bro? kadang begitu kok gak tau jg knp. padahal textnya kebuka tapi tampilannya berantakan.
matiin proxynya kalo gak butuh. bikin lemot jg soalnya.
proxy-nya nge-cached. bisa juga begitu.
tapi gak selalu. lagi gak ngecached mungkin apa refreshnya sering?
cached proxy buat performance mungkin? biasanya pake proxy gratisan ini. hehe. kecuali kalo lagi browsing di kantor ya :)
gratisan minta lebih hehe.
Junaidi
di cached supaya gak makan bandwidth dan lebih cepet pas loading berikutnya.
kayaknya ini gak ngurangin request deh. tapi memang bikin lebih kenceng.
Junaidi
ini ada tambahan dapet dari yahoo:
pake gzip, cdn, css diatas, script dibawah, cache-control, javascript dan css eksternal, kurangin dns lookup, minidy javascript dan css, jangan pakai redirect, jangan pakai script yang sama dua kali, e tags, ajax bisa di cache, flush buffer, kurangin iframe dan cookies, dan masih banyak lagi.
up trit lama.
mau nanya kalo banyak yang bisa dilakuin buat ngurangin request itu dari sisi design ya bukan di programmingnya? jadi universal kan ya bisa diterapin di website yang dibikin pake apa aja?
Bisa dua2nya.
Misal dari design bisa gabungin css. Kalau di programming bisa dengan coding yang lebih bagus
thanks bro. sekalian referensinya dong. mau coba2 sendiri :)
CSS jadi satu, JS juga jadi 1. harusnya ini cukup buat ngurangin request. sama HTMLnya kurangin jumlah spasi
teorinya memang begitu. tapi caranya yang susah :(
harus deketan juga kalau gak salah. jadi bisa di compress. gak ngaruh ke request ya?
perhatiin pengguna internet explorer. file CSS yang kebesaran bisa bermasalah sama IE.
bukan cuma jumlah request aja yang diperhatiin, tapi juga ukuran.
misalnya HTMLnya dibuat lebih ringkas. terus pakai gzip. CSS dan JS juga bisa di minify supaya ukurannya lebih kecil. dan juga perhatiin error 404 dan redirect. dua masalah ini sebisa mungkin gak ada karena cuma buang2 waktu.
Banyak kemungkinan cara2nya sih intinya :)
Setting bagian server ya yang lebih banyak pengaruhnya? Bagaimana dibanding optimisasi request dan ukuran halaman?
semuanya pengaruh, asal dilakuin bener. dari sisi HTML atau CSS, bener kalau bisa dibikin spasinya lebih sedikit. CSS dan JS juga bisa pakai versi min.css. paling gak minimal harus begini. terus error dan redirect harus diperhatiin.
disini server, yang harus dilihat server harus bisa gzip, caching, expire header, dll.
gak bisa dilihat satu sisi aja karena ntar malahan gak kerasa perbedaannya.
Kalau manggil lewat JSON itu gimana? Apa lebih bagus daripada HTML? Maaf saya rada awam
[quote=Hendrik]
Kalau manggil lewat JSON itu gimana? Apa lebih bagus daripada HTML? Maaf saya rada awam
[/quote
sorry, itu yang tadi saya bilang itu cara supaya ukuran HTMLnya berkurang bukan jumlah requestnya.
kalau tentang json, itu bagian dari kerjanya JS. jadi misalnya pemanggilan konten itu via JS, ini bagus buat website yang AJAX. unggulnya karena dia bisa ngeload konten dengan cara asynchronous dan cenderung lebih cepet dari XML.
bisa pakai script yang ngebuat request dan ukuran HTML berkurang kan kalau gak salah? jadi walaupun server ngasih banyak, script ini bakal bikin halaman teroptimisasi.
sebagai contohnya Facebook. kalau bukan Facebook di desktop, ada 4 kolom. dan tiap kolom bisa update dengan sendiri, dan semua halamannya bisa ke load lebih cepet dari hampir semua website yang ada sekarang di internet.
secara logika, sebanyak itu Facebook harus ngeload, tapi kenapa bisa cepet?
bukan dari ukuran halaman atau jumlah requestnya kan harusnya? tapi sebagaimana efektif dan efisiennya dia bisa ngirim. cmiiw
Kayaknya web designer pada benci banget sama internet explorer :)
sebelum ada firefox sama chrome iya memang dia bagus secara gak ada lagi pilihan browser yang bagus :)
ngomong2 kalau web design buat Edge jarang kedengeran yah? apa sama aja seperti IE?
Lebih tepatnya mgkn dibenci setiap org kali ya? :P
dari dulu. makanya website pada susah buat optimisasi di IE and Edge
sama aja. tapi lebih fleksibel Edge kayaknya. masa Microsoft gak belajar dari pengalaman?
Junaidi
jangan lupa DNS lookup. ini bisa makan waktu lebih lama karena sumbernya external.
kurangin gambar sama jumlah CSS. itu yang paling banyak pengaruhnya
numpang pertanyaan nubie.. apa yang paling pengaruh? jumlah request ini apa ukurannya? maksud disini ukuran halamannya bukan kalau di save misalnya?
sorry kalau salah.
Bukan bos... Kalo ukuran html gak pernah gede, paling beberapa kilobyte. Itu kalo file halamannya di download.
Disini maksudnya berapa ukuran halaman itu, berikut semua atribut yang ada. Misalnya:
Html: 50kb
Css: 100kb
Gambar: 200kb
Javascript: 300kb
Buat standar webaite sekarang, beberapa ratus kb sampe 1-2mb juga ada.
Yang dimaksud disini itu jumlah panggilannya.
Junaidi
coba lihat gtmetrix.com. jelasnya bisa ketahuan dari sana. masukin aja website apa aja
Itu ukuran size html. Maksudnya disini itu size semuanya
Apc atau memcache?
itu cara optimisasi PHP supaya gak selalu di compile dan ada di memory supaya lebih cepet bisa diakses. bukan buat ngurangin HTTP request. tapi memang secara keseluruhan bisa bikin website cepet :)
varnish :D
Mau nambahin...pakai lazyload.
Jadi gambar di load pas muncul di layar. Kalau gak, lazyload yang kerjanya lewat JS akan mencegah supaya dia ngeload. Hasilnya html request dan size berkurang.