Cara Paling Efektif Meningkatkan Performa Website Di Blogspot
Cara mengatasi website yang lemot , mengatasi akses ke server agar loading website cepat dan performa website blogger meningkat
Salah satu dampak dari sebuah website dengan performa yang lambat dapat menyebabkan pengguna pergi (bounce rate tinggi), menurunkan kepuasan, dan pada akhirnya membuat situs mungkin tidak akan terlihat di hasil pencarian.
Inilah salahsatu alasan kenapa kita harus meningkatkan performa website. Namun demikian, tidaklah mudah untuk bisa membuat performa tinggi dari sebuah website. Bahkan bila perlu kita harus mengeluarkan anggaran ntuk itu.
Pada artikel ini saya ingin berbagi kepada kalian, khususnya kalian pemula seperti penulis yang masih suka otak-atik di sebuah situs gratis milik sejuta umat, mana lagi kalau bukan situs blogspot. Ini tentunya saya peroleh dari penerapan teori dari beberapa para pakar SEO melalui website yang mereka punya yang kemudian menjadi sebuah pengalaman yang mana mungkin patut kami bagikan kepada pembaca.
Sebelum kepada topik utama tentang bagaimana Cara Paling Efektif Meningkatkan Performa Website Di Blogspot, ada baiknya kami ajak anda untuk mengenal tentang istilah LCP dan FCP yang mana istilah ini didapat saat melakukan test performa di PageSpeed Insights agar nantinya anda mempunyai sedikit gambaran ketika akan melakukan perbaikan.
Apa itu First Contentful Paint (FCP)
Adalah metrik performa web yang mengukur waktu dari saat halaman mulai dimuat hingga konten pertama yang dapat dilihat oleh pengguna muncul di layar, seperti teks atau gambar. Ini memberikan indikasi seberapa cepat pengguna melihat sesuatu terjadi, meyakinkan mereka bahwa halaman sedang dimuat dan tidak "macet". FCP yang cepat penting untuk pengalaman pengguna yang baik, karena memberikan kesan awal bahwa halaman responsif.
Optimasi FCP (First Contentful Paint)
✔ Percepat waktu respons server: Ini adalah langkah krusial untuk FCP. Hosting yang cepat dan penggunaan CDN sangat penting untuk mempercepat pemuatan HTML awal.
✔ Optimalkan CSS dan JavaScript:
☑ Minifikasi file untuk memperkecil ukuran.
☑ Sertakan CSS penting (critical CSS) agar elemen yang terlihat di awal halaman segera dimuat.
☑ Gunakan atribut defer atau async untuk menunda pemuatan JavaScript yang tidak perlu.
✔ Kurangi penggunaan font eksternal: Jika memungkinkan, gunakan font self-hosted atau preload font eksternal untuk mempercepat pemuatannya.
✔ Manfaatkan caching: Atur caching agar file-file aset statis tidak perlu diunduh ulang oleh browser saat kunjungan berulang.
✔ Gunakan format gambar yang ringan: Format seperti WebP menawarkan kompresi yang lebih baik dari JPEG atau PNG, sehingga gambar dimuat lebih cepat.
Apa itu Largest Contentful Paint (LCP)
Adalah sebuah metrik kinerja web yang mengukur waktu pemuatan konten utama sebuah halaman web. Secara spesifik, metrik ini mengukur waktu dari saat pengguna memulai memuat halaman hingga elemen terbesar yang terlihat di layar (misalnya, gambar besar, blok teks, atau video) selesai dimuat. Waktu LCP yang cepat sangat penting untuk memberikan pengalaman pengguna yang baik karena menandakan bahwa konten utama halaman tersebut sudah dapat dilihat. LCP berfokus pada waktu rendering elemen konten terbesar di dalam viewport. Situs web dengan LCP cepat selalu memberikan pengalaman pengguna yang lebih lancar dan lebih menarik, terutama pada perangkat dengan berbagai ukuran layar dan resolusi.
Optimasi LCP (Largest Contentful Paint)
✔ Optimalkan gambar dan aset video: Kompresi gambar dan video, gunakan format yang lebih ringan seperti WebP, dan pastikan ukurannya sesuai kebutuhan. Gunakan lazy loading untuk gambar/video yang tidak muncul di awal halaman.
✔ Optimalkan waktu respons server: Gunakan hosting berkualitas tinggi atau Content Delivery Network (CDN) agar data dapat diakses lebih cepat oleh pengunjung dari lokasi mana pun.
✔ Prioritaskan pemuatan elemen LCP: Jika elemen LCP berupa gambar, muat gambar tersebut lebih awal (preloading) agar tidak perlu menunggu proses rendering halaman selesai.
✔ Minifikasi dan tunda render-blocking: Perkecil ukuran file CSS dan JavaScript. Tunda pemuatan JavaScript yang tidak penting agar tidak menghambat rendering elemen penting di awal.
✔ Manfaatkan caching: Aktifkan caching di server dan browser agar aset statis tidak perlu diunduh ulang setiap kali pengguna kembali ke halaman.
Saatnya sekarang menuju tempat kejadian perkara - TKP, membuat performa website blogger mendekati angka 100 nilai performa, syukur-syukur bisa mencapai angka 100 point nilai performa. Berikut tips-nya :
1.) Pilih tema blogger yang responsive seperti: contempo, soho, imperio, notable dansebagainya. Jika anda memilih tema web simple, anda mesti merubahnya terlebih dahulu menjadi responsive. Bagaimana cara membuat tema simple menjadi responsive, anda bisa membaca artikel di blog ini tentang merubah tema simple menjadi responsive. Saya sendiri memilih tema Essential untuk ini.
2.) Pilih dan gunakan jenis huruf yang aman untuk penulisan di tema (template) website yang telah anda pilih.⇒ (pendekatan FCP).
Jenis huruf apa saja yang paling aman digunakan untuk web anda?, anda bisa membacanya di blog ini: "Ini 7 Jenis Huruf Yang Bagus Dan Aman Untuk Website Blogspot".
3.) Awali postingan dengan membuat setidaknya 3 paragraf, yang mana masing-masing paragraf memuat antara 200 - 300 karakter huruf, baru anda meletakkan konten image setelahnya (image yang telah dikompresi tentunya). Hal ini bertujuan untuk menghindari dari pemuatan konten yang berukuran besar yang berada dalam area viewport. Berdasarkan pengalaman, pemuatan konten berupa image biasanya agak sulit dihindari dari pada pemuatan konten berupa huruf. Oleh karena itu, saya meletakkan konten berupa gambar atau video pada paragraf ke-4 atau ke-5. Intinya, konten berupa gambar atau video diletakkan setelah area viewport. Anda bisa melihat contoh halaman ini di mana saya meletakkan konten image pada paragraf yang ke-5. ⇒ (pendekatan LCP).
4.) Bila perlu, tambahkan perintah "eager loading " pada konten atau paragraf yang berada pada area viewport. Perintah ini bertujuan memberikan perintah pemuatan segera pada konten yang berada di area viewport. ⇒ (pendekatan LCP).
Contoh :
<p style="loading: eager; text-align: left;">Tips membuat peforma...</p
<p style="loading: eager; text-align: left;">Salah satu dampak...</p>
<p style="loading: eager; text-align: left;">Inilah salahsatu...</p>
<p style="loading: eager; text-align: left;">Pada artikel ini...</p>
5.) Bila perlu, tambahkan perintah "lazy loading " pada konten yang berupa image yang berada di luar atau setelah area viewport. Perintah ini bertujuan memberikan perintah penundaan pemuatan pada konten image yang berada di luar area viewport tersebut. ⇒ (pendekatan LCP).
Contoh :
<p style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2.../s480/image.webp" style="margin-left: 0em; margin-right: 0em;"><img alt="Meningkatkan Performa Website" border="0" data-original-height="270" data-original-width="480" loading="lazy" src="https://blogger.googleusercontent.com/img/R29vZ2.../s16000/image.webp" title="Meningkatkan Performa Website Blogspot" /></a></p>
Komentar