Website – Cita Media

Mempercepat Website WordPress dengan mod_deflate (Gzip Compression)

Posted by : Budi Techno, Website apache, compression, gzip, mod_deflate, pagespeed insight, wordpress

Sedikit berbagi tentang Gzip compresion.

Pertanyaan yang mungkin tidak bisa kita jawab secara pasti. Apakah website kita sudah cepat? Apakah kita yakin dengan jawaban kita? Setidaknya ada banyak parameter yang menentukan apakah website kita sudah cepat.

Sebelumnya untuk mengecek atau menilai bagaimana kecepatan website kita, silakan masuk ke halaman Google Developer. Yaitu PageSpeed Insight.

Contoh hasil yang didapat adalah seperti gambar dibawah ini:

Nilai 62/100 untuk diload di PC dan 50/100 untuk diload pada perangkat pintar seperti smartphone atau tablet.

Selain memberi nilai, Google juga menyajikan data-data tentang hal-hal yang perlu diperbaiki untuk meningkatkan performa. Saran dengan tanda seru latar belakang merah, adalah prioritas utama yang haris diperbaiki.

Dari contoh diatas. Google menyarankan untuk mengaktifkan pemampatan (kompresi) dan menghilangkan javascript dan CSS yang memblokir perenderan di konten paruh atas, beserta cara memperbaikinya.

Untuk postingan ini, kita akan coba memperbaiki permasalahan tentang kompresi.

File yang dikirim dari server ke PC kita masih dianggap terlalu besar. Alangkah lebih ringan lagi apabila sebelum didownload browser, server mengkompresi data-data yang diperlukan dahulu. Hasil kompresi yang kecil akan lebih cepat ditransfer ke PC. Baru kemudian PC mengekstrak untuk digunakan.

Tentang kompresi, google memberikan bantuan di link berikut ini. Modul yang digunakan disesuaikan dengan server yang dipakai. Kebetulan saya memakai Apache, jadi menggunakan modul mod_deflate.

Caranya yaitu sbb:

1. Masuk ke cpanel, biasanya dengan format http://www.namadomain.com/cpanel, nama domain sesuai nama domain anda. Jangan lupa login dengan user cpanel, perlu diingat username cpanel beda dengan user wordpress.

2. Buka File Manager, akan muncul tab baru. File manager ini layaknya windows explorer pada komputer kita. File manager berisi data-data termasuk website/instalasi wordpress kita.

3. Pada File Manager, masuk ke folder public_html,

4. Edit file “.htaccess”, yaitu dengan klik kanan pada file tersebut dan pilih Edit. Akan muncul tab baru

5. Secara default file .htaccess sudah berisi kode dari wordpress, yang kita lakukan yaitu menambahkan kode. Ingat! bukan mengganti tetapi menambah. Kopi kode berikut ini dan tempelkan dibawah kode yang sudah ada.

<IfModule deflate_module>
<IfModule filter_module>
AddOutputFilterByType DEFLATE text/plain text/html
AddOutputFilterByType DEFLATE text/xml application/xml application/xhtml+xml application/xml-dtd
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml image/svg+xml
AddOutputFilterByType DEFLATE text/css text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE font/otf font/opentype application/font-otf application/x-font-otf
AddOutputFilterByType DEFLATE font/ttf font/truetype application/font-ttf application/x-font-ttf
</IfModule>
</IfModule>

Setelah itu simpan (save) file.

Untuk mengecek efek dari script ini, silakan cek ulang menggunakan PageSpeed Insight dari Google. Untuk website yang saya coba setelah ditambahkan kode diatas, didapatkan nilai sebagai berikut:

Hasil PageSpeed Insight setelah ditambahkan mod deflate

Hasil 82/100 untuk PC dan 64/100 untuk mobile device. Untuk PC ada peningkatan 20/100, sedang mobile ada peningkatan 14/100.

Sebuah peningkatan yang cukup besar dengan memperbaiki satu masalah.

Sebagai tambahan bila server tidak ada mod_deflate, bisa ditambahkan pada file php.ini di root dengan baris kode: zlib.output_compression = on.

Efek yang sudah saya coba. Nilai pada PC meningkat tapi nilai pada mobile device menurun beberapa point.

Demikian sedikit sharing, semoga bermanfaat.

