Test Block Top

The Blog...
Articles, Tips & Trick and Other Interesting Information...
Tampilkan postingan dengan label Tips & Trik. Tampilkan semua postingan
Tampilkan postingan dengan label Tips & Trik. Tampilkan semua postingan
13 Juni 2012

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

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

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 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 - 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

General Setting - Minify

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

General Setting - Database & Object Cache

General Setting - Database & Object Cache

General Setting → Browser Cache
  1. Browser Cache: Centang Enable

General Setting - Browser Cache

General Setting - Browser Cache

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

General Setting - 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 - 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

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

JavaScript Minify Suggestion

Minify JS

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

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 - 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 - 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 - 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

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
11 Juni 2012

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

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/VisitorSearch EngineSitus Online Reading/PublishingLink ke Web/Blog

SERP Google

SERP Google

SERP Scribd

SERP Scribd

Hyperlink Web/Blog

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/klik3.664 x 30% = 1.099 hits/klik. Tetap saja jumlah yang lumayan bukan!
:D

Scribd Statistik Dokumen

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

AWstats Web Traffic Analytics

Referral Traffic Google Analytics

Referral Traffic Google Analytics

Global 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

SERP 4Shared

File Sharing 4Shared

File Sharing 4Shared


Semoga bermanfaat...
:)
10 Juni 2012

Reset Konfigurasi Setting Windows

Kendala yang sering terjadi ketika akan reset OS Windows ke setting normal (default value) adalah susah mengingat perubahan-perubahan apa saja yang telah dilakukan pada setiap setting & konfigurasi Windows OS System. Ini sering terjadi dikarenakan banyaknya perubahan (modifikasi) pada setiap setting/konfigurasi & terlupakan seiring berjalannya waktu.

Mungkin saja perubahan konfigurasi ini dilakukan oleh user administrator baik itu secara manual ataupun otomatis dari 3rd party software, misalnya tweaking kinerja (performance) yang biasanya merubah setting default Windows Registry, percepat start up Windows via edit Microsoft Management Console Services, dimana setiap perubahan yang dilakukan menjanjikan peningkatan kinerja Windows, dlsb.

Namun bagaimana jika ternyata hasilnya tidak memuaskan & ingin mengembalikan konfigurasi ke setting semula (sebelum ada perubahan)? Dan apesnya user tidak seberapa ingat aspek apa saja yang telah dimodifikasi, terlebih lagi jika menggunakan software pihak ketiga (3rd party software) tanpa ada backup restore point..

Jangan panik, sekarang ada tool (software) gratis dengan nama RefreshPC yang otomatis dapat mengembalikan semua setting & konfigurasi windows ke setting awal (default setting).

Software ini dapat dioperasikan pada Windows XP, Windows Vista, Windows 7 & dapat berjalan pada arsitektur OS 32-bit maupun 64-bit.

Kemampuan software

  1. Restore Windows Services (Microsoft Management Console Services)
  2. Restore Windows policies (Microsoft Management Console Group Policy)
  3. Reset shell parameter
  4. Reset setting browser Internet Explorer
  5. Reset user profile parameter
  6. Restore konfigurasi desktop

Download Gratis RefreshPC di sini.

Setelah download, install di komputer (PC). Selama proses install, software akan memberikan 2 opsi (pilihan) untuk membuat restore point. Untuk berjaga-jaga bila terjadi kesalahan & ingin mengembalikan ke setting sebelumnya, klik tombol Yes

Windows Restore Point

Windows Restore Point


Buka software RefreshPC. User Interface (tampilan) RefreshPC sedikit berbeda dengan kebanyakan software lainnya → hanya ada satu tombol untuk reset Windows ke default setting. Klik tombol Refresh My Windows 7 Settings, seketika itu juga semua konfigurasi & setting otomatis dikembalikan ke default value.

Reset Windows 7

Reset Windows 7


Tunggu sampai proses reset selesai. Setelah Windows selesai direset, jendela konfirmasi sukses akan tampak seperti screenshot gambar di bawah.

Reset Windows Sukses

