Membuat situs web tidak lagi sulit, setidaknya di permukaan. Siapa pun dapat mengklaim menyiapkan situs web untuk Anda. Tetapi rahasia tentang situs web berkinerja tinggi adalah apa yang dilakukan di backend tingkat server dan dipenuhi dengan kerumitan teknis yang sebagian besar perancang web tidak memiliki minat atau pengetahuan tentangnya. Mari kita jelajahi beberapa rahasia ini yang akan mendorong situs web Anda ke atas dengan skor PageSpeed ​​dan YSlow yang lebih baik (untuk SEO yang lebih baik), dan terutama untuk pengguna seluler.

Kesalahan desain web

Bagi beberapa klien, yang mereka pedulikan hanyalah situs web yang "cantik". Mereka menginginkan bling yang mencolok, dengan gambar layar penuh, video tugas berat, dan semua jenis skrip yang mencolok. Untuk klien ini, mereka memiliki gagasan keliru bahwa pelanggan dan pengunjung yang membayar menyukai situs web dengan cara ini. Sayangnya, ini adalah kekeliruan yang masih didukung oleh beberapa agensi dan perancang web yang tidak tahu lebih baik, atau terlalu takut untuk meluangkan waktu untuk menjelaskan cara kerja situs web yang sebenarnya.

Soalnya, website yang bagus memang ditujukan untuk memberikan informasi dengan call-to-action (CTA) agar pengunjung bisa beralih ke lead dan pelanggan. Oleh karena itu, situs web yang baik harus melayani 2 tujuan utama:

  1. Dapat ditemukan oleh pengunjung melalui mesin pencari (pikirkan Google).
  2. Harus cepat kepada setiap pengunjung di seluruh dunia, terutama karena kita hidup dalam ekonomi global sekarang, dengan Amazon sebagai contoh utama.

Kedua tujuan utama ini terkait erat satu sama lain. Google hanya akan mengindeks situs web Anda jika relevan (tidak penuh dengan “spam”), aman (tanpa malware atau malvertising), cepat (konten yang dioptimalkan), dan ramah seluler. Gagal salah satu dari kriteria ini akan menghukum situs web Anda, dan tenggelam semakin jauh di belakang dalam indeks Google.

Dan untuk pengguna? Pengguna menjadi tidak sabar, dan semakin meningkat.

Jika situs web Anda dimuat sangat lambat di Wifi publik, atau seluler, situs web Anda akan terus berjalan (dalam metrik terukur yang dikenal sebagai “tingkat bouncing“). Jika situs web Anda berat dan lambat, pengunjung akan menunggu beberapa detik, dan mengklik di tempat lain. Anda baru saja kehilangan satu-satunya kesempatan untuk melibatkan prospek baru.

Beberapa perancang web akan menjalankan situs prototipe Anda pada disk lokal yang jelas tidak akan memiliki penalti kecepatan, dan Anda mungkin tidak menyadari betapa lambatnya situs web Anda dalam kehidupan nyata. Beberapa mungkin menghosting situs prototipe Anda di tulang punggung fiber lokal, dan Anda mungkin juga mengira situs tersebut cukup cepat. Tetapi kenyataannya adalah bahwa situs web hanya akan tampak cepat jika Anda berada di tulang punggung yang sama dan tidak melalui terlalu banyak lompatan.

Mendesain untuk ponsel juga tidak semudah kelihatannya. Sebagian besar desainer web akan menggunakan tema CMS (sistem manajemen konten) yang "responsif", dan dalam keadaan biasa, situs web Anda akan dapat dilihat di ponsel.

Namun, masalahnya ada pada detailnya, dan banyak tema seperti itu menggunakan kerangka kerja yang sangat berat, dan akan memperlambat kecepatan situs web Anda, terutama untuk seluler, dan akan mendapat peringkat yang buruk dalam pengujian seluler.

Sekarang mari kita periksa cara menguji situs web Anda untuk melihat apakah akan ramah Google, lebar pita, dan ramah seluler.

Bias pendidikan adalah suatu masalah

Banyak sekolah fokus pada desain web, dan lupa bahwa PENGEMBANGAN sama, atau bahkan lebih penting daripada desain dalam hal meningkatkan situs web yang bagus.

Dan karena banyak orang hanya fokus pada estetika daripada kerumitan teknis, komponen pengembangan hilang dari banyak pekerja situs web di luar sana. Saya tahu, karena saya telah mewawancarai kandidat yang tak terhitung jumlahnya, dan sebagian besar gagal melakukan pekerjaan yang harus saya selesaikan. Bahkan penyedia web hosting tidak dikecualikan.

