1. Jangan Menggunakan Gambar Dengan Kualitas yang Tinggi
Kebanyakan loading yang lama memuat artikel disebabkan oleh gambar dengan kualitas tinggi. Ukuran dan kualitas gambar sangatlah mempengaruhi kecepatan loading diblog Anda. Jika gambar diianggap tidak terlalu penting, maka lebih baik dihapus saja, tapi bila gambar tersebut memang dibutuhkan untuk artikel, sebaiknya ganti ukuran dan kualitas gambarnya agar lebih kecil namun masih bisa dilihat jelas. Anda dapat mengganti ukuran dan kualitas gambar menggunakan photoscape atau editor foto online.
2. Menggunakan Template Responsive
Kesalahan blogger pemula adalah seringnya mengganti-ganti template tanpa mengetahui apakah template tersebut responsive atau tidak. Dikatakan responsive apa bila template tersebut cepat dimuat saat Anda membukanya. Jadi, carilah template yang responsive dengan SEO friendly untuk blog Anda.
3. Hindari Penggunaan Script yang Berlebihan.
Untuk mempercantik blog, biasanya menggunakan berbagai macam script. Namun, bila kebanyakan juga akan menghambat kecepatan loading pada blog Anda. Sebaiknya gunakan script yang dianggap perlu saja.
4. Hindari Penggunaan Flash, Frame, dan Iframe
Ketika Anda cek SEO blog, biasanya akan terlihat bahwa blog Anda menggunakan Flash, Frame, dan Iframe atau tidak. Pasti akan muncul tulisan bad yang menandakan bahwa menggunakan Flash, Frame, dan Iframe buruk untuk blog Anda. Mengapa demikian? Hal tersebut dikarenakan penggunaan Flash, Frame, dan Iframe akan menghambat kecepatan loading blog Anda. Jadi sebaiknya hapus saja bila tidak penting-penting amat.
5. Kompres CSS Blog Sobat
Dengan melakukan kompres pada CSS blog, pastinya akan meningkatkan kecepatan blog sobat. Caranya juga sangatlah mudah, pertama kunjungi http://wajahilmu.blogspot.com/p/css-compressor.html
Setelah itu masukkan CSS blog sobat pada kotak yang tersedia lalu klik Compress CSS untuk kompresnya atau klik Beautify CSS untuk mempercantik CSS. Lebih jelasnya lihat gambar berikut.
6. Memasang Lazy Load di Blog
Menggunakan script lazy load dapat membuat loading blog sobat lebih cepat. Bisa langsung Anda buktikan di Weeb Test Speed setelah memasang scriptnya. Untuk cara pemasangannya sangatlah mudah, copy script berikut lalu letakkan di atas atau sebelum kode
</head><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='https://irvan-html.googlecode.com/files/lazyload.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$('img').lazyload({
placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9VH8o8jYDKjYJx95X3pbx2hs2ExwnFCO587JA6wgKd3dPZEn4yUMVAZcp2u09e2j1Hgg9d3Rss3hUKGlz8STTM96pWVdpFinS-Kuc5eNQsTfGDLj89Fs-ESxK0ow0jHfxA50xRF6WM8A/s1600/grey.png",
effect : "fadeIn",
threshold : 500
});
});
</script>Bila diblog sobat sudah mempunyai jquery seperti script dengan background merah diatas walaupun dengan versi yang berbeda sebaiknya jquery diatas dihapus saja. Lebih baik hanya ada satu jquery dalam blog.
Saya rasa cukup sekian tutorial kali ini, terima kasih telah menyimak artikel ini. Bila ada pertanyaan, silahkan langsung tuliskan pada kolom komentar atau bisa berkomentar pada halaman Out Of Topics pada blog ini.
Source : https://wajahilmu.blogspot.com/2015/03/tips-membuat-loading-blog-lebih-cepat.html
Next
« Prev Post
« Prev Post
Previous
Next Post »
Next Post »
13 komentar
Tuliskan komentarwahh wajib dicoba nih...
Balasmakasih gan.. :)
Izin coba mas :v
BalasSilahkan dicoba :)
Balaswah boleh juga nih kak, aku coba ah :D
Balasmakasih ya hehe
Silahkan dek, semoga berhasil :)
BalasSangat berguna gan, tapi kalo script css dikompres akan mengurangi tampilan di blog kita ngga ?
Balastampilan akan tetap sama gan :)
Balassaya pake yang lazy load sob :D dan itu berhasil.
BalasSaya kurang setuju dengan kalimat ini mas,
Balas"Kesalahan blogger pemula adalah seringnya mengganti-ganti template tanpa mengetahui apakah template tersebut responsive atau tidak. Dikatakan responsive apa bila template tersebut cepat dimuat saat Anda membukanya. Jadi, carilah template yang responsive dengan SEO friendly untuk blog Anda."
Yang dimaksud template responsive atau tidak itu responsive dari segi tampilan atau gimana mas? Kalau dari segi tampilan saya rasa kurang tepat.
Istilah responsive web design tidak ada hubungannya dengan loading blog. Menurut Wikipedia, Desain web responsif (RWD) adalah sebuah pendekatan untuk desain web yang bertujuan untuk menyusun situs untuk memberikan tampilan optimal di berbagai perangkat (dari desktop komputer memonitor ke ponsel).
Responsive merupakan sebuah metode untuk memaksimalkan pengalaman pengguna dalam mengakses blog kita.
Tutorial pemasangan Lazy Load yang mas tulis itu belum lengkap mas, itu hanya memasang scriptnya saja, lazy load tak akan bisa berjalan jika atribut yang digunakan pada tag img tidak sesuai dengan aturan pada script tersebut.
Kurang lebih seperti ini kode dan penggunaan atribut tag img yang sesuai dengan aturan Lazy Load tersebut,
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
Untuk membuat efek lazy load atribut src="" harus diganti dengan atribut data-original="", karena prinsip kerja dari efek tersebut adalah ketika browser telah memuat blog kita, java script akan merubah atribut data-original menjadi atribut src.
Info lebih lengkap mengenai lazy load bisa dilihat di,
Balashttp://www.appelsiini.net/projects/lazyload
ok point pertama, ane ngerti kok soal responsive, itu berkaitan secara tampilan apakah dapat menyesuaikan dengan layar gadget atau tidak, namun disini saya menjelaskan bahwa ini adalah tips yg saya gunakan, krna template responsive lebih cepat dimuat dibandingkan template non responsive itu dari pengalaman saya sebagai pengguna template.
Balaspoint ke-2 sy menjelaskan cara memasang script lazy load, bukan tutorial secara kompleks mengingat judul bukan tutorial lazy load melainkan tips faster loading yang saya gunakan.
point ke-3 untuk penggunaan atribut lazy load kembali ke point pertama bahwa saya hanya menjelaskan cara pemasangan scriptnya bukan tutorial memasang lazy load secara komleks. Krn klo secara kompleks itu sudah masuk tahap pembuatan script yang berkenaan dengan lazy load dan tentu saja pasti ada blogger (khususnya pemula) yang kurang dapat memahami bila penjelasan pada satu point lebih banyak krn dapat diangap berat sebelah.
Iya mas, maaf gini maksud saya. Coba mas perhatikan komentar saya yg bagian ini.
BalasTutorial pemasangan Lazy Load yang mas tulis itu belum lengkap mas, itu hanya memasang scriptnya saja, lazy load tak akan bisa berjalan jika atribut yang digunakan pada tag img tidak sesuai dengan aturan pada script tersebut.
Kurang lebih seperti ini kode dan penggunaan atribut tag img yang sesuai dengan aturan Lazy Load tersebut,
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
Untuk membuat efek lazy load atribut src="" harus diganti dengan atribut data-original="", karena prinsip kerja dari efek tersebut adalah ketika browser telah memuat blog kita, java script akan merubah atribut data-original menjadi atribut src.
Di situ saya tidak berbicara mengenai pembuatan script, melainkan menambahkan class="lazy" sama data-original="img/example.jpg".
Lazyload tidak akan bisa berjalan tanpa adanya atribut tersebut pada tag <img> walaupun sudah memasang script yg mas tulis di atas.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Balas<script src='https://irvan-html.googlecode.com/files/lazyload.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$('img').lazyload({
placeholder : "http://2.bp.blogspot.com/-6HHB_OypoDc/T_7NWqFz6yI/AAAAAAAAAGU/u1fdlC_w3lk/s1600/grey.png",
effect : "fadeIn",
threshold : 500
});
});
</script>
Sederhananya, script itu tidak akan berjalan kalau tag di bawah ini belum digunain.
<img class="lazy" data-original="URL GAMBAR" width="640" height="480">
✖ Komentar dengan isi Link Aktif, Promosi, atau mengandung unsur Sara akan dihapus.
✔ Bila ingin riquest, bertanya, atau sekedar say hi aja, silahkan ke halaman OOT
✔ Untuk menyisipkan kode, silahkan parse lalu copy dan paste hasil parse ke kolom komentar.
EmoticonEmoticon OOT