Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Mudah Mempercepat kecepatan tampilan Blogger

PageSpeed Insights


Poin terakhir adalah penggunaan cache browser. adsbygoogle.js dan analytics.js adalah masalah, tetapi karena ini adalah file eksternal, saya menyerah.

Selain itu, tergantung pada waktu respons server, mungkin jumlahnya tidak stabil sekitar 86 poin. Karena waktu respons server tidak dapat mengatasinya, itu adalah pujian.

Kecepatan semakin ditingkatkan dengan menerapkan pemuatan lazyload. Kamu sekarang dapat secara stabil mendapatkan skor sempurna 100 poin.

GTmetrix

Masalahnya telah ditunjukkan hampir sama dengan PageSpeed ​​Insights.

Saya puas secara pribadi karena pemuatan halaman dipotong beberaopa detik saja.

Ini juga lebih cepat. Namun, ini tetap merupakan indikasi. Peramban dan kebocoran kompresi beberapa byte telah ditunjukkan.

Lighthouse(Audits)

Ini juga skor sempurna bukan :vos

Sebagai cerita orang, halaman atas tidak memiliki iklan, jadi itu jauh lebih cepat daripada halaman artikel dengan iklan. Halaman atas berukuran di atas. Namun, karena penerapan pemuatan lazy, kecepatan telah ditingkatkan pada halaman penempatan GoogleAdsense. Saat ini, bahkan halaman artikel memiliki nilai numerik yang sebanding dengan hasil pengukuran di atas.

Lihat artikel berikut untuk pemuatan lazyload.

Hapus JS standar

Jika widget.js tidak diperlukan, tentukan b:if='false' di tag html. Namun, jika widget.js dihapus, beberapa bagian widget tidak akan berfungsi.

<html b:js='false'>

Jika plusone.js tidak diperlukan, ganti tag </body> dengan deskripsi berikut.

&lt;!--</body>--&gt;&lt;/body&gt;

Jika keduanya tidak diperlukan, komentar pada bagian pemuatan widget.js akan dihapus jika kedua modifikasi di atas dibuat, sehingga bagian HTML yang tidak perlu akan berkurang. Proses memuat widget.js besar dan efektif.

* Formulir pertanyaan dapat diganti dengan GoogleAppsScript
Buat formulir pertanyaan dengan GoogleAppsScript (comming soon)
* Jika JS standar dihapus, lebar dan tinggi halaman berikut mungkin tidak ditampilkan dengan benar.
Blogger > Tata Letak

Hapus CSS standar

Jika widget_css_bundle.css tidak diperlukan, tentukan b:css='false' di tag html. Namun, jika widget_css_bundle.css dihapus, tampilan halaman mungkin rusak. Mari sebaris bagian yang diperlukan.

<html b:css='false'>

Jika otorisasi.css tidak diperlukan, ganti tag </head> dengan deskripsi berikut.

&lt;/head&gt;&lt;!--</head>--&gt;

Jika keduanya tidak perlu, modifikasi kedua hal di atas akan menghapus komentar di bagian bacaan otorisasi.css, mengurangi bagian HTML yang tidak perlu.

Tunda membaca kolom komentar

Tunda membaca kolom entri komentar sampai pengguna mengklik tindakan. Kecepatan tampilan halaman ditingkatkan dengan menunda pembacaan elemen eksternal iframe.

Tingkatkan komentar Blogger
Tentang peningkatan bidang komentar yang diterapkan sebagai bagian dari akselerasi Blogger.

Defaultnya
  • Secara default, bilah gulir ditampilkan karena ketinggian tidak mencukupi
  • Area iframe mungkin terlalu besar saat ditampilkan dalam scrip
  • Memuat skrip eksternal (comment_from_post_iframe.js) sebagai standar
  • Pemuatan halaman tertunda
  • Baca iframe saat memuat halaman
  • Munculan
  • Komentar ditampilkan dalam sembulan
  • Komentar digandakan karena ditampilkan di halaman
  • Untuk seluler, itu akan tertanam secara paksa
  • Halaman penuh
  • Pindah ke halaman eksternal
  • Umum
  • scrip blogger.com perlu diaktifkan

Perbaikan
  • Gunakan penyematan
  • Amankan ketinggian dan tahan tampilan bilah gulir
  • Buat itu berfungsi tanpa scrip eksternal
  • Namun, fungsi balasan tidak dapat digunakan.
  • Baca iframe setelah meminta komentar (klik)
  • Namun, ada penundaan waktu tertentu dari permintaan ke pembacaan iframe

