Cara mengaktifkan SSL pada Cloudflare dan tetapannya

Cloudflare SSL Featured

Anda semua saya jamin sudah biasa lihat pautan laman web yang dimulai dengan https dan dipaparkan simbol mangga (padlock) di awal nama domain tersebut sebagai isyarat bahawa rangkaian dilindungi.

Baru-baru ini saya menghubungi pasukan bantuan teknikal Exabytes Network untuk bertanya tentang sijil SSL (SSL certificate) yang mungkin telah disediakan pada pengkalan data (server) mereka. Jawapannya ialah ada disediakan di setiap pengkalan data Linux dengan Auto SSL daripada Comodo CA Limited.

Jadi, saya ada dua pilihan sekarang, boleh guna sijil SSL di origin server iaitu tempat asal data blog ini dihidupkan atau pilihan kedua melalui CDN Cloudflare.

Sebelum saya terus kepada cara tetapan https di Cloudflare, saya mahu anda faham dahulu tentang sijil SSL. Jika syarikat hosting tidak sediakan anda boleh beli sendiri dan minta pasukan teknikal pasang (install) dalam pengkalan data yang digunakan. Selalunya pemasangan (installation) akan dikenakan caj, contohnya Exabytes Network caj RM95 untuk sekali pasang di pengkalan data.

Jenis-jenis sijil SSL

  • Domain Validation (DV)
  • Organization Validation (OV)
  • Extended Validation (EV)

Domain Validation

Adalah sijil SSL untuk pengesahan domain yang disemak dengan pendaftar domain. Sijil jenis ini tidak menunjukkan maklumat tentang organisasi dan dengan itu ia untuk kegunaan umum.

Domain Validated Certificate
Contoh sijil SSL yang hanya membuat pengesahan nama domain

Organization Validation

Adalah sijil SSL yang lebih dipercayai berbanding dengan sijil yang hanya sahkan domain. Permohonan sijil ini merujuk kepada dokumen perniagaan kerana ia mengandungi maklumat perniagaan yang sah. Inilah piawaian standard sijil SSL yang diperlukan pada laman web rasmi perniagaan.

Organization Validated Certificate
Contoh sijil SSL untuk organisasi yang memaparkan nama penuh perniagaan dan juga domain

Extended Validation

Adalah sijil SSL yang lebih spesifik lagi daripada dua jenis di atas. Permohonan Sijil EV memerlukan pengesahan daripada pelbagai aspek iaitu meneliti hak pemohon terhadap sesuatu domain, kemudian organisasi yang dijalankan dan jenis bisnes yang terlibat. Contohnya pengeluar perisian antivirus, aspek yang terlibat adalah hak terhadap domain, organisasi dan produk yang dikeluarkan. Sijil EV sangat sesuai untuk laman web e-Commerce.

Antara laman web untuk membeli Sijil SSL:


Langkah-langkah Penting

1. Tetapan di Cloudflare

Kita mulakan sekarang tetapan di Cloudflare. Saya andaikan anda sudah menggunakan Cloudflare, jadi saya tidak perlu tunjukkan cara bagaimana untuk daftar.

Cloudflare adalah organisasi yang menyediakan servis Content Delivery Network (CDN), saya pilih Cloudflare kerana ada integrasi bersama plugin WP Rocket yang digunakan untuk blog ini, lebih mudah untuk uruskan. Baca juga artikel ini: Kelajuan Web Optimum.

Pada akaun Cloudflare hendaklah ditetapkan 3 perkara penting iaitu:

  • SSL – Flexible / Full
  • Automatic HTTPS Rewrites
  • Page rule – Always use HTTPS
Cloudflare SSL - Flexible
Langkah 1: Tentukan jenis SSL, disyorkan untuk pilih Flexible. Flexible ialah komunikasi antara pelayar web (pelawat blog anda) dengan Cloudflare dalam mod sekuriti, tetapi Cloudflare berhubung dengan origin server (tempat data anda dihoskan) tanpa sekuriti kerana tiada sijil SSL. Jika memilih Full anda kena pastikan bahawa origin server memiliki sijil SSL.
Cloudflare SSL - Automatic HTTPS Rewrites
Langkah 2: Pastikan ON Automatic HTTPS Rewrites supaya kandungan blog anda yang bercampur aduk dengan pelbagai pautan ditujukan kepada HTTPS.

Cloudflare SSL - Page Rules

Cloudflare SSL - Create Page Rules
Langkah 3: Akhir sekali ialah tetapan Page Rules untuk pastikan sentiasa menggunakan HTTPS. Ikuti format alamat url seperti imej di atas, gantikan dengan domain anda.

