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:
Untuk kode HTML
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd5Vg5eha3AfzxVZ1LlSEcaYHEOeLe6_C8v0cPavfvr9nezvL-RSbalkWff9ETYMmBn9KEqsnGxwv6St-RLCUM60iI-SBstfuJ2wU7zspFlQsj_Tvqa0uZ8-IBSx-vL-7pYyQeypPKW6N4/s128/fandra-juani.jpg' width='32' height='32' />
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.
Buatlah entri baru, lalu masukan gambar ke posting.
Selanjutnya buka https://picasaweb.google.com/ di tab baru. Klik tulisan di sini. Jika ada gambar seperti dibawah ini.
cara mempercepat loading blog
Setelah terbuka, pilih Folder sesuai dengan nama yang anda gunakan di google.
Buka folder tersebut dan cari gambar yang sesuai dengan gambar yang baru saja anda masukan ke posting tadi.
Lalu klik gambar tersebut, setelah terbuka. Ambil URL nya, caranya klik kanan digambar, lalu klik copy image location.
Setelaah itu kembali ke posting blog tadi, dan klik pada bagian HTML(disebelah compose).
Ganti URL gambar blogspot dengan url gambar dari google. Contoh:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3BdwIN1vKj2bwtTbXUvPUTjKTjR_LzXsnTaLfFObuZMXDGBvftO3_E-YYZBcZnT_HC2slr4nsXmtQEoTweZUfks64FhH0fMLuR1VL4n-R2WDWuJSYnGYyIwfaL55bE1AxgIPk2JUP-bCs/s1600/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3BdwIN1vKj2bwtTbXUvPUTjKTjR_LzXsnTaLfFObuZMXDGBvftO3_E-YYZBcZnT_HC2slr4nsXmtQEoTweZUfks64FhH0fMLuR1VL4n-R2WDWuJSYnGYyIwfaL55bE1AxgIPk2JUP-bCs/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/AVvXsEhx5zdvffVr8gk9Uz7V8rAZn46I8ZGG9Kp5-Mx4IL1ZEzLYoOikO4L4XHRXd4K-9d3uA1vvEU8DmouaMRfmCuMwVFmO9GdVoDYFH_zVCX-Nwq2EzudsRhECabk8TmmOKRqmvEuI12_hzSMa/s300/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx5zdvffVr8gk9Uz7V8rAZn46I8ZGG9Kp5-Mx4IL1ZEzLYoOikO4L4XHRXd4K-9d3uA1vvEU8DmouaMRfmCuMwVFmO9GdVoDYFH_zVCX-Nwq2EzudsRhECabk8TmmOKRqmvEuI12_hzSMa/s300/loading.jpg" /></a></div>
Selesai.
Setiap gambar yang kita masukan ke posting blog, maka otomatis gambar tersebut juga ada di picasa web album. Kenapa URL dari blogger harus diganti dengan URL gambar dari google. Karena server google lebih cepat dari blogger. Sehingga gambar akan lebih cepat dibuka.
Setelah melakukan 3 cara diatas, coba test lagi kecepatan blog anda ke situs http://gtmetrix.com/ atau https://developers.google.com/speed/pagespeed/insights dan lihat berapa perubahan skor kecepatan blog yang kalian dapatkan. Contoh: Score kecepatan loading dari blog saya di situs http://gtmetrix.com/.
cara mempercepat loading blog
Cara mempercepat loading blog ini, merupakan lanjutan dari artikel sebelumnya, yaitu tentang tips dan trik mempercepat loading blog. Semoga bisa bermanfaat untuk anda.
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:
Untuk kode HTML
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd5Vg5eha3AfzxVZ1LlSEcaYHEOeLe6_C8v0cPavfvr9nezvL-RSbalkWff9ETYMmBn9KEqsnGxwv6St-RLCUM60iI-SBstfuJ2wU7zspFlQsj_Tvqa0uZ8-IBSx-vL-7pYyQeypPKW6N4/s128/fandra-juani.jpg' width='32' height='32' />
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.
Buatlah entri baru, lalu masukan gambar ke posting.
Selanjutnya buka https://picasaweb.google.com/ di tab baru. Klik tulisan di sini. Jika ada gambar seperti dibawah ini.
cara mempercepat loading blog
Setelah terbuka, pilih Folder sesuai dengan nama yang anda gunakan di google.
Buka folder tersebut dan cari gambar yang sesuai dengan gambar yang baru saja anda masukan ke posting tadi.
Lalu klik gambar tersebut, setelah terbuka. Ambil URL nya, caranya klik kanan digambar, lalu klik copy image location.
Setelaah itu kembali ke posting blog tadi, dan klik pada bagian HTML(disebelah compose).
Ganti URL gambar blogspot dengan url gambar dari google. Contoh:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3BdwIN1vKj2bwtTbXUvPUTjKTjR_LzXsnTaLfFObuZMXDGBvftO3_E-YYZBcZnT_HC2slr4nsXmtQEoTweZUfks64FhH0fMLuR1VL4n-R2WDWuJSYnGYyIwfaL55bE1AxgIPk2JUP-bCs/s1600/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3BdwIN1vKj2bwtTbXUvPUTjKTjR_LzXsnTaLfFObuZMXDGBvftO3_E-YYZBcZnT_HC2slr4nsXmtQEoTweZUfks64FhH0fMLuR1VL4n-R2WDWuJSYnGYyIwfaL55bE1AxgIPk2JUP-bCs/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/AVvXsEhx5zdvffVr8gk9Uz7V8rAZn46I8ZGG9Kp5-Mx4IL1ZEzLYoOikO4L4XHRXd4K-9d3uA1vvEU8DmouaMRfmCuMwVFmO9GdVoDYFH_zVCX-Nwq2EzudsRhECabk8TmmOKRqmvEuI12_hzSMa/s300/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx5zdvffVr8gk9Uz7V8rAZn46I8ZGG9Kp5-Mx4IL1ZEzLYoOikO4L4XHRXd4K-9d3uA1vvEU8DmouaMRfmCuMwVFmO9GdVoDYFH_zVCX-Nwq2EzudsRhECabk8TmmOKRqmvEuI12_hzSMa/s300/loading.jpg" /></a></div>
Selesai.
Setiap gambar yang kita masukan ke posting blog, maka otomatis gambar tersebut juga ada di picasa web album. Kenapa URL dari blogger harus diganti dengan URL gambar dari google. Karena server google lebih cepat dari blogger. Sehingga gambar akan lebih cepat dibuka.
Setelah melakukan 3 cara diatas, coba test lagi kecepatan blog anda ke situs http://gtmetrix.com/ atau https://developers.google.com/speed/pagespeed/insights dan lihat berapa perubahan skor kecepatan blog yang kalian dapatkan. Contoh: Score kecepatan loading dari blog saya di situs http://gtmetrix.com/.
cara mempercepat loading blog
Cara mempercepat loading blog ini, merupakan lanjutan dari artikel sebelumnya, yaitu tentang tips dan trik mempercepat loading blog. Semoga bisa bermanfaat untuk anda.
0 komentar:
Posting Komentar