Cara mempercepat pagespeed template blog terbaru 2021 - masandri
Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara mempercepat pagespeed template blog terbaru 2021

Selamat datang di blog masandri.org. berbagi ilmu melalui tulisan adalah ibadah kalaupun mendapatkan penghasilan itu semua hanyalah rezeki yang harus disyukuri, pada postingan kali ini saya akan share tips trik bagai mana cara mempercepat loading blog hingga mendapatkan skor hingga 100/100 lulus pagespeed insight dan yellow speed dengan mudah.

https://wpsmackdown.com/

Mungkin sobat sangat kesal karena tidak mendapatkan skor kecepatan website yang di inginkan akibat template yang digunakan terlalu lambat, berkali-kali sudah gonta-ganti template namun hasilnya nihil. Ketika di cek di google pagespeed berwarna kuning atau merah begitu juga saat di cek di GTmetrik terlihat waktu load timenya sangat lama dan ukuran file halamannya cukup besar.

Google sendiri juga menggunakan faktor kecepatan pemuatan halaman sebagai salah satu indikator dalam SEO, sebagai mesin pencari terpopuler google selalu menjaga pengalaman penggunanya. 

Tidak mungkin bagi website dengan template yang tidak responsive dan loading berat akan diunggulkan di mesin pencari.

Google selalu menuntut para webmaster untuk mengoptimalkan performa website mereka terutama pada kecepatan halaman, penundaan selama 3 detik saja sudah mempengaruhi minat pengguna untuk mengunjungi situs sobat. Sebenarnya jika kebetulan sobat adalah orang awam dalam dunia pemrograman banyak diluaran sana penyedia jasa untuk mempercepat loading blog jadi sobat bisa tetap fokus menulis konten berkualitas.

Sayangnya beberapa penikmat jasa optimasi template pernah dibuat kecewa seperti hal nya saya, dulu saat menggunakan template EvoMagz skor kecepatan blog menunjukan angka 80/100 saat itu kode iklan dari adsense belum saya copot. Setelah saya serahkan templatenya ke penyedia jasa dan dioptimasi didapatlah skor akhir 92/100 itu pun sudah maksimal (katanya).

Penyedia jasa bukanlah orang abal-abal melainkan orang yang sering membuat template dan cukup terkenal dikalangan blogger indonesia, harganya pun juga mahal sekitar 80 ribuan (ilmu itu mahal).

Setelah selesai dioptimasi template diserahkan kembali kepada saya, seperti biasa saya menambahkan kode iklan AdSense, widget post acak dan kode tracking analytic dari Google, alhasil saat dicek di GTmetrik skornya tetap diangka 81/100.

Setelah saya cermati ternyata perubahan mereka lakukan hanyalah mengcompress HTML CSS, menghapus script-script seperti iklan - menghapus semua widget - menghapus semua tag khusus - memasang script lazyload, menambahkan fungsi cache - mematikan css Js bawaan blogspot dll sebagai orang awam saya cukup mengerti.

Karena script yang diharapkan tidak tercapai bahkan hampir sama saja seperti sebelum di optimasi tentunya membuat saya kecewa, oleh karena itu dalam postingan kali ini saya akan membagikan sedikit tips bagaimana mengoptimalkan kecepatan loading blog secara gratis bahkan bisa dipraktekan oleh pemula sekalipun.

1. Mengecilkan Ukuran Gambar

Bagi pengguna wordpress sobat tinggal menginstal plugin JPG compressor untuk mengurangi ukuran disemua halaman website sobat, tapi untuk penggunaan blogger sobat harus meresize ukuran gambar sebelum di upload secara manual.

Ukuran gambar yang besar mempengaruhi kecepatan loading blog, saat melakukan uji kecepatan website mungkin sobat mendapatkan saran untuk mengcompress ukuran gambar yang terlalu besar. Ada banyak software yang bisa digunakan untuk meresize ukuran gambar, pastikan untuk membuat tampilan gambar tetap terlihat jelas meskipun pixelnya dikurangi.


2. Gunakan Template yang memang fast loading

Ada banyak penyedia template yang sudah mengoptimalkan kecepatan templatenya menjadi 80+/100, tidak mungkin juga kan sebuah template akan laku di jual jika skor kecepatannya di angka 60 kebawah ? Untuk rekomendasi template fast loading saya sarankan untuk menggunakan VioMagz, magone atau simplify.


3. Kurangi kode paruh atas bagian head

