Categories
Teknologi

Mengapa Harus Memasang AMP (Accelerated Mobile Pages) di WordPress

Sebagai dosen sekaligus praktisi, saya harus terus mengikuti perkembangan teknologi yang sedang terjadi di sekitar. Salah satunya adalah teknologi web yang merupakan salah satu bidang yang saya kuasai. Ketika membandingkan website di tahun 90-an dengan website di tahun 2017, lompatan teknologinya sudah sangat jauh, bahkan di beberapa tahun terakhir ini sudah bermunculan teknologi yang tidak terbayangkan sebelumnya.

Masih ingat ketika awal-awal munculnya smartphone, dimana pengguna sudah tidak memerlukan lagi perangkat komputer/laptop untuk dapat mengakses website. Disini perubahan paradigma desain website sudah harus berubah, tidak lagi berlomba-lomba menampilkan fitur dan efek yang wah, tapi sekarang harus memikirkan bagaimana tampilan website harus bisa dibuka dengan cepat dan ringan di perangkat smartphone. Bahkan muncul istilah baru, “responsive web design”.

Tentunya perubahan ini memakan korban, yaitu Flash. Memang sih, ketika semua orang masih mengakses website menggunakan komputer/laptop, Flash sangat berjaya, karena bisa menampilkan efek-efek yang indah di mata. Bahkan saat itu Javascript seakan-akan terpinggirkan dan tidak menarik untuk dipelajari. Namun begitu semua orang pakai smartphone, Flash tidak bisa bersaing karena masalah kompatibilitas. Padahal, website seharusnya multi-platform.

Javascript, yang tadinya sempat terlupakan ternyata diam-diam mengembangkan dirinya berevolusi menjadi teknologi yang sekarang menjadi tulang punggung layanan web (web services). Sekarang kita bisa menikmati teknologi website yang sesungguhnya, yaitu multi-platform.

Sekarang smartphone telah menguasai dunia, siapapun telah memilikinya, dan Indonesia adalah pengguna smartphone terbesar di Asia Tenggara (ya iya lah..). Jadi ada pasar besar yang menanti disini, tinggal gimana caranya supaya website bisa diakses oleh penggunanya yang memiliki koneksi Internet bervariasi.

Saya sudah mencoba hampir semua cara untuk mengoptimasi website supaya bisa diakses dengan cepat, hasilnya cukup memuaskan. Tetapi muncul masalah apabila website itu dikunjungi dari website lain, misalnya dari mesin pencari atau dari social media. Artinya, pengunjung tidak melakukan direct access melainkan datang dari website lain untuk menuju ke website kita.

Maksudnya begini, misalnya Anda sedang melakukan pencarian di Google kemudian mendapatkan hasilnya. Lalu Anda klik salah satu website yang terdaftar disana, maka Anda akan di-redirect dari Google menuju ke website yang dituju. Disinilah jeda itu muncul, meskipun hanya sepersekian detik namun jika Anda sedang melakukan riset dan ingin mendapatkan hasilnya secepat mungkin, maka waktu jeda itu terasa lama. Belum lagi jika website yang dikunjungi ternyata sedang down/maintenance.

amp

Disinilah peran AMP (Accelerated Mobile Pages) diperlukan, terima kasih kepada Javascript yang telah membuat website menjadi lebih keren. Jadi AMP memungkinkan website dapat dibuka lebih cepat hampir tanpa ada delay, hal ini dikarenakan proses rendering akan berada di background sehingga user tidak merasakan proses menunggu saat loading website. AMP juga mengoptimasi penggunaan API preconnect supaya menghemat resource di prosesnya. Selain itu AMP mengharuskan untuk memodifikasi layout skrip sesuai dengan standar yang telah ditentukan.

Menarik ya? Bagaimana implementasinya?

Inilah salah satu alasan saya menyukai WordPress sebagai framework untuk pembuatan website. Memasang AMP di WordPress sangat mudah karena cukup menginstall plugin AMP sebagai pondasinya dan plugin AMP for WP – Accelerated Mobile Pages untuk modifikasi lebih lanjutnya. Kedua plugin ini sebaiknya diinstall semuanya supaya mendapatkan konfigurasi yang lebih lengkap.

Proses konfigurasi juga tidak rumit, setelah plugin Anda aktifkan cukup menuju ke halaman pengaturan plugin untuk memilih layout yang akan digunakan. Pada saat tulisan ini dibuat, saya menggunakan layout 3 sebagai theme AMP saya. Lanjutkan dengan konfigurasi pada menu-menu yang lain. Bila sudah selesai, maka Anda akan memiliki url tambahan /amp di setiap url website Anda. Contohnya https://yogie.id/amp.

Url berakhiran /amp itulah yang menandakan bahwa WordPress sudah siap untuk melayani dalam mode AMP. Untuk memastikan, bisa dengan melakukan validasi di web The AMP Validator, pastikan statusnya: PASS. Hasilnya, apabila ada orang yang melakukan pencarian di Google menggunakan perangkat smartphone, maka website Anda akan memiliki simbol AMP seperti gambar di bawah ini.