Gambar Tidak Bisa Tampil di WordPress

Posted by : Budi Blog, Techno, Website blog, gambar tidak tampak, wordpress

Bagi Anda yang memiliki blog wordpress terutama self hosting. Pernahkah Anda mengalami hal ini?

Semua file gambar tidak tampil di blog WordPress (self hosting). Yaitu antara lain di single post, featured image, logo di header, background theme. Semua tak tampak.

Sudah coba ganti themes, masih belum bisa. Plugin di non aktifkan semua, juga belum membantu. Coba cari2 di google, masih juga belum menemukan solusi.

Kemudian iseng-iseng cek file .htaccess lewat cpanel. Diluar dugaan, tidak ada isinya sama sekali. Alias KOSONG BLONG. Masih belum tahu apa penyebabnya. Apakah ada pluging yang bisa menghapus .htaccess. Apakah mungkin plugin WP Super Cache yang bila diinstal akan menuliskan script ke .htaccess, tapi karena error bisa jadi justru menghapus isinya.

Masih tanda tanya. Tapi ya sudahlah.

Saya copy paste script standar wordpress untuk file .htaccess dari web saya yang lain. Alhamdulillah langsung bisa normal. Gambar-gambar yang tadinya tidak tampak jadi kelihatan.

Note:

File standar wordpress untuk .htaccess
# BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule>


# END WordPress

Mengubah WooCommerce Menjadi Katalog

Posted by : Budi Techno, Website katalog, plugin, woocommerce, wordpress

Woocommerce

WooCommerce seperti yang kita ketahui adalah plugin wordpress untuk toko online. Banyak sekali fitur-fitur yang bisa dioptimalkan khusus untuk toko online. Dengan addon yang lengkap dengan segala kelebihan sehingga banyak digunakan oleh website-website online store baik dalam maupun luar negeri.

Ternyata WooCommerce juga bisa digunakan sebagai katalog saja. Ada beberapa plugin premium, dalam artian kita harus membayar untuk mengubah WooCommerce menjadi katalog. Tapi ada cara sederhana yang bisa kita gunakan. Dan yang paling penting gratis.

Yaitu dengan menambahkan script pada style.css theme yang sedang kita pakai. Tambahkan script berikut.

form.cart {
display: none!important;
}

.woocommerce .products .add_to_cart_button {
display: none!important;
/* Hides the Add to Cart button on the thumbnail pages */
}

Bagian atas untuk menghilangkan tombol Add to Cart pada single post dan bagian bawah untuk menghilangkan Add to Cart pada halaman Product page.

Sebenarnya script ini hanya menghilangkan tombol buy/add to cart. Tapi cukup membuat tampilan website menjadi Katalog. Dengan tampilan seperti biasanya.

PANDI Meluncurkan TLD (dot)ID

Posted by : Budi Techno, Website domain, dot id, pandi, tld

Sebuah kejutan dari PANDI (Pengelola Nama Domain Internet Indonesia), dengan meluncurkan domain tingkat tinggi (DTT) (dot)ID. Kalau diluar sana namanya top level domain (tld) seperti (dot)com, (dot)net, (dot)org.

Pendaftaran secara terbatas dimulai pada tanggal 20 Januari 2014 yang lalu. Terbuka untuk semua pemegang merek yang terdaftar di HAKI. Sebuah langkah yang sangat bijaksana. PANDI menyebutnya sebagai Periode Sunrise. Lalu selanjutnya Periode Grandfather. Dimana kesempatan diberikan kepada pemegang domain (dot)ID sebelumnya. Periode ini dimulai 21 April 2014. Selanjutnya semua warga Indonesia diberi kesempatan pada 16 Juni 2014 untuk mendaftarkan domain (dot)ID. Ini periode Landrush. Selanjutnya mulai 17 Agustus 2014, domain (dot)ID akan tersedia seperti domain lainnya.

Potensi (dot)ID dengan keunikan namanya berpotensi mendunia dengan ID seperti ingin menunjukkan identitas/identity. TLD yang diluncurkan PANDI merupakan terobosan yang sangat bagus. Akan menyederhanakan penulisan nama domain. meminimalisir (dot). Misalnya www.perusahaan.co.id, cukup menjadi www.perusahaan.id. Lebih keren dan simpel.

