4 Cara Mengatasi Website Yang Lambat Karena Template di Platform Blogger
Cara Mengatasi Website Yang Lambat – Inilah cara mempercepat loading blog 100% ampuh baik di platform blogger.co dan selfhosting. SEO paling disukai search engine adalah kecepatan situs, ini merupakan faktor penting yang menentukan keberhasilannya dalam menarik dan mempertahankan lalu lintas.
Semua mesin pencari utama termasuk Google mendorong dan merekomendasikan membuat situs responsif dan cepat.
Cara ampuh mempercepat template blog agar fast loading adalah dengan mengatasi template loading berat dengan cara mempercepat loading blog itu sendiri dari struktur template dan widget-widget yang tak penting. Pintar pintarlah ketika memilih template untuk blog.
Cara Mengatasi Website Yang Lambat
Hari ini, kita akan fokus pada fitur yang terakhir dan khusus untuk blog yang dihosting di platform blogger Google.
Sebelumnya, kita masuk ke tutorial; Saya akan menyarankan Anda untuk mendapatkan pengetahuan dasar atau kerja tentang copy dan paste kode HTML atau CSS dalam template blogger.
Jika Anda sudah mengutak-atik desain template Anda, tidak ada yang lebih baik dari itu. Setelah menyelesaikan langkah-langkah yang disebutkan di bawah ini, Anda dapat mempercepat blog Anda dengan banyak lipatan. Beberapa prinsip yang disebutkan di sini dapat diterapkan ke platform lain juga.
Seperti biasa, saya akan memperingatkan Anda untuk terlebih dahulu mencoba teknik ini di blog dummy.
Dan, saat berolahraga di blog langsung Anda, simpan cadangan desain dan konten Anda yang ada. Jadi, mari kita mulai proses optimasi ini untuk membuat blog blogger kita, selebaran.
Kami akan mulai dengan menganalisis keadaan blog blogger saat ini. Untuk itu, Google menyediakan alat luar biasa yang disebut PageSpeed Insights. Ketikkan alamat blog Anda di kotak teks dan tekan enter.
Setelah memprosesnya, alat ini akan menampilkan skor kecepatan untuk mode seluler dan desktop bersama dengan jebakan dan saran untuk memperbaikinya.
Skor Google PageSpeed untuk desktop
Seperti yang ditunjukkan pada gambar di atas, Anda dapat melihat skor sampel untuk mode desktop. Idealnya, skor ini harus 85+ baik untuk mode seluler dan desktop. Apa pun di bawah ini membutuhkan perhatian.
Ingat, jika Anda menerbitkan posting panjang yang berisi banyak gambar, skor mereka mungkin masih di bawah 85 yang cukup masuk akal dan dapat diabaikan dengan aman bahkan setelah proses optimisasi selesai.
Jadi, saya berasumsi bahwa Anda telah menggunakan alat ini dan telah mendapatkan skor PageSpeed Anda baik untuk mode desktop dan seluler dan mereka jauh di bawah 85. Tepat di bawah skor ini, Anda akan menemukan alasan dan saran deskriptif untuk memperbaiki kemacetan.
Kami akan fokus pada bagian paling penting yang membahas tentang render memblokir aset yang bertanggung jawab untuk memperlambat blog blogger Anda.
Jadi, penyebab utamanya adalah CSS eksternal dan sumber daya JavaScript yang Anda gunakan dengan template yang ada. Ini mungkin termasuk font Google CSS, perpustakaan JavaScript populer seperti jQuery dan file CSS tambahan.
Ini hanyalah contoh file yang mungkin memblokir rendering halaman web yang terkait dengan blog blogger Anda secara tepat waktu.
Cara Mengatasi Web Yang Lambat Karena Template
Anda akan mendapatkan daftar lengkap file pemblokiran render tersebut pada halaman skor PageSpeed sehingga Anda dapat mengerjakannya. Jadi mari kita mulai dan memulai proses optimasi kecepatan.
1. Hilangkan File Font
Sebagian besar penerbit blogger menggunakan font Google untuk meningkatkan tipografi blog mereka. Font-font ini mungkin menambah template Anda tetapi mereka datang dengan biaya.
Ini adalah salah satu sumber pemblokiran render yang memperlambat blog. Jadi apa solusinya? Jika Anda menggunakan WordPress atau CMS lain dengan server web Anda sendiri, saya akan menyarankan sekali mencoba teknik ini untuk waktu pemuatan font yang dioptimalkan.
Saya belum menguji teknik ini, jadi saya tidak yakin apakah itu akan berfungsi dengan benar di server Anda. Sekarang, kembali ke blog blogger kita yang membutuhkan perhatian kita. Solusinya sangat sederhana.
JANGAN gunakan file font apa pun. Saya menggunakan Georgia, Arial, dan Helvetica di blog ini dan berfungsi tanpa ada file CSS font eksternal.
Jika Anda menghapus font Google, pastikan Anda menggantinya dengan kombinasi font web safe yang cocok dengan template desain Anda.
Jadi, jika Anda benar-benar tertarik untuk membuat blog blogger Anda, ritsleting, cukup hapus semua permintaan file CSS font di template Anda.
Akhiri Ketergantungan pada jQuery & Make Small Script Files Inline
Sebagian besar blog sekarang sangat bergantung pada jQuery untuk kerja mulus berbagai fitur dan efek.
Tetapi dengan peningkatan standar HTML dan CSS baru, sebagian besar fitur ini dapat dilengkapi dengan kode CSS & HTML murni.
Jika Anda masih menggunakan beberapa fitur yang memerlukan jQuery, cobalah untuk menemukan solusi yang tidak memerlukannya. Pada titik ini, mesin pencari Google adalah teman terbaik Anda.
Setelah Anda memastikan Anda tidak lagi membutuhkan jQuery, cukup hapus permintaan penyertaan file itu juga.
Entah itu ada di header atau di footer dari template blogger.
Anda mungkin masih menggunakan satu atau lebih file JavaScript yang tidak memiliki ketergantungan. Sementara blog Anda mengambil file-file ini dari server eksternal, proses rendering halaman web diblokir.
Solusi untuk masalah ini sangat sederhana. Kecuali file-file ini sangat besar, cukup buat kode mereka inline di dalam template Anda.
Dengan kata sederhana, alih-alih memanggil file-file ini dari server eksternal, Anda akan langsung menyisipkan kode mereka langsung ke template blogger Anda.
Mulailah dengan menyimpan semua file ini di desktop Anda dan satu per satu membukanya di editor kode favorit Anda. Pastikan Anda mengomentari tag inklusi file skrip ini di templat Anda sehingga kode inline yang berfungsi dapat diuji.
Ingat, jangan buka file ini dalam editor teks kaya (mis. Microsoft Word) karena kode Anda mungkin rusak.
Untuk setiap kode file, buat snippet berikut dari blok kode inklusi skrip baik di header atau tepat sebelum akhir tubuh template dalam template. Biarkan saya jelaskan dalam langkah-langkah berikut.
Untuk setiap kode file, salin dari editor teks dan tempel di tempat yang ditunjukkan di atas dalam potongan kode. Sekarang salin seluruh potongan kode ini dan rekatkan tepat sebelum tag </body>.
Sekarang sekali buka posting blog Anda untuk memeriksa apakah fitur / fungsi yang membutuhkan kode skrip berfungsi baik atau tidak. Jika tidak berfungsi, transfer kode ke tajuk template dan tempelkan di suatu tempat sebelum tag </header>.
Ulangi proses ini untuk semua skrip kecil yang ingin Anda sebaris dalam kode Anda.
2. Transfer Seluruh Kode CSS di Header
Template Blogger CSS dibagi menjadi 3 bagian. Bagian yang paling umum dan terlihat adalah kode desain templat yang tertanam dalam inline-form di dalam header.
Pengguna bekerja pada kode CSS ini untuk membuat perubahan dalam desain template. Namun, ada dua file CSS eksternal lainnya yang masuk dalam kategori render blocking resources yang berkontribusi dalam memperlambat blog.
Dua file ini adalah:
- 728935430-widget_css_bindle.css – File CSS ini terdiri dari kode default untuk widget blogger generik seperti widget posting populer, widget label, dan banyak lagi. (Awalan numerik file ini mungkin berbeda di templat Anda.)
- authorization.css – File ini terdiri dari dua baris atau lebih kode CSS. Sejujurnya, saya tidak yakin apa penggunaannya.
Platform Blogger secara otomatis mengambil dua render ini yang memblokir file CSS dengan setiap permintaan halaman.
Sekarang, untuk menghilangkan masalah ini, kita perlu menghapus dua file ini. Tetapi, jika kita langsung menghapus file-file ini, template menggunakan widget blogger generik dapat merusak seluruh desain.
Jadi, solusi ideal adalah tidak hanya menghapus file-file ini tetapi juga menyalin kode mereka tepat sebelum desain template yang ada.
Ini adalah proses dua langkah yang harus diselesaikan dengan hati-hati. Pastikan Anda mengambil cadangan template Anda sebelum menyelesaikan langkah ini.
Pertama-tama, simpan konten kedua file ini dalam file teks biasa yang terpisah. Sekarang, cari kode berikut di dalam template blogger Anda. Ini hadir di awal kode CSS template Anda di dalam header.
3. Kecualikan Widget & File Skrip Google+ (Footer)
Dua sumber pemblokiran render lainnya adalah dua file JavaScript yang disertakan secara otomatis oleh platform Blogger.
Salah satunya adalah skrip Google+ dan yang lainnya terkait dengan semua widget blogger yang digunakan di blog. Kedua file ini dipanggil di akhir templat.
Menonaktifkan pemasukan kedua file ini sangat sederhana. Tetapi, setelah mengecualikan kedua file ini, beberapa perubahan terjadi dalam bagian Layout dasbor blogger dan beberapa hal penting lainnya yang perlu diperhatikan untuk memastikan Anda tidak merusak template desain Anda.
Pertama, mari kita lihat cara mengecualikan kedua file ini dengan mudah dari templat kami. Buka akhir kode templat Anda dan temukan tag </body>. Ganti dengan potongan kode berikut.
Seperti yang saya katakan sebelumnya, mengecualikan kedua file ini membutuhkan lebih banyak perhatian dari pemilik blog saat bekerja dengan template.
Jika Anda membuka salah satu posting blog Anda di browser web dan memeriksa kode sumbernya, Anda akan melihat banyak kode yang dikomentari di akhir template yang juga mencakup kedua file yang ingin kami singkirkan.
4. Kode widget Blogger di footer
Seperti yang ditunjukkan pada gambar di atas, Anda dapat melihat kedua file skrip sekarang dikomentari dan tidak lagi menghambat proses rendering halaman sehingga mempercepat blog Anda secara signifikan.
Pada titik ini, jika Anda mengklik opsi Tata Letak di dalam dasbor Anda, Anda akan melihat bahwa seluruh struktur tata letak sekarang disejajarkan secara vertikal seperti tumpukan kotak yang disimpan di atas satu sama lain seperti yang ditunjukkan pada gambar di bawah ini.
Tidak perlu panik. Hanya mengurus satu hal yang sangat penting dari sini dan seterusnya. Jika Anda membuat beberapa perubahan pada widget yang ada dalam template desain Anda, tidak ada yang perlu dilakukan dan Anda dapat mengeditnya dengan bebas.
Tetapi, jika Anda akan menambahkan widget baru atau ingin menghapus widget yang lebih lama, ganti potongan kode kembali ke tag </body> yang asli.
Setelah Anda melakukan perubahan itu dan telah menyimpan templatnya, Anda dapat menambah atau menghapus widget.
Setelah menyelesaikan proses penambahan atau penghapusan widget, Anda dapat mengganti tag </body> dengan potongan kode yang disebutkan di atas. Dengan cara ini, templat Anda tidak akan pecah dan itu akan berfungsi dengan lancar.
Jadi, ini melengkapi proses optimasi untuk mempercepat blog blogger Anda. Anda lagi dapat memeriksa kecepatan blog Anda melalui alat PageSpeed Insights dan Anda akan melihat bahwa Anda mendapatkan skor yang baik yang jauh lebih tinggi daripada skor Anda yang lebih tua.
Pengunjung blog Anda juga akan terkejut melihat waktu pemuatan posting blog Anda yang jauh lebih cepat.
Optimasi SEO Website
Panduan Lain-Lain untuk Optimasi Kecepatan
- Selain menyelesaikan langkah-langkah penting ini, Anda dapat mengikuti praktik dan panduan terbaik tambahan untuk memastikan blog Anda tetap menyala dengan cepat memberikan pengalaman penelusuran terbaik kepada para pengunjung. Berikut ini beberapa tipsnya.
- Saat menggunakan gambar dalam posting blog, pastikan web Anda mengoptimalkannya untuk mengurangi ukuran halaman secara keseluruhan.
- Lakukan kompres kode CSS desain template Anda untuk lebih mengurangi ukuran halaman web.
- Saat menambahkan semua cuplikan kode JavaScript sebaris, pastikan Anda juga mengompres skrip ini.
- Jika memungkinkan, kurangi jumlah widget yang digunakan di blog Anda.
- Gunakan sprite gambar, sedapat mungkin.
- Buat desain responsif dan kurangi elemen yang tidak perlu dalam desain untuk perangkat kecil. Kedengarannya Geeky?