Lengkap! Kumpulan Cara Mempercepat Loading Blog dengan Script!

Selain tampilan dan isi artikel, kecepatan sebuah blog juga menjadi satu hal yang tak kalah pentingnya bagi sebuah Blog. Apalagi untuk blog pemula, seperti yang kita tahu, tidak sedikit para pengunjung blog yang membatalkan niatnya untuk membuka blog sobat hanya karena loadingnya yang sedikit lama. Meskipun tidak sampai satu menit, dimata pengunjung hal itu bisa sangat mengganggu.

Karena itu, pada artikel kali ini saya akan coba share beberapa Kumpulan Cara Mempercepat Loading Blog dengan Script!

Cara yang saya share disini ada 4 macam, diantaranya adalah Menggunakan Icon SVG Sebagai Pengganti Font Awesome, Mengapus JavaScript, CSS, dan Widget Bundle bawaan Blogger, Memasang Script Lazy Load untuk Gambar, Dan satu lagi adalah mengkompres kilobyte atau ukuran gambar agar lebih kecil dari sebelumnya.

Semuanya, akan coba saya bahas satu persatu, dan sobat bisa lakukan satu persatu cara dari keempat cara yang ada di bawah ini ya. Saya sarankan untuk melakukannya secara bertahap dari cara 1 sampai ke 4 agar sobat mudah mengaplikasikannya pada blog yang sobat milikki. Sehingga blog sobat bisa menjadi super cepat!

Cara 1 : Icon SVG Sebagai Pengganti Font Awesome

Penggunaan Font Awesome pada blog udah jadi hal yang lumrah. Apa sih Font Awesome? Dia adalah font khusus yang berfungsi sebagai icon. Jadi kamu udah nggak perlu tuh pake gambar berekstensi .jpg / .png / .gif kalau mau pasang icon di blog. Cukup sisipkan Font Awesome didalamnya. Tapi, udah pasti ada plus minusnya dong dari penggunaan Font Awesome ini.

Plus +

Memperingan pekerjaan. Nggak perlu membuat icon satu-persatu dengan gambar. Jenis iconnya pun banyak. Jangan khawatir icon yang diperlukan nggak ada, soalnya banyak banget. Penggunaan icon bisa mempercantik layout blog lho.

Minus –

Memperlambat loading blog. Loh kenapa? Karena untuk pake Font Awesome ini harus manggil script dulu. Pemanggilan script eksternal jadi salah satu point penting yang perlu dipertimbangkan. Terutama bagi pengguna platform Blogger

yang nggak bisa ngatur cache dan expired header. Meskipun nggak memperlambat blog sebegitu drastis, tetep aja bakal nurunin score ketika ngecek page speed di GTMetrix, Google Page Speed Insight, dll kalau kamu nggak pinter-pinter ngakalin.

Umumnya Font Awesome dipanggil dengan menuliskan script ini di HTML blog.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Icon SVG Sebagai Solusi Pengganti Font Awesome

Apa kamu tau, yang bisa menampilkan icon nggak cuma Font Awesome? Ya, ada! Mungkin kamu udah familiar sama Font Material yang sekarang mulai booming. Tapi itupun sama, harus manggil script eksternal lebih dulu.

Sebenernya ada satu jenis icon yang nggak perlu manggil script eksternal. Dia cuma perlu ditulis layaknya kode CSS / HTML biasa. Namanya adalah icon SVG atau Scalable Vector Graphics. Dia merupakan bahasa markup yang sanggup menampilkan icon atau gambar dan udah support di semua browser, baik itu desktop maupun mobile. Blog Igniel pun pake icon SVG.

Cara Mendapatkan Icon SVG

    1. First of all, kamu wajib kunjungi website Material Design Icon. Disana kamu bisa milih berbagai jenis icon SVG, yang nanti kodenya diambil untuk disimpan di blog.
      Menggunakan SVG Sebagai Icon Blog

      Contoh icon SVG

  1. Pilih salah satu, lalu klik icon </>, pilih “View SVG”. Kemudian kode untuk menampilkan iconnya akan muncul.
    Icon SVG Solusi Pengganti Font Awesome

    Kode untuk icon SVG