Saat memuat blog maka browser akan mulai membaca kode dari atas sampai kebawah, hal ini bisa sobat lihat ketika melihat inspect elemen disana sobat dapat memperhatikan beberapa kode yang diload secara manual satu persatu dan mendapatkan kode mana yang menghambat performa website.

Misalnya sobat menggunakan JS untuk menampilkan widget chat dan itu mengalami penundaan selama beberapa detik akibat server tak kunjung merespon jika sudah ketahuan silahkan dihapus atau diganti layanan lain yang menyediakan fitur live chat dengan server lebih baik. Hapus kode-kode tidak penting yang terdapat di antara tag head.


4. Tambahkan DNS Perfecth

DNS Perfecth adalah sebuah cara untuk menyelesaikan permintaan DNS pada domain tertentu. Terkadang kita menggunakan eksternal gambar, JS, css dll semua itu mempengaruhi kecepatan pemuatan website. Dengan menggunakan DNS Perfecth kita dapat mengurangi permintaan link eksternal yang memuat terlalu lama.

DNS Perfech digunakan untuk menunjukan asal/ sumber yang digunakan untuk mengambil sumber daya yang diperlukan dan menginstruksikan bahwa agen penguna dalam hal ini browser harus memprioritaskan hal itu untuk dimuat pertama kali

Untuk menerapkan keblog silahkan copy paste kode berikut dibawah tag head atau di atas kode <b:skin>
------------------- PRECONNECT AND DNS PREFETCH FOR BLOGGER ------------
<!--DNS PREFETCH AND PRECONNECT -->
<link href='https://ad.doubleclick.net' rel='preconnect'/>
<link href='https://www.googletagservices.com' rel='preconnect'/>
<link href='https://securepubads.g.doubleclick.net' rel='preconnect'/>
<link href='https://your-blog-url.com/' rel='preconnect'/>
<link href='https://www.google-analytics.com' rel='preconnect'/>
<link href='https://pagead2.googlesyndication.com' rel='preconnect'/>
<link href='//adservice.google.ca' rel='dns-prefetch'/><link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/><link href='//adservice.google.com' rel='dns-prefetch'/><link href='//www.googletagservices.com' rel='dns-prefetch'/><link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/><link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/><link href='//resources.blogblog.com' rel='dns-prefetch'/><link href='//fonts.googleapis.com' rel='dns-prefetch'/><link href='//disqus.com' rel='dns-prefetch'/><link href='//github.com' rel='dns-prefetch'/><link href='//cdn.rawgit.com' rel='dns-prefetch'/><link href='//1.bp.blogspot.com' rel='dns-prefetch'/><link href='//2.bp.blogspot.com' rel='dns-prefetch'/><link href='//3.bp.blogspot.com' rel='dns-prefetch'/><link href='//4.bp.blogspot.com' rel='dns-prefetch'/><link href='//www.blogger.com' rel='dns-prefetch'/><link href='//www.facebook.com' rel='dns-prefetch'/><link href='//plus.google.com' rel='dns-prefetch'/><link href='//twitter.com' rel='dns-prefetch'/><link href='//www.youtube.com' rel='dns-prefetch'/><link href='//feedburner.google.com' rel='dns-prefetch'/><link href='//feeds.feedburner.com' rel='dns-prefetch'/><link href='//platform.twitter.com' rel='dns-prefetch'/><link href='//apis.google.com' rel='dns-prefetch'/><link href='//connect.facebook.net' rel='dns-prefetch'/><link href='//www.google-analytics.com' rel='dns-prefetch'/><link href='//www.gstatic.com' rel='dns-prefetch'/><link href='//static.xx.fbcdn.net' rel='dns-prefetch'/><link href='//tpc.googlesyndication.com' rel='dns-prefetch'/><link href='//syndication.twitter.com' rel='dns-prefetch'/><link href='//fonts.gstatic.com' rel='dns-prefetch'/><link href='https://lh3.googleusercontent.com' rel='dns-prefetch'/><link href='https://tpc.googlesyndication.com' rel='dns-prefetch'/><link href='https://img.youtube.com' rel='dns-prefetch'/><link href='https://www.googletagmanager.com' rel='dns-prefetch'/><link href='https://adservice.google.co.id/' rel='dns-prefetch'/><link href='//cdnjs.cloudflare.com/' rel='dns-prefetch'/><link href='//resources.blogblog.com/' rel='dns-prefetch'/><link href='http://www.google.com' rel='dns-prefetch'/><link href='http://www.w3.org' rel='dns-prefetch'/><link href='https://statically.io/' rel='dns-prefetch'/><link href='https://ajax.googleapis.com' rel='dns-prefetch'/><link href='https://cdnjs.cloudflare.com' rel='dns-prefetch'/><link href='https://apis.google.com' rel='dns-prefetch'/><link href='https://cdn.rawgit.com' rel='dns-prefetch'/><link href='https://www.gstatic.com' rel='dns-prefetch'/>

