5 Cara Mempercepat Loading Blog

Salah satu sebab pengunjung meninggalkan laman blog begitu saja adalah jika proses loadingnya membutuhkan waktu lebih lama hanya untuk memuat sebuah halaman. Laporan hasil survey diterbitkan oleh Kissmetricks menyebutkan, 40% pengguna internet meninggalkan sebuah situs yang loadingnya lebih dari 3 detik.

Dampaknya adalah rasio pentalan akan meningkat atau dalam istilah SEO disebut bounce rate, akhirnya akan berefek pada posisi peringkat di mesin pencari.

Oleh karenanya merombak secara total adalah solusi terbaik jika ingin agar pengunjung situs tetap ada dan performanya bertambah baik dan tentunya akan berakibat baik juga di mata Mesin Pencari.

Ada banyak cara optimasi blog atau web dapat dilakukan agar loading lebih cepat, namun tidak semua cara tersebut efektif.

Berikut beberapa cara optimasi blog agar fast loading dan SEO Friendly.

#1. Cek kecepatan loading blog Anda

Sebagai perbandingan sebelum dan sesudah optimasi sebaiknya cek dahulu kecepatan situs Anda di free tool that analyzes your page's speed performance

Sebagai pembanding dapat menggunakan situ PageSpeed Insights dari Google. Tool SEO gratis dari Google ini menyediakan fitur berupa saran perbaikan yang harus dilakukan agar kinerja situs lebih cepat.

#2. Aktifkan Gzip compression 

Gzip Compression berfungsi mengurangi ukuran situs hingga 70%. Menurut data dari checkgzipcompression.com, dari 9.268 situs, hanya 85,4% situs sudah menggunakan GZip dan rata-rata ukurannya berkurang 50%.

Secara work flow proses Gzip Compression lebih banyak namun tidak akan mengurangi kecepatan situs malah sebaliknya situs akan bertambah cepat karena Gzip hanya membutuhkan waktu beberapa milisecon untuk memproses sebuah laman blog.

Jika ingin mengetahui apakah Gzip Compression sudah aktif atau belum buka checkgzipcompression.com

Jika menggunakan hosting dengan server yang mendukung .htaccess seperti Apache, Anda dapat mengaktifkan Gzip Compression dengan cara di bawah ini. Namun jika menggunakan platform Blogger silakan lewati langkah ini karena Gzip Compression sudah aktif di blogger

# ------------------------------------------------------------------------------
# | Compression                                                                |
# ------------------------------------------------------------------------------

<IfModule mod_deflate.c>

    # Force compression for mangled headers.
    # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html

    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        </IfModule>
    </IfModule>

    # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    # Map certain file types to the specified encoding type in order to
    # make Apache serve them with the appropriate `Content-Encoding` HTTP
    # response header (this will NOT make Apache compress them!).

    # If the following file types wouldn't be served without the appropriate
    # `Content-Enable` HTTP response header, client applications (e.g.:
    # browsers) wouldn't know that they first need to uncompress the response,
    # and thus, wouldn't be able to understand the content.

    # http://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding

    <IfModule mod_mime.c>
        AddEncoding gzip              svgz
    </IfModule>

    # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    # Compress all output labeled with one of the following media types.

    # IMPORTANT: For Apache versions below 2.3.7 you don't need to enable
    # `mod_filter` and can remove the `<IfModule mod_filter.c>` & `</IfModule>`
    # lines as `AddOutputFilterByType` is still in the core directives.

    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE "application/atom+xml" \
                                      "application/javascript" \
                                      "application/json" \
                                      "application/ld+json" \
                                      "application/manifest+json" \
                                      "application/rdf+xml" \
                                      "application/rss+xml" \
                                      "application/schema+json" \
                                      "application/vnd.geo+json" \
                                      "application/vnd.ms-fontobject" \
                                      "application/x-font-ttf" \
                                      "application/x-web-app-manifest+json" \
                                      "application/xhtml+xml" \
                                      "application/xml" \
                                      "font/opentype" \
                                      "image/svg+xml" \
                                      "image/x-icon" \
                                      "text/cache-manifest" \
                                      "text/css" \
                                      "text/html" \
                                      "text/javascript" \
                                      "text/plain" \
                                      "text/vtt" \
                                      "text/x-component" \
                                      "text/xml"
    </IfModule>

</IfModule>

Sumber .htaccess HTML5 Boilerplate

#3. Memperkecil CSS, HTML dan Javascript

Maksimalkan file css dengan menghapus bagian-bagian tidak dibutuhkan seperti space, komentar, dan baris-baris kosong kemudian Minify dengan mengkompress script CSS. Anda dapat menggunakan toolnya di Tool HTML Compressor. Cara penggunaannya copy dan paste seluruh kode CSS pada kolom Drag A File or Paste Code lalu klik Compress. Demikian juga kode-kode HTML.

Lebih jelasnya tentang kompresi perhatikan kode berikut:

Ini kode CSS sebelum kompresi

