Cara Termudah Membuat Loading Blog Semakin Cepat | Fast Speed
Menata HTML Untuk Mempercepat Loading Blog - Pada sebagian orang yang jika dihadapkan dengan urusan kode-kodean seperti CSS, HTML dan JavaScript akan membuat kepala menjadi pusing kepalang, sehingga bentuk susunan stuktur HTML Template tidak pernah diperhatikan, bahkan tidak pernah terpikir untuk menata ulang susunan HTML kode yang ada dalam Template. Tetapi tahukah Anda pada baris dan kolom dalam kode HTML Template yang berantakan dapat menyebabkan loading blog menjadi lambat (loading berat), apakah Anda pernah mencoba untuk menata ulang susunan kode tersebut, atau membiarkan struktur kode tersebut saat Template itu Anda gunakan untuk membuat sebuah blog.?
Waktu yang cukup lama bukan hanya membaca 1 buah buku dengan 30 halaman.!, sama seperti blog, yang terbentuk oleh susunan HTML markup bahasa dalam jabaran struktur kode, dan kode inilah yang akan dibaca oleh browser saat blog Anda terbuka. Semakin banyak Anda menempatkan atau menambahkan beberapa kode secara langsung dalam wilayah HTML, maka semakin lama pula waktu yang dibutuhkan browser untuk membaca semua kode-kode tersebut dalam Template blog Anda, sebelum akhirnya blog akan terbuka secara sempurna dan menyeluruh.
► Tata Letak Struktur Elemen HTML Template Halaman Posting
► Cara Memasang Tag Script Dengan Benar Di Blog
► Cara Mengatur Halaman Blog Agar Responsive
Jadi mari kita lakukan apa yang harus kita tata agar blog dapat tampil sempurna dalam setiap peramban browser. INGAT..!! bukan hanya mempercantik tampilan blog saja yang membuat pengunjung betah bertamu di blog Anda, lebih daripada itu, kecepatan muat halaman (loading blog) sangatlah penting, karena 75% pengunjung akan kabur meninggalkan blog Anda jika mereka terlalu lama menunggu. Apa yang harus dilakukan..?
1. Letak Widget Pada Blog
Kita ambil contoh Template secara umum, yang terkonsep dengan pembagian 2 kolom halaman : Posting Page untuk tempat Anda menuliskan informasi artikel dan Sidebar Page untuk menampilkan sejumlah widget.
1.1 Sidebar Page
Halaman ini merupakan tempat dimana banyak dimuat widget. Akan tetapi tujuan kita disini adalah bagaimana membuat blog agar cepat terbuka, jadi hindari menempatkan efek-efek widget dalam jumlah banyak dalam halaman ini, tampilkan apa yang menurut Anda diperlukan oleh pengunjung, bukan membuat mata pengunjung menjadi terganggu dengan banyaknya widget yang Anda tampilkan disana.
Biasanya halaman sidebar masih terbagi lagi dalam beberapa kolom, jadi tampilkan saja sesuatu yang perlu, yang sekiranya bisa bermanfaat buat pembaca, seperti Popular Post, Arsip File, Label Category, selebihnya buang atau pindahkan di :
1.2 Footer Page
halaman yang sering kita sebut dengan "Catatan Kaki", karena letakknya berada paling bawah, jadi letakkan widget yang bisa mempengaruhi kecepatan muat halaman disini, kenapa..!! proses indeks oleh browser untuk membuka sebuah halaman, diawali dari atas Header page, halaman posting, sidebar (aside-page) dan terakhir halaman footer.
Jadi, jika Anda ingin menampilkan widget dari pihak ke tiga, maka letakkan objek itu dalam halaman ini, tujuannya agar tidak mengganggu proses loading halaman posting saat browser malakukan pembacaan kode HTML, terlebih jika widget yang menggunakan perintah JavaScript.
2. Hapus Dan Sejajarkan Susunan Kode
2.1 CSS Element
Kode ini biasanya diapit oleh tag <b:skin>...</b:skin> dalam Template, semakin sedikit kode yang ada dalam area tag tersebut, maka semakin cepat pula loading blog, dan sebaliknya semakin banyak dan tersusun memanjang kebawah, maka semakin berat kecepatan muat halaman. Apa yang perlu kita lakukan.?
>> Menghapus
Tanpa Anda sadari banyak kode yang tidak memberikan dampak apapun terhadap tampilan blog, sekalipun kode tersebut Anda hapus, jadi buat apa kode itu berada disana.! lebih baik dibuang bukan.!? periksa Template Anda:
>> Sejajarkan
Maksudnya disini adalah men-sebariskan semua susunan elemen CSS, jika susunan kode CSS dalam template Anda masih tersusun dengan struktur seperti ini:
Tersusun dengan memanjang kebawah, maka hapus semua lekukan baris dan kolom kode menjadi sejajar dan sebaris, caranya lihat » Cara Memperkecil Ukuran File CSS
2.2 HTML Markup
Letak dan susunan kode ini tidak begitu berpengaruh, karena kebanyakan kode HTML tersusun karena perintah pemanggil, artinya HTML terbentuk karena adanya pembentukan dari CSS element. Yang perlu diperhatikan dalam strukturnya adalah letak, konsepnya tidak jauh berbeda dengan elemen CSS.
2.3 JavaScript Perintah
Script ini merupakan jalinan perintah-perintah kode yang dapat berdiri sendiri, yang artinya saat tanda berupa ( ; ) kita hapus dalam area script kode, maka script ini akan merubah fungsi. Dan script dalam template yang sangat berpengaruh terhadap muat halaman, semakin banyak menaruh kode script, semakin berat blog terbuka, bagaimana menanggapi hal ini?
Lakukan konsep ini secara bertahap, jangan terlalu dipaksakan ya, ntar bisa pusing karena berhadapan dengan kode-kode script, hehe..!!! setelah ini rasakan kecepatan loading blog Anda. Selamat mencoba sahabat...*
Ibarat sebuah buku yang memiliki lembar halaman, jika 1 buku terdiri dari 30 lembar halaman dan Anda membutuhkan waktu 30 menit untuk membaca 1 halaman, maka berapa waktu yang akan Anda butuhkan untuk membaca semua isi buku tersebut yang terdiri dari 30 halaman? (30 menit X 30 Lembar halaman = 900 menit).
Waktu yang cukup lama bukan hanya membaca 1 buah buku dengan 30 halaman.!, sama seperti blog, yang terbentuk oleh susunan HTML markup bahasa dalam jabaran struktur kode, dan kode inilah yang akan dibaca oleh browser saat blog Anda terbuka. Semakin banyak Anda menempatkan atau menambahkan beberapa kode secara langsung dalam wilayah HTML, maka semakin lama pula waktu yang dibutuhkan browser untuk membaca semua kode-kode tersebut dalam Template blog Anda, sebelum akhirnya blog akan terbuka secara sempurna dan menyeluruh.
ARTIKEL TERKAIT :
► Tata Letak Struktur Elemen HTML Template Halaman Posting
► Cara Memasang Tag Script Dengan Benar Di Blog
► Cara Mengatur Halaman Blog Agar Responsive
Jadi mari kita lakukan apa yang harus kita tata agar blog dapat tampil sempurna dalam setiap peramban browser. INGAT..!! bukan hanya mempercantik tampilan blog saja yang membuat pengunjung betah bertamu di blog Anda, lebih daripada itu, kecepatan muat halaman (loading blog) sangatlah penting, karena 75% pengunjung akan kabur meninggalkan blog Anda jika mereka terlalu lama menunggu. Apa yang harus dilakukan..?
1. Letak Widget Pada Blog
Kita ambil contoh Template secara umum, yang terkonsep dengan pembagian 2 kolom halaman : Posting Page untuk tempat Anda menuliskan informasi artikel dan Sidebar Page untuk menampilkan sejumlah widget.
1.1 Sidebar Page
Halaman ini merupakan tempat dimana banyak dimuat widget. Akan tetapi tujuan kita disini adalah bagaimana membuat blog agar cepat terbuka, jadi hindari menempatkan efek-efek widget dalam jumlah banyak dalam halaman ini, tampilkan apa yang menurut Anda diperlukan oleh pengunjung, bukan membuat mata pengunjung menjadi terganggu dengan banyaknya widget yang Anda tampilkan disana.
Biasanya halaman sidebar masih terbagi lagi dalam beberapa kolom, jadi tampilkan saja sesuatu yang perlu, yang sekiranya bisa bermanfaat buat pembaca, seperti Popular Post, Arsip File, Label Category, selebihnya buang atau pindahkan di :
1.2 Footer Page
halaman yang sering kita sebut dengan "Catatan Kaki", karena letakknya berada paling bawah, jadi letakkan widget yang bisa mempengaruhi kecepatan muat halaman disini, kenapa..!! proses indeks oleh browser untuk membuka sebuah halaman, diawali dari atas Header page, halaman posting, sidebar (aside-page) dan terakhir halaman footer.
Jadi, jika Anda ingin menampilkan widget dari pihak ke tiga, maka letakkan objek itu dalam halaman ini, tujuannya agar tidak mengganggu proses loading halaman posting saat browser malakukan pembacaan kode HTML, terlebih jika widget yang menggunakan perintah JavaScript.
2. Hapus Dan Sejajarkan Susunan Kode
2.1 CSS Element
Kode ini biasanya diapit oleh tag <b:skin>...</b:skin> dalam Template, semakin sedikit kode yang ada dalam area tag tersebut, maka semakin cepat pula loading blog, dan sebaliknya semakin banyak dan tersusun memanjang kebawah, maka semakin berat kecepatan muat halaman. Apa yang perlu kita lakukan.?
>> Menghapus
Tanpa Anda sadari banyak kode yang tidak memberikan dampak apapun terhadap tampilan blog, sekalipun kode tersebut Anda hapus, jadi buat apa kode itu berada disana.! lebih baik dibuang bukan.!? periksa Template Anda:
- Cari semua kode yang diapit oleh tanda /*....*/, jika ada hapus saja kode itu.
- Fungsi kode dan penghapusan, kenali fungsi kodenya terlebih dahulu, lalu hapus jika tidak perlu. Selengkapnya lihat disini » Belajar Mengubah Kode Template Agar Valid HTML5
- Jarak nilai dan perintah kode, misal seperti ini:
.loading {
width: 100px;
}
//lihat ada jarak (spasi) antara kode width dengan nilai 100px,
hapus jarak itu sehingga menjadi seperti ini:
.loading {
width:100px;
} - Biasakan selalu menghapus tanda pemisah kode seperti ini ( ; ) diakhir kode.
- Selanjutnya baca Tips Membuat Proses Loading Blog Semakin Cepat tentang penggunaan objek lain seperti background dan gambar.
>> Sejajarkan
Maksudnya disini adalah men-sebariskan semua susunan elemen CSS, jika susunan kode CSS dalam template Anda masih tersusun dengan struktur seperti ini:
#outer-wrapper {
width:1000px;
background:whiteSmoke;
margin:0 auto;
padding:0;
text-align:left;
font:normal normal 12px Verdana,Geneva,sans-serif
}
#main-wrapper {
width:66%;
float:left;
word-wrap:break-word;
overflow:hidden
}
width:1000px;
background:whiteSmoke;
margin:0 auto;
padding:0;
text-align:left;
font:normal normal 12px Verdana,Geneva,sans-serif
}
#main-wrapper {
width:66%;
float:left;
word-wrap:break-word;
overflow:hidden
}
Tersusun dengan memanjang kebawah, maka hapus semua lekukan baris dan kolom kode menjadi sejajar dan sebaris, caranya lihat » Cara Memperkecil Ukuran File CSS
2.2 HTML Markup
Letak dan susunan kode ini tidak begitu berpengaruh, karena kebanyakan kode HTML tersusun karena perintah pemanggil, artinya HTML terbentuk karena adanya pembentukan dari CSS element. Yang perlu diperhatikan dalam strukturnya adalah letak, konsepnya tidak jauh berbeda dengan elemen CSS.
2.3 JavaScript Perintah
Script ini merupakan jalinan perintah-perintah kode yang dapat berdiri sendiri, yang artinya saat tanda berupa ( ; ) kita hapus dalam area script kode, maka script ini akan merubah fungsi. Dan script dalam template yang sangat berpengaruh terhadap muat halaman, semakin banyak menaruh kode script, semakin berat blog terbuka, bagaimana menanggapi hal ini?
- Kenali script yang Anda buat serta apa fungsinya, dengan begitu Anda akan paham apakah script ini bisa diringkas atau tidak, perlu dihapus atau dinonaktifkan.
- Lihat letak script dalam template Anda, script selalu diapit oleh tag <script>..</script>, dan diarea mana letak script tersebut, jika perintahnya untuk mengatur area dalam halaman body, maka satukan beberapa script dalam satu tag yang sama "jika itu memerintahkan wilayah yang sama posisi".
- Hindari menggunakan script jQuery ganda.
- Pelajari disini » Tahap Awal Belajar Tag Kondisional untuk mengapit perintah script Anda, dengan maksud apakah script itu ingin difungsikan atau dinonaktifkan jika tidak diperintahkan.
- Kompres script Anda jika itu mencakup banyak perintah, bisa dengan Google-drive, Google-code atau pastebin.
Lakukan konsep ini secara bertahap, jangan terlalu dipaksakan ya, ntar bisa pusing karena berhadapan dengan kode-kode script, hehe..!!! setelah ini rasakan kecepatan loading blog Anda. Selamat mencoba sahabat...*
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul= Menata HTML Untuk Mempercepat Loading Blog
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
Terimakasih tutorialnya, sangat membantu sekali :)
BalasHapusyakin neh kamu mengerti..?
Hapusmbak tanya,kalau mau but halaman statis,gmana ya ,masih awam ni..? trimakasih
HapusSaya pernah baca soal mensejajarkan kode CSS itu. Katanya ini sudah gak pengaruh lagi karena perkembangan browser yang semakin bagus. Benar apa enggak yah.
BalasHapusmungkin sebagian browser IYA, tetapi tetap saja masih banyak yang harus kita lakukan secara manual.
HapusHmm, kalo soal beginian, musti berulang2 nih bacanya... ijin bookmark dulu deh, tar balik lagi... :D
BalasHapusmba devy...
BalasHapusblog mba bisa ya seo nya 100%
seo blog saya malah turun jadi 38%
hehe
nasih orang awam
apanya yang istimewa mas, SEO 100% dan dibawah standart, yang terpenting adalah, bagaimana cara kita menyususn kode-kode dalam Template agar mudah terbaca oleh spider.
Hapusdan hal itu semuanya harus kita beri tanda, seperti gambar dengan atribut ALT, link dengan title, maka bukan hal yang sulit membuat blog 100% SEO
Makanya belajar dong. Ini hasilnya terbukti berkat mbak devy. Makasih ya mbakk. Salutttttt (o) (o) (o) SBOBET
Hapusboleh di sedot gak nih ? hehehe
BalasHapushmmm...boleh gak ya, coba mas Fiu tanya dengan mas MTP 86 tuh, boleh apa gak.?
Hapusyah .... kok tanya ama mas mtp 86 ih? hehe
Hapusya uadah, kalau gitu tanyanya sama mas ibrahim aja dech, biar lebih afdol..!!
Hapushehehe, gk jadi tanya ... mw lngsung q sedot aja ah ...hehehe awas devy pegangan yah ,,, ntr malah ikut kesedot lg ,,,hehe
HapusTerima kasih mbak tutorial dan ilmu nya, loading yang lambat pada blog kadang bikin kepala pusing, tidak jarang juga para pengunjung jadi lari, dan katanya bounced rate kita akan bertambah.
BalasHapusterima kasih mbak tips nya, saya akan mencoba menerapkannya..
mungin hampir kebanyakan orang ya mas, masa mau sih menunggu, makanya banyak yang bilang kalau menunggu itu sesuatu hal yang sangat menyebalkan, kalau pengunjung selalu kabur setiap berkunjung karena blog lelet, gimana trafik akan meningkat.
Hapussetuju..?
Setuju sekali mbak sama tanggapannya, oke lah kalo koneksi internet nya super lancar, kalo lelet gimana ? apalagi kalo seandainya pake WiFi gratisan.. hehehe (o)
Hapussaya pernah tu mbak, menggunakan plugin di wordpress, dan setelah saya cek html, ternyata kodenya nyatu semua :D
BalasHapusuntuk blogspot juga banyak aplikasi yang bisa digunakan untuk kompres file, namun seperti yang mas katakan, semuanya menjadi sebaris, termasuk element CSS yang berbeda fungsi.
Hapuswaaah kena nih blog ane, byk yg kudu dibenahi. asyiiik klo utakatik html :) kadang lieur tp klo liat hslnya blog jd lbh baik (loading cpt) ... jd semangaaat, hayuk ngoprek edit html.
BalasHapusThx mb Devi (k)
lieur nya cuma sebentar kok mbak, lepas tuh, tinggal menikmati hasilnya, ngeblog bukan memanjakan kita sebagai pemilik blog dengan membuatnya cantik dilihat, tetapi semuanya hanya untuk pengunjung.
Hapussaya cenderung menutup situs yang loadingnya lambat, soalnya masih banyak situs yang lebih cepat yang pasti membahas informasi yang sama, jadi buat apa menunggu situs yang loadingnya lambat kalau ada situs yang serupa dan lebih cepat.
iya...saya juga kayaknya perlu lihat lagi dan meramping lagi susuanan coding template. walau gak keseluruhan, tapi lumayanlah untuk mengurangi yang tidak berguna.....makasih sista devi. buat
Hapus@Mysweet Ladyluck: senasib kita....sama-sama harus edit template lagi....hihihiiiiiii
semangat pagi mba..?
BalasHapusmau tny, gmn ya mba menangani dgn perinth dr google pagespeed insights "Manfaatkan penyimpanan cache browser" di blogger ya.. krna rata2 wktu expired 24 jam untu tipe gambar, apis.google.com 30 menit.
Setidaknya sempatkan sedikit saja membaca beberapa bait yang penting dari tulisan diatas (tidak perlu semuanya jika tidak ada waktu,atau MALAS), agar Anda tidak bertanya lagi tentang hal yang sudah saya jelaskan secara menyeluruh dan berhubungan. Terimakasih
Hapusnah ini dia nih....blogwalking jurus mabuk...heeee
Hapussemangat pagi mba..?
BalasHapusmau tny, gmn ya mba menangani dgn perinth dr google pagespeed insights "Manfaatkan penyimpanan cache browser" di blogger ya.. krna rata2 wktu expired 24 jam untu tipe gambar, apis.google.com 30 menit.
Loading blog berat sumbernya ada banyak, disini saya akan berikan penyebab utamanya saja ya,
Hapus1. js (javascript)
perintah ini biasanya memiliki banyak fungsi, dan kebanyakan memanggil event dari luar, seperti apis-google, analystic, konten dan widget.
2. Gambar
semua gambar yang Anda letakkan dalam blog, namun sumber letaknya dari HTML Template dapat menyebabkan loading blog berat,
>> Solusinya :
letakkan widget yang menngunakan js dihalaman footer, kompres script atau satukan jika itu dalam satu area tag yang sama, lihat poin diatas
Sedangkan kalau gambar, ubah dimensinya sekecil mungkin, dan lebih efektif gunakan format ( .png) yang sumbernya dari picassa album, selengkapnya lihat disini:
Tips Membuat Proses Loading Blog Semakin Cepat
terima kasih banyak tutorialnya, saya jadi tau tentang hal ini :)
BalasHapusyah intinya kita harus merampingkan css dengan cara menghapus yang tidak perlu dan menggabung menjadi satu baris untuk menydikitkan spasi dalam penulisan css. selain itu menggabung javascript menjadi satu kalau sejajar dan menympannya menjadi javascript eksternal untuk mengurangi beban loading.....ok makasih sista jadi lebih terang pemahaman mengenai cara termudah mempercepat loading blog. salam sahabat blogger.
BalasHapusKalo wordpress gimana cara mempercepat loadingnya ya, mba? Caranya sama dengan yang blogspotkah?
BalasHapusAku pernah coba tuh tapi html templatenya di compress pakai aplikasi, lupa apa namanya. Lebih ce[et juga sih tapi aman gak ya?
BalasHapusJika kita lakukan dengan tool, maka pekrjaan akan semakin mudah dan cepat, namun ada beberapa elemen yang tidak bisa ditumpuk atau disebariskan, karena jika menggunakan tool tanpa terkecuali semua elemen akan diperkecil filenya.
Hapustidak berbahaya tetapi Template akan ERROR pada tampilan.
Sangat membantu sekali ini mba, terimakasih tutorialnya
BalasHapusmenurut Matt Cuts " valid HTML mungkin saat ini tidak berpengaruh terhadap rangking, tapi bisa saja menjadi salah satu faktor di masa depan" kayaknya google nggak begitu mempedulikan validasi HTML, memang template yg valid, membuat blog terlihat lebih rapi dan profesional,..untuk saat ini saya lebih fokus ke konten aja..pembaca lebih butuh info...sayang waktu untuk update artikel jadi terbuang karena ngoprek template..maaf ya mbak devy..itu cuma opini saya..mungkin suhu yang di bawah bisa menambahkan...salam kenal
BalasHapusPenjelasannya kpmplit, jujur saya tak pernah menata struktur html template, mmg banyk sih side bar pd blog saya.....mcungkim perlu dipertimbangkan......gimana mengatur comments sosmed pd template? Sy br pasang tp sulit menyesuaikan dgn ukuran halaman posting
BalasHapusSaya masih bingung soal hapus kode */...*/ itu kode banyak amat di template saya....dan idealnya berapa sih kecepatan loading blog versi google developers & GT Metrix?
BalasHapus