5. Hilangkan css JS bundle untuk blogspot

Terkadang sobat melakukan hal ini, beberapa widget bawaan blogger tidak akan berfungsi dengan baik contohnya widget halaman arsip tapi tak perlu khawatir setelah memastikan semua widget bekerja.

Cara mematikan sumber daya dari bundle blogspot yang tidak penting cukup mudah coba sobat buka template > edit HTML lalu 

Ganti kode <html..> dengan <HTML>

Ganti kode <head> dengan &lt;head&gt;

Ganti kode <b:skin> dengan &lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin>

Ganti kode </head> dengan &lt;!--<head/>&gt;&lt;/head&gt;

Tambah kode <!-- <body><div></div>--> diatas kode <body>

Ganti kode </body> dengan &lt;/body&gt; &lt;!--</body>--&gt;

Ganti kode  </html > dengan </HTML>

6. Gunakan background putih

Cara menghapus background pada blog bisa dilakukan melalui dashboard blogger di menu template> sesuiakan> background > putih, jika sobat mengunggah gambar sebagai background maka bisa dipastikan hal itu dapat mempengaruhi performa situs saat dimuat 


7. Gunakan widget penting

Ada banyak sekali widget menarik yang bisa sobat tambahkan ke dalam blog, contohnya live chat agar bisa berkirim pesan secara langsung dengan pengunjung, notifikasi situs keren seperti jalantikus agar pengunjung senantiasa mendapatkan notifikasi update dari blog yang mereka ikuti, widget animasi dll.

Untuk meringankan loading blog salah satu caranya dengan menghapus widget yang dirasa kurang penting untuk blog dan meskipun penting jika tidak digunakan oleh pengunjung sobat akan sia-sia saja contohnya widget berlangganan sudah dipasang diblog 2 bulan tapi tidak satu pun yang mau berlangganan blog sobat.


8. Beralih ke Iklan teks

Ada banyak jenis iklan yang bisa dipasang diblog sobat seperti video, gambar, inframe dan teks. pilihan terbaiknya adalah dengan memasang iklan jenis teks karena selain tidak memuat banyak element iklan ini juga terlihat sederhana.

9. Compress CSS

Ada banyak tools diluaran sana yang dapat sobat gunakan untuk mengcompress CSS, sebaiknya sobat tidak melakukannya secara manual jika khawatir malah menyebabkan error, tapi ini kembali kepada pilihan sobat.

Beberapa alternatif situs untuk mengcompress CSS= https://cssminifier.com/,
https://csscompressor.com/ dll oh ya selain CSS sobat juga harus mengcompress JS dan HTML silahkan cari di Google ada banyak layanan yang bisa sobat gunakan.

10. Hapus JQuery Libary

Javascript ini memang penting dan beberapa widget mungkin tidak dapat bekerja jika tidak ada kode ini didalam template sobat, tapi kalau memang tidak digunakan sebaiknya dihapus saja.

11. Gunakan script LayzLoad

Banyak blogger memasang script layzload diwebsite mereka dengan harapan dapat mempercepat loadingnya dan meningkatkan skor kecepatan halaman blog, hal ini dikarenakan element website sobat baru akan di load ketika pengguna melakukan scrolling halaman jadi saat dicek disitus penguji kecepatan situs mereka tidak akan mengcrawl element situs sobat secara keseluruhan termasuk iklan.

12. Gunakan landing page

Ini hanyalah pilihan opsional, di dalam homepage blog biasanya berisi daftar artikel dari berbagai label yang sobat miliki termasuk widget serta iklan. Jika sobat mau merubah tampilan halaman utama menjadi landing page yang memperlihatkan daftar konten perlabel maka desain blog sobat akan lebih rapih dan ringkas.

13. Memasang cache 

Ketika meload blog maka browser akan mendownload berbagai element seperti JS,CSS, gambar, script dan sebagainya. Dengan menyetel kadaluarsa pada blog maka browser akan meload data blog dari komputer sobat sehingga loading blog menjadi lebih cepat, kelemahannya pengunjung tidak akan melihat pembaharuan konten sobat, jadi memasang cache pada blog yang kontennya sering update bukan pilihan yang tepat.

Untuk menyetel tanggal kadaluarsa pada element blog silahkan tempel kode berikut di bawah tag head.