Reset Windows Sukses


Selesai. Restart komputer untuk apply perubahan.
04 Juni 2012

Cara Mudah Membuat Local Domain

Akses testing website pada local webserver ataupun pada home network/local network (intranet) akan lebih mudah menghafal jika menggunakan 'domainmu.tld' dari pada sederetan angka private IP seperti 192.168.1.xxx misalnya. Mungkin saja pada local network, anda mempunyai beberapa testing website seperti WordPress, Drupal, Joomla atau script software lainnya.

Cara/trik ini awalnya bermula karena saya sering lupa & pusing menghafal satu persatu alamat private IP untuk masing-masing script yang saya test. Terpaksa deh intip catatan private IP masing-masing testing script, he.. he... :D. Namun sekarang tidak lagi. Setelah utak-atik & sekian kali coba, ketemu juga triknya.

Cara konvensional (cara lama) untuk akses halaman testing script biasanya dilakukan dengan membuka alamat private IP (contoh: http://192.168.1.100). Namun tahukah anda private IP pada local network dapat di mapping ke alamat domain sesuai keinginan, misal: http://wordpress.tld.

Catatan:

Untuk mapping private IP ke nama domain disyaratkan setidaknya mempunyai satu atau beberapa private IP, dan tld domain bukan merupakan tld domain yang umum (consideration by ICANN/IANA).com, .net, .org, .info, .ws, .us dlsb.

Gunakan tld domain yang belum ada (terdaftar), misalnya; .xyz, .gt, .namamu dlsb. Bisa juga menggunakan tld dengan karakter file ekstensi yang umum, seperti misal; .exe, .pdf, .psd, jpg, png, .gif, .bmp, .docx, .rtf dlsb.

Langsung ke topik. Begini caranya:

» Cari tahu private IP target (contoh: 192.168.1.100)

» Buka file hosts:
    Windows → %SystemRoot%\system32\drivers\etc\hosts
    UNIX/Linux → /etc/hosts
    Apple Macintosh → /private/etc/hosts
Lokasi file HOSTS pada OS lainnya dapat lihat di sini

» tambahkan Private IP + Domain target pada file hosts. Contoh:

Beberapa web/script dengan satu Shared Private IP menggunakan Virtual Hosts



192.168.1.114 wordpress.lg
192.168.1.114 joomla.lg
192.168.1.114 swardana.pdf

Beberapa web/script dengan masing-masing satu Private IP menggunakan Virtual Hosts



192.168.1.114 wordpress.lg
192.168.1.115 joomla.lg
192.168.1.116 swardana.pdf

Selesai. Sekarang coba buka alamat url web/script dengan menggunakan local domain. Main page (halaman utama) local domain home network pada contoh di atas (wordpress.lg, joomla.lg & swardana.pdf) dapat dilihat pada screenshot di bawah:

Setup Local Domain

wordpress.lg

Setup Local Domain 2

joomla.lg

Setup Local Domain 3

swardana.pdf

Mapping local domain ini tidak diharuskan menggunakan tld, contoh; tambahkan Private IP + domain (tanpa tld) pada file hosts



192.168.1.114 wordpress
192.168.1.115 joomla
192.168.1.116 swardana

Maka alamat url yang harus dibuka pada address bar web browser adalah (contoh Private IP & local domain di atas):

→ http://wordpress/
→ http://joomla/
→ http://swardana/

Jangan lupa tambahkan Private IP + Local Domain pada masing-masing 'file hosts' client PC untuk dapat akses situs local dalam satu lingkup home network/local network (intranet).

Lebih mudah & simple bukan! Daripada akses menggunakan alamat Private IP, lebih gampang diingat & kelihatan keren jika menggunakan local domain.

:D
26 Mei 2012

Tips Memilih Provider Hosting

Faktor apa saja yang harus dipertimbangkan oleh webmaster dalam memilih hosting provider? Tidak berbeda dengan seorang pebisnis online ataupun blogger veteran, kriteria hosting provider yang dapat diandalkan tidak hanya memberikan layanan (service) yang baik namun harga yang terjangkau (masuk akal/reasonable cost) patut juga dipertimbangkan.

Jika anda sekarang bingung cari hosting provider yang dapat diandalkan, tips memilih hosting provider berikut dapat anda jadikan referensi. Tentu saja anda ingin uang & waktu tidak terbuang percuma dikarenakan tidak ada kecocokan antara hosting provider dan kebutuhan situs anda.

Service & Technical Support

Pertama dan yang paling penting, lihat fasilitas support client (customer service) dan technical support yang tersedia pada masing-masing hosting provider. Standar minimal provider hosting yang bagus umumnya menyediakan fasilitas pelayanan client via email, submit ticket, telepon, sms ataupun online chat pada situs mereka.

Dimana dan kapanpun anda mengalami permasalahan, hosting provider harus mampu memberikan respon yang memuaskan dalam kurun waktu tidak lebih dari 1x24 jam. Untuk testing feedback respond, coba kirim email dengan subjek permasalahan yang umum atau coba chat dengan mereka jika fasilitas online chatting (live chat) tersedia.

Jika respon terhadap pertanyaan/permasalahan anda cepat (setidaknya 2 atau 3 kali masa coba), satu kandidat hosting provider sudah anda dapat, setidaknya untuk satu poin seleksi ini.

Exist

Poin kedua yang harus anda ketahui adalah sudah berapa lama hosting provider berkecimpung dalam dunia hosting. Gunakan WHOIS checker untuk menelusuri tanggal dibuatnya nama domain hosting provider terkait. Cek whois di sini.

Hosting provider yang sudah berkecimpung dalam bisnis hosting setidaknya minimal satu tahun patut anda pertimbangkan.

Traffic Bandwidth Allowed

Cari tahu batasan jumlah bandwidth (data transfer) yang ditawarkan hosting provider. Jika situs/website anda melebihi batas pemakaian bandwidth per bulan, visitor/pengunjung situs tidak akan bisa mengakses website anda.

Pastikan (perkirakan) jumlah batasan maksimum bandwidth per bulan cukup memadai untuk memenuhi kebutuhan traffic situs/website anda.

Maksimum Disk Space

Masih dalam subjek masalah yang sama, cari tahu batasan data penyimpanan (disk space) file maksimum yang ditawarkan provider hosting. Kapasitas penyimpanan yang besar berarti memberikan keleluasaan kepada anda untuk membuat situs/website dengan ukuran file yang cukup besar (website yang kompleks).

Garansi 100% Uang Kembali (money back guarantee)

Cari tahu apakah hosting provider memberikan garansi uang kembali. Untuk berjaga-jaga & menekan (me-minimalisir) biaya jika sewaktu-waktu anda tidak puas dengan layanan/fitur hosting dan ingin membatalkan kontrak memakai jasa hosting mereka.

Cek jaminan garansi uang kembali yang ditawarkan hosting provider setidaknya minimal 7 hari.

Good Uptime

Poin lainnya yang perlu digaris bawahi adalah apakah hosting provider memberikan jaminan uptime server yang bagus. Jika uptime kurang bagus, imbasnya situs anda akan sering down dari waktu ke waktu. Jangan sampai anda kehilangan customer, visitor atau subscriber dikarenakan server web sering down.

Jika semua poin di atas terpenuhi, dapat dipastikan 95% anda sudah menemukan kandidat provider hosting yang dapat diandalkan.

Tips:

Jangan terpancing dengan tawaran bandwidth (data transfer) & disk space yang gila-gilaan (ratusan GB / Unlimited) dengan harga super murah. Kenapa? Alasannya simpel; harga penambahan slot bandwidth & disk space yang ditawarkan data center tidaklah murah, dan juga bandwidth atau disk space selalu punya batasan (nonsense jika unlimited). Lebih reasonable (masuk akal) jika hosting provider menawarkan unmetered (bukan unlimited) bandwidth & disk space, namun tentu saja dengan harga yang sebanding (mahal).

Good luck & Have fun...
:D
22 Mei 2012

Caesium Image Compressor

Compress (memperkecil) ukuran file gambar (image) kadang diperlukan dengan bermacam alasan. Salah satu contohnya webmaster sering compress gambar kreasi mereka sebelum diupload ke webserver, alasannya sederhana; untuk menghemat traffic bandwidth, ruang penyimpanan (disk space) dan memperkecil (mempercepat) waktu loading web. Terlebih lagi bagi webmaster photo blog, biasanya mereka posting file photo hasil jepretan minimal Kamera Digital SLR yang mempunyai resolusi diatas 3000 pixels. Untuk kualitas gambar di atas 3000 pixels tentu saja konsekuensinya file size image minimal 1 MB atau bahkan jauh di atasnya. Dan juga bagi pengguna PC rumah yang mempunyai koleksi photo kamera digital misalnya, sudah pasti file-file ini akan banyak memakan resource ruang penyimpanan (hard disk). Untuk beberapa alasan inilah mengapa compress image diperlukan.

Anda dapat compress file gambar menggunakan bermacam software image compressor yang tersedia, baik itu software lisensi berbayar (paid license) ataupun yang gratis (GNU General Public License). Namun pada artikel kali ini saya akan sedikit mengulas cara compress (memperkecil) file gambar menggunakan software open source (gratis) image compression Caesium. Caesium merupakan salah satu powerfull tool image compression gratis yang dapat memperkecil ukuran size file gambar rata-rata sampai 80% tanpa mengurangi kualitas ketajaman gambar (tentu saja jika dilihat sekilas).

Langsung saja!! Untuk mulai download terlebih dahulu Caesium, setelah itu install di komputer anda & buka aplikasi. Import file gambar dengan klik pada icon Add Pictures atau import beberapa file gambar sekaligus dalam satu folder dengan klik pada icon Add Folder (Screenshot 1). Anda dapat juga drag & drop file gambar ke jendela aplikasi Ceasium, supported file extention Caesium diantaranya JPEG (JPG), PNG & BMP.

Pada artikel ini saya akan coba compress 6 image file photo, masing-masing file mempunyai file size di atas 5 MB dan mempunyai dimensi gambar 5184 x 3456 pixels (Screenshot 2 & Screenshot 3).

Image Compressor Caesium 1

Screenshot 1

Image Compressor Caesium 2

Screenshot 2

Image Compressor Caesium 3

Screenshot 3

Setelah file gambar selesai di import, sesuaikan kualitas output, format output (JPG, PNG atau BMP) & output folder kemudian klik tombol Compress! (Screenshot 4). Setelah proses compress image selesai, anda dapat melihat file size baru & rasio compression. Dapat anda lihat pada Screenshot 5, rata-rata rasio penurunan file size 80% dari 5 MB ditekan ke kisaran 1 MB.

Hasil perbandingan gambar (image) sebelum dan sesudah di compress dapat anda lihat pada Screenshot 6 (karena ukuran gambar terlalu besar, saya potong sebagian / dimensi 1024 x 360 pixel).

Image Compressor Caesium 4

Screenshot 4

Image Compressor Caesium 5

Screenshot 5

Image Compressor Caesium 6

Screenshot 6

File gambar (image) hasil compress software gratis ini sulit dibedakan dibanding file aslinya (uncompressed) jika dilihat dengan mata telanjang. Namun tentu saja ada perbedaan jika dianalisa lebih lanjut, silahkan coba sendiri jika anda penarasan. Download Caesium di sini.

Semoga bermanfaat...
:)
13 Mei 2012

