Tingkatkan PageSpeed Google Pada CMS WordPress

Percepat loading halaman web & tingkatkan PageSpeed Score Google menggunakan Plugin W3 Total Cache pada CMS WordPress

Iseng buka web Google Developers - PageSpeed Insights, ketikkan alamat url blog & voila!!! Kecewa dengan hasilnya, ternyata page speed score dari google untuk blog linggihnote.blogspot.com jauh dari yang diharapkan (cuma dapat score 65). jadi ada kerjaan lagi nih ane, target hari ini Tingkatkan PageSpeed Score Google.

Awalnya hanya ingin meningkatkan PageScore saja, namun setelah searching ke beberapa sumber ternyata kecepatan akses web berpengaruh juga terhadap penentuan PageRank. Sebagai bagian penilaian google dalam menentukan PageRank selain dari keunikan konten, inbound link, namun sekarang google juga mempertimbangkan waktu loading web (Page Load Time) sebagai salah satu faktor penentu PageRank.

Google berasumsi, website yang lambat (loading time-nya lama) memberikan pengalaman yang buruk (bad user experience) kepada visitor/pungunjung web. Itulah alasan mengapa web/blog dengan loading page lambat kurang diperhitungkan peningkatan PageRank-nya oleh google.

Situs dengan loading web cepat (bagus) selain memberikan pengalaman baik kepada visitor, namun juga disukai oleh google dengan alasan dapat menurunkan biaya operasi yang dikeluarkan Google (bandwidth untuk crawling web → Optimal web → crawling cepat → bandwidth terpakai sedikit → biaya operasi rendah). Berikut kutipan artikel dari blog resmi Google terkait kecepatan akses web berpengaruh terhadap penentuan PageRank:

"Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we've seen in our internal studies that when a site responds slowly, visitors spend less time there. But faster sites don't just improve user experience; recent data shows that improving site speed also reduces operating costs. Like us, our users place a lot of value in speed — that's why we've decided to take site speed into account in our search rankings. We use a variety of sources to determine the speed of a site relative to other sites."

Sumber: http://googlewebmastercentral.blogspot.com

Namun apakah peningkatan maupun penurunan PageSpeed Score Google berbanding lurus dengan peningkatan maupun penurunan waktu loading (loading time) web? Menurut pendapat pribadi saya, tentu saja berpengaruh. Jika tidak yakin, silahkan test sendiri dengan cara berikut:

1. Buka dahulu Google PageSpeed Insights, lihat PageSpeed Scorenya.
2. Buka website speed check, lihat hasilnya.
3. Lakukan ulang 2 langkah test di atas setelah melakukan tweak/perubahan
4. Bandingkan hasilnya

Kembali lagi ke topik artikel. Setelah saya terapkan tips tweak (percepat) loading halaman web pada artikel ini, syukur Alhamdulillah PageScore Speed Google situs linggihnote.blogspot.com meningkat dari 65 ke 88.

PageSpeed Score Google

Jika berminat, untuk mulai tweak berikut stepnya:

Catatan:

Sebelum apply, harap dicatat; tweak ini hanya berlaku untuk account shared hosting. Untuk VPS/DS sesuaikan Page Cache, Minify, Database & Object Cache (jika ingin pakai) dengan Cache Accelerator masing-masing server.

Pertama, test Score PageSpeed web/blog yang ingin ditweak pada halaman ini dan lihat hasil scorenya. Jika dibawah 80, umumnya web/blog tidak terlalu susah dioptimalkan. Klik pada masing-masing rekomendasi/saran (High priority, Low priority & Experimental rules) pada panel sebelah kiri.

PageSpeed Score Suggestion

Jika mampu tweak menggunakan cara manual, silahkan lakukan. Namun jika tidak (pakai cara yang lebih simpel), berikut panduan mempercepat loading halaman web menggunakan plugin WordPress W3 Total Cache. Download, install & aktifkan plugin W3 Total Cache.