Cara Pasang Icon SVG di Blog

Setelah kodenya didapatkan, trus gimana cara pakai icon SVG di blog ini? SVG bisa dipasang menggunakan 3 cara. Kamu pilih deh cara mana yang paling cocok.

1. Langsung Pasang Seperti HTML

Ini cara yang paling gampang karena tinggal paste kode dari websitenya ke blog. Pastikan kamu udah dapet kode icon SVG (caranya yang barusan diatas). Misalnya, kodenya adalah sbb:

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#000000" d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z" />
</svg>

Tinggal simpan deh kode itu dimanapun kamu mau. Jangan lupa ganti tulisan yang di-highlight dan sesuaikan dengan keinginan.

  1. width:24px;height:24px: Lebar dan tinggi icon.
  2. #000000: Warna icon.
2. Pasang HTML dan Internal CSS

Ini cara yang lebih baik dari dibanding yang pertama karena ada pengaturan internal CSSnya. Hapus kode style="width:24px;height:24px" dan fill="#000000", lalu tambahkan di kode CSS.

HTML

<svg viewBox="0 0 24 24">
    <path d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z" />
</svg>

CSS

svg {width:24px; height:24px}
svg path {fill:#000000}

PENTING: Harap pehatikan tempat menyimpan kodenya. Jika masih di dalam ruang lingkup turunan elemen lain, maka tambahkan kode CSSnya. Misalnya disimpan di dalam ruang lingkup div yang memiliki id profil seperti ini:

<div id="profil"><svg blablabla></svg></div>

Maka CSSnya harus seperti ini:

#profil svg {width:24px; height:24px}
#profil svg path {fill:#000000}
3. Sebagai Internal CSS

Ini kalau kamu mau langsung pake SVG di CSS. Misalnya sebagai background image atau sebagai konten dari pseudo-element :before atau :after. Ini cara favorit saya meskipun sedikit agak ribet.

#profil {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E");
background-color:#008c5f;
background-repeat: no-repeat;
background-position: center center;
background-size: 45px 45px;
}

PENTING: tulis kode SVG persis di tempat yang udah di-hightlight. Dengan catatan:

  1. Simbol < diganti menjadi %3C
  2. Simbol > diganti menjadi %3E
  3. Simbol # diganti menjadi %23

Ini wajib agar pengaturan internal CSS bisa diterima dan akan tampil di semua browser. Kalau nggak diganti, biasanya nggak bakal muncul di Mozilla Firefox dan Internet Explorer.

Memang keliatan agak ribet dibanding Font Awesome yang memanggil kode lebih sedikit. Tapi dijamin ampuh buat mempercepat page speed. Saya pun sampe ketagihan pake

icon SVG di blog

ini.

Cara 2 : Hapus Javascript, CSS, dan Widget Bundle Bawaan Blogger

Masalah umum yang selalu ada di sebagian besar template adalah tersisipnya

Javascript, CSS, dan Widget Bundle bawaan Blogger

. Sebagian besar pengguna malah nggak sadar ada script begituan. Nggak aneh, soalnya emang NGGAK ADA di pengaturan HTML. Mereka berdua nggak tertulis. Otomatis gitu lho dari Google sana. Script ini cuma bisa keliatan di source code. Buat liat source code ini, tinggal ketik di browser alamat sebagai berikut:

view-source:http://www.AlamatBlog.com

Ganti

http://www.AlamatBlog.com

pake alamat blog kamu sendiri.

Dan akan terdapat script yang kurang lebih kaya gini:

<script src='https://apis.google.com/js/plusone.js' type='text/javascript'></script>
<script type='text/javascript' src='https://www.blogger.com/static/v1/widgets/33xxxxxxxx-widgets.js'></script>
<link href='https://www.blogger.com/static/v1/widgets/33xxxxxxxx-css_bundle_v2.css' rel='stylesheet' type='text/css'/>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=33xxxxxxxx=33xxxxxxxx8'/>