Selepas selesai melakukan 3 perkara ini, maka tetapan di Cloudflare sudah sempurna, boleh maju ke langkah seterusnya iaitu tetapan di WordPress.

2. Tetapan di WordPress

Setelah selesai tetapan di Cloudflare, pasang dan aktifkan plugin Really Simple SSL.

Really Simple SSL
Langkah 1: Pasang dan aktifkan pemalam (plugin) Really Simple SSL.
Really Simple SSL - Aktifkan SSL
Langkah 2: Klik pada butang “Go ahead, activate SSL” untuk aktifkan SSL. Lihat juga di bawah ada dinyatakan bahawa SSL certificate was detected on your site.
Really Simple SSL - Pengaktifkan berjaya
Langkah 3: Pengaktifan telah berjaya dilakukan dengan sempurna.
Really Simple SSL - Settings
Tinggalkan settings seperti di atas, hanya benarkan auto replace mixed content dan 301 redirection to SSL.
WordPress - Tetapan Umum
Apabila anda semak kembali tetapan umum di WordPress, alamat URL telah ditukarkan kepada HTTPS.

Kadangkala ketika sedang layari web, kita akan jumpa masalah simbol padlock keselamatan tiba-tiba hilang, apabila anda semak ia akan beritahu terdapat insecure content. Cara mudah untuk diagnosis insecure content boleh guna tools seperti Why No Padlock?

Urusan tetapan sudahpun sempurna pada tahap ini, langkah seterusnya hanya untuk kemaskini beberapa perkara di bawah.

3. Kemaskini Google Search Console

Mulai sekarang kita lebih utamakan pautan https, jika sebelum ini semua carian menuju kepada url http. Oleh itu, sila kemaskini Google Search Console dengan menambah property baru. Jangan lupa hantar sitemap yang baru untuk https.

Google Search Console - Property
Langkah 1: Tambah property untuk kedua-dua HTTPS tanpa www dan beserta www. Paparan di atas terdapat 4 properties kerana sebelum ini telah gunakan HTTP.

Antara empat pilihan yang disenaraikan anda dikehendaki pilih salah satu property untuk dikemaskini, jika sebelum ini saya memilih http tanpa www, maka untuk kali ini sama juga saya masih memilih laman web tanpa www untuk HTTPS. Masuk ke dalam property berkenaan dan kemaskini dua perkara seperti di bawah.

Google Search Console - Robot
Langkah 2: Kemaskini fail robots.txt yang tersimpan di dalam direktori utama laman web.
Google Search Console - Sitemap
Langkah 3: Perkara paling penting jangan lupa hantar Sitemap untuk Google lakukan indeks terhadap laman web anda.

Selesai kemaskini Google Search Console.

4. Kemaskini Google Analytics

Kemaskini alamat di Google Analytics kerana sebelum ini menggunakan http.

Google Analytics - View Settings
Langkah 1: Pergi ke View Settings.
Google Analytics URL
Langkah 2: Pergi ke Website’s URL untuk memilih https.

Selesai kemaskini Google Analytics.

5. Kemaskini akaun WordPress.com

Kemaskini juga alamat web di tetapan akaun WordPress.com kerana alamat berkenaan digunakan ketika komen di blog.

WordPress.com - Tetapan Akaun
Kemaskini alamat kepada HTTPS kerana alamat ini akan muncul di ruangan komen.

6. Kemaskini profil Gravatar

Semak juga profil Gravatar.com untuk pastikan pautan web tepat.

Profil Gravatar
Semakan terhadap profil Gravatar untuk lihat kemaskini alamat web.

Kesimpulan

Berpindah kepada https adalah jalan terbaik buat anda sebagai pemilik web atau blog, kerana laman web dengan https lebih diutamakan oleh enjin carian.

Selamat berblogging!

Kelajuan Web Optimum

Pengenalan

Salah satu pertimbangan yang paling penting dalam pembangunan laman web adalah untuk memastikan ia loading dengan cepat. Sebelum anda mula untuk mengoptimumkan laman web anda, nilai perkembangan penting untuk melihat bagaimana ia berfungsi. Salah satu cara untuk melakukan ini adalah mengukur prestasi web anda supaya ia menjadi penanda aras untuk dinilai. Pilihan terbaik yang boleh digunakan ialah Pingdom dan PageSpeed Insights oleh Google.

Ukur Prestasi Web

PageSpeed Insights

Lawati: PageSpeed Insights

Google PageSpeed Insights menunjukkan keputusan untuk mudah alih dan desktop bersama-sama senarai perkara untuk diperbaiki. Ukuran rating yang diperoleh bukan bermakna kelajuan web anda, ianya mengukur sejauhmana web anda telah aplikasikan perkara-perkara penting bagi meningkatkan prestasi.