Sekilas Tentang Robots.txt

Dilihat dari nama ekstensi filenya .txt (text), dapat dimpulkan robots.txt merupakan file text dalam konteks artikel ini mempunyai arti file text yang dibuat khusus untuk memberitahukan robot mesin pencari (search engine) tentang apa yang harus mereka lakukan pada halaman tertentu website atau blog. Singkatnya robots.txt dikhususkan untuk membatasi aktifitas crawling search engine terhadap file ataupun direktori folder tertentu suatu website/blog.

Untuk membuat file robots.txt caranya gampang, buat file baru menggunakan text editor (notepad misalnya) dan simpan dengan nama robots.txt. Kemudian upload file ini ke direktori root website (public_html, htdocs, dlsb).

Contoh Penggunaan Syntax robots.txt

Blok Semua Robot ke Semua File/Direktori



# Blok Semua Robot ke Semua File/Direktori
User-agent: *
Disallow:

Blok Semua Robot



# Blok Semua Robot
User-agent: *
Disallow: /

Blok Semua Robot Pada Direktori/Folder Tertentu



# Blok Semua Robot Pada Direktori/Folder Tertentu
User-agent: *
Disallow: /admin/
Disallow: /member/
Disallow: /private/

Blok Spam Bots



# Blok Spam Bots
User-agent: Bad Crawler
Disallow: /

