Senin, 03 Desember 2018
Menata HTML Untuk Mempercepat Loading Blog
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.
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.
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 Tips Membuat Artikel SEO dengan 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?
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.
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.
- 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 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.
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 Tips Membuat Artikel SEO dengan 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 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.
Langganan:
Posting Komentar
(
Atom
)
Tidak ada komentar :
Posting Komentar