Pingdom

Lawati: Speed Test

Klik Settings dan pilih lokasi yang paling dekat dengan pelayan web anda. Sebagai contoh web adiazudin.com dihoskan oleh Exabytes Network menggunakan pelayan mereka di Kuala Lumpur. Berdasarkan lokasi pilihan yang disediakan oleh Pingdom, paling hampir dengan Malaysia ialah Melbourne, Australia. Paste URL laman web anda dan klik Test Now.

Pingdom akan merumuskan prestasi terbaik laman web berdasarkan 4 metrik:

  • Perf. Grade.
  • Requests.
  • Load time.
  • Page size.
Kelajuan Web - Pingdom Speed Test
Keputusan ujian kelajuan

Antara 4 metrik ini, paling penting untuk dinilai ialah Load time!

Load time laman web ini mencapai prestasi terpantas setakat ini dengan tempoh loading kurang dari 1 saat iaitu 694ms.

Gred prestasi adalah garis panduan umum bagaimana laman web anda dioptimumkan, tetapi ia tidak penting untuk mendapatkan skor yang sempurna. Kelajuan loading (Load time) adalah perkara paling penting wajib ditekankan, paling cepat adalah paling baik kerana apabila Google melawat laman web anda, ia tidak peduli atau ambil tahu soal skor / gred prestasi, hanya tempoh masa loading diambil kira.

Purata Kelajuan Yang Tepat

Perlu diingatkan ketika menjalankan Pingdom Speed Test, lakukan ujian beberapa kali terutama jika laman web anda menggunakan Cache. Ini kerana ketika kali pertama sesebuah halaman web dilawati (termasuklah bot Pingdom) versi bukan cache diperoleh, saya akan terangkan berkenaan cache di bahagian Perkara Penting Untuk Tingkatkan Prestasi. Cara cache dijana ialah pelawat pertama akan mengaktifkan versi cache terhadap sesuatu halaman, kita tidak tahu adakah kita pelawat pertama bagi sesuatu halaman, kebiasaannya saya lakukan 3 kali untuk bacaan akhir yang tepat.

Laman web adiazudin.com menggunakan cache premium oleh WP Rocket supaya menjana prestasi terbaik dan optimum.

Perkara Penting Tingkatkan Prestasi

a. Prestasi Server

Server atau dalam Bahasa Melayu ialah Pelayan. Pelayan web ialah tempat dimana pengkalan data anda disimpan. Nyawa kepada laman web anda terletak di sini. Pelayan yang kita guna adalah sebuah komputer yang memiliki spesifikasi memori, processor, jumlah storan yang dibekalkan serta jenis storan yang digunakan. Semua aspek ini membawa kepada kelajuan server anda.

Kebiasaan pemilik domain yang baru mengendalikan laman web menggunakan pelayan yang dikongsi bersama pemilik domain lain iaitu Share Hosting kerana ia ditawarkan pada harga yang murah. Jika kewangan anda lebih stabil dalam ertikata lain anda mampu membayar kos yang lebih mahal, pilihan seterusnya ialah Semi-Dedicated Server dan yang terbaik ialah Dedicated Server yang mana anda tidak berkongsi dengan orang lain. Dedicated Server menawarkan prestasi yang lebih berkuasa yang semestinya membawa kepada prestasi yang unggul.

Harga yang bakal anda bayar berdasarkan kepada syarikat penyedia perkhidmatan yang dipilih, sebagai contoh harga bagi Exabytes Network:

Laman web ini menggunakan perkhidmatan Exabytes Network, jadi contoh yang saya nyatakan adalah harga yang mereka tawarkan.

b. Penggunaan CDN

CDN ialah singkatan kepada “Content Delivery Network” iaitu rangkaian pelayan (server) yang bertugas menyebarkan kandungan cache web anda kepada pelawat melalui server yang paling hampir dari segi kedudukan geografi mereka. Maknanya ialah pelawat mendapat akses terhadap cache web dari server paling hampir dengan mereka supaya menerima dengan lebih pantas.

Laman web ini menggunakan servis CDN daripada CloudFlare. Boleh tonton video ringkas di bawah:

CDN CloudFlare

Terdapat 76 Pusat Data dalam rangkaian CloudFlare, ada satu di dalam negara di Kuala Lumpur dan negara jiran Singapore. Boleh rujuk peta: The CloudFlare Global Network.

Penyedia rangkaian CDN yang popular:

c. Pemampatan Imej