Saya telah berbicara dengan rekan-rekan yang sangat ramah di bidang dukungan teknis perusahaan web hosting, dan mereka cukup jujur ​​untuk mengakui kepada saya bahwa apa yang saya komunikasikan dengan mereka, “di atas nilai gaji mereka” (mengutip kata-kata mereka). Saya sendiri harus memecahkan masalah dan memecahkan banyak kerumitan teknis di sepanjang perjalanan panjang yang sulit sejak tahun 1996 hingga sekarang (21 tahun!).

Apakah situs web benar-benar ramah seluler?

Sangat mudah untuk mendapatkan tema ramah seluler (responsif) yang berfungsi secara otomatis. Apa yang tidak disadari banyak orang adalah bahwa situs web tidak hanya harus kompatibel secara visual dengan smartphone, tetapi juga harus kompatibel dengan bandwidth – yaitu memuat cukup cepat di ponsel dengan koneksi 3G atau mungkin 4G.

Cara gratis dan sederhana untuk menguji situs web Anda adalah dengan peramban yang dibuat oleh raja mesin telusur – the Google Chrome Browser.

Di bawah browser Alat pengembang pilihan, pilih jaringan, dan Pelambatan pilihan, dan pilih “3G bagus” (perkiraan bagus untuk banyak pengguna ponsel cerdas di bagian negara maju ini), dan klik “Nonaktifkan cache".

Di bagian bawah layar, Anda akan melihat 3 pembacaan:

  • Permintaan,
  • (data) Ditransfer, dan
  • selesai (waktu untuk memuat halaman sepenuhnya).

Semakin sedikit Permintaan, semakin kecil data yang Ditransfer, dan semakin pendek Selesai (waktu untuk memuat halaman sepenuhnya), semakin mobile-friendly situs web Anda dalam hal bandwidth seluler.

Misalnya, situs web kami membuat 23 Permintaan, berukuran 640kB, dan memuat penuh dalam 6.6 detik pada koneksi seluler 3G.

20170423_chrome3g_mb1

Tes Throttling Jaringan Chrome – situs web kami sendiri

Berikut adalah contoh halaman agensi desain web, yang membuat 79 Permintaan, berukuran 1.5 MB, dan dimuat dalam 9.81 detik pada koneksi seluler 3G.

20170423_chrome3g_webdevcd1

Tes Throttling Jaringan Chrome – biro desain web

Berikut adalah toko web e-niaga yang kami rancang, yang menampung 50 pilihan produk di halaman ini, dan membuat 70 Permintaan, berukuran 1.1 MB (karena 50 produk), dan selesai memuat dalam 9.76 detik.

20170423_chrome3g_ecommepshub1

Tes Pembatasan Jaringan Chrome – situs e-niaga yang kami kembangkan

Ini adalah toko web e-niaga dari perusahaan lain, dengan 244 Permintaan, berukuran 6.7 MB, dan selesai memuat dalam 39.91 detik. Ini sangat tidak ramah bagi pengguna seluler dan rasio pentalannya akan tinggi. Akan lebih bijaksana jika mengurangi jumlah permintaan pada setiap halaman dengan desain yang lebih cerdas, dan dengan demikian mengurangi total ukuran halaman dan waktu pemuatannya.

20170423_chrome3g_ecommchallgr1

Tes Pembatasan Jaringan Chrome – situs e-niaga lokal yang besar

Meskipun kami dapat mengukur seberapa ramah situs web terhadap seluler dan bandwidth yang sesuai, apa yang menentukan kinerja ini? Kami akan mencari tahu sebentar lagi.

Administrasi server dan keterampilan keamanan sangat penting

Untuk situs web CMS pada umumnya, perancang web biasa hanya mengutak-atik sebagian WordPress saja, dengan tema, plugin, dan konten (teks, gambar, dan tautan ke video dan konten lainnya). Ini benar-benar bukan ilmu roket dan bahkan kemudian, banyak perancang web gagal pada komponen penting untuk mengamankan situs WordPress dengan benar.

Saya memiliki hak istimewa menjadi praktisi keamanan sejak tahun 1996, dan telah melakukan pemrograman keamanan, dan berkonsultasi di tingkat strategis, untuk setidaknya memahami apa yang perlu dilakukan. Tetapi banyak desainer muda tidak akan memiliki tenur atau pengetahuan ini. Untuk plugin keamanan WordPress, kesalahan konfigurasi dapat menjatuhkan situs web (500 kesalahan terlarang) dan bahkan mengunci pengguna yang sah sama sekali. Dan kurangnya keamanan dapat menurunkan situs web dengan sangat mudah melalui seringnya DDoS (penolakan layanan terdistribusi) dan serangan brute force. Ini adalah faktor kritis, dan tidak boleh dianggap enteng.

