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

Trik Web Traffic Gratis

SEO Tips - Tingkatkan Traffic Web/Blog Dengan Memanfaatkan Situs Online Reading/Publishing

Blogger maupun webmaster seringkali kesulitan mendatangkan web traffic ke blog/web, biasanya pada fresh domain (nama domain yang baru saja dibuat). Atau bisa jadi seperti yang saya alami, 'blog dengan subscriber & web traffic yang lumayan, namun sayangnya domain expire dan lupa/tidak sempat diperpanjang. Terpaksa deh mulai lagi dari awal dengan pakai nama domain baru (linggihnote.blogspot.com → sebelumnya linggih-blog.com). :D'

Beberapa upaya bisa dilakukan untuk mendongkrak traffic web/blog ini, misal; dengan ikut serta pada program PPC (pay-per-click) networks seperti Google Adsense contohnya (tidak gratis/layanan berbayar), submit ke search engine directory (traffic dari SERP), optimalkan tag & keyword SEO pada konten artikel, Guest Posting Service (tulis artikel pada web lain), blog walking (isi komentar pada blog lain dengan men-tautkan link web/blog), dlsb.

Namun pada artikel kali ini saya coba sharing pengalaman pribadi 'Cara mendatangkan traffic web gratis menggunakan situs online reading & publishing'. Contoh situs online reading & publishing yang paling populer saat ini adalah scribd.com. Kurang lebih selama 1 bulan terakhir, alexa traffic blog saya dari No data dengan memakai trik ini (salah satunya) meningkat ke 3,500,152 (pada saat artikel ditulis).

Alexa Traffic Rank

Dengan menerapkan trik ini, secara tidak langsung akan mendatangkan traffic web gratis dari SERP (Search Engine Result Pages), meskipun tidak 100% user (visitor) klik pada tautan link web/blog. Siklus web traffic dari SERP, ilustrasi sederhananya begini:

User/Visitor → Search Engine → Situs Online Reading/Publishing → Link ke Web/Blog

SERP Google

SERP Scribd

Hyperlink Web/Blog

He he... :). Lumayan kan buat tingkatkan traffic gratis dari SERP Search Engine. OK... Mungkin tidak semua visitor klik pada tautan link; coba ilustrasikan pakai cara hitungan kasar, mungkin hanya 30 - 50% visitor saja yang klik pada tautan link. Jumlah dokumen 102 misalnya, dan total dokumen yang dibaca/dikunjungi (Total Reads) 3.664 hits/klik → 3.664 x 30% = 1.099 hits/klik. Tetap saja jumlah yang lumayan bukan!
:D

Scribd Statistik Dokumen

Semakin banyak dokumen yang diupload, semakin besar peluang traffic web gratis didapat. Dari pengalaman saya, statistik visitor baik dari AWstats cPanel maupun google analytics, dengan mamakai trik ini terbukti ampuh mendatangkan traffic web gratis (Lihat screenshot di bawah).

AWstats Web Traffic Analytics

Referral Traffic Google Analytics

Global Traffic Google Analytics

OK. Untuk memulai apply trik ini, berikut step sederhananya:

1. Daftar dulu di scribd. Atau bisa langsung login dengan menggunakan account facebook.
2. Setelah berhasil login, buat artikel dokumen pada Komputer/PC lokal dengan ektensi format file 'rtf, doc, docx atau PDF'.
3. Upload Dokumen
4. Setelah dokumen selesai diupload, isikan Title, Categories, Tag & Description sesuai topik artikel
5. Selesai

Gampang kan! :) Untuk menggandakan traffic web, cari situs online reading/publishing sejenis & upload ulang dokumen (Google Drive Misalnya).

Tambahan:

Upload juga dokumen pada situs online file sharing seperti 4shared misalnya, kadang-kadang muncul juga pada SERP google.

SERP 4Shared

File Sharing 4Shared

Semoga bermanfaat...
:)

Selengkapnya

SEO Traffic "Blog Walking"

Tingkatkan Traffic Website/Blog; Postingkan Comment pada Blog yang Mempunyai Keterkaitan Dengan Topik Web/Blog Anda.

Saat ini ngeblog menjadi suatu hal yang umum dan makin populer di kalangan masyarakat dunia. Mungkin mulanya orang menggunakan blog sebagai media jurnalis online, namun seiring berjalannya waktu blog digunakan untuk berbagai macam tujuan seperti beberapa diantaranya digunakan sebagai media pencari penghasilan tambahan online via internet, tugas sekolah atau kuliah, photo blog, dlsb. Jika blog digunakan sebagai media pencari penghasilan tambahan online, tidak dapat dipungkiri untuk memaksimalkan profit dari internet traffic blog merupakan faktor utama yang harus diperhatikan. Berbagai macam upaya dapat dilakukan untuk menaikkan traffic website atau blog, salah satu caranya adalah dengan posting comment pada website atau blog yang ramai pengunjung disertai dengan melampirkan alamat url website / blog. Aktifitas seperti ini sering disebut dengan istilah Blog Walking.