Seperti terlihat pada contoh di atas, anda bisa menyisipkan comment (komentar) pada file robots.txt untuk memudahkan identifikasi syntax. Tambahkan karakter #, kemudian tulis komentar anda.

Namun seperti layaknya karya buatan manusia lainnya, robots.txt mempunyai beberapa kelemahan, diantaranya:
  1. robots.txt tidak akan mampu blok spam bots (bad crawler/robot), biasanya spam bots mengabaikan syntax rule robots.txt.
  2. robots.txt ditujukan hanya untuk blok robot (search engine) & bukan user (site visitor).

    robots.txt merupakan public file, semua orang (site visitor) bisa melihat konfigurasi file atau direktori mana saja yang diblok oleh file robots.txt. Cukup dengan mengetikkan alamat domain atau subdomain diikuti dengan mengetikkan karakter garis miring/slash (/) + robots.txt, site visitor bisa melihat isi/konten file robots.txt (http://domain-target.com/robots.txt)

    Untuk mencegah pengunjung situs (site visitor) melihat file robots.txt, baca trik .htaccess di sini.
Tips menggunakan file robots.txt:
  1. Selalu tempatkan file robots.txt pada direktori/folder root website (baik domain utama maupun subdomain). Contoh: tempatkan pada http://domainmu.com, http://subdomain1.domainmu.com, http://subdomain2.domainmu.com, dst...
  2. Tak ada manusia yang sempurna. Tidak menutup kemungkinan penulisan code (syntax) pada file robots.txt bisa salah ketik. Gunakan tool online checker robots.txt untuk cek file robots.txt anda. Berikut beberapa situs robots.txt checker yang dapat anda kunjungi:
  3. Manfaatkan robots.txt generator pada halaman Google Webmaster Tools untuk buat file robots.txt.
  4. Untuk blok robot tertentu, info database robot bisa anda lihat pada halaman ini.
Semoga bermanfaat...
:)
06 Mei 2012

