Cara Mempercepat Loading Website Blog Lengkap

Trik cara mempercepat loading website blog harus diterapkan pada semua web. Karena semua pasti setuju jika semua pengunjung menyukai web yang cepat saat loading konten-nya. Memang benar jika loading website berhubungan dengan kecepatan internet anda, yang perlu di ketahui bahwa tidak selalu benar jika semakin cepat koneksi anda maka akan semakin cepat loading web.

Mengapa? Karena jika web anda membutuhkan komputasi yang sangat rumit, maka kecepatan koneksi tidak begitu membantu (masalah ada pada server, sehingga membutuhkan waktu agar konten siap di kirim ke klien), apalagi kita ingin agar semua jenis koneksi baik lambat atau cepat akan terlayani dengan baik, maka usaha kita adalah untuk mengoptimalkan kinerja server dalam melakukan komputasi sampai distribusi konten dan berusaha agar konten memiliki ukuran yang sangat kecil.

Jika anda mempunyai web yang memiliki banyak skrip seperti css, javascript dan font yang semuanya memiliki ukuran yang besar, dipastikan akan semakin lama kinerja server dalam komptasi dan distribusi konten. Dalam tutorial ini kita akan membahas secara dasar dan umum, baik untuk wordpress dan blogspot, untuk detail tiap langkah akan disampaikan pada tutorial tersendiri.

Untuk tutorial cara membuat website atau blog silahkan kunjungi ” Cara Membuat Website Terbaru dan Lengkap “.

Manfaat Loading Web atau Blog yang Cepat

Banyak sekali manfaat yang akan kita dapatkan, tidak hanya kepuasan pengunjung yang kita dapatkan, bahkan manfaat ini juga dirasakan bagi para pemilik web yang menggunakan web-nya sebagai ladang mencari uang. Berikut detail manfaat memiliki web dengan kecepatan loading yang tinggi:

1. Meningkatkan ranking SEO (Google ingin yang terbaik)
2. Menigkatkan UX (User Experience), memerikan kesan yang baik bagi pengunjung. Hal ini sangat penting jika pengunjung anda adalah calon pembeli produk.
3. Meringankan beban bandwidth, semakin optimal maka akan mengurangi jumlah distribusi konten.
4. Meringankan bagi pengunjung dengan koneksi lambat.
5. Yang terakhir, anda juga membenci web yang lambat kan? :)

Detail Speed website mempengaruhi UX (User Experience), akan saya kutip dari beberapa website, perhatikan detail sbb:

Dari Aberdeen Group, Penundaan 1 detik pada saat membuka halaman, akan menyebabkan:

• 11% lebih sedikit pengunjung akan kabur
• 16% penurunan kepuasan pengunjung
• Kehilangan sekitar 7% konversi

Amazon mengalami peningkatan pendapatan mulai dari 1% untuk setiap peningkatan kecepatan selama 100 milidetik.

Walmart juga demikian, mengalami peningkatan 2% untuk setiap peningkatan 1 detik.

Sebuah studi dari Akamai menemukan bahwa:

• 47% pengunjung mengharapkan web dengan kecepatan 2 detik.
• 40% akan meninggalkan web dengan kecepatan 3 detik keatas.
• 52% dari pembeli online mengatakan kecepatan web adalah yang membuat mereka tetap setia.

Sudah cukup kan?, oke mari kita langsung membahas langkah tiap langkah cara mempercepat halaman website loading website atau blog.

Agar konten yang disajikan juga SEO, ikuti tutorial ” Cara Membuat Konten Post SEO dan Menarik “.

Langkah-langkah Mempercepat Loading Blog dan Web

Dalam teknik ini akan kita usahakan kecepatan loading kita seoptimal mungkin, perhatikan bahwa kita tidak harus menerapkan semua langkah yang akan dijelaskan, lakukan dengan bijak dan tetap perhatikan arahan tiap langkah.

Langkah akan terbagi dalam Dua kategori yaitu:

1. Server
2. Elemen Konten

Sebelum memulai, silahkan anda backup dulu website atau blog :) .

SERVER