Screenshot 2017 08 01 06 45 17 619 com.android.chrome

 

 

Categories
Teknologi

Mengatasi Lama Pengiriman Menggunakan SMTP Gmail di DigitalOcean

Pada artikel sebelumnya, saya menulis cara mengkonfigurasi SMTP Gmail pada WordPress di DigitalOcean. Tapi ada satu isu, yaitu apabila saya menggunakan IPv4 di droplet DigitalOcean, semua konfigurasi dapat berjalan lancar. Namun bila saya mengaktifkan fitur IPv6 di droplet, maka WordPress membutuhkan waktu yang lama untuk mengirimkan email. Saya bisa menunggu hingga 5 menit hanya untuk menunggu sebuah email bisa terkirim ke suatu alamat.

Tentunya, ini cukup mengganggu.

Setelah mencari ke sejumlah tempat, akhirnya saya mendapatkan penjelasannya dari DigitalOcean. Rupanya secara default DigitalOcean akan memblokir akses ke SMTP server yang menggunakan IPv6. Apabila fitur IPv6 di droplet diaktifkan maka secara default droplet akan mengakses SMTP Gmail menggunakan alamat IPv6. Inilah yang dihindari oleh DigitalOcean.

Alasannya, cukup beralasan. Karena jika suatu saat ada satu IP milik DigitalOcean yang terkenal blacklist akibat aktivitas ilegal seperti spamming, maka efeknya akan menimpa ke satu segmen IP tersebut, dan tidak hanya ke satu IP saja. Maka demi kemaslahatan umat bersama, DigitalOcean mengijinkan untuk akses ke SMTP server hanya menggunakan IPv4.

Bagaimana solusinya? Tentunya menonaktifkan fitur IPv6 di droplet bukanlah sebuah solusi yang baik. Dari hasil pencarian, saya menemukan solusi dengan mengedit sebuah file di Ubuntu 16.04 yang saya gunakan, tepatnya di file /etc/gai.conf.

Silakan buka file /etc/gai.conf menggunakan akses sudo, kemudian cari skrip berikut

# precedence ::ffff:0:0/96  100

Anda cukup menghapus tanda # pada baris tersebut sehingga menjadi

precedence ::ffff:0:0/96  100

Perubahan di atas artinya meminta droplet untuk mengutamakan menggunakan IPv4 untuk terkoneksi ke suatu server, dan ini bertujuan supaya droplet mengakses SMTP Gmail menggunakan IPv4.

Langkah selanjutnya adalah tinggal melakukan restart pada droplet, dan seharusnya sekarang WordPress tidak memerlukan waktu yang lama lagi untuk mengirim email.

Categories
Teknologi

Setting SMTP Gmail pada WordPress di DigitalOcean

Saya adalah web developer yang hampir selalu menggunakan WordPress untuk membangun website. WordPress menawarkan kemudahan konfigurasi dan memungkinkan untuk menambahkan fitur hanya dengan menginstall plugin. Apabila saya memerlukan kebutuhan yang spesifik, barulah kemudian saya membuat skrip yang bisa dengan mudah terintegrasi dengan WordPress. Banyaknya fitur dan kemudahan untuk mengembangkan di WordPress, membuat saya selalu menjadikan WordPress sebagai pilihan pertama.

Saya paham, WordPress masih dianggap sebagai blog platform. Jadi seringkali saya dapat komentar dari calon klien, “Kok pakai WordPress? Pakai CI dong, pakai Laravel atau Yii dong”. Percayalah, semua framework itu hanyalah alat (tools), tergantung siapa yang meracik. Saya cukup percaya diri untuk membangun website menggunakan WordPress sekaligus  bisa mengoptimasi dari sisi performa dan keamanannya.

Oke, kembali ke judul.

Sudah sejak tahun 2012 saya tidak menggunakan layanan web hosting untuk meletakkan website saya atau klien. Saat ini saya menggunakan layanan cloud hosting dari DigitalOcean dengan alasan harga yang lebih murah dan lebih bebas untuk melakukan optimasi.

Apabila dulu pernah mendengar mengenai VPS (Virtual Private Server), maka cloud server adalah teknologi yang lebih maju dari VPS karena menawarkan lebih banyak fitur. Namun demikian, jika ingin menggunakan keduanya, setidaknya harus memahami dasar-dasar networking, operating system, dan keamanan sistem. Karena nanti kita hanya akan mendapatkan sebuah server yang masih kosong, lalu kita harus menginstall dan mengkonfigurasinya sampai siap untuk digunakan.

Masalah yang biasa dihadapi oleh pengguna awal WordPress di cloud server adalah, tidak bisa mengirimkan email. Ini pasti terjadi, karena servernya belum dikonfigurasi untuk dapat mengirim email. Jika mencari tutorial untuk bisa mengirim email menggunakan cloud server, pasti akan mendapatkan tutorial yang cukup mengerikan. Karena pasti akan diminta untuk menginstal mail server, dan ini tidak mudah.

