Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatasi Loading Blog Lambat : Cara Efektif Blog Loading Dengan Cepat

BLOG FAST LOAD

Blog Web Yang Memuat Cepat (Fast Load) VS Blog Yang Memuat Lambat

semua  orang lebih suka mengakses situs blog web yang memuat dengan cepat (fast load) daripada yang memuat lebih lambat. cepat loading tidak hanya ketika diakses lewat personal komputer saja, melainkan juga ketika diakses lewat ponsel pintar mapun tablet. 

pengguna internet saat ini lebih sering menggunakan mobile dalam mengakses situs web blog. berarti ponsel pintar lebih popular untuk digunakan dalam keseharian. oleh karenanya sangat penting bagi pemilik blog untuk memperhatikan kecepatan memuat blog / webnya. 

dalam penelitian yang dilakukan oleh google, menyimpulkan bahwa 53% pengguna ponsel pintar meninggalkan situs yang diakses lebih dari tiga detik untuk memuat. lebih dari tiga detik berarti sama halnya kehilangan pengunjung dan pelanggan, dan ternyata menunggu merupakan pekerjaan yang membosankan apalagi kalau menunggu yang tidak pasti.

Kecepatan situs web merupakan kesan pertama yang ada dalam pengalaman pembaca, pengunjung situs web secara tidak langsung akan memberikan penilaian tantang blog beserta kontennya .

Jika situs web dimuat dengan cepat, secara instan memberikan kesan pertama yang baik bagi pengunjung. pengunjung senang jika web blog dimuat dengan cepat, terutama pengunjung yang baru.

supaya blog memuat cepat tentunya terlebih dahulu memahami mengapa situs memuat dengan lambat dan menemukan solusi untuk meningkatkan hal untuk mempercepatnya.

Tools Tes Kecepatan Muat / Load Blog

Langkah pertama untuk meningkatkan kecepatan memuat situs web blog adalah dengan mempelajari seperti apa kecepatan saat ini. 

beberapa tools untuk mengecek kecepatan blog diantaranya pagespeed insights, gtmetrix, pingdom,dll. 

1. pagespeed insights

PageSpeed ​​Insights digunakan untuk melihat kinerja halaman situs pada perangkat seluler dan desktop, serta memberikan saran tentang bagaimana cara halaman tersebut dapat ditingkatkan.

PageSpeed ​​Insights adalah tools online dari google yang membantu mengidentifikasi kinerja di situs web mana pun, memberikan saran tentang pengoptimalan laman web, dan menyarankan gagasan keseluruhan tentang cara membuat situs web lebih cepat. tools ini dapat diakses langsung di browser apa saja. PageSpeed ​​Insights menilai kinerja halaman web dengan menggunakan skor dari 1 hingga 100 dan memberikan laporan tentang cara optimasi yang disarankan, serta dibagi ke dalam kategori prioritas tinggi, sedang, dan rendah.

2. GTmetrix 

GTmetrix adalah tools gratis untuk menganalisis kinerja kecepatan halaman situs dengan Menggunakan PageSpeed ​​dan YSlow, GTmetrix menghasilkan skor untuk halaman dan memberikan saran terbaik untuk meningkatkan performa situs.

3. Pingdom

Pingdom digunakan untuk memonitor uptime, kinerja, dan interaksi situs web untuk pengalaman pengguna mutakhir yang lebih baik. Pingdom menawarkan uptime yang efektif dan andal dalam pemantauan kinerja untuk situs web.

Cara Efektif Mempercepat Loading Pada Blog di Blogger.com

Ada banyak faktor yang menjadikan load blog web menjadi lambat, mulai dari penggunaan gambar yang berlebihan, sumber script dari luar (javascript dan jquery), pemasangan widget, pemuatan iklan dll.

setiap blog memiliki penyebab masing-masing yang membuat blog menjadi lambat.  oleh karenanya perlu menganalisis dan mengetahui terlebih dahulu penyebab loading blog menjadi lambat.

berikut adalah cara efektif Cara Efektif Blog Loading Dengan Cepat :

1. Gunakan Template Responsive Dan Fast Load

memilih template blog tidak hanya mementingkan dari segi keindahan saja, tapi juga responsive, kecepatan loading dan lain sebagainya perlu diperhatikan. bayak template yang tersedia di internet secara gratis maupun premium yang bisa diunduh.

hasil skor di tools kecepatan muat / loading web blog biasanya di tampilan mobile cukup bahkan kurang dibandingkan dengan di tampilan dekstop oleh karena responsivibilitas tempalate perlu di pertimbangkan.

blogger sendiri menyediakan beberapa template bawaan yang sudah responsive yang bisa di tampilkan, bekerja dengan baik dan secara otomatis menyesuaikan dengan layar apa saja, sehingga pembaca akan dapat dengan mudah melihat blog yang berada di komputer, ponsel atau tablet. tema template blogger yang baru tersebut adalah soho, contempo, emporio, notable

tidak ada salahnya menggunakan tema template bawaan google sambil belajar memodifikasi tampilan sesuai keinginan. template yang menggunakan latar putih

2. Gunakan Widget Sesuai Kebutuhan