Dalam hal server, anda bisa memulai melakukan optimasi dengan memilih tempat yang bagus dalam hal support dan mudah dalam melakukan optimasi server. Jangan sampai anda terkendala karena peraturan penyedia hosting yang ribet harus ini itu dan dibatasi ini itu. Mari kita mulai melakukan optimasi, dan usahakan ubah web anda ke maintenance mode agar tidak mengganggu para pengunjung.

CACHE BROWSER

Dengan memanfaatkan cache browser, anda dapat memangkas loading untuk file yang sering dimuat seperti CSS, JS dan gambar. Cara kerjanya adalah pada kunjungan pertama browser klien akan meload konten dari server dan akan menyimpan dalam cache browser, dengan menyimpan konten di dalam cache browser maka untuk kunjungan berikutnya maka browser tidak akan meminta konten ke server, melainkan akan meload dalam cache browser.

Caranya adalah sebagai berikut:

• htaccess

Dengan menambahkan pengaturan expires header pada file htaccess, anda dapat mengatur jenis file dan lama waktu cache bertahan. Dalam tutorial ini saya menggunakan contoh pengaturan yang biasa dipakai dan lolos Google PageSpeed.

Kode di bawah memberitahu browser file apa saja yang akan dicache dan berapa lama untuk “ditahan” dalam cache (lokal). Tambahkan ke bagian paling atas pada file .htaccess anda. Atur berapa lama cache bertahan sesuai dengan tingkat update web pada bagian “access 1 year”, hati-hati jangan diatur terlalu lama jika web anda sering melakukan update.

# Leverage Browser Caching
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access 1 year"
  ExpiresByType image/jpeg "access 1 year"
  ExpiresByType image/gif "access 1 year"
  ExpiresByType image/png "access 1 year"
  ExpiresByType text/css "access 1 month"
  ExpiresByType text/html "access 1 month"
  ExpiresByType application/pdf "access 1 month"
  ExpiresByType text/x-javascript "access 1 month"
  ExpiresByType application/x-shockwave-flash "access 1 month"
  ExpiresByType image/x-icon "access 1 year"
  ExpiresDefault "access 1 month"
</IfModule>
<IfModule mod_headers.c>
  <filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
  Header set Cache-Control "max-age=2678400, public"
  </filesmatch>
  <filesmatch "\.(html|htm)$">
  Header set Cache-Control "max-age=7200, private, must-revalidate"
  </filesmatch>
  <filesmatch "\.(pdf)$">
  Header set Cache-Control "max-age=86400, public"
  </filesmatch>
  <filesmatch "\.(js)$">
  Header set Cache-Control "max-age=2678400, private"
  </filesmatch>
</IfModule>

• Plugin W3TC (W3 Total Cache) – WordPress

Bagi anda pengguna wordpress, anda cukup install dan atur konfigurasi seperti dibawah ini:

• Aktifkan preview mode pada bagian general setting untuk melihat hasil tanpa harus diaplikasikan secara live (optional).

atur preview mode

• Aktifkan browser caching tetap pada general setting.

Aktifkan Browse Cache

• Silahkan menuju bagian “Browser Cache” dan atur seperti gambar dibawah ini (pengaturan ini sama dengan web nyekrip), anda bisa mencoba untuk pengaturan yang lain, mungkin tiap web membutuhkan pengaturan yang berbeda.

Browser Cache

• Save all setting, klik stop preview dan klik preview atau deploy dan muat ulang web. Untuk melakukan test, anda bisa menggunakan plugin Google PageSpeed dan YSlow. Perhatikan perubahan yang terjadi antara menggunakan plugin dengan tidak atau jika diperlukan cobalah untuk merubah beberapa pengaturan.

Preview

• Setelah melakukan testing, deploy dan disable preview agar setting diterapkan pada live version. Untuk selanjutnya anda bisa test optimasi pada web penyedia test kecepatan web.

• Blogpsot

Jika anda pengguna blogspot, perlu diketahui bahwa sebenarnya admin nyekrip mendapatkan trik ini pada web lain dan setelah menerapkan trik ini, admin merasakan perubahan yang tidak terlalu berarti atau mungkin malah tidak bekerja, mengingat server blogspot sudah cepat dalam distribusi konten. Jika anda ingin mencoba, silahkan ikuti langkah berikut:

