Optimasi Web Agar Fast Loading

Salah satu sebab pengunjung meninggalkan laman web Anda begitu saja adalah jika loading web Anda membutuhkan waktu lama hanya untuk memuat sebuah halaman. Laporan hasil survey yang 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, yang akhirnya akan berefek pada posisi peringkat di mesin pencari.

Oleh karenanya merombak secara total situs web yang lambat adalah solusi terbaik jika Anda ingin agar pengguna situs web Anda tetap ada dan performanya bertambah baik di pengunjung dan tentunya akan berefek baik juga di mata Mesin Pencari.

Ada banyak cara optimasi web dapat dilakukan untuk mempercepat loading situs web Anda, namun tidak semua cara tersebut efektif.
Berikut dipaparkan tahapan-tahapan optimasi blog agar loading web menjadi cepat dan SEO Friendly.

• Cek seberapa cepat loading web Anda

  Sebagai perbandingan sebelum dan sesudah optimasi sebaiknya cek dahulu kecepatan web Anda di free tool that analyzes your page's speed performance
  Sebagai pembanding Anda dapat menggunakan situ PageSpeed Insights dari Google. Tool dari Google ini menyediakan fitur berupa saran perbaikan yang harus Anda lakukan untuk mengoptimasi web Anda.
  

• Aktifkan Gzip compression
  

  Gzip Compression berfungsi untuk mengurangi ukuran situs anda sampai dengan 70%. Menurut data dari checkgzipcompression.com, dari 9.268 situs yang di cek, 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 web Anda akan bertambah cepat karena Gzip hanya membutuhkan waktu beberapa milisecon untuk memproses sebuah laman web.
  
  Untuk mengetahui apakah Gzip Compression sudah aktif di web Anda atau belum dapat di cek di checkgzipcompression.com
  
  Jika Anda pengguna server web yang mendukung .htaccess seperti Apache anda dapat mengaktifkan Gzip Compression dengan cara di bawah ini. Namun jika Anda pengguna Blogger dapat melewati step ini karena Gzip Compression sudah aktif.
  

  # ------------------------------------------------------------------------------
  # | 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 yang 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 Anda pada kolom yang disediakan lalu klik Compress. Demikian juga dengan kode-kode HTML.
  
  Untuk lebih jelas tentang kompresi dapat Anda 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 Anda hingga 25%.

  
  Untuk kompresi kode-kode javascript dapat Anda lakukan di Javscript Compressor. Cara penggunaannya juga sama dengan kompresi CSS di atas.
  
  Berikut informasi situs penyedia tool minify/kompresi:
  
  1. HTML Minifier
     Untuk kompresi file HTML yang memiliki JavaScript dan CSS, dapat menggunakan tool HTML Minifier
     
  2. Minify your CSS
     Untuk kompresi file CSS, dapat menggunakan tool Minify your CSS
     
  3. Online Javascript Compression Tool
     Untuk kompresi file Javascript dapat menggunakan tool Online Javascript Compression Tool
     
  
  

  Sebaiknya simpan script web Anda sebagai Master untuk keperluan pengembangan sebelum melakukan kompresi.

• Optimasi gambar pada setiap halaman web

  Salah satu element penting pendukung sebuah halaman web adalah gambar, mulai dari desain web itu sendiri, ilustrasi artikel hingga gambar-gambar pendukung artikel itu sendiri. Tanpa menggunakan gambar sebuah web cenderung kelihatan membosankan, namun demikian jika Anda salah dalam memilih ukuran dan jenis file gambar, maka gambar dapat menjadi faktor utama penyebab suatu situs web menjadi lambat.
  
  Oleh sebab itu dibutuhkan cara-cara untuk mengoptimasi gambar-gambar yang terdapat dalam setiap halaman web. Ada tiga cara mengoptimasi gambar, sebagai berikut;
  
  1. Memilih jenis file gambar yang tepat
     Menentukan jenis atau type gambar yang tepat merupakan unsur penting untuk kecepatan loading situs web Anda. Pemilihan type gambar yang salah akan menyebabkan loading halaman web Anda menjadi lambat. Anda dapat menggunakan Photoshop untuk mengoptimasi file gambar agar gambar memiliki ukuran yang lebih kecil dengan konsumsi bandwidth internet yang minim namun masih memiliki kualitas yang tinggi. Disarankan menggunakan gambar dengan type PNG, karena jenis file ini memliki ukuran yang minim.
     
  2. Merubah ukuran gambar sesuai kebutuhan web
     Jika halaman web Anda butuh gambar dengan ukuran 300x300 pixels jangan jangan menggunakan gambar dengan ukuran 600x600 lalu diskalakan dengan atribut HTML width dan height. Akan lebih baik merubah resolusi gambar tersebut dengan ukuran yang seusai dengan kebutuhan.
     
  3. Optimasi pixel gambar dengan tool tertentu
     Ada beberpa situs yang menyediakan tool merubah pixel gambar untuk kebutuhan penggunaan pada web, salah satunya kraken.io. Anda masih meungkin mengoptimasi lagi gambar yang telah dioptimasi dengan cara diatas, shingga file yang dihasilkan akan lebih kecil namun masih dengan kualitas yang baik.
     

• Mengatasi Render Blocking JavaScript

  Untuk menambah speed loading pada web blog ini saya biasa meletakkan file javascript yang diinclude ke dalam blog di baris paling bawah di atas tag </body> misalnya file jquery.js, walau tidak banyak membantu namun terbukti metode ini dapat mendongkrak sedikit kecepatan loading situs web blog ini walau tetap saja membebani situs.
  
  Untuk mengatasi masalah ini saya menggunakan metode yang saya kutip dari situs webmastermsm.com. Menurut situs webmastermsm.com, ini 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 dengan menambahkan atribut async pada elemen <script>, pada beberapa CMS yang 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 berbedia dengan metode di atas yaitu untuk memuat JavaScript secara asingkron, yang 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!