widget sebagai salah satu fitur di blogger untuk menambah bagian bagian yang dibutuhkan di blog, selain itu juga widget blog digunakan untuk melengkapi tampilan blog. banyak pilhan widget yang disediakan dapat di pasang dan dicopot sesuai kebutuhan.

memasang widget yang banyak dipercaya dapat menurukan kecepatan loading blog, widget yang perlu ditampilkan bersifat sangat di dibutuhkan dalam mendukung konten, bukan hanya sekedar menambah supaya kelihatan lengkap.

misalnya pada widget adsense, seandainya iklan automatis adsense sudah di pasang di html blog, kenapa harus menambah widget lagi? tentunya widget yang dipasang seperti pemborosan yang dapat berakibat pada kecepatan loading blog.

tambahkan widget yang hanya sangat dibutuhkan dalam mendukung konten, kalau bisa, sisikan kode  yang ingin ditambah di edit theme html blog agar widget blog menjadi lebih ramping.

3. Atur Loading Gambar (Lazy Load, Gambar Format Webp, dan kompres gambar)

web blog menggunakan gambar untuk mencitrakan suatu informasi supaya lebih jelas informasi yang disampaikan pada pembaca. pengunaan gambar di sebuah web blog sama halnya dengan pentingnya kejelasan informasi yang di sampaikan

penggunaan gambar pada website memang sangat diperlukan, akan tetapi penggunaan gambar yang berlebihan dengan ukuran yang besar bisa menyebabkan loading sebuah website menjadi lebih berat atau lambat. tentunya hal ini tidaklah diinginkan karena bisa membuat pengunjung web atau blog tersebut menunggu atau bahkan meninggalkan halaman web atau blog tersebut.

Lazy Load

 lazy load merupakan solusi yang ditawarkan di berbagai tutorial tips trik yang bisa ditemukan di internet untuk meringankan loading gambar. lazy load memang terbukti ampuh untuk meringankan loading suatu blog, ini terbukti ketika blog yang template nya di pasang lazy load kecepatan load web /blog tersebut tambah cepat ketika di tes menggunakn pagespeed insight

namun bagaimana jikalau di template blog yang digunakan, lazy load yang dipasang tidak bekerja dengan baik?  apakah ada solusi lain?

Gambar Format Webp

ada banyak format gambar yang telah di kembangakan oleh developer, tentunya mempunyai kelebihan dan kekurangan  masing masing,

para blogger yang sering menggunakan pagespeed insight, ketika mengetes kecepatan sebuah blog atau web akan menemukan kalimat kurang lebih seperti ini  "Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption" yang artinya kurang lebih seperti ini "Format gambar seperti JPEG 2000, JPEG XR, dan WebP biasanya memberikan kompresi yang lebih baik daripada PNG atau JPEG, sehingga download lebih cepat dan konsumsi data lebih kecil. "

pengguna template bawaan blogger misalnya seperti contempo, soho, notable, emporio. template tersebut sebenarnya sudah responsive. jikalau menemukan kesulitan dalam memasang lazy load pada template contempo, soho, notable, emporio ada baik baiknya menggunakan format gambar WEBP.

gambar Webp bisa menjadi solusi selain lazy load

Dalam situs developer google menyebutkan bahwa webp merupakan Format gambar baru untuk Web
WebP adalah format gambar modern yang memberikan kompresi lossless dan lossy unggul untuk gambar di web. Menggunakan WebP, webmaster dan pengembang web dapat membuat gambar yang lebih kecil dan lebih kaya yang membuat web lebih cepat.

Gambar lossless WebP berukuran 26% lebih kecil dibandingkan dengan PNG. Gambar webp lossy adalah 25-34% lebih kecil dari gambar JPEG yang sebanding pada indeks kualitas SSIM yang setara.
Lossless WebP mendukung transparansi (juga dikenal sebagai saluran alpha) dengan biaya hanya 22% byte tambahan . Untuk kasus-kasus ketika kompresi RGB lossy dapat diterima, lossy WebP juga mendukung transparansi , biasanya menyediakan ukuran file 3x lebih kecil dibandingkan dengan PNG.

WebP didukung secara asli di Google Chrome, Firefox, Edge, browser Opera, dan oleh banyak alat dan pustaka perangkat lunak lainnya. Pengembang juga menambahkan dukungan ke berbagai alat pengeditan gambar.

Kompres gambar

namun ada baiknya mengkompress ukuran gambar terdahulu setelah itu di konver ke dalam bentuk WebP sebelum mengupload gambar di blog. untuk conver mengubah ke format WebP bisa dilakukan secara online di misalnya di ezgif.com gambar yang berbentuk Webp ber ikon chrome.

4. Minify HTML, CSS, dan Javascript. 

Minify atau Minification merupakan proses menghilangkan data yang tidak perlu atau berlebihan tanpa mempengaruhi bagaimana sumber daya tersebut diproses oleh browser. dengan minification kode program menjadi anda menjadi ringkas.

Proses minify dapat mengurangi 10% - 95% ukuran code! sehingga pemuatatan situs web blog berjalan lebih cepat dan akan mendapatkan skor Search Engine Optimization (SEO) yang bagus. Ini juga merupakan salah satu cara untuk menghemat sumber daya pada web server.