1. Login ke akun blogger anda
2. Silahkan menuju Dashboard -> Template -> Edit HTML
3. Tambahkan skrip berikut di antara tag “<head>”:

<include path="/assets/**.css" expiration="7d" /> 
<include path="/assets/**.js" expiration="7d" /> 
<include path="/assets/**.gif" expiration="3d" />
<include path="/assets/**.jpeg" expiration="3d" />
<include path="/assets/**.jpg" expiration="3d" />
<include path="/assets/**.png" expiration="3d" />

Saya hanya bisa menyarankan agar untuk blogspot, gunakan gambar dengan ukuran kecil atau yang terkompres dengan baik dan pilih cdn yang baik untuk css dan javascript.

KEEP-ALIVE

Bagi yang belum tahu apa itu keep-alive, keep-alive adalah suatu teknik yang memungkinkan koneksi TCP untuk tetap hidup dan membantu mengurangi latensi pada permintaan berikutnya, jadi latensi disini disebabkan selalu meminta TCP baru setiap permintaan, dengan membuat TCP terus hidup akan memaksa agar menggunakan TCP yang sama dan menghindari pemakaian TCP baru. Lebih sederhananya,  proses komunikasi antara web server dan web browser yang mengatakan “Anda bisa ambil lebih dari satu file pada satu waktu”.

Untuk menerapkan keep-alive, anda bisa menanyakan terlebih dahulu pada penyedia hosting anda dan minta fitur keep-alive diaktifkan. Jika anda kesulitan untuk melakukan hal tersebut maka ada beberapa cara lain yang dijelaskan berikut (gunakan salah satu):

• htaccess

<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

 Tambahkan skrip diatas pada file htaccess anda.

• Apache

#
# KeepAlive: Whether or not to allow persistent connections (more than
# one request per connection). Set to "Off" to deactivate.
#
KeepAlive On

#
# MaxKeepAliveRequests: The maximum number of requests to allow
# during a persistent connection. Set to 0 to allow an unlimited amount.
# We recommend you leave this number high, for maximum performance.
#
MaxKeepAliveRequests 100

#
# KeepAliveTimeout: Number of seconds to wait for the next request from the
# same client on the same connection.
#
KeepAliveTimeout 100

Tambahkan skrip diatas pada file config apache (kalau anda diizinkan penyedia web hosting).

Web nyekrip mengunakan teknik htaccess karena tidak diizinkan konfigurasi file config apache :) . Setelah anda konfigurasi, maka coba test di Google PageSpeed, GTmetrix atau tempat testing kecepatan web yang lain.

GZIP COMPRESSION

Ada beberapa manfaat yang kita dapatkan dengan mengaktifkan kompresi Gzip, karena metode ini yang paling populer untuk memuat situs kita lebih cepat dengan mengurangi lebih dari 70% ukuran halaman blog atau web. Sekarang sebagian besar web atau blog menggunakan kompresi Gzip.

• htaccess

Anda bisa menggunakan htaccess untuk mengaktifkan metode Gzip Compression, caranya tambahkan skrip berikut pada file htaccess anda.

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png

•  Plugin W3TC (wordpress)

Jika anda menggunakan wordpress, maka anda cukup melakukan langkah yang sudah kita bahas sebelumnya (browser cache). Anda tinggal memastikan metode ini sudah aktif atau belum dengan menuju bagian  Performance > Browser Cache.

enable gzip

• PHP Skrip

Kita juga bisa menggunakan PHP, dengan meletakkan skrip berikut pada bagian atas skrip PHP/HTML.

<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); 
else ob_start(); ?>

Seperti langkah sebelumnya, silahkan cek kecepatan loading blog atau web.

CDN

CDN (Content Delivery Network) atau Jaringan Pengiriman Konten merupakan sistem jaringan server untuk mengirimkan konten yang ada dalam sebuah aplikasi/web ke berbagai pengunjung/pengguna di berbagai tempat agar data/konten yang dikirim diterima lebih cepat (pengiriman data tidak harus dari server pusat, melainkan melalui CDN terdekat).

perbedaan pengunaan cdn