Kebanyakan blog yang ada sekarang memberikan keleluasaan kepada anda untuk submit komentar (comment) pada artikel yang mereka buat. Sebagian besar blog mengijinkan anda untuk melampirkan alamat website atau blog bersamaan dengan komentar (comment) yang anda postingkan. Ini adalah peluang yang bagus untuk meningkatkan traffic ke situs blog anda, jadi jangan disia-siakan. Perlu diingat dalam posting comment jangan sampai posting comment anda terindikasi sebagai spam, misal anda hanya meninggalkan comment dengan isi 'Hallo, kunjungi blog saya di http://www.bloganda.com'. Selain comment anda tidak ada nilainya, kemungkinan besar comment anda tidak akan di approve alias di banned oleh author blog yang bersangkutan.

Buatlah comment yang relevan dengan posting blog dan tambahkan juga informasi tambahan yang bernilai, hal ini bertujuan untuk menarik perhatian pengunjung lain yang memberikan comment atau bahkan pemilik blog. Berikanlah sedikit pujian pada artikel yang anda beri comment untuk mengambil hati pemilik blog. Dengan memberikan comment yang bernilai, visitor lain yang juga memberikan comment akan tertarik untuk mengunjungi alamat blog yang anda lampirkan. Selain itu anda dapat backlink gratis juga kan!

Faktanya saat ini melampirkan comment pada blog yang ramai traffic akan mendatangkan traffic yang ramai pula pada website atau blog anda. Tapi sangat penting untuk diingat bahwa trik ini harus dilakukan dengan cara yang benar dan penuh kesabaran sehingga usaha anda tidak akan sia-sia.

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

WordPress.Com Overview

Terdapat dua jenis WordPress. Pertama wordpress.com merupakan open source software yang berarti gratis bagi semua orang untuk menggunakannya (ngeblog). Yang kedua wordpress.org. WordPress.Org memberikan keleluasaan lebih untuk full control plugin, tampilan (theme), serta keseluruhan script CMS. Versi yang ini disebut dengan 'Self Hosting WordPress'. Namun Self Hosting WordPress mengharuskan anda untuk install script program wordpress pada server/hosting terpisah.

Kira-kira seperti itulah perbedaan mendasar antara wordpress.com dengan wordpress.org. Karena yang akan dibahas di sini adalah mengenai wordpress.com, langsung saja ke inti pokok permasalahan.

Keuntungan menggunakan wordpress.com:

1. Mudah untuk memulai. Tidak perlu install script wordpress ke web server seperti halnya Self Hosting WordPress


2. Anda tinggal pilih bermacam tampilan/themes yang ada.


3. Hosting gratis (jika ingin memakai nama domain sendiri dikenakan biaya kurang lebih $15 pertahun)


4. Automatic Update Script wordpress.


5. Server stabil.

Kekurangan menggunakan wordpress.com

1. Hanya dapat menggunakan tampilan (theme) yang disediakan.


2. Tidak bisa menambahkan theme sesuai keinginan anda.


3. Tidak bisa install/tambah plugin


4. Kadang-kadang iklan muncul di situs anda.


5. Tidak bisa menambahkan iklan (google adsense, AdsenseCamp, dll) pada blog.

Tetapi jika ingin buat blog yang nggak pake lama, mudah digunakan, instant langsung jadi, nggak terlalu ribet, WordPress.com yang anda butuhkan.

Have fun...
:D

Selengkapnya

Dropdown Label Kategori Blogspot

Blog dengan beragam tulisan yang dikelompokkan menjadi beberapa kategori, bisa jadi apabila menggunakan tampilan list label standar blogger akan menyita banyak tempat pada sidebar blog. Padahal jika dibuat lebih ringkas, sisa space sidebar dapat anda manfaatkan untuk widget informatif lainnya. Selain itu meringkas label list standar ke drop-down menu akan membuat blog anda kelihatan lebih rapi. Sebelum mulai ada baiknya backup dulu current template, selanjutnya ikuti step di bawah ini:

1. Login ke account blogspot


2. Klik pada tab 'Layout (Tata Letak)'


3. Klik 'Edit HTML'


4. Centang pada kotak check box 'Expand Template Widget'


5. Temukan kode yang mirip (identik) dengan code di bawah:
   
   [html collapse="false"]
   <ul>
   <b:loop values='data:labels' var='label'>
   <li>
   <b:if cond='data:blog.url == data:label.url'>
   <data:label.name/>
   <b:else/>
   <a expr:href='data:label.url'><data:label.name/></a>
   </b:if>
   (<data:label.count/>)
   </li>
   </b:loop>
   </ul>
   [/html]
   
   atau seperti ini:
   
   [html collapse="false"]
   <ul>
   <b:loop values='data:labels' var='label'>
   <li>
   <b:if cond='data:blog.url == data:label.url'>
   <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
   <b:else/>
   <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
   </b:if>
   <b:if cond='data:showFreqNumbers'>
   <span dir='ltr'>(<data:label.count/>)</span>
   </b:if>
   </li>
   </b:loop>
   </ul>
   [/html]
   
   Hapus dan ganti kode di atas dengan kode di bawah ini;
   
   [html collapse="false"]
   <select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'><option>Browse By categories</option>
   <b:loop values='data:labels' var='label'>
   <option expr:value='data:label.url'><data:label.name/>
   (<data:label.count/>)
   </option>
   </b:loop>
   </select>
   [/html]
   

Klik pada tombol 'Simpan Template' (Save Template) dan lihat hasilnya.

Have fun...
:D

Selengkapnya