html   {
   font: Arial;
   background: #FFF;
   color: #333;
}
/* elemen body */
body   {
   padding: 5rem;
   margin: 10px;
}

Ini kode CSS sesudah kompresi

html{font:Arial;background:#FFF;color:#333}body{padding:5rem;margin:10px;}

Kompresi file CSS dapat mengurangi file hingga 25%.

Kompresi kode-kode javascript dapat dilakukan dengan menggunakan Javscript Compressor. Cara penggunaannya juga sama dengan kompresi CSS di atas.

Berikut informasi situs penyedia tool minify/kompresi:

1. HTML Minifier
   Kompresi file HTML yang mengandung JavaScript dan CSS, dapat menggunakan tool HTML Minifier
2. Minify your CSS
   Kompresi file CSS, dapat menggunakan tool Minify your CSS
3. Online Javascript Compression Tool
   Kompresi file Javascript dapat menggunakan tool Online Javascript Compression Tool

Sebaiknya backup dahulu script blog Anda untuk keperluan pengembangan selanjutnya sebelum melakukan kompresi.

#4. Optimasi gambar pada setiap halaman

Salah satu element penting pendukung sebuah blog adalah gambar, mulai dari desain, ilustrasi artikel hingga gambar pendukung artikel itu sendiri. Tanpa menggunakan gambar blog cenderung kelihatan membosankan, namun demikian jika salah dalam memilih ukuran dan jenis file, maka gambar dapat menjadi faktor utama penyebab loading blog menjadi lambat. 

Oleh sebab itu dibutuhkan cara optimasi blog yang tepat agar gambar yang terdapat dalam setiap halaman lebih maksimal. Ada tiga cara optimasi blog pada gambar dapat dilakukan, sebagai berikut;

1. Memilih jenis file gambar yang tepat
   Menentukan jenis atau type gambar dengan tepat merupakan unsur penting kecepatan loading situs Anda. Pemilihan type gambar yang salah akan menyebabkan loading halaman menjadi lambat. Anda dapat menggunakan Photoshop untuk optimasi file gambar agar memiliki ukuran lebih kecil dengan konsumsi bandwidth internet minimum namun masih memiliki kualitas tinggi. Disarankan menggunakan type PNG, karena jenis file ini memliki ukuran kecil.
2. Merubah ukuran gambar sesuai kebutuhan
   Jika halaman butuh gambar berukuran 300x300px jangan jangan menggunakan gambar berukuran 600x600 lalu diskalakan menggunakan atribut HTML width dan height. Akan lebih baik merubah resolusi file sesuai kebutuhan
3. Optimasi pixel gambar dengan tool tertentu
   Ada beberapa situs penyedia tool untuk merubah pixel gambar untuk kebutuhan penggunaan pada blog, salah satunya kraken.io. Anda masih mungkin meminimalkan lagi ukuran pixe yang telah dioptimasi dengan cara diatas, sehingga menghasilkan jumlah pixel lebih sedikit namun masih memiliki kualitas cukup baik.

#5. Mengatasi Render Blocking JavaScript

Agar loading blog ini lebih cepat saya biasa meletakkan file javascript eksternal di baris paling bawah di atas tag </body> misalnya file jquery.js, walau tidak banyak membantu namun terbukti metode ini dapat mendongkrak kecepatan loading  walau tetap saja membebani situs. 

Mengatasi masalah tersebut saya menggunakan metode yang saya kutip dari situs webmastermsm.com. Menurut situs webmastermsm.com, merupakan satu-satunya cara mengatasi masalah render blocking javascript ini yaitu memuatnya secara asynchronous atau dalam bahasa Indonesia disebut asingkron setelah memindahkannya ke atas tag </body>. Metodenya ada 2 sebagai berikut:

1. Metode JavaScript Asingkron dengan HTML5

   Yaitu menambahkan atribut async pada elemen <script>, pada beberapa CMS mengharuskan setiap atribut HTML memerlukan nilai, maka gunakan async="async". Contoh :
   

   <!-- Sebelum -->
   <script src="URL_JAVASCRIPT">
   <!-- Sesudah -->
   <script src="URL_JAVASCRIPT" async>
   <!-- atau -->
   <script src="URL_JAVASCRIPT" async="async">

2. Metode JavaScript Asingkron dengan JQuery

   Sintaks yang digunakan dalam metode ini berbeda dengan metode di atas yaitu untuk memuat JavaScript secara asingkron, letaknya juga harus di atas </body> :
   

   <script>$undefinedwindow).bindundefined"load",functionundefined){
   $.getScriptundefined"URL_JAVASCRIPT");
   /* Jika lebih dari satu, tambahkan lagi $.getScriptundefined"URL_JAVASCRIPT"); sebelum }); */
   });
   </script>

Mengatasi Loading Blog Lambat Karena Kode Iklan Google Adsense