Dimana

33xxxxxxxx

berupa angka yang berbeda-beda di setiap blog.

Padahal sebenernya kita nggak butuh-butuh amat kok. Yang ada malah memperlambat loading & nurunin score page speed di GTMetrix, Google Page Speed Insight, dan web testing lainnya. Ya mending dihapus aja.

Kalo nggak tertulis di pengaturan HTML, trus gimana hapusnya?

A. Cara Hapus JS, CSS, dan Widget Bundle Blogger

Emang perlu sedikit trik. Perhatikan baik-baik

cara menghapus JS, CSS, dan Widget bawaan Blogspot

berikut agar bisa mempercepat loading halaman. Pastikan kamu udah login ke akun

Blogger

. Trus masuk ke “Theme” lalu pilih “Edit HTML”.

1. Langkah Pertama
  1. Cari kode sbb:
    <body>
    ...
    ...
    ...
    </body>
  2. Yang ditandai kuning <body> ganti dengan:
    &lt;!--<body>--&gt;&lt;body&gt;
  3. Yang ditandai biru </body> ganti dengan:
    &lt;!--</body>--&gt;&lt;/body&gt;
  4. Simpan template.
2. Langkah Kedua
  1. Cari kode sbb:
    <head>
    ...
    ...
    ...
    </head>
  2. Yang ditandai kuning <head> ganti dengan:
    &lt;!--<head>--&gt;&lt;head&gt;
  3. Yang ditandai biru </head> ganti dengan:
    &lt;!--</head>--&gt;&lt;/head&gt;
  4. Simpan template.
3. Langkah Ketiga
  1. Cari kode sbb:
    <b:skin><![CDATA[
    ...
    ...
    ...
    ]]></b:skin>
  2. Yang ditandai kuning <b:skin><![CDATA[ ganti dengan:
    &lt;style type=&quot;text/css&quot;&gt;
    &lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
    <style type='text/css'>
  3. Yang ditandai biru ]]></b:skin> ganti dengan:
    </style>
  4. Simpan template.
4. Cara Melihat Hasilnya
  1. Cek lagi source code blog dan perhatikan. Kode dari Javascript, CSS, dan Widget bawaan Blogger berubah menjadi warna hijau. Artinya hanya dianggap sebagai HTML comment tag dan nggak bakal dieksekusi sebagai script.
  2. Lakukan page speed test. Entah itu di GTMetrix, Page Speed Insight, Think With Google, Pingdom, dan lain sebagainya. Bandingkan nilai sebelum dan sesudah mempraktekan tutorial ini. Dijamin deh nilainya bakal naik. Maka proses sembunyikan Javascript, CSS, dan Widget Bawaan Blogger ini sukses.

B. Efek Samping

Tampilan layout / tata letak bakal keliatan flat. Nggak bakal ngebentuk kaya aslinya. Biar gampang, dijelasin pake gambar aja.

Cara Menyembunyikan JS, CSS, dan Widget Bawaan Blogspot

SEBELUM. Posisi dan tampilan layout / tata letak sama dengan tampilan blog ketika live.

Mempercepat Loading Blog dengan Menyembunyikan Script Bawaan Blogger

SESUDAH. Semua akan berubah menjadi memanjang kebawah tapi nggak menghilangkan nama dari setiap id widget. Masih sangat mudah dibaca.

Buat saya pribadi sih bener-bener bukan masalah. Toh layout asli ketika blog diakses nggak berubah sama sekali. Yang penting disana masih ada nama dari setiap id widget. Jadi nggak bakal ketuker. Aman kok.

C. Solusi Untuk Halaman / Widget Contact Form