<include expiration='365d' path='*.css'></include>
<include expiration='365d' path='*.js'></include>
<include expiration='7d' path='*.jpeg'></include>
<include expiration='7d' path='*.gif'></include> <include expiration='7d' path='*.jpg'></include>
<include expiration='7d' path='*.png'></include>

14. Gunakan domain cCTLD

Menggunakan subdomain seperti blogspot  yang otomatis mereditect ekstensi domain sesuai kode negaranya memerlukan waktu beberapa milidetik untuk melakukan request, misalnya dibuka dari indonesia maka domainnya berubah menjadi www.masandri.blogspot.co.id namun saat dibuka dinegara amerika berubah menjadi www.masandri.blogapot.co.uk

Jika sobat mengcostum domain ketingkat atas seperti www.masandri.org maka di negara manapun situs sobat diakses maka ekstensi domainnya tidak berubah apalagi bagi pengguna CCTLD maka situs mereka akan mendapatkan dorongan peringkat dipencarian lokal.

15. Mengunggah file ke server yang terkait dengan blog

Dari pada embed video dari situs lain seperti vimeo bukanlah lebih cepat jika sobat mengunggah langsung video kedalam host blogger ? Selama masih dalam satu server maka proses permintaan file bisa diselesaikan dengan lebih cepat.

Begitu pula dengan gambar, dari pada mengcopasnya dari situs hipwee alangkah lebih cepat kalau mengunggahnya sendiri melalui akun blogger pribadi, jika tidak banyak eksternal link maka selain loading blog tidak berat juga blog sobat menjadi lebih SEO.

16. Perbaiki broken links

Banyaknya link mati (error 404) didalam blog sobat menyebabkan bot crawl mengalami penundaan saat meminta request ke tautan link yang dianggap error dan mendapatkan reply halaman tidak aktif yang membutuhkan waktu sepersekian milidetik

Ada banyak link disitus sobat yang harus segera diperbaiki, beberapa layanan berikut mampu mengidentifikasi broken link dan membantu sobat memperbaikinya.

https://www.deadlinkchecker.com , https://www.brokenlinkcheck.co

Selain membuat blog menjadi berat, dead link juga menurunkan reputasi SEO website sobat oleh karena itu sebelum berakibat fatal terhadap peringkat halaman cobalah untuk segera memperbaikinya.

17. Pasang ukuran favicon 100x 100 

Efeknya memang kecil, tapi kalau sobat menginginkan performa website yang maksimal maka sobat harus mencoba mengoptimalkan sumber daya dari berbagai sisi. Banyak blogger menggunakan ukuran favicon cukup besar padahal ukuran terbaik yang paling disarankan adalah ukuran 100x100.


18. Tentukan width height pada gambar

Di alat uji GT.Metrix mereka memberikan rekomendasi bagi pemilik website untuk menetapkan ukuran panjang dan lebar di dalam kode gambar <img.../>, jika sobat mengabaikan hal itu bisa membuat skor sobat menjadi turun

19. Hindari kode @CSS import

Dari pada menggunakan kode CSS @import lebih baik kalau sobat memanggilnya dengan kode seperti ini  <link href=’url css’ type=’text/css’/>

20. Pasang CSS didalam head

Kode css merupakan bagian dasar dari pembangunan tata letak sebuah web HTML, sebaiknya sobat memasang kode css di dalam tag head agar saat proses pemuatan halaman script css bisa dimuat terlebih dahulu, jadi tampilan halaman ketika dibuka pertama kali terlihat rapi tidak berantakan dulu baru rapi.

21. Jangan gunakan inframe

Kode inframe sebaiknya dihindari, server benar-benar mengalami penundaan ketika harus meload kode inframe dari tampilan website lain artinya selain mengunduh data element di halaman blog sobat, browser juga harus mengunduh di website lain yang dijadikan inframe.

22. Hindari kode document.write dalam js

Tujuan kode ini adalah memperlihatkan tampilan kode HTML pada JS jadi jika sobat menggunakan kode tersebut pada JS sebaiknya dipisah

Demikian postingan mengenai tips trik meningkatkan pagespeed template blog terbukti ampuh untuk mengatasi website blog yang lemot, jika sobat memiliki saran lain jangan sungkan untuk memberikan masukan pada kolom komentar yang tersedia sekian dan terima kasih.
masandri.org
masandri.org Blog Personal Mengulas seputar dunia blogger, AdSense, Game, Islami dan Jasa pembuatan website SEO Responsive

Posting Komentar untuk "Cara mempercepat pagespeed template blog terbaru 2021 "

Berlangganan via Email