Google Adsense sudah dikenal luas sebagai salah satu cara mendapatkan uang dari internet. Tidak dapat dipungkiri banyak blogger sudah merasakan manisnya pendapatan dari Google Adsense melalui iklan yang dipasang di halaman blog mereka. Namun untuk mendapatkan penghasilan tinggi dari Adsense tidaklah mudah, dibutuhkan metode-metode tertentu dan salah satu hal yang patut mendapat perhatian adalah cara pasang iklan di blog dengan benar agar tidak menyebabkan kinerja blog Anda menurun.

Google Adsense membolehkan kita memasang 3 unit banner, dan 2 unit search box untuk menampilkan iklan di halaman blog.

Masalahnya jika memasang iklan sebanyak tiga unit sekaligus plus 1 unit link dan 1 buah search box pada satu halaman, ini akan mengakibatkan menurunnya kecepatan loading halaman blog Anda.

Sebaliknya jika memasang iklan di blog hanya satu atau dua unit banner saja akibatnya penghasilan dari adsense pun menurun.

Mungkin Anda pernah melihat beberapa blog yang memasang banner adsense 4 bahkan sampai dengan 5 banner sekaligus, namun loadingnya tetap cepat.

Lalu bagaimana cara pasang iklan di blog agar loading tetap cepat tanpa harus mengurangi jumlah banner iklan Adsense Anda?

Sebelum menjawab pertanyaan tersebut sebaiknya kita memahami lebih dahulu cara iklan Goolge Adsense di muat ke suatu halaman blog atau website.

Cara Iklan Google Adsense dimuat ke halaman blog.

Ketika sebuah iklan adsense dimuat ke halaman, maka ada sebuah file javascript yang merupakan bagian dari iklan Google Adsense juga ikut dimuat.

Itu artinya jika Anda memasang 3 buah iklan ke dalam halaman blog sekaligus, maka 3 buah file javascript tadi juga ikut dimuat.

Sebagai catatan semakin banyak file javascript yang dipasang maka semakin banyak waktu loading yang dibutuhkan. Hasilnya blog yang memiliki banyak unit iklan loadingnya pun menjadi lambat.

Google telah memperkenalkan cara pasang iklan di blog dengan metode asyncrhonous untuk mempercepat loading iklan adsense. Namun tetap saja memasang iklan lebih dari satu unit akan berakibat kepada menurunnya kecepatan loading halaman sebuah blog.

Namun ada beberapa cara memasang iklan di blog agar loading bertambah cepat walau dengan memasang iklan hingga beberapa unit sekaligus. Trik ini akan mempercepat loading blog hingga 80 persen lebih.

Mari kita lihat contoh script banner iklan adsense bawaan Google berikut:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!—Ad Title -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Anda mungkin melihat sebuah file javascript yang diload menggunakan metode asynchronous pada bagian atas script iklan adsense di atas.

File javascript ini akan dimuat setiap kali setelah template blogspot dimuat. Dan jika memasang 3 unit iklan di blog sekaligus dalam sekali load maka 3 file tersebut juga akan ikut dimuat.

Sebenarnya file javascript tersebut cukup dipasang 1 kali saja untuk memuat unit-unit iklan adsense yang lain. Jadi jika ingin memasang 4 unit iklan adsense dalam satu halaman blog sekaligus, Anda cukup memanggil file javascript adsense tersebut 1 kali dengan metode asynchronous.   Hasilnya adalah 1 buah file javascript untuk 4 unit iklan adsense.

Berikut cara pasang iklan di blog agar loading bertambah cepat walau memasang beberapa unit iklan sekaligus di halaman blog.

Cara Pasang Iklan Di Blog Agar Loading Bertambah Cepat

Langkah pertama adalah menghapus seluruh kode berikut dari template blogspot Anda.

<script async='' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>

Kemudian ikuti langkah-langkah berikut untuk meletakkan file javasctip ke dalam template blogspot Anda.
1. Log in ke akun Blogger Anda kemudian buka Dasboard Blogger
2. Kini klik Template > Edit HTML
3. Tekan Ctrl+F untuk mencari kode </head>
4. Paste kode berikut di atas </head>

<script async='' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>

5. Klik Save Template untuk menyimpan perubahan

Kini cek loading template blogspot Anda. Saya yakin loadingnya akan bertambah cepat ketimbang sebelumnya.

Penutup

Satu pertanyaan mungkin muncul dalam benak Anda, memindahkan semua file javascript iklan adsense dengan hanya meninggalkan 1 buah file javascript apakah akan berakibat pada earning adsense? Jangan-jangan nanti yang dihitung malah satu unit iklan adsense.

Memasang 3 unit iklan dalam satu halaman blog sekaligus tidak akan mempengaruhi perhitungan klik. Blog ini memasang beberapa unit iklan sekaligus namun kecepatan loadingnya tetap stabil dan tidak menurun, dari keseluruhan unit iklan adsense yang terpasang dan semua klik pada setiap iklan semuanya tetap terhitung.

Demikian sedikit tips tentang cara pasang iklan diblog agar loading bertambah cepat, selanjutnya silahkan Anda yang menambahkan.

Lihat juga Memasang Iklan Mengambang Di Sisi Kiri Atau Kanan Blog