PHP To JavaScript Converter

Tidak sengaja saya baru saja menemukan script unik di google code, script PHP yang dapat convert File PHP ke JavaScript. Penasaran! Langsung saja ke TKP. Berikut cara sederhana convert file PHP ke JavaScript.

Pertama, persyaratan untuk dapat menjalankan script PHP to JavaScript Converter ini adalah Webserver (Setidaknya Apache Webserver harus terinstall di server). Jika anda punya account hosting, anda bisa langsung melanjutkan tutorial ini. Namun jika tidak ada, tidak masalah. Script ini bisa juga dijalankan oleh Apache yang terinstall pada sistem operasi Windows (menggunakan WAMP Server).

Kedua, code simple PHP to JavaScript Converter. Copy code PHP di bawah ini kemudian simpan dengan nama terserah (bebas). Misal, php2js.php:



<?php
error_reporting(E_ALL);
class PHP2js {
/** @var array holds tokens of the php file being converted */
private $_tokens;
/** @var int number of tokens */
private $count;
/** @var int the current token */
private $current = 0;
/** @var javascript gets collected here */
private $js;

/** @var array these token keys will be converted to their values */
private $_convert = array (
'T_IS_EQUAL'=>'==',
'T_IS_GREATER_OR_EQUAL'=>'>=',
'T_IS_SMALLER_OR_EQUAL'=>'<=',
'T_IS_IDENTICAL'=>'===',
'T_IS_NOT_EQUAL'=>'!=',
'T_IS_NOT_IDENTICAL'=>'!==',
'T_IS_SMALLER_OR_EQUA'=>'<=',
'T_BOOLEAN_AND'=>'&&',
'T_BOOLEAN_OR'=>'||',
'T_CONCAT_EQUAL'=>'+= ',
'T_DIV_EQUAL'=>'/=',
'T_DOUBLE_COLON'=>'.',
'T_INC'=>'++',
'T_MINUS_EQUAL'=>'-=',
'T_MOD_EQUAL'=>'%=',
'T_MUL_EQUAL'=>'*=',
'T_OBJECT_OPERATOR'=>'.',
'T_OR_EQUAL'=>'|=',
'T_PLUS_EQUAL'=>'+=',
'T_SL'=>'<<',
'T_SL_EQUAL'=>'<<=',
'T_SR'=>'>>',
'T_SR_EQUAL'=>'>>=',
'T_START_HEREDOC'=>'<<<',
'T_XOR_EQUAL'=>'^=',
'T_NEW'=>'new',
'T_ELSE'=>'else',
'.'=>'+',
'T_IF'=>'if',
'T_RETURN'=>'return',
'T_AS'=>'in',
'T_WHILE'=>'while',
'T_LOGICAL_AND' => 'AND',
'T_LOGICAL_OR' => 'OR',
'T_LOGICAL_XOR' => 'XOR',
'T_EVAL' => 'eval',
'T_ELSEIF' => 'else if',
'T_BREAK' => 'break',
'T_DOUBLE_ARROW' => ':',
);

/** @var array these tokens stays the same */
private $_keep = array(
'=', ',', '}', '{', ';', '(', ')', '*', '/', '+', '-', '>', '<', '[', ']',
);

/** @var array these tokens keeps their value */
private $_keepValue = array (
'T_CONSTANT_ENCAPSED_STRING', 'T_STRING', 'T_COMMENT', 'T_ML_COMMENT', 'T_DOC_COMMENT', 'T_LNUMBER',
'T_WHITESPACE',
);

/**
* constructor, runs the show
*
* @param string $file path (relative or absolute) to the php file that is converted to js
*/
public function __construct ($file) {
$this->file = $file;
$this->_tokens = $this->getTokens($file);
$this->count = count($this->_tokens)-1;
$this->compileJs();

}

/**
* gets tokens from file. Remove the meta PHP2js stuff.
*
* @param string $file path (relative or absolute) to the php file that is converted to js
* @return array
*/
private function getTokens($file) {
$src = file_get_contents($this->file);
$src = preg_replace ("/\n([\t ]*)require.*PHP2js\.php.*\'.*;/Uis", "", $src);
$src = preg_replace ("/\n([\t ]*)new.*PHP2js.*;/Uis", "", $src);
$this->src = $src;
return token_get_all($src);
}

/**
* loops through tokens and convert to js
*
*/
private function compileJs() {
foreach ($this->_tokens as $_) {
$this->next ($name, $value);
$this->parseToken($name, $value, $this->js);
}
}

/**
* output the js and die
*/
private function renderJs () {
echo "<script>$this->js</script>";
die();
}

/**
* changed referenced args to name and value of next token
*
* @param string $name
* @param string $value
* @param unknown_type $i, the amount of nexts to skip
*/
private function next(& $name, & $value, $i=1) {
for ($j=0; $j<$i; $j++) {
$this->current++;
if ($this->current > $this->count) $this->renderJs();
$_token = $this->_tokens[$this->current];
$this->getToken ($name, $value, $_token);
}
}

/**
* find and return first name matching argument
*
* @param mixed $_tokenNames
* @return string
*/
private function findFirst ($_needles) {
$name = $value = '';
for ($i=$this->current+1; $i<$this->count; $i++) {
$this->getToken($name, $value, $this->_tokens[$i]);
if (in_array($name, (array)$_needles)) {
return $name;
}
}
}

/**
* return javascript until match, match not included
*
* @param array $_needles
* @return string
*/
private function parseUntil ($_needles, $_schema=array(), $includeMatch = false) {
$name = $value = $js = $tmp = '';
while (true) {
$this->next ($name, $value);
$this->parseToken($name, $value, $tmp, $_schema);
if (in_array($name, (array)$_needles)) {
if ($includeMatch === true) {
return $tmp;
} else {
return $js;
}
}
$js = $tmp;
}
}

/**
* tries to find the token in $this->_convert, $this->_keep and $this->_keepValue
* if it fails it tries to find a method named as the token. If fails here also it throws away the token.
*
* @param string $name
* @param string $value
* @param string $js store js here by reference
*/
private function parseToken ($name, $value, & $js, $_schema=array()) {
//custom changes
if (in_array($name, array_keys ((array)$_schema))) {
$js .= $_schema[$name];
//change name to other value
} else if (in_array($name, array_keys ($this->_convert))) {
$js .= (!empty($this->_convert[$name])) ? $this->_convert[$name]: $name;
//keep key
} elseif (in_array($name, $this->_keep)) {
$js .= $name;
//keep value
} elseif (in_array($name, $this->_keepValue)) {
$js .= $value;
//call method
} else {
if (method_exists($this, $name)) {
$js .= $this->$name($value);
}
}
//ignore
}

/**
* converters
*
* These guys are equivalents to tokens.
*/

/**
* class definition
*
* @param sting $value
* @return string
*/
private function T_CLASS($value) {
$this->next ($name, $value, 2);
return "function $value() ";
}

/**
* define function
*
* @param string $value
* @return string
*/
private function T_FUNCTION($value) {
$this->next ($name, $value, 2);
return "this.$value = function";
}

/**
* echo is replaced with document.write
*
* @param string $value
* @return string
*/
private function T_ECHO($value) {
return 'document.write('.$this->parseUntil(';').');';
}

/**
* array. Supports both single and associative
*
* @param string $value
* @return string
*/
private function T_ARRAY($value) {
$_convert = array('('=>'{',     ')'=>'}',);
$js = $this->parseUntil(array(';'), $_convert, true);
if (strpos($js, ':') === false) {
$this->tmp = -1;
$js = preg_replace_callback ('/([{, \t\n])(\'.*\')(|.*:(.*))([,} \t\n])/Uis', array($this, 'cb_T_ARRAY'), $js);
}
return $js;
}

private function cb_T_ARRAY($_matches) {
$this->tmp++;
if (strpos($_matches[0], ':') === false) {
return ($_matches[1].$this->tmp.':'.$_matches[2].$_matches[3].$_matches[4].$_matches[5]);
} else {
return $_matches[0];
}
}
/**
* foreach. Gets converted to for (var blah in blih). Supports as $key=>$value
*
* @param string $value
* @return string
*/
private function T_FOREACH($value) {
$_vars = array();
while (true) {
$this->next ($name, $value);
if ($name == 'T_VARIABLE') $_vars[] = $this->cVar($value);
$this->parseToken($name, $value, $js);
if ($name == '{') {
if (count($_vars) == 2) {
$array = $_vars[0];
$val = $_vars[1];
$this->js .=
"for (var {$val}Val in $array) {".
"\n                        $val = $array"."[{$val}Val];";
}
if (count($_vars) == 3) {
$array = $_vars[0];
$key = $_vars[1];
$val = $_vars[2];
$this->js .=
"for (var $key in $array) {".
"\n                        $val = $array"."[$key];";
}
return '';
}
$jsTmp = $js;
}
}

/**
* declare a public class var
*
* @param string $value
* @return string
*/
private function T_PUBLIC ($value) {
$type = $this->findFirst(array('T_VARIABLE', 'T_FUNCTION'));
if ($type == 'T_FUNCTION') return '';
$js = '';
while (true) {
$this->next ($name, $value);
$this->parseToken($name, $value, $js);
if ($name == ';') {
$js = str_replace(array(' '), '', $js);
return 'this.'.$js;
} else if ($name == '=') {
$js = str_replace(array(' ','='), '', $js);
return 'this.'.$js.' =';
}
}
}

/**
* variable. Remove the $
*
* @param string $value
* @return string
*/
private function T_VARIABLE($value) {
return str_replace('$', '', $value);
}

/* helpers */

private function getToken(& $name, & $value, $_token) {
if (is_array($_token)) {
$name = trim(token_name($_token[0]));
$value = $_token[1];
} else {
$name = trim($_token);
$value = '';
}
}

private function cVar($var) {
return str_replace('$', '', $var);
}

/** debugging stuff. Ugly and deprecated. */

/** deprecated and sucks */
private $_openTags = array(
'T_OPEN_TAG', 'T_CLASS', 'T_PUBLIC', 'T_FOREACH', 'T_ARRAY', '{', 'T_VARIABLE', '('
);

/** deprecated and sucks */

/** deprecated and sucks */
private $indent = 0;
/** deprecated and sucks */
private $debug;


private $_closeTags = array(
'}', 'T_CLOSE_TAG', ';', ')',
);

public function __destruct() {
/**
$js = htmlentities ($this->js);
echo ("<pre>$js</pre>");
$this->write();
echo $this->debug;
//*/
}


private function write() {
$_tokens = token_get_all($this->src);
foreach ($_tokens as $key=>$_token) {
if (is_array($_token)) {
$name = trim(token_name($_token[0]));
$value = $_token[1];
} else {
$name = trim($_token);
$value = '';
}
$this->printToken($name, $value, $_token);
}
}

private function printToken ($name, $value, $_token) {
$value = htmlentities($value);

if (in_array($name, $this->_closeTags)) $this->indent--;
$indent = str_repeat('.&nbsp;&nbsp;&nbsp;&nbsp;', $this->indent);
if (in_array($name, $this->_openTags)) $this->indent++;
if (!empty($value))
$this->debug .= "
<br />$indent
<b>$name&nbsp;&nbsp;=&nbsp;&nbsp;'$value'</b>

";
else
$this->debug .= "
<br />$indent
<b>$name</b>

";
}
}
?>