Keuntungan menggunakan WordPress, saya cukup menginstall sebuah plugin saja, namanya Easy WP SMTP. Plugin ini berfungsi untuk melakukan relay ke SMTP server yang dituju, kemudian emailnya akan dikirim oleh SMTP tersebut.

Bingung?

Jadi begini, Email terbagi menjadi 2 layanan, yaitu layanan penerimaan dan layanan pengiriman. Untuk layanan penerimaan akan dilayanai oleh POP3 atau IMAP, kemudian untuk layanan pengiriman akan dilayani oleh SMTP.

smtp pop3 diagram v1

Idealnya, server yang ingin bisa menangani email harus menginstal 2 layanan tersebut, misalnya POP dan SMTP sehingga nanti servernya bisa menerima dan mengirim email. Tapi masalahnya, proses instalasi dan konfigurasinya cukup ribet, apalagi untuk orang awam. Belum nanti jika harus memperhatikan keamanan, performa, dan kapasitas penyimpanan.

Nah, plugin Easy WP SMTP ini akan melakukan relay, atau meneruskan pesan yang seharusnya dikirim oleh server kita, menuju ke SMTP server yang ada di luar. Misalnya adalah SMTP Gmail. Jadi kita tidak perlu lagi menginstall mail server.

Saya yakin, Anda memiliki akun Gmail. Apalagi jika Anda punya Smartphone Android. Itu sudah jadi modal yang cukup untuk mulai mengkonfigurasi plugin supaya dapat terhubung dengan SMTP Gmail, dan akhirnya WordPress dapat mengirimkan email menggunakan akun email Anda.

Pertama, tambahkan plugin Easy WP SMTP melalui Dashboard WordPress Anda, plugin ini sudah tersedia di repository plugin dan bisa Anda dapatkan secara gratis. Silakan aktifkan plugin setelah Anda menginstalnya.

Sebelum mengkonfigurasi plugin, Anda harus melakukan sedikit perubahan pada akun Gmail Anda, yaitu dengan memperbolehkan penggunaan aplikasi yang dianggap kurang aman. Silakan kunjungi halaman Less Secure App untuk mengaktifkan opsi yang ada disana. Anda dapat mempelajari maksud dari fitur ini atau menonaktifkan fitur ini kapanpun.

Gmail memiliki aturan yang cukup ketat dalam menjaga penggunanya, terutama dalam membatasi penggunaan aplikasi yang dianggap tidak aman. Ada banyak kriteria yang ditetapkan oleh Gmail supaya aplikasinya dianggap aman, Easy WP SMTP tidak termasuk dalam kriteria tersebut. Namun bukan berarti kemudian nanti website kita jadi rentan, karena kriteria tersebut ditujukan untuk hal lain dan tidak berhubungan dengan kebutuhan pengiriman email.

Setelah Anda mengaktifkan opsi Less Secure App, selanjutnya adalah membuka halaman konfigurasi plugin WP Easy SMTP. Terdapat beberapa konfigurasi yang perlu Anda isi, silakan ikuti panduan berikut:

  • From Email Address: masukkan alamat Gmail Anda.
  • From Name: masukkan nama Anda.
  • SMTP Host: smtp.gmail.com
  • Type of Encription: STARTTLS
  • SMTP Port: 587
  • SMTP Authentication: Yes
  • SMTP Username: masukkan alamat Gmail Anda seperti di kolom pertama
  • SMTP Password: masukkan password Gmail Anda
  • Klik Save

Selanjutnya, lakukan pengujian dengan scroll ke bagian Testing & Debugging Settings di bawah. Isikan kolom-kolom tersebut dengan alamat email Anda. Apabila Anda mendapatkan kiriman email dari alamat Gmail yang telah disetting sebelumnya, maka konfigurasi berhasil dan WordPress telah dapat mengirimkan email.

Apabila saat pengujian, Anda merasa pengiriman email terasa lambat. Saya sarankan Anda mengikuti tutorial saya berikutnya untuk mengatasi lama pengiriman email menggunakan SMTP Gmail di DigitalOcean.

Categories
Teknologi

Coba-Coba WordPress 2.3.1

Barusan abis upgrade blogku ini ke WP 2.3.1. Emang sih rada telat.. Lha Fantastico di Cpanelku baru meng-upgrade WP juga barusan ini.. (alesyan..)

Untuk perbedaan dengan WP terdahulu sih ga begitu banyak. Tapi yang paling keliatan ada dibagian menu Write. Disini ada fasilitas-fasilitas baru seperti Tags. Jadi kalo pengen postingan kita dikasih Tags, tinggal isi aja dibawahnya.

Trus yang paling menonjol adalah di bagian WYSIWYG-nya. Ada fitur baru yang sebelumnya nggak ada, seperti tombol Paragraph,Underline, Align Full, Text Color, hingga tombol insert custom character. Jadi kita bisa dengan mudah menampilkan karakter seperti ®, ½, ?, ?, ? dengan mudah.

ps: ternyata itu semua tergantung dengan hostingnya….

Kalo pengen tau lebih lanjut, bisa langsung menuju ke websitenya WordPress.