Pada gambar diatas (diambil dari gtmetrix.com) menjelaskan bahwa dengan CDN, pengguna dari eropa akan dapat men-download konten statis melalui CDN terdekat (terletak di eropa juga) sehingga situs anda lebih cepat karena tidak perlu men-download konten statis dari server pusat yang berada di amerika.

Masalahnya adalah, sebagai pembeli CDN yang cerdas kita harus jeli dalam memilih penyedia CDN. Pastikan area yang tersedia (spot-spot CDN) sudah memenuhi target pasar kita, semakin banyak belum tentu semakin baik, sesuaikan dengan tingkat kebutuhan area yang ingin dijangkau.

Web nyekrip mengentikan penerapan CDN, bagi para pengguna wordpress plugin W3TC telah bekerja sama dengan salah satu penyedia CDN dan anda tinggal mengaktifkan-nya Jika anda memiliki budget lebih anda bisa mempertimbangkan metode ini karena memang hasilnya sangat signifikan (dari pengalaman para pengguna CDN), silahkan mencari di google penyedia CDN terbaik dan tolong share pengalaman anda di kolom komentar ya. :)

ELEMEN KONTEN

Setelah bagian server sudah selesai kita optimasi, selanjutnya kita berpindah ke bagian konten. Pada bagian ini kita akan melakukan optimasi yang fokus pada konten, pada bagian server yang bertugas dalam hal distribusi konten selesai dioptimasi, maka dengan melakukan optimasi konten yang akan didistribusikan akan membuat kecepatan web meningkat dengan sangat baik.

MINIFY SKRIP

Bagian pertama yang akan dioptimasi adalah bagian skrip yang berupa HTML, CSS dan JS (Javascript). Teknik ini bekerja dengan mengoptimalkan skrip yang akan dipakai dalam production site (dipakai saat live, buka trial atau debug).

Ketika skrip yang digunakan dalam trial dan debug maka kita akan membuat skrip kita serapi mungkin dengan menambahkan tab, spasi dan komentar agar mudah dibaca dan mudah saat ada menangani kesalahan skrip.

Ketika skrip sudah siap digunakan, maka kita bisa mengurangi ukuran skrip tersebut dengan membuang spasi, tab dan komentar. Teknik ini disebut minify, jika anda pernah download skrip yang ketika dibuka tampak tanpa spasi, komentar dan serasa ditumpuk menjadi satu baris, maka skrip itu telah diminify.

Minify tidak sebatas satu file skrip, jika kita mempunyai Skrip CSS/JS lebih dari satu, kita bisa menggabungkan semua CSS/JS pada satu file dan langsung di minify (CSS dan JS harus dipisah, gabung yang sejenis). Untuk caranya silahkan ikuti langkah-langkah berikut:

• Minify dengan Tool Online

Kita bisa menggunakan tool online seperti jscompress.com, willpeavy.com/minifier/ dan masih banyak yang lain, tinggal search di google. Caranya cukup mudah, kita tinggal pastekan skrip kita ke text area yang sudah disediakan dan klik submit, maka skrip hasil minify bisa kita gunakan :) .

• Plugin W3TC (WordPress)

Bagi pengguna wordpress, kita bisa menggunakan plugin W3TC untuk melakukan minify, caranya seperti berikut:

• Langkah pertama silahkan menuju Performance > Minify.
• Pada tahap ini, kita akan bermain untuk mengoptimalkan css dan js dalam wordpress kita, langkah Kedua ini agar memudahkan kita dalam seleksi file mana saja yang akan dioptimasi, silahkan klik tombol Help (Minify: Help Wizard) pilih file, dan akhiri dengan klik tombol Apply & Close. Perhatikan gambar setelah tombol help di-klik.

Help Wizard

• Langkah ketiga adalah memastikan JS dan CSS minify settings sudah enable, jika belum anda bisa mencentang combo box untuk mengaktifkannya.

• Pengguna Blogspot

Bagi pengguna blogspot, kita bisa menggunakan teknik manual, yaitu dengan meminify  dengan Tool Online dan memasang kembali sesuai cara sebelumnya.