Biasanya halaman yang mengandung widget contact jadi nggak berfungsi. Ini disebabkan karena menyembunyikan widget bundle Blogger tadi. Kamu bisa pake widget contact ala Igniel yang udah pasti work.

  1. Tambahkan CSS berikut ke pengaturan HTML.
    /* Contact Form */
    #comments,.post_meta,#blog-pager{display:none}form{color:#666}#kontak{margin:auto;max-width:640px}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid #2f303f;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid #2f303f;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}#ContactForm1_contact-form-submit{float:left;background:#008c5f;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}#ContactForm1_contact-form-submit:hover{background:#2f303f;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#2f303f;border:none;box-shadow:none;color:#fff;padding:5px 0}.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}img.contact-form-cross{line-height:40px;margin-left:5px}.post-body input{width:initial} @media only screen and (max-width:640px){#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%}}
  2. Buat satu page / halaman baru. Kalau udah ada tinggal edit aja.
  3. Paste semua kode dibawah ke halaman tersebut.
    <form id="kontak" name="contact-form"><input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" /><input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="" /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Send Message"/>
    <div style="max-width: 222px; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"></div> <div id="ContactForm1_contact-form-success-message"></div> </div> </form>
    
    <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript">//<![CDATA[
    if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'ID_BLOG_DISINI';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3dID_BLOG_DISINI','//www.igniel.com/','ID_BLOG_DISINI');
    _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'ID_BLOG_DISINI', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));//]]> </script>

    ID_BLOG_DISINI ganti dengan ID blog kamu.
    www.igniel.com ganti dengan alamat blog kamu.

  4. Lalu publish halamannya.

Cara 3 : Pasang Script Lazy Load Untuk Gambar

Salah satu masalah umum yang kerap ditemui oleh pengguna Blogger adalah sulitnya

mengatur expires header (browser caching)

. Bukan sulit lagi, tapi emang nggak bisa. Berhubung Blogger itu produk Google, jadi status kita cuma nebeng dan nggak bisa mengaturnya sendiri.

Penejelasan Singkat Tentang Cache

Ketika pengungjung pertama kali membuka blog kamu, browser akan melakukan beberapa permintaan untuk men-download semua konten dari blog. Idealnya, semua file tadi disimpan di dalam cache browser si pengunjung. Agar ketika dia kembali mengunjungi blog kamu, semua file bisa langsung diambil dari cache browser. Ini jelas akan meringankan loading blog, karena browser nggak perlu terus-terusan request file-nya ke server. Seberapa lamanya cache tersebut disimpan di browser bisa kamu atur sendiri. Beberapa jenis file yang perlu diatur cache-nya antara lain:

  1. Gambar: jpg, gif, png
  2. Favicon/ico
  3. Javascript
  4. CSS

Itu idealnya ya. Dan itu hanya bisa dilakukan di blog atau website yang memiliki hosting sendiri (self-hosted).

Karena ini Blogger, kamu NGGAK BISA atur expires header tersebut untuk mengontrol cache browser. Maka setiap kali pengunjung membuka blog kamu, browser akan langsung men-download ulang semua file langsung dari server. Maka waktu tempuh yang diperlukan untuk menampilkan halaman blog menjadi lebih lama. Salah satu faktor yang membuat score YSlow di GTmetrix nggak bisa dapet A (100%) kebanyakan ya karena masalah expires header ini.

But no worries. Kamu bisa pake script lazy load image untuk Blogger untuk mengatasi masalah expires header. Efek lainnya, page speed jadi meningkat dan loading blog jadi lebih cepat. Yuk langsung aja ke scriptnya.

Apa Itu Plugin Lazy Load?

Sebuah script yang akan menunda pemanggilan file sebelum dilakukannya aktifitas tertentu. Untuk script Lazy Load Gambar Blogger di artikel ini, pemanggilan file akan ditunda sebelum adanya aktifitas scroll halaman.