Hasil
Muat iframe saat mengklik "Kirim Komentar".

Berikut tutorial membuat lazyload komentar blogger

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a id='comment-form-btn' style='display:block;text-align:center;'><data:postCommentMsg/></a>
<noscript>
<style>.comment-form-btn{display:none !important;}</style>
<a style='display:block;text-align:center;' title='Harap aktifkan JavaScript.'><data:postCommentMsg/></a>
</noscript>
<script type='text/javascript'>
(function() {
let src = &#39;<data:post.commentFormIframeSrc/>&#39;;
//<![CDATA[
function onClick() {
let btn = document.querySelector('#comment-form-btn');
btn.insertAdjacentHTML('afterend', "<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' id='comment-editor' name='comment-editor' src='"+src+"' style='min-height:200px;margin-top:10px;' width='100%'/>");
btn.style.display = 'none';
btn.removeEventListener('click', onClick);
};
document.querySelector('#comment-form-btn').addEventListener('click', onClick);
})();
//]]>
</script>
</div>
</b:includable>

* Ganti => <b:includable id='comment-form' var='post'>

Teks daftar artikel dihilangkan

Ubah artikel pada halaman pencarian dari <data:post.body/> menjadi <data:post.snippet/>. Volume komunikasi akan sangat berkurang. (Kamu mungkin hanya perlu judul dan gambar sebelum menghilangkan..)

Kurangi komentar HTML

Jika kamu menggunakan <!-- ... --> mengomentari dalam template Blogger, kamu akan diarahkan ke kompresi HTML.

Sebagai tindakan balasan, bagian komentar yang tidak perlu dihapus. Lebih baik meninggalkan templat skala kecil (misal <!-- .widget-footer -->) dari sudut pandang keterbacaan. Ada metode untuk menghapus skala besar (beberapa baris) dengan <b:comment>. (Render salah secara default, sehingga dapat dihilangkan)

<b:comment render='false'>
...
</b:comment>

Lainnya
Ini adalah rencana untuk mempercepat tingkat kepuasan. Pertanyaannya tetap, apakah masuk akal?
Muat favicon.ico terlebih dahulu

Aurealisa tidak tahu siapa Blogger / GTmetrix / browser, tetapi ketika memuat halaman, favicon.ico dimuat di akhir pemuatan. Memuat lambat. Menggunakan favicon.ico di halaman akan mempercepat karena favicon.ico terakhir tidak akan dimuat.

Jangan memuat gambar komentar anonim

Gambar komentar dibaca dengan <data:comment.authorAvatarImage/>, tetapi blank.gif dibaca ketika anonim. blank.gif adalah gambar 43B, tetapi tidak memengaruhi tampilan. Posisi: absolut; juga ditentukan untuk penempatan, sehingga tidak akan memengaruhi elemen lain meskipun hilang. Ini adalah elemen yang tidak perlu.

Dalam kasus anonim, itu dapat dihapus hanya dalam kasus blank.gif seperti yang ditunjukkan di bawah ini menggunakan HTML untuk memasukkan adalah 180 karakter (tergantung bahasa). (Jika ada gambar, itu akan menjadi sekitar 400 karakter)

<b:if cond='data:comment.authorAvatarImage.size != 180'>
<data:comment.authorAvatarImage/>
</b:if>

* Gambar komentar telah dihapus karena dinilai tidak perlu.

Jangan gunakan widget

Mengganti widget yang tidak memerlukan fungsi khusus Blogger seperti header dan pemberitahuan hak cipta dengan penulisan langsung HTML. Bergantung pada pemrosesan server di Blogger, mungkin lebih cepat. Minimal, tag yang tidak perlu seperti bagian dan widget dapat dihapus.

Hapus baris templat yang tidak perlu

Saat kamu mengedit template, sesekali kamu akan melihat garis yang tidak pernah berlalu. Dengan mengurangi jumlah garis template, tergantung pada pemrosesan server di Blogger, dimungkinkan untuk mempercepat.

Note : artikel tutorial cara mempercepat tampilan blogger ini dari beberapa blog dan web yang saya kunjungi dan murni dari apa yang saya pelajari, jika kamu tidak paham dalam bahasa silahkan berikan komentar atau hubungi kami, sehingga artikel bisa dapat menjadi lebih baik.