Optimasi Loading Website Sampai Dengan 50% Lebih Cepat

Optimasi Loading Website Sampai Dengan 50% Lebih Cepat

Sebuah website atau blog dengan konten yang selalu update tiap hari, apalagi jika di website tersebut memuat banyak gambar. Hal ini akan membebani terhadap…

Sebuah website atau blog dengan konten yang selalu update tiap hari, apalagi jika di website tersebut memuat banyak gambar. Hal ini akan membebani terhadap dua sisi. Mana saja sisi yang dibebani :

  1. Server
  2. Bandwidth Pengunjung

Biasanya, jika sebuah website atau blog tidak memiliki konten dengan banyak gambar, maka yang memberatkan adalah template dari web tersebut. Fatal sekali bukan? Jika pengunjung Anda menutup halaman web Anda sebelum mereka sempat membaca konten yang Anda miliki!. Untuk ukuran sebuah website yang menjajakan produk untuk tujuan berjualan, hal ini tentu akan mengurangi omset.

Langkah optimasi web adalah sebuah hal yang mutlak dilakukan jika ingin menyenangkan hati pengunjung dan menghemat bandwidth baik server maupun koneksi pengunjung.  Pada tulisan terdahulu penulis pernah membahas salah satu cara optimasi dari website dengan cara expires header dan cache controlAkan saya kutip penjelasan singkatnya untuk memudahkan memahami kembali.

Teknik ini sebenarnya memanfaatkan cache dari browser. Dengan cache browser, kita secara eksplisit menginstruksikan browser untuk mengambil file tertentu dalam jangka waktu tertentu. Ketika file tersebut dibutuhkan lagi, browser akan mengambil file dari cache lokal, bukannya mengambil dari server asli dari web/blog sehingga akan menghemat waktu loading bagi pengunjung web/blog Anda

Kompress Web

zip

Sebenarnya tidak ada ukuran untuk mendapatkan angka penghematan sampai dengan 50% seperti yang Penulis tawarkan pada judul diatas. Namun dengan menggunakan teknik pada tulisan terdahulu dan yang ada pada artikel ini, Anda akan merasakan kecepatan yang signifikan dari sebelumnya.

Layaknya seperti yang kita ketahui bahwa file yang dikompress ukurannya akan lebih kecil daripada sebelumnya. Hal ini juga yang akan kita lakukan pada halaman web kita, karena mengkompresi dapat juga mengurangi ukuran paket HTTP Request atau HTTP Response. Sejak HTTP/1.1, web client sudah mendukung kompresi HTTP Request. Web client mendefinisikan jenis kompresi apa saja yang dapat diterima pada header request-nya.

Berikut cara untuk Mengkompresi halaman web statis. Tambahkan script dibawah ini kedalam file .htaccess Anda.

	<IfModule mod_deflate.c>
  # force deflate for mangled headers
  # developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
  <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>
  # HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
  <IfModule filter_module>
    FilterDeclare   COMPRESS
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/html
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/css
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/plain
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/x-component
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/javascript
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/json
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xhtml+xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/rss+xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/atom+xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/vnd.ms-fontobject
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $image/svg+xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/x-font-ttf
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $font/opentype
    FilterChain     COMPRESS
    FilterProtocol  COMPRESS  DEFLATE change=yes;byteranges=no
  </IfModule>
  <IfModule !mod_filter.c>
    # Legacy versions of Apache
    AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
    AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
    AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
  </IfModule>
  </IfModule>

Jika Anda belum punya file .htaccess di folder publichtml/root folder dari hosting Anda, maka Penulis sarankan untuk membuat nya terlebih dahulu dengan nama .htaccess. Ingat ada titik sebelum tulisan htaccess dan harus disertakan.

Tag: ,

7 Comments

Leave Comment
  1. xface2 says:

    scrip tersebut di taro di templet blog bukan mas ?

    • Saatul Ihsan ihsan says:

      Bukan, tapi di taroh di hostingnya langsung, mohon baca ini “Jika Anda belum punya file .htaccess di folder publichtml/root folder dari hosting Anda, maka Penulis sarankan untuk membuat nya terlebih dahulu dengan nama .htaccess. Ingat ada titik sebelum tulisan htaccess dan harus disertakan.”

  2. TEWEDE says:

    Cara kerjanya sebenarnya ini gimana ya?
    Apa efek dari website yang ada? apakah gambarnya jadi tidak tajam atau gimana?

    • Saatul Ihsan Saatul Ihsan says:

      Efeknya jadi kenceng gitu, karena yang di kompress hanya yang statis. Silahkan lihat dan amati di BisaKomputer.com ini. Apakah gambarnya kurang tajam atau sebagainya? karena BisaKomputer.com memakai teknik yang diatas juga untuk optimisasi

  3. sayfudin says:

    gan ini kok g work to ? gimana solusinya terima kasih

  4. fasapay says:

    bagaimana jika tdk bisa buka root. kebetulan menggunakan wordpress, apakah plugin spt super cache bermanfaat? dan apa ya negatif nya kira2

Write Comment

Your email will not be published. The marked label is required.