Cara Memasang Script Lazy Load di Blogspot

    1. Masuk ke menu Theme, lalu pilih Edit HTML.
    2. Cari kode tag HTML image <img> yang merupakan kode dari thumbnail blog. Di setiap template pasti berbeda, jadi saya contohkan kode thumbnail dari template saya. Buat kamu, cari sendiri ya kodenya. Pasti mirip-mirip.
      <img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 225, "225:170")'/>
    1. Udah ketemu?

      – Tambahkan

      class='lazy'

      pada tag image-nya.

      – Ubah

      expr:src

      menjadi

      expr:data-src

      .

      – Tambahkan

      src

      dan value-nya diisi dengan

      data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

      .

      Sehingga hasil akhirnya menjadi seperti ini:

      <img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 225, "225:170")' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    1. Ini dia bagian utamanya, yaitu script Lazy Load Gambar untuk Blogger. Simpan kode ini SEBELUM / DIATAS </body>.
      <script type='text/javascript'>//<![CDATA[
      function ignielLazyLoad(){eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('u B(){Y(v e=o.1r("B"),t=0;t<e.1q;t++)Q(e[t])&&(e[t].N=e[t].1p("1n-N"))}u Q(e){v t=e.1t();Z t.1x>=0&&t.1w>=0&&t.1v<=(y.1u||o.T.1m)&&t.1k<=(y.1c||o.T.1b)}v b=["\\r\\m\\m\\D\\G\\a\\f\\c\\M\\n\\p\\c\\a\\f\\a\\k","\\h\\f","\\r\\c\\c\\r\\l\\A\\D\\G\\a\\f\\c","\\g\\h\\r\\m","\\p\\l\\k\\h\\g\\g","\\V\\1a\\1e\\R\\h\\f\\c\\a\\f\\c\\M\\h\\r\\m\\a\\m","\\w\\p\\a\\1l\\p\\c\\k\\n\\l\\c","\\r","\\1f\\w\\a\\k\\L\\1j\\a\\g\\a\\l\\c\\h\\k\\W\\g\\g","\\g\\a\\f\\q\\c\\A","\\w\\p\\a\\k\\W\\q\\a\\f\\c","\\c\\a\\p\\c","\\m\\h\\l\\w\\F\\a\\f\\c\\D\\g\\a\\F\\a\\f\\c","\\1i\\h\\m\\L","\\l\\g\\n\\l\\1g","\\p\\l\\k\\h\\g\\g\\1h\\h\\J","\\c\\h\\J","\\q\\a\\c\\S\\h\\w\\f\\m\\n\\f\\q\\R\\g\\n\\a\\f\\c\\1z\\a\\l\\c","\\A\\k\\a\\X","\\a\\1y\\a\\l","\\q\\a\\c\\D\\g\\a\\F\\a\\f\\c\\S\\L\\1F\\m","\\p\\l\\k\\h\\g\\g\\U\\a\\n\\q\\A\\c","\\n\\f\\f\\a\\k\\U\\a\\n\\q\\A\\c","\\J\\k\\a\\G\\a\\f\\c\\V\\a\\X\\r\\w\\g\\c","\\n\\c\\a\\F"];u I(d,j){y[b[0]]?y[b[0]](d,j):y[b[2]](b[1]+d,j)}I(b[3],B),I(b[4],B),o[b[0]](b[5],u(){b[6];Y(v d=o[b[8]](b[7]),j=d[b[9]],s=/1D|1B/i[b[11]](1G[b[10]])?o[b[12]]:o[b[13]],C=u(d,j,s,C){Z(d/=C/2)<1?s/2*d*d*d+j:s/2*((d-=2)*d*d+2)+j};j--;){d[b[1C]](j)[b[0]](b[14],u(d){v j,E=s[b[15]],x=o[b[1A]](/[^#]+$/[b[19]](1H[b[18]])[0])[b[17]]()[b[16]],z=s[b[1d]]-y[b[1s]],O=z>E+x?x:z-E,K=1o,H=u(d){j=j||d;v x=d-j,z=C(x,E,O,K);s[b[15]]=z,K>x&&P(H)};P(H),d[b[1E]]()})}});',62,106,'||||||||||x65|_0x1b5d|x74|_0xdd48x2||x6E|x6C|x6F||_0xdd48x3|x72|x63|x64|x69|document|x73|x67|x61|_0xdd48x4||function|var|x75|_0xdd48x7|window|_0xdd48x8|x68|lazy|_0xdd48x5|x45|_0xdd48x6|x6D|x76|_0xdd48xb|registerListener|x70|_0xdd48xa|x79|x4C|src|_0xdd48x9|requestAnimationFrame|isInViewport|x43|x42|documentElement|x48|x44|x41|x66|for|return|||||||||||x4F|clientWidth|innerWidth|21|x4D|x71|x6B|x54|x62|x53|left|x20|clientHeight|data|900|getAttribute|length|getElementsByClassName|22|getBoundingClientRect|innerHeight|top|right|bottom|x78|x52|20|trident|24|firefox|23|x49|navigator|this'.split('|'),0,{}));} eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('j 4=["\\7\\9\\9\\e\\d\\a\\b\\8\\i\\g\\h\\8\\a\\b\\a\\k","\\f\\c\\7\\9","\\7\\8\\8\\7\\m\\l\\e\\d\\a\\b\\8","\\c\\b\\f\\c\\7\\9"];5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;',23,23,'||||_0xdfb4|window|ignielLazyLoad|x61|x74|x64|x65|x6E|x6F|x76|x45|x6C|x69|x73|x4C|var|x72|x68|x63'.split('|'),0,{}));
      //]]></script>
  1. Setelah selesai, klik tombol Save theme.