Download WordPress Plugin W3 Total Cache

Konfigurasi Setup W3 Total Cache:

General Setting

Setelah plugin terinstall & diaktifkan, klik General Settings.

General Settings

General Setting → Page Cache

1. Page Cache: » centang Enable
2. Page Cache Method: » Pilih Disk: Enchanced. Untuk pengguna VPS atau DS, sesuaikan cache acceleratornya sesuai dengan yang terinstall pada server.

General Setting - Page Cache

General Setting → Minify

1. Minify: Centang Enable
2. Minifi mode: Pilih Manual
3. Minify Cache Method: pilih Disk → VPS/DS, sesuaikan dengan Cache Accelerator server.
4. HTML Minifier: Pilih Default
5. JS Minifier: Pilih JSMin (default)
6. CSS minifier: Pilih Default

General Setting - Minify

Database Cache & Object Cache, kosongkan (jangan diaktifkan).

General Setting - Database & Object Cache

General Setting → Browser Cache

1. Browser Cache: Centang Enable

General Setting - Browser Cache

General Setting → CDN
CDN, lewatkan. Silahkan aktifkan jika punya account CDN

General Setting - CDN

Point lainnya biarkan pakai setting default. Klik tombol Save all settings
Page Cache Page Cache - General

1. Centang Cache home page
2. Centang Cache feeds: site, categories, tags, comments
3. Disable opsi yang lainnya (jangan dicentang)

Page Cache - General

Page Cache - Advanced → biarkan pakai setting default.
Page Cache - Cache Preload

1. Centang Automatically prime the page cache
2. Update interval: Isikan dengan nilai 900
3. Pages per interval: Isikan 7
4. Sitemap URL: Isikan alamat xml sitemap

Page Cache - Cache Preload

Klik tombol Save all settings
Minify
Minify - JS

1. JS minify settings: Centang Enable, Preserved comment removal & Line break removal
2. JS file management: pilih theme yang dipakai
3. Tambahkan script dengan klik pada tombol Add a script, kemudian ketikkan alamat url file Script. Untuk lihat file script mana saja yang harus di minify, lihat pada PageSpeed Score Google klik pada suggestion (saran) Minify JavaScript. Kemudian Copy link script URL & pastekan pada text field File URI: Lebih jelasnya, lihat pada gambar di bawah.

JavaScript Minify Suggestion

Minify JS

Minify - CSS

1. CSS minify settings: Centang Enable, Preserved comment removal, Line break removal
2. @import handling: Pilih Process
3. CSS file management: pilih theme yang aktif
4. Tambahkan file CSS dengan klik pada tombol Add a style sheet, kemudian isikan dengan alamat URL CSS. Langkah copy paste sama dengan Minify - JS di atas.

Minify - CSS

Point lainnya biarkan pakai setting default. Klik Save all settings

Browser Cache
Browser Cache - General

1. Centang Set Expires header, Set cache control header, Set W3 Total Cache header & Enable HTTP (gzip) compression

Browser Cache - General

Browser Cache - CSS & JS