Imej pasti digunakan dalam laman web anda, jangan abaikan soal saiz imej yang dimuatnaik kerana kelajuan loading setiap artikel juga terpengaruh dengan saiz imej yang digunakan. Sila pastikan imej optimum dari segi saiz fail dan ukuran yang digunakan bersesuaian dengan layout web anda. Tujuannya ialah jangan membazir ruang, bandwidth dan paling mustahak masa loading jangan dibazirkan dengan menunggu imej muncul satu demi satu.

Imej yang digunakan bagi laman web disimpan dalam format JPG ataupun PNG. Saiz ideal ialah tidak lebih daripada 400KB, seboleh-bolehnya kurang daripada 100KB.

Bagaimana untuk mampatkan imej supaya ia disimpan dalam saiz yang kecil. Saya sering menggunakan servis mampatan imej yang disediakan oleh Imagify.io ataupun TinyJPG / TinyPNG.

Satu perkara lagi, bagi pengguna WordPress terdapat plugin untuk mampatkan imej tetapi saya tidak mahu guna. Adalah lebih baik install plugin seminima yang boleh iaitu yang betul-betul mustahak sahaja. Tidak perlu untuk install selagi boleh dalam WordPress sehingga menjejaskan prestasi, saya hanya ada 18 plugins yang digunakan dalam WordPress. Proses mampatkan imej boleh dibuat secara manual ketika anda dalam proses menulis artikel.

Baca juga artikel berikut:

http://adiazudin.com/blog/tinypng-untuk-kecilkan-saiz-imej/

d. Minify HTML, CSS & JS

Minify atau pengecilan adalah membuang aksara atau ruang di dalam kod yang tidak diperlukan bagi menjalankan kod berkenaan.

Perkara yang tidak diperlukan ialah:

  • Ruang kosong antara aksara.
  • Perenggan baru.
  • Komen / label.
  • Tanda pemisah.

4 perkara yang disebutkan di atas dibuang kerana tidak penting dibiarkan untuk disimpan kerana tanpanya kod lebih bersih dan cepat dibaca oleh server. Kod yang terlibat ialah CSS, HTML dan JavaScript. Dengan mengurangkan jumlah kod yang perlu dipindahkan melalui web, proses ini lebih lancar, kod yang kecil dan menjimatkan bandwidth.

Proses minify boleh dilakukan secara auto dan manual. Melalui Cache Plugin / CloudFlare fungsi minify boleh diaktifkan. Boleh juga untuk minify CSS secara manual seperti yang saya lakukan untuk stylesheet utama web ini. Saya lakukan proses minify CSS di laman web CSS Minifier, kemudian copy dan paste dalam style.css.

e. Cache

Dalam konteks pengkomputeran, cache adalah tempat untuk menyimpan data buat sementara waktu.

Data aktif sering dicache untuk mengurangkan tempoh loading. Apabila anda kembali ke laman web yang kerap diakses, pelayar web mengakses bahagian fail yang telah disimpan sebagai cache. Ini bermakna bahawa pelayar web mengulangi maklumat sedia ada, keadaan ini membuat proses loading menjadi lebih cepat.

Cara cache plugin berkerja adalah dengan menyimpan fail-fail HTML yang dihasilkan secara dinamik dan menggunakan semula data yang dihasilkan sebelum ini apabila permintaan dibuat oleh pelawat laman web berkenaan. Kaedah ini bagi mengelakkan daripada proses membaca skrip PHP dari pengkalan data WordPress berulang setiap kali pelawat refresh laman yang telahpun disimpan dalam cache. Melainkan cache tersebut dipadamkan dan perlu dihasilkan semula.

Saya harap penerangan ini anda boleh faham, sesiapa yang menggunakan cache plugin akan sedar proses ini.

Cache Plugin yang popular dikalangan pengguna WordPress ialah W3 Total Cache, WP Super Cache dan Hyper Cache. Sesetengah memilih plugin premium seperti WP Rocket yang saya gunakan untuk laman web ini.

WP Rocket menawarkan ciri-ciri yang lebih luas daripada cache plugin percuma yang lain. Penggunaannya adalah berbaloi walaupun terpaksa mengeluarkan belanja sebanyak USD$39 (RM158) untuk satu domain.

Rujuk: Ciri-ciri WP Rocket.

Kesimpulan

Seperti yang anda lihat, terdapat banyak perkara yang boleh dilakukan untuk meningkatkan prestasi laman web. Beberapa penyelesaian mungkin mudah untuk dilaksanakan, manakala sesetengahnya kadangkala ia memakan masa. Namun begitu, tugas memastikan prestasi terbaik adalah amat penting. Jika laman web anda tidak dioptimumkan dengan baik, anda menghadapi risiko kehilangan pelawat dan tiada sesiapapun yang mahu perkara buruk ini terjadi.