Nggak melulu harus gambar thumbnail aja. Di bagian lain pun, selama itu kode tag image <img>, bisa ditambahkan kok.

Cek lagi nilai page speed kamu di GTmetrix dan periksa di bagian YSlow. Semoga masalah di bagian Add Expires header bisa teratasi dengan

plugin Lazy Load Blogspot

ini.

Kok Gambarnya Jadi Blank Kalau di GTmetrix?

Iya, emang kaya gitu. Seperti yang udah dijelasin diatas, pemanggilan gambar ditunda sebelum ada aktifitas scroll. Berhubung GTmetrix nggak melakukan aktifitas scroll ketika pengecekan halaman, maka gambarnya masih blank.

Kok Nilai YSlow di Bagian Add Expires header-nya Masih Belum Dapat A?

Ayo…cek lagi masalah disana apa. Dan inget lagi ini artikel soal apa.

Ini

script Lazy Load untuk gambar

, bukan untuk lainnya. Jadi masalah yang muncul disana hanya tersisa soal Javascript, CSS, font, dsb. KECUALI SOAL GAMBAR, karena gambar sudah teratasi oleh script diatas.

Memasang Script Lazy Load Image di Blogspot

Dicek lagi, link yang menyebabkan masalah expires header diatas BUKAN link gambar, kan? Karena masalah gambar sudah teratasi.

Cara 4 : Kompres Ukuran KB Gambar Menjadi Lebih Kecil

Salah satu elemen yang membuat artikel terlihat lebih menarik adalah gambar. Faktanya, orang akan lebih tertarik jika ada tambahan visual dalam hal apapun, termasuk dalam artikel blog. Jujur, lama-lama saya suka agak bosen kalau nemu artikel yang isinya tulisan doang. Kalau pendek sih nggak masalah. Tapi kalau panjangggg banget, duh, agak tandus aja gitu. Makanya saya selalu berusaha menambahkan gambar ke semua artikel di blog Igniel meskipun cuma satu. Itu saya doang lho ya. Kalau kamu betah baca tulisan panjang tanpa gambar, berarti minat baca kamu lebih baik dari saya.

Tapi dengan adanya gambar ini, muncul satu masalah yang sering dihadapi oleh penguna platform Blogger. Terlalu banyak gambar membuat loading blog kurang cepat. Apalagi kalau di dalam artikel ada lebih dari 5 gambar. Trus gimana dong cara mempercepat loading blog meskipun ada banyak gambar?

Solusinya, kamu bisa kompres gambar tersebut. Kompres disini maksudnya memperkecil ukuran KB gambar tanpa mengurangi kualias kejernihannya. Ini bisa banget mempercepat loading blog karena memperkecil ukuran keseluruhan halaman yang dimuat.

