ini adalah official blog ciranjang

» » Cara mempercepat loading blog lanjutan

Cara mempercepat loading blog lanjutan

Oleh
Untuk mempercepat loading blog pertama kita harus test kecepatan blog kita. Dengan cara mengunjungi situs http://gtmetrix.com/ atau https://developers.google.com/speed/pagespeed/insights dan lihat berapa skor kecepatan blog yang kalian dapatkan dari situs tersebut. Selanjutnya, ikuti langkah2 dibawah ini.
Menambahkan attribute width dan height.
Untuk bagian posting, jika mengatur gambar ke small, medium, large atau x- large. Maka otomatis gambar itu sudah ada attribute width dan height. Jika Original attribute width dan height belum ada. Begitu juga dengan gambar yang kita masukan pada bagian blog lainnya. Seperti header, sidebar, footer, widget dan lain-lainnya. Contoh penambahan kode attribute width dan height:
  1. Untuk kode HTML
    2. <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA-DwC_sqayXgGOGtE8UtZOR7qbGg1kxn6a0zvtqvr3t_fTbWp8CTUP9nq4IjJfYRX8k8YaepCpI0spu0p0rJxuYU2fY31_hlAyXlZTOob5JXY-xJO6ycvnH86BWPRwTm9wur5BlgHSfSC/s128/fandra-juani.jpg' width='32' height='32' />

  2. Untuk kode CSS width:70px;height:70px;
Silakan tambahkan attribute width dan height disetiap gambar yang anda gunakan diblog.
Merubah ukuran asli dari sebuah gambar.
Contoh: Ukuran asli dari sebuah gambar adalah 400x800. Lalu kita upload ke posting blog, dan kita perkecil gambarnya, dengan pilihan Small, sehingga ukuran gambar menjadi 100x200. Itu berarti ukuran gambar yang kita gunakan hanya 100x200.
Agar loading blog lebih cepat, kita ubah dulu ukuran asli gambarnya dikomputer, dari 400x800 menjadi 100x200, setelah itu baru lah kita upload lagi ke blog, dan gantikan gambar sebelumnya dengan gambar baru. Jadi intinya, upload lah gambar dengan ukuran yang seperlunya. Maka loading blog akan jauh lebih cepat.
Mengganti server gambar blogger dengan google.
  1. Buatlah entri baru, lalu masukan gambar ke posting.
  2. Selanjutnya buka https://picasaweb.google.com/ di tab baru. Klik tulisan di sini. Jika ada gambar seperti dibawah ini.
    3. cara mempercepat loading blog
  3. Setelah terbuka, pilih Folder sesuai dengan nama yang anda gunakan di google.
  4. Buka folder tersebut dan cari gambar yang sesuai dengan gambar yang baru saja anda masukan ke posting tadi.
  5. Lalu klik gambar tersebut, setelah terbuka. Ambil URL nya, caranya klik kanan digambar, lalu klik copy image location.  
  6. Setelaah itu kembali ke posting blog tadi, dan klik pada bagian HTML(disebelah compose).
  7. Ganti URL gambar blogspot dengan url gambar dari google. Contoh:
    8. <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgobhVIwEolGP4lNYcujDDyp09R1-DpiyTjI5NUhhiERAP-5VwiwNVioAuYS4jc_u9BWtLmu-K1hxCrKxhqDcUd-qYp99Nd9PTcANH68RjhEHcQgseYGFLgt0xDqLarABKDRDfDi6ZEQN04/s1600/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgobhVIwEolGP4lNYcujDDyp09R1-DpiyTjI5NUhhiERAP-5VwiwNVioAuYS4jc_u9BWtLmu-K1hxCrKxhqDcUd-qYp99Nd9PTcANH68RjhEHcQgseYGFLgt0xDqLarABKDRDfDi6ZEQN04/s1600/loading.jpg" /></a></div>

    URL yang berwarna hitam diatas. Ganti dengan URL dari picasa web google. Contoh:

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhezfKPxzp4N4uNzKPhAS8g2oF8P6lyGZVNZjBGUoDKYwcTpiVBHwMkoMghfksU7eqvhD1Nh-2XDxHEA0Htwo1SM25-nGFFkQ2Q04oY1Z8EkHF197Am16N6ZvR2e9mChAtZMxP7p9BRe-OZ/s300/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhezfKPxzp4N4uNzKPhAS8g2oF8P6lyGZVNZjBGUoDKYwcTpiVBHwMkoMghfksU7eqvhD1Nh-2XDxHEA0Htwo1SM25-nGFFkQ2Q04oY1Z8EkHF197Am16N6ZvR2e9mChAtZMxP7p9BRe-OZ/s300/loading.jpg" /></a></div>
  8. Selesai.
0 Komentar untuk "Cara mempercepat loading blog lanjutan "
Posting Komentar
Back To Top