Optimasi Blog Agar Fast Loading

Bang Jonie ~ 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.

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.

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

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.
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.
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 :
```

<script src="URL_JAVASCRIPT">

<script src="URL_JAVASCRIPT" async>

<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>
```

Selamat mencoba!

Lihat juga
Ukuran Iklan Adsense Pengeruk Dollar

Blog Tips-123

Optimasi Blog Agar Fast Loading

Cek kecepatan loading blog Anda

Aktifkan Gzip compression

Memperkecil CSS, HTML dan Javascript

Optimasi gambar pada setiap halaman

Mengatasi Render Blocking JavaScript

Metode JavaScript Asingkron dengan HTML5

Metode JavaScript Asingkron dengan JQuery

Unknown

0 comments:

Post a Comment

Optimasi Blog Agar Fast Loading

Cek kecepatan loading blog Anda

Aktifkan Gzip compression

Memperkecil CSS, HTML dan Javascript

Optimasi gambar pada setiap halaman

Mengatasi Render Blocking JavaScript

Metode JavaScript Asingkron dengan HTML5

Metode JavaScript Asingkron dengan JQuery

Unknown

RELATED POSTS

0 comments:

Post a Comment