Cara Kompres Ukuran Gambar Atau Foto

Kamu bisa melakukannya dengan 2 cara: otomatis dan manual. Untuk otomatis, tinggal pergi ke situs-situs penyedia jasa kompres gambar yang gratis. Untuk manual, pakai software edit gambar di komputer.

1. Cara Otomatis: Kompres Gambar Online

Beberapa situs yang menyediakan jasa mengurangi size KB gambar yang bisa kamu coba antara lain:

  1. Compress JPEG
  2. Compress PNG
  3. TinyJPG
  4. Compressor.io
  5. ImageSmaller
  6. JPEG Optimizer

Dan lainnya bisa kamu cari sendiri. Banyak kok.

2. Cara Manual: Kompres Gambar Dengan Software

Ini cara yang selalu saya pakai. Yes, saya suka manual dengan segala keribetannya. Dan saya selalu pakai satu aplikasi yang sama: Adobe Photoshop CS6.

Kamu mau coba? Yuk ikuti langkah-langkahnya.

    1. Buka Adobe Photoshop. Versi berapapun bisa kok. Tapi di screenshot ini kebetulan saya pakai versi CS6.
    2. Buka gambar yang mau dikompres. Ada beberapa cara untuk membuka file di Adobe Photoshop. Diantaranya:
      1. Dengan cara drag and drop (tarik gambar dari folder ke workspace Photoshop).
      2. Atau dengan menekan secara bersamaan CTRL + O pada keyboard.
      3. Bisa juga dengan membuka menu File » Open
        Kompres Gambar Pakai Adobe Photoshop
    3. Setelah gambar terbuka, mulai kompres dengan cara menyimpan ulang gambarnya melalui fitur Save for Web. Bisa dilakukan dengan 2 cara, yaitu:
        1. Menekan secara bersamaan Alt + Shift + CTRL + S pada keyboard.
        2. Bisa juga dengan membuka menu File » Save for Web

      Memperkecil Ukuran Gambar Dengan Adobe Photoshop
    4. Akan muncul sebuah jendela baru. Kamu bisa atur kualitasnya disini. Sebagai contoh, ikuti panduan pada gambar berikut (klik untuk melihat ukuran sebenarnya, biar nggak kekecilan liatnya).
      Memperkecil Size Gambar Tetap Jernih Menggunakan Adobe Photoshop

      Keterangan gambar:

      1. Nomor 1
        Ekstensi gambar yang akan dilipih. Ada JPEG, GIF, dan PNG. Saya biasa pilih JPEG.
      2. Nomor 2
        Kualitas gambar. Pilihannya ada Low, Medium, High, Very High, Maximum. Nah, disini poin yang cukup penting. Semakin rendah tingkatannya, maka ukuran KB gambar akan semain kecil. Tapi imbasnya kejernihan gambar pun akan berkurang. Saya biasa pilih Medium, biar kualitasnya di tengah-tengah.
      3. Nomor 3
        Ukuran resolusi gambar. Kamu bisa perbesar atau perkecil ukuran pixelnya. Bagusnya sih biarkan apa adanya sesuai aslinya.
      4. Nomor 4
        Info perkiraan ukuran KB gambar ketika disimpan nanti.
  1. Jika selesai, klik tombol Save…

Setelah cara diatas dilakukan, bandingkan ukuran gambar sebelum dan sesudahnya. Pasti akan terdapat perbedaan yang lumayan. Ini salah satu cara efektif yang bisa membantu

mempercepat loading blog. Asal kompresnya jangan kebangetan aja sampai kualitasnya menurun dan gambarnya jadi burem banget.

Sumber :

https://www.igniel.com/2017/09/cara-pasang-icon-svg.html

https://www.igniel.com/2017/09/hapus-js-css-widget-bawaan-blogger.html

https://www.igniel.com/2017/10/pasang-lazy-load-blog.html

https://www.igniel.com/2017/12/cara-kompres-gambar.html

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.