Berikut email dari PANDI secara lengkap

Pengguna domain .id yang terhormat,

Pengelola Nama Domain Internet Indonesia (PANDI) merilis penggunaan Domain
Tingkat Tinggi (DTT) .ID, yang populer dengan istilah “anything.ID”.

Dengan peluncuran domain “anything.ID”, publik dapat menggunakan domain
.id secara langsung, seperti: pandi.id, kompas.id, belanja.id, budiman.id,
astra.id, atau yang lainnya. Domain “anything.ID” dapat digunakan oleh
individu maupun institusi Indonesia, atau merek yang terdaftar di
Indonesia.

Sebelum tersedia untuk umum seperti domain-domain lainnya, akan diadakan
tiga tahapan privilege:

1. Periode Sunrise
Periode ini terbuka bagi semua pemegang merek yang terdaftar pada Ditjen
HaKI Kementerian Hukum dan HAM Republik Indonesia. Periode ini berlangsung
pada 20 Januari – 17 April 2014.
2. Periode Grandfather
Periode ini terbuka bagi semua pemegang domain tingkat dua (DTD) .id yang
sudah terdaftar sebelumnya. Periode ini berlangsung pada 21 April – 13 Juni
2014.
3. Periode Landrush
Periode ini terbuka bagi semua warga negara Indonesia yang memenuhi
persyaratan ketentuan penggunaan nama domain. Periode ini berlangsung pada
16 Juni – 15 Agustus 2014.

Tepat pada 17 Agustus 2014, domain “anything.ID” akan memasuki tahap
general availability atau tersedia seperti domain-domain lainnya.

Untuk keterangan lebih lanjut, silakan kunjungi www.domain.id atau email
ke info@domain.id.
Atau, hubungi pengelola nama domain anda untuk pendaftarannya.

Salam hormat kami,

Pengelola Nama Domain Internet Indonesia (PANDI)

Meng-Indonesiakan Internet, meng-Indonesiakan website, dengan domain Indonesia (dot)ID.

WordPress 3.8 – Optimalisasi di Gadget

Posted by : Budi Website update, wordpress 3.8

Lama tidak membuka dashboard Cita Media. Ternyata ada pesan text, kalau WordPress 3.8 sudah release. Artinya kita dihimbau untuk segera update ke versi terbaru.

Biasanya sih saya langsung main update aja. Tidak sampai baca secara detil apa-apa yang diperbaiki atau apa yang baru. Kecuali lihat ada perbedaan interface apa enggak.

Katanya baiknya update aja. Soalnya yang paling penting adalah isu keamanan yang memang sangat rawan di internet. Update yang dikeluarkan oleh WordPress salah satunya adalah untuk memperbaiki bug atau celah, dan meningkatkan keamanan.

Ada pengalaman teman yang servernya kena serangan gara-garanya wordpress yang dipakai sudah kadaluarsa. Padahal server sudah diproteksi dengan keamanan yang mumpuni. Efeknya website di satu server harus menanggung akibatnya. Bila websitenya share dalam satu server.

Secara kasat mata paling mudah ya membandingkan interfacenya. Bila dibandingkan versi sebelumnya. Versi 3.8 tampil sangat beda. Tampilannya mengadopsi Windows 8, lebih modern. Menu sidebar di dashboard dengan posisi dock. Akan tetap walau layar digeser ke bawah. Background warna yang ngeblock, bisa kita pilih di menu Users >> Your Profile.

WordPress 3.8 sepertinya mulai serius menyasar perangkat mobile. Themes baru Twenty Fourteen, dioptimalisasikan pada perangkat smartphone, tablet. Sehingga user akan terasa nyaman ketika berselancar pada blog berbasis wordpress.

Maklumlah, pengguna perangkat mobile meningkat pesat. Dan sebagian besar menghabiskan waktu dengan gadgetnya.

Kupon GoDaddy Diskon 50% Berlaku Sampai 29 Nopember 2013

Posted by : Budi Website 2013, active, coupon code, godaddy

Semua pasti sudah tahu GoDaddy.com, penyedia layanan hosting website terbesar. Biasanya banyak yang cari diskonan di GoDaddy. Dan memang banyak juga website yang menawarkan kupon diskon. Tapi banyak juga yang sudah tidak berlaku.Berikut saya share satu kode yang masih berlaku.