Minify merupakan bagian tersulit karena kita harus memastikan kode yang di minify tidak rusak atau tetap berjalan. Kita harus sabar dalam tahap ini, web nyekrip saja hanya berhasil meminify sedikit skrip, karena banyak yang rusak ketika semua mau di minify atau gabung.

MENGOPTIMALKAN GAMBAR

Pada tahap ini kita akan membuat agar gambar dalam website kita optimal dengan baik, kita semua tahu jika gambar merupakan konten utama yang memakan ruang atau space dalam website karena sebagian besar yang mengisi dalam web adalah gambar.  Jika kita bisa mengoptimalkan penggunaan gambar dalam web maka kita sudah berhasil menurunkan beban server yang begitu besar.

Ada beberapa teknik yang dapat diterapkan dimulai dari menurunkan ukuran gambar dengan di-kompres sampai memanfaatkan cdn gratisan. :) Mengenai apa saja langkah yang bisa kita tempuh, silahkan perhatikan langkah-langkah dibawah ini:

Kompres Gambar

Sebelum anda posting gambar, sebaiknya anda kompres dulu gambar tersebut. Bisa menggunakan tool online atau software, biasanya ukuran gambar akan berkurang tanpa terlalu mengurangi kualitas gambar.

Gunakan Vektor dan PNG

Jika web anda membutuhkan gambar yang sekedar menambah ilustrasi dan tidak harus membutuhkan gambar nyata atau foto, gunakan saja gambar vektor dan save as PNG. Karena dengan begini, ukuran gambar akan sangat kecil dan kualitas gambar bagus.

Jika anda ingin mengetahui seberapa kecil ukuran-nya, silahkan coba download gambar header dalam artikel ini dan periksa ukuran gambar-nya. :)

Tentukan Dimensi Gambar

Browser akan memulai merender halaman sebelum gambar dimuat. Jika kita sudah menentukan dimensi (tinggi dan lebar) maka waktu yang dibutuhkan browser dalam merender akan semakin cepat. Dalam teknik ini anda juga bisa menggunakan CSS untuk menentukan dimensi gambar.

Caranya adalah dengan menggunakan elemen <img> , tentukan height dan width.

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

Atau dengan CSS :

div {
    width: 500px;
}

Teknik CSS Sprite

Dengan kita menggunakan teknik ini, maka kita bisa menghemat waktu load, karena teknik ini untuk menggabungkan beberapa gambar menjadi satu supaya dalam loading gambar hanya satu yang dipanggil meski yang digunakan adalah gambar yang berbeda (jadi gambar yang berbeda digabung dalam satu gambar atau file).

Untuk caranya silahkan googling dulu, karena cukup panjang jika dibahas disini :) . Teknik ini akan dibahas di nyekrip pada kesempatan berikutnya ya.

CDN Gambar

Teknik CDN Gambar sama dengan teknik CDN yang telah dibahas sebelumnya, cuma yang berbeda disini adalah yang di CDN hanya file gambar. Nyekrip melakukan teknik CDN Gambar dengan menggunakan plugin Jetpack Plugin. Untuk detail ikuti cara dibawah ini:

Blogspot

Para pengguna blogspot tidak usah repot karena segala file gambar telah ditanggung otomatis di CDN oleh google, yaitu di picasa :)  .

WordPress

Bagi pengguna wordpress, bisa menggunakan plugin Jetpack.

• Install plugin ini dan segera menuju pengaturan dan lihat beberapa fitur.
• Pilih fitur Photon dan Aktifkan.
• Secara otomatis gambar akan di CDN pada server WordPress.
• Fitur ini bisa diaktifkan dengan gratis alias tanpa bayar :) .

Photon

KESIMPULAN

Untuk cara mempercepat loading website blog memang tidak bisa dibilang simpel, banyak sekali yang harus dioptimasi mulai dari sisi server sampai sisi elemen yang nantinya akan didistribusikan. Kita tidak perlu melakukan semua optimasi diatas jika beberapa teknik sudah menjawab kebutuhan.

Artikel ini akan diupdate jika ada teknik terbaru dalam mempercepat blog. Jika ada pertanyaan, silahkan langsung mengisi di kolom komentar.

Happy Nyekrip !