1. Centang Set expires header
2. Expires header lifetime: isikan dengan 604800
3. Centang Set cache control header
4. Cache Control policy: Pilih cache with max-age ("e; max-age=EXPIRES_SECONDS...
5. Centang Set W3 Total Cache header
6. Centang Enable HTTP (gzip) compression

Browser Cache - CSS & JS

Browser Cache - HTML & XML

1. Centang Set expires header
2. Expire header lifetime: isikan 3600
3. Centang Set cache control header
4. Cache Control policy: pilih cache with max-age.... → lihat screenshot gambar
5. Centang Set W3 Total Cache header
6. Centang Enable HTTP (gzip) compression

Browser Cache - HTML & XML

Browser Cache - Media & Other Files

1. Centang Set expires header
2. Expires header lifetime: isikan 604800
3. Centang Set cache control header
4. Cache Control Policy: pilih cache with max-age... → Lihat screenshot gambar
5. Centang Set W3 Total Cache header
6. Centang Enable HTTP (gzip) compression

Browser Cache - Media & Other Files

Klik Save all settings Selesai. Jangan lupa setiap kali melakukan perubahan, klik pada tombol empty cache atau empty all caches W3 Total Cache Tips: Setiap melakukan perubahan setting selalu kosongkan cache (klik tombol empty cache) dan cek fungsionalitas setiap komponen halaman web yang menggunakan file CSS atau JavaScript (form kontak, slider portofolio, navigasi menu → jika meminta file .js, dlsb). Jika error, kemungkinan besar karena minify CSS atau JavaScript. Jika trik W3 Total Cache di atas gagal atau hasilnya kurang memuaskan, optimalkan loading page halaman web dengan cara manual. Misal:

1. Compress (perkecil) file gambar jika memungkinkan
2. Kombinasikan gambar berdimensi kecil menjadi satu file gambar (menggunakan CSS Sprite) jika memungkinkan untuk mengurangi delay request.
3. Gabungkan beberapa file CSS menjadi satu file CSS
4. Compress file JavaScript dengan cara encrypt

Selengkapnya

Clear RAM Space

Trik Mendongkrak Kecepatan Komputer Dengan Membersihkan Space RAM

---

Anda pasti pernah mengalami ketika menggunakan komputer semakin lama, diiringi dengan semakin melambatnya sistem windows yang anda pakai. Hal ini biasanya dialami ketika komputer digunakan untuk bekerja dengan banyak program yang terbuka/dijalankan secara bersamaan.

Hal di atas terjadi dikarenakan RAM memori yang anda gunakan full (penuh) dengan program yang baru saja ditutup padahal anda tidak membutuhkannya lagi, tak jarang walaupun program sudah ditutup tetapi masih saja komputer berjalan lambat. Nah.. Untuk mengakalinya, gunakan trik seperti di bawah ini;

1. Buka 'Notepad' dan ketikkan => 'FreeMem=Space(128000000)' <= tanpa tanda petik. Terserah isikan nilainya berapa saja, disarankan 128000000, 256000000, atau 512000000 (sesuaikan angkanya, disarankan maksimal setengah dari kapasitas RAM)


2. Kemudian simpan dengan nama misalnya 'freshram.vbs'
   

   Ketika menyimpan pilih "All Files" pada pilihan "Save as type"



3. Ketika anda merasa komputer berjalan lambat, jalankan file 'freshram.vbs' dengan klik dua kali atau klik kanan kemudian pilih 'Open'


4. Selesai

Coba saja, have fun...

Selengkapnya

Tips Optimalisasi CSS File

Trik Memperkecil Ukuran File CSS

---

Sudah jelas jika semakin kecil ukuran file CSS maka logikanya semakin cepat pula browser meload file CSS. Ada beberapa trik yang dapat dilakukan untuk memperkecil (optimalkan) ukuran file CSS, berikut beberapa diantaranya:

BUAT FILE CSS DALAM SATU SINGLE FILE

Ketika pengguna (visitor) membuka halaman web dengan banyak objek (seperti misalnya gambar atau script) akan membutuhkan HTTP request yang mana request ini akan memperlambat waktu respon halaman web. Semakin banyak objek yang diload (dimuat) otomatis waktu respon halaman web akan semakin lambat. Logikanya 1 File CSS = 1 HTTP Request. Maka buat 1 file css untuk semua halaman web, contohnya dapat anda lihat seperti ilustrasi di bawah ini (mempunyai 3 halaman web dengan 3 file CSS Yang berbeda)

[css collapse="false"]
<link rel="stylesheet" type="text/css" href="konten.css" />
<link rel="stylesheet" type="text/css" href="tentang.css" />
<link rel="stylesheet" type="text/css" href="kontak.css" />
[/css]

Maka sebaiknya gabungkan beberapa file CSS tersebut menjadi satu file CSS. Misal setelah digabungkan akan diberi nama baru "codesaya.css" penulisan code setelahnya akan menjadi seperti ini:

[css collapse="false"]
<link rel="stylesheet" type="text/css" href="codesaya.css" />
[/css]

BUAT EXTERNAL FILE CSS

Seperti yang anda lihat pada code di atas, merupakan bentuk dari External Style CSS. Menggunakan external file CSS kenyataannya dapat meload halaman web lebih cepat karena file CSS sudah masuk dalam cache browser, Jadi ketika dibuka kembali maka browser tinggal memuat ulang (reload) file css dari cache yang tersimpan di komputer. Lain halnya dengan menggunakan Inline Style CSS yang disisipkan diantara code HTML, browser akan selalu reload CSS untuk setiap halaman yang dibuka. Memang dengan menggunakan inline CSS dapat mengurangi jumlah HTTP request, tetapi kekurangannya meningkatkan ukuran file dokumen web & selalu reload inline css. Lain halnya dengan menggunakan external file CSS.

SELALU TEMPATKAN CSS PADA BAGIAN HEADER

Menempatkan code css pada bagian header akan mempercepat loading halaman web, hal ini dikarenakan setiap code pada bagian header menjadi prioritas untuk diload. Lihat contohnya seperti di bawah:

Sebelum

[html collapse="false"]
<html>
<head>
<title>Optimalisasi CSS</title>
<style>
body {
font-family:arial;
margin:0;padding:0;
}

h1 {
font-weight:850px;
margin:5px 0;
}
code css dan seterusnya.......
</style>
</head>
</html>
[/html]

Sesudah

[html collapse="false"]
<html>
<head>
<title>Optimalisasi CSS</title>
<link rel="stylesheet" type="text/css" href="codesaya.css"/>
</head>
</html>
[/html]

MENGGABUNGKAN STYLE YANG SAMA

Kesalahan yang sering kali dilakukan, padahal dapat dibuat penulisan code CSS yang lebih simple. Ilustrasinya seperti dapat anda lihat di bawah ini:

Sebelum

[css collapse="false"]
h1 {padding:5px 0; font-family:arial; font-weight:650;}
#konten .heading {padding:5px 0; font-family:arial; font-weight:650;}
#konten2 .heading {padding:5px 0; font-family:arial; font-weight:650;}
[/css]

Sesudah

[css collapse="false"]
h1, #konten .heading, #konten2 .heading {padding:5px 0; font-family:arial; font-weight:650;}
[/css]

Namun dalam beberapa kasus, code css tidak dapat digabung menjadi satu atau hanya sebagian saja yang dapat digabung dikarenakan misalnya terdapat property yang sama tetapi dengan value yang berbeda. Contoh dapat anda lihat seperti di bawah:

Sebelum

[css collapse="false"]
#coba a.home {padding:5px; font-family:arial; font-weight:650; background:#fff url(home.gif) no-repeat}
#coba a.konten {padding:5px; font-family:arial; font-weight:650; background:#fff url(konten.gif) no-repeat}
#coba a.kontak {padding:5px; font-family:arial; font-weight:650; background:#fff url(kontak.gif) no-repeat}
#coba a.tentang {padding:5px; font-family:arial; font-weight:650; background:#fff url(tentang.gif) no-repeat}
[/css]

Dapat anda lihat setiap selector 'id' mempunyai property yang sama, namun salah satu diantaranya property "background" untuk setiap selector "id" mempunyai value yang berbeda. Maka penggabungan code CSS dapat juga dilakukan namun pengecualian untuk properties "background". Hasilnya akan seperti ini:

[css collapse="false"]
#coba a {padding:5px; font-family:arial; font-weight:650; background:#fff no-repeat}
#coba a.home {background:url(home.gif)}
#coba a.konten {background:url(konten.gif)}
#coba a.kontak {background:url(kontak.gif)}
#coba a.tentang {background:url(tentang.gif)}
[/css]

Kurangi Jumlah Line Breaks

Untuk setiap selector yang mempunyai beberapa property, disarankan property dan value nya dijadikan satu baris saja. Ilustrasinya seperti di bawah ini:

Sebelum

[css collapse="false"]
h2 {
font-family:arial;
padding:0;
margin:5px 0;
color:#000;
text-decoration:none;
}
[/css]

Sesudah

[css collapse="false"]
h2 {font-family:arial;padding:0;margin:5px 0;color:#000;text-decoration:none;}
[/css]

HILANGKAN TITIK KOMA (semicolon/';'}) TERAKHIR

Sebelum

[css collapse="false"]
h2 {font-family:arial;color:#000;text-decoration:none;}
[/css]

Sesudah

[css collapse="false"]
h2 {font-family:arial;color:#000;text-decoration:none}
[/css]

GUNAKAN SIMPLE COMMENT

Sebelum

[css collapse="false"]
/************************************/
/* Properties Header */
/************************************/
[/css]

Sesudah

[css collapse="false"]
/* Properties Header */
[/css]

SINGKAT KODE WARNA JIKA MEMUNGKINKAN

Sebelum

[css collapse="false"]
.konten {
color:#000000
<!-- atau -->
color:#FF0000
<!-- atau -->
color:#FFCC00
}
[/css]

Sesudah

[css collapse="false"]
.konten {
color:#000
<!-- atau -->
color:#F00
<!-- atau -->
color:#FC0
<!-- Namun Yang Seperti Ini Tidak Bisa DiRubah -->
color:#5B8BE3
<!-- atau -->
color:#1E5F07
<!-- atau -->
color:#171452
}
[/css]

HILANGKAN "px"

Sebelum

[css collapse="false"]
h1 {padding:0px; margin:0px;}
[/css]

Sesudah

[css collapse="false"]
h1 {padding:0; margin:0}
[/css]

GUNAKAN CSS COMPRESSION TOOLS

Jika anda malas untuk memekai cara manual seperti di atas. Gunakan tool online gratis di bawah ini:

CSS Optimizer
Flumpcakes CSS Optimizer
Clean CSS
CSS Drive CSS Compressor
Online YUI Compressor
Style Neat

Selengkapnya

Tweak Loading Speed Halaman Web/Blog

Menjengkelkan dan kadang bikin frustasi memang jika buka website atau blog tetapi loading pagenya lemot alias lama terbukanya. Bagi masyarakat negara maju seperti Jepang atau Amerika mungkin tidak terlalu dianggap serius, tapi bagi masyarakat kita yang speed browsing internetnya pas-pasan tentu saja bikin gregetan.

Loading page time jika dilihat dari sisi pengguna internet merupakan salah satu faktor penentu kembali atau tidaknya mereka mengunjungi blog/website. Bila loading page website/blog memakan waktu yang lama, kemungkinan pengunjung akan menutup jendela browser atau menekan tombol 'Back' atau membuka website lain yang loading pagenya lebih cepat. Yang pasti ujung-ujungnya mereka akan enggan untuk mampir lagi ke website/blog kita dikemudian hari.

Jika traffic adalah fokus perhatian anda saat ini, mulailah mempertimbangkan bagaimana cara mengoptimalkan blog/website yang anda buat. Berikut sedikit tips mempercepat loading page halaman blog/website:

1. Blog/website dengan warna dan background yang menarik, bermacam image (gambar) menjadikan blog kelihatan sangat bagus. Tetapi efeknya request download time source image memakan waktu yang cukup lama. Usahakan memasang image seperlunya saja, dan juga tombol navigasi jika memungkinkan jangan memakai image background. Tombol navigasi menggunakan teks lebih efisien, atau gunakan background warna.
2. Script pihak ketiga seperti misalnya iklan, blog assesoris, dan script lainnya usahakan pasang seperlunya saja. Script ini lumayan banyak mengkonsumsi resource koneksi internet visitor. Usahakan meletakkan script pada bagian paling bawah sehingga akan di load paling akhir.
3. Jika blog anda mempunyai banyak konten, usahakan jangan menampilkan konten lengkap pada halaman utama. Ringkas isi konten pada halaman utama dan buat link yang mengarah pada konten lengkapnya. Kurangi jumlah konten yang di tampilkan pada halaman utama, semakin sedikit konten yang ditampilkan pada halaman utama semakin cepat loading page halaman utamanya.
4. Jika ingin buat blog atau sewa hosting, usahakan memilih blog atau hosting yang servernya stabil. Sehingga eksistensi blog atau website anda stabil juga.

Semoga bermanfaat & have fun...
:D

Selengkapnya

Tweak Kecepatan Koneksi Internet Via 'Registry Windows'

Tidak dapat disangkal untuk berlangganan akses internet di Indonesia cukup ribet (setidaknya beberapa tahun yang lalu), biaya instalasi yang masih terbilang mahal, belum lagi kecepatan internet yang pas-pasan. Saat ini banyak software untuk tweak kecepatan koneksi internet dengan sekali klik. Namun hati-hati, karena tidak semuanya menjadi jaminan akan dapat mengoptimalkan koneksi internet anda.

Selain menggunakan software tweak koneksi internet, optimalisasi dapat juga dilakukan dengan cara manual. Tweak ini hanya sedikit merubah setting standar registry windows, ikuti beberapa step tweak di bawah:

Buka registry editor dengan mengetikkan "regedit" pada menu "run", atau tekan "windows logo + R". Untuk antisipasi, backup registry dengan klik pada "File → Export".

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Dnscache\Parameters]
"CacheHashTableBucketSize"=dword:00000001
"CacheHashTableSize"=dword:00000180
"MaxCacheEntryTtlLimit"=dword:0000fa00
"MaxSOACacheEntryTtlLimit"=dword:0000012d

[HKLM\SYSTEM\CurrentControlSet\Services\Tcpip\Parameters\Interfaces]
"MTU"=DWORD:1500

[HKEY_USERS.DEFAULT\Software\Microsoft\Windows\CurrentVersion\Internet] "MaxConnectionsPerServer"=dword:00000010
"MaxConnectionsPer1_0Server"=dword:00000010

[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet]
"MaxConnectionsPerServer"=dword:00000010
"MaxConnectionsPer1_0Server"=dword:00000010

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Tcpip\Parameters]
DefaultTTL = "80" hex (or 128 decimal)
EnablePMTUBHDetect = "0"
EnablePMTUDiscovery = "1"
GlobalMaxTcpWindowSize = "7FFF" hex (or 32767 decimal)
TcpMaxDupAcks = "2"
SackOpts = "1"
Tcp1323Opts = "1"
TcpWindowSize = "7FFF" hex (or 32767 decimal)

Semuanya "DWORD" value

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Tcpip\ServiceProvider]
LocalPriority = 001 (1)
HostsPriority = 001 (1)
DnsPriority = 001 (1)
NetbtPriority = 001 (1)

Kalau untuk meningkatkan bandwidth koneksi internet, bisa pakai cari ini.

Buka Local Group Policy Editor dengan mengetikkan "gpedit.msc" pada menu run. Trus expand "Administrative Templates" > "Network" > "QOS Packet Scheduler" > Edit "Limit Reservable Bandwidth" klik 2 kali. Pilih "Limit Reservable Bandwidth" enabled, trus ubah bandwidth limitnya dari 20% menjadi 0%.

Restart komputer untuk melihat efek dari semua perubahan di atas.

have fun...
:D

Selengkapnya