Bisa dicoba.

Kode kupon CJCRMN20H

Masa berlaku sampai 29 Nopember 2013.

Saya coba sih berhasil. Lumayan diskon 50% untuk paket hosting.

Selamat mencoba

Membuat Favicon Website untuk iPhone dan iPad

Posted by : Budi Website favicon, gratis, ipad, iphone, tips, website

Anda punya website? Tentu kita ingin website kita mudah dikenal. Salah satunya dengan icon, atau secara khusus disebut favicon. Yaitu icon yang muncul di tab judul di browser ( Firefox, Chrome, Internet Explorer, Opera, dll).

Favicon memiliki beberapa fungsi antara lain

Mudah dikenali. Saat ini banyak dari pembaca membuka website di banyak tab dalam satu browser. Untuk pindah halaman maka dengan adanya identitas gambar akan mempermudah dan mempercepat keputusan dari pada hanya teks saja. Intinya membaca gambar lebih nyaman dari pada membaca teks.

Menunjukkan kepada pembaca bahwa kita serius mengelola website, bukan hanya main-main. Dengan adanya favicon, maka akan membawa website kita satu tingkat lebih tinggi.

Lalu mengapa kita juga harus menyediakan icon untuk iPad dan iPhone? Karena berdasarkan data yang dirilis NetMarketShare. Perangkat Apple ini (Ipad, iPhone, iPod) menduduki peringkat pertama sebagai pengakses internet mobile yang mencapai 63.5 % dari total pengguna internet mobile, disusul Android 21 %, Java ME 9.3 %, dan Blackberry 1.8 %. Keseluruhan jumlah tersebut adalah 8.9 % dari total pengguna komputer diseluruh dunia. Untuk alasan tersebut pastinya kita ingin website kita tampil lebih ciamik bagi para pengguna perangkat tersebut.

Bagaimana memulainya? Mula-mula kita harus membuat gambar yang akan menjadi icon website kita. Kalau bisa hasil kreasi sendiri sehingga mempunyai keunikan tersendiri. Yang mudah bisa pakai Corel DRAW untuk membuatnya. Direkomendasikan gambar yang berformat .PNG. Sehingga bila membutuhkan fitur transparansi, misalnya gambar tidak sepenuhnya kotak, ada radius di ujungnya, atau bentuk yang tidak beraturan.

Ada beberapa situs yang menawarkan pembuatan icon secara gratis. Diantaranya:

Favicongenarator

www.favicongenerator.com

Kita bisa membuat favicon disini. Sangat simple dan sederhana. Kita hanya disuguhkan untuk membuat 1 macam favicon untuk general browser. Jadi kita tidak bisa membuat icon standar untuk iPhone dan iPad.

Mpowerinternet

www.mpowerinternet.com

Ada efek glass untuk optimalisasi icon, fitur crop dan resize.

Pic2icon

www.pic2icon.com

Di sini, kita disuguhi berbagai fitur efek untuk icon-icon kita seperti saturasi, grayscale, black and white, frosted glass, charcoal sketch, pencil sketch, blur, dan masih banyak lagi. Ada lagi rotate, resize, dan sharpen.

Iconj

www.iconj.com

Disini, lebih lengkap. Efek glass-reflection yang menjadi primadona icon-icon saat ini, bisa kita pilih beberapa model yang kita inginkan. Ditambah bayangan icon. Dan juga beberapa pilihan ukuran icon. Karena ternyata iPhone 3 dan iPhone 4, juga iPad menggunakan standar yang berbeda untuk resolusi icon.

Nah itu dia tips membuat favicon. Selamat mencoba.

Update:

RealWorld Graphics

Website lain yang perlu dicoba untuk membuat icon adalah http://www.rw-designer.com . Untuk membuat icon kita bisa mengkonversi dari gambar yang sudah kita punya ataupun membuat icon yang benar-benar baru. Menurut penulis hasil .ico yang dihasilkan lebih baik dari dari favicongenerator dari segi transparansi.

Untuk membuat icon baru bisa menggunakan Online Icon Maker.
Untuk mengkonversi gambar yang sudah dipunyai menjadi icon bisa menggunakan Image to Icon.

Category: Website