Beberapa desainer web tidak fokus (atau tidak memiliki keahlian dalam) administrasi server, yang membuat perbedaan pada file Skor PageSpeed ​​dan YSlow, serta kinerja seluler, karena banyak dari parameter ini hanya dapat dikonfigurasi di server.

Situs web yang baik yang memiliki kualitas SEO (optimisasi mesin pencari) dan pengoptimalan konten membutuhkan pengetahuan pemrograman dan administrasi server, seperti Apache konfigurasi / keamanan server web, PHP bahasa scripting dan SQL manajemen database untuk mengutak-atik WordPress CMS. Keterampilan teknis ini adalah domain pemrogram dan pengembang.

Beberapa hal sepele yang dapat membantu kinerja dan keamanan situs web Anda, tetapi mungkin diabaikan oleh perancang belaka, juga merupakan versi perangkat lunak server web Apache Anda (atau perangkat lunak server web serupa lainnya), PHP, dan SQL.

Misalnya, apakah Anda setidaknya menjalankan Apache 2.4x, PHP 7, dan MariaDB 10? Sekali lagi, ini akan membutuhkan beberapa penyesuaian untuk membuat situs web Anda berfungsi dengan baik.

GTmetrix untuk menyelamatkan

GTmetrix adalah platform pengujian yang bagus untuk memeriksa kecepatan dan pengoptimalan situs web Anda. Jika Anda memilih desainer web atau agensi, gunakan GTmetrix sebagai tes lakmus untuk keterampilan mereka. Perancang atau agensi yang baik setidaknya harus dapat mengoptimalkan situs web mereka untuk kecepatan.

Ada 2 skor yang perlu Anda ketahui, Pagespeed, dan YSlow, yang merupakan cara umum bagi praktisi industri untuk mengukur kecepatan dan pengoptimalan situs web, dan untuk mengetahui cara menyempurnakan situs web yang sesuai.

Lebih mudah untuk mencapai skor PageSpeed ​​yang lebih tinggi, sedangkan skor YSlow jauh lebih ketat. Anda mungkin mendapat nilai B untuk PageSpeed ​​dan mungkin mendapat nilai D untuk YSlow. Menurut pendapat saya, situs web yang bagus haruslah A untuk PageSpeed ​​dan B atau lebih baik untuk YSlow.

Berapa skor situs web Anda?

Selain skor PageSpeed ​​dan YSlow, faktor penting lainnya yang dapat Anda lihat dari GTmetrix adalah:

1) Waktu yang Penuh – ukuran sebenarnya dari kecepatan dan ukuran halaman web, karena beberapa orang mungkin menggunakannya”beban malas” untuk memuat gambar secara asinkron, tetapi pengguna masih perlu memuat seluruh halaman untuk membaca semuanya.

2) Total Ukuran Halaman – apakah cukup kecil untuk ponsel? Apakah bandwidth halaman web ramah pada Wifi publik yang lambat atau 3G? Di sinilah Anda membutuhkan kewarasan daripada obsesi. Salah satu kegagalan umum desainer web (termasuk beberapa toko besar) adalah bahwa gambar tidak dioptimalkan untuk Web. Misalnya, Anda TIDAK memerlukan gambar 4,000 piksel (lebar) untuk Web, yang lebih dimaksudkan untuk dicetak. Gambar 1,200 piksel (lebar) dengan kompresi gambar yang optimal sudah cukup baik. Juga, sajikan "gambar berskala", yang menuntut lebih banyak dari desainer web, tetapi akan membantu dengan PageSpeed ​​dan kinerja. Ingatlah bahwa penglihatan manusia kita didasarkan pada logika fuzzy, dan sangat canggih untuk melihat detail tanpa perlu resolusi penuh atau tinggi. Sebagai pionir dalam desain media interaktif sejak 1986, saya yakinkan Anda bahwa ada banyak trik luar biasa yang dapat digunakan untuk menurunkan ukuran gambar secara dramatis dan membuat situs web menjadi ringan.

3) Permintaan – jumlah permintaan HTTP ke berbagai situs dan server untuk memenuhi penyajian seluruh halaman. Beberapa situs membuat ratusan permintaan server, yang terlalu banyak. Untuk permintaan yang sah seperti CSS (cascading style sheets) dan JS (Javascript), gabungkan dan perkecil jika memungkinkan. Sebariskan file CSS dan JS kecil kapan pun Anda bisa. Panggilan HTTP yang tidak perlu dapat mengurangi kegunaan situs web, meningkatkan tingkat kesalahan, mengurangi kecepatan, dan juga meningkatkan masalah keamanan dan privasi. Permintaan seperti itu sering terjadi dengan domain cookie, penyedia iklan, platform video, platform media sosial, dan sebagainya. Gunakan permintaan dengan bijaksana. Jika perlu, pilih penyebut terendah dan gabungkan atau sederhanakan permintaan.