Upload file php2js.php ke server. Kemudian buat file Baru dengan nama bebas, convert.php misalnya. Isikan convert.php dengan code PHP yang ingin anda convert (di bawah "/* Convert Code Start Here */"), kemudian upload ke web server. Misalnya seperti kode di bawah ini:



<?
require_once 'php2js.php';
new php2js(__FILE__);
/**
* My super cool php class that will be converted to js!!!
*/
/* Convert Code Start Here */
class HelloWorld {
/**
* So here goes a function that echos
*
* @param string $foo
* @param string $bar
*/
function foo($foo, $bar) {
echo $foo . ' ' . $bar;
}
}
$H = new HelloWorld;
$H->foo('Hello', 'World');
?>

Convert PHP To JavaScript

Buka file convert.php pada web browser, hasil yang keluar akan tampak seperti pada gambar Screenshot 1. Untuk melihat code JavaScript hasil convert, jika menggunakan browser Mozilla Firefox klik kanan pada halaman kosong web browser kemudian klik View Page Source (Screenshot 2), atau tekan tombol shortcut Ctrl + U. Pada jendela baru yang terbuka, anda akan melihat source code JavaScript hasil convert (Screenshot 3).



<script>
/**
* My super cool php class that will be converted to js!!!
*/
/* Convert Code Start Here */
function HelloWorld()  {
/**
* So here goes a function that echos
*
* @param string $foo
* @param string $bar
*/
this.foo = function(foo, bar) {
document.write( foo + ' ' + bar);
}
}
H = new HelloWorld;
H.foo('Hello', 'World');
</script>

convert_php_to_javascript1

Screenshot 1

convert_php_to_javascript2

Screenshot 2

convert_php_to_javascript3

Screenshot 3

Selesai. Semoga bermanfaat.
:)
Loncat ke Atas ↑