Minify dilakukan dengan cara menggunakan tools Minify  offline atau online. dengan tools Minify online yang terdapat di internet, kode dapat dengan mudah di- minify. mengketik /copy /upload code yang akan di minify, selanjutnya tinggal klik compress/minify kemudian akan mendapatkan code hasil minify-nya
Setelah file di minify maka code anda akan menjadi lebih ringkas.

apabila menggunakan blogger.com, solusi selain minify adalah  Menghilangkan CSS dan JavaScript Bawaan Blogger / Yang Tidak Di Gunakan

5.  Menghapus CSS dan JavaScript Bawaan Blogger / Yang Tidak Di Gunakan.

Cara Menghilangkan CSS dan JavaScript Bawaan Blogger / Yang Tidak Di Gunakan

Cara menghapus File css dan JS Bawaan Blogger,
Klik Edit HTML di Theme (Tema) template blog

1. Ganti kode <head> dengan kode :

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


2. Ganti kode </head> dengan kode :

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


3. Ganti kode <body> dengan kode :

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


4. Ganti kode </body> dengan kode:

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


5. Klik Save Theme (Simpan Tema).

Cara lain menghilangkan CSS dan JavaScript bawaan Blogger adalah dengan menambahkan atribut b:css dan b:js dengan nilai false.

<html b:css='false' b:js='false'> … </html>


Kalau di template bawaan blogger terbaru kode tersebut kurang lebih menjadi seperti berikut

<html b:css='false'  b:js='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' b:templateVersion='1.3.0' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>


Namun satu hal yang perlu diingat bahwa beberapa fitur bawaan yang menggunakan JavaScript mungkin tidak bisa berfungsi dengan baik salah satunya adalah contact form begitu juga dengan tampilan layout blogger.

6. Gunakan Icon SVG sebagai  Solusi Font Awesome

Ikon adalah bagian yang tidak bisa dipisahkan dari desain web. Font awesome adalah salah satu font web tersebut yang memiliki ikon. font awesome membuat perancangan icon menjadi mudah. Hampir semua jenis ikon tersedia.  font awesome mudah digunakan dan banyak sekali pilihan icon yang bisa digunakan

Situs web sederhana menggunakan setidaknya 4 hingga 5 ikon. Jika ingin menyertakan ikon tombol bagikan, icon menu side bar dan ikon footer, tentu jumlahnya bertambah. namun dengan adanya font awesome menyisipkan icon dapat dilakukan dengan mudah misalkan saja untuk lambang amplop tinggal ketik "fa envelope" tanpa harus membuat kode yang panjang.

Font Awesome adalah cara terbaik untuk menyediakan ikon untuk situs web. penerapannya juga cepat dan mudah. Namun, fontnya sendiri cukup besar dan lambat dimuat. lambat disini ketika melakukan tes kecepatan loading web blog di page speed insight google  ada tulisan kurang lebih seperti ini "Hilangkan resource yang memblokir render, Resource memblokir first paint halaman. Sebaiknya kirim inline JS/CSS kritis dan tunda semua JS/gaya yang tidak kritis" dalam bahasa inggris "Eliminate render-blocking resources, Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles." dengan menyertakan ukuran dari font awesome dibawahnya.

Mengatasinya dengan Menggunakan pustaka font awesome yang fast load, lumayan untuk memperingan pemuatan blog, namun bila ingin lebih mengutamakan kecepatan pemuatan ada baiknya menggunakan icon SVG sebagai solusi Font Awesome

7. Peringan  Penayangan Iklan

Menghasilkan uang lewat blog memang menyenangkan walaupun masih belum banyak seperti Blog profesional memperoleh pendapatan. Penayangan iklan yang berlebihan dapat menjadikan blog menjadi berat sehingga memperlambat loading blog. 

penentuan jumlah penanyangan iklan perlu di kontrol sehingga tidak terlalu banyak. jaringan penyedia iklan yang paling diminati, google adsense, mengeluarkan aturan Penerapan kebijakan Pembatasan penayangan iklan Adsense, jadi ada baiknya dalam memasang iklan disesuaikan dengan performa blog.

namun apabila penayang Google Adsense memasang lebih dari satu script di web blog, hal tersebut  membuat loading blog khususnya penampilan iklan terasa berat dan lama. Itu karena, setiap unit iklan melakukan loading secara bersama hingga tampil sempurna.

sebagian Penayang iklan mencari jalan keluar dengan menghapus script tersebut serta memasang lazy load untuk adsense. 

Cara diatas masih secara umum, apabila ingin mempercepat loading blog tentunya dengan mencoba sendiri bagaimana cara terbaik untuk blog yang dipakai karena setiap blog mempunyai template yang berbeda beda. selain itu ada baiknya menyimpan template terlebih dulu sebelum melakukan perubahan. 

1 komentar untuk "Mengatasi Loading Blog Lambat : Cara Efektif Blog Loading Dengan Cepat "

data-ad-format="auto">
data-ad-format="auto">

Berlangganan via Email