4) caching – selain caching tingkat server, Anda juga dapat memanfaatkan caching browser untuk memungkinkan pengguna Anda men-cache konten di disk mereka sendiri. Ini akan mengurangi waktu pemuatan saat pengunjung Anda kembali, karena mereka akan menyimpan beberapa konten dalam cache. Anda dapat mengonfigurasi ini di backend server. Dan di situs web Anda, konfigurasikan plugin caching berkualitas baik.

5) GZip – konfigurasikan server Anda untuk menyajikan konten terkompresi, terutama file teks seperti HTML, JS, dan CSS. Beberapa halaman dapat dikompresi hingga 70%, dan akan membantu waktu pemuatan Anda secara keseluruhan.

6) Berusaha agar hidup – konfigurasikan Apache Anda untuk mengaktifkan koneksi HTTP persisten sehingga koneksi yang sama dapat mengirim dan menerima permintaan sinkron, meningkatkan kecepatan bagi pengguna Anda.

7) Kedaluwarsa header – konfigurasi tingkat server lain yang dapat dikonfigurasi di server atau di tingkat situs web. Sebagian besar konten dapat memiliki header kedaluwarsa yang ditentukan, di mana konten sementara seperti teks dapat memiliki masa kadaluwarsa yang lebih pendek, sementara gambar, video, dokumen, dan skrip dapat memiliki masa kadaluwarsa yang lebih lama karena cenderung tidak sering berubah. Peringatannya adalah dengan beberapa skrip eksternal (seperti skrip Google), karena kami tidak akan memiliki kontrol tingkat server pada skrip tersebut, sehingga kami tidak dapat menetapkan header kedaluwarsa untuk skrip tersebut.

Berikut adalah contoh skor GTmetrix kami, yang menunjukkan A untuk PageSpeed ​​dan YSlow, dengan Waktu Muat Penuh (1.8 dtk) yang sangat singkat, Total Ukuran Halaman (693kB), dan 22 Permintaan yang sangat singkat:

20170423_gtmetrix_mb1

Skor GTmetrix – situs web kami sendiri

Berikut adalah contoh penyedia web hosting, memiliki E untuk PageSpeed ​​dan YSlow, dengan 7s Fully Loaded Time, 2.22 MB Total Page Size, dan 170 Request yang tidak masuk akal.

20170422_gtmetrix_sgwebhost1

Skor GTmetrix – host web yang besar

Berikut adalah contoh biro desain web, memiliki A untuk PageSpeed ​​tetapi C untuk YSlow, dengan Waktu Muat Penuh 23.9 sangat lambat, Ukuran Halaman Total 2.66MB, dengan 52 Permintaan.

20170422_gtmetrix_sgwebdesign1

Skor GTmetrix – biro desain web

Peningkatan CDN

Jaringan pengiriman konten (CDN) dapat menambahkan dorongan ekstra, meskipun tidak sepenuhnya diperlukan jika Anda telah melakukan konfigurasi kualitas yang baik untuk mengaktifkan skor A untuk PageSpeed. YSlow menempelkan nilai ke CDN, jadi jika Anda tidak menjalankan CDN, skor YSlow Anda akan berkurang. Ada CDN yang berbeda di luar sana, dan sebisa mungkin, BELANJA pada CDN yang bagus karena CDN gratis tidak akan pernah bekerja seefektif CDN khusus berbayar. Tidak ada makan siang gratis di dunia.

Jadi, jika Anda memiliki situs web, saya sarankan untuk mengujinya terhadap GTmetrix dan Google Chrome sekarang, dan dapatkan gambaran tentang apa yang dapat ditingkatkan. Jika skornya buruk dan meresahkan, jangan khawatir, karena ada teknik yang telah terbukti di back-end server Anda untuk memperbaikinya. Ini tidak akan berjalan mudah di taman, tetapi itu akan sia-sia saat Anda mendapatkan skor Anda dan mengurangi penalti pada SEO. Dan jika Anda belum memiliki situs web, dan sedang berbicara dengan perancang web dan agensi potensial, uji situs web mereka sendiri terhadap GTmetrix dan Google Chrome. Kemudian temukan orang yang tepat untuk membantu Anda bergerak maju.