Membuat situs web tidak lagi sulit, setidaknya di permukaan. Siapa pun dapat mengklaim telah menyiapkan situs web untuk Anda. Tetapi rahasia tentang situs web berkinerja tinggi adalah apa yang dilakukan di bagian belakang tingkat server dan direndam dalam kompleksitas teknis yang tidak menarik atau tidak diketahui oleh sebagian besar perancang web. Mari jelajahi beberapa rahasia ini yang akan mendorong situs web Anda melejit dengan skor PageSpeed ​​dan YSlow yang lebih baik (untuk SEO yang lebih baik), dan terutama bagi pengguna seluler.

Kesalahan desain web

Bagi beberapa klien, yang mereka pedulikan hanyalah situs web yang "cantik". Mereka menginginkan tampilan yang mencolok, dengan gambar layar penuh, video tugas berat, dan segala jenis skrip yang mencolok. Kepada klien ini, mereka memiliki pemahaman yang salah bahwa membayar pelanggan dan pengunjung menyukai situs web dengan cara ini. Sayangnya, ini adalah kesalahan yang masih didukung oleh beberapa agensi dan desainer web yang tidak tahu lebih baik, atau terlalu takut untuk meluangkan waktu untuk menjelaskan cara kerja situs web 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. 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 kriteria ini akan menghukum situs Anda, dan tenggelam semakin jauh di belakang indeks Google.

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

Jika situs web Anda memuat dengan sangat lambat di Wi-Fi publik, atau seluler, mereka akan berpindah (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 perancang 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 kolega 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 menyelesaikan banyak kerumitan teknis sepanjang perjalanan panjang yang sulit sejak 1996 hingga sekarang (21 tahun!).

Apakah situs web benar-benar ramah seluler?

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

Cara gratis dan sederhana untuk menguji situs web Anda adalah dengan browser yang telah dibuat raja mesin telusur - Google Chrome Browser.

Di bawah browser Alat pengembang pilihan, pilih jaringan, dan Pelambatan opsi, dan pilih "3G bagus"(Perkiraan yang 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

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

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

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

Uji Pelambatan 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 perancang web atau agensi, gunakan GTmetrix sebagai tes lakmus untuk keterampilan mereka. Seorang desainer atau agensi yang baik setidaknya harus dapat mengoptimalkan kecepatan situs web mereka.

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 laman web, karena beberapa orang mungkin menggunakan ”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 perancang web (termasuk beberapa toko besar) adalah 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 optimal sudah cukup baik. Juga, sajikan "gambar berskala", yang menuntut lebih banyak dari perancang web, tetapi akan membantu dengan PageSpeed ​​dan kinerja. Ingatlah bahwa penglihatan manusia didasarkan pada logika fuzzy, dan sangat canggih untuk melihat detail tanpa memerlukan resolusi penuh atau tinggi. Sebagai pelopor dalam desain media interaktif sejak 1986, saya jamin ada banyak trik luar biasa yang dapat digunakan seseorang untuk menurunkan ukuran gambar secara dramatis dan membuat situs web ringan.

3) Permintaan - jumlah permintaan HTTP ke berbagai situs dan server untuk memenuhi penyajian seluruh laman. Beberapa situs membuat ratusan permintaan server, yang jumlahnya terlalu banyak. Untuk permintaan yang sah seperti CSS (cascading style sheets) dan JS (Javascript), gabungkan dan minimalkan 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 semacam 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 cache tingkat server, Anda juga dapat memanfaatkan cache browser untuk memungkinkan pengguna Anda menyimpan konten di disk mereka sendiri. Ini akan mengurangi waktu pemuatan ketika pengunjung Anda kembali, karena mereka akan menyimpan beberapa konten dalam cache. Anda dapat mengkonfigurasi ini di backend server. Dan di situs 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 dengan waktu muat 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 pengguna Anda.

7) Kedaluwarsa header - konfigurasi tingkat server lain yang dapat dikonfigurasi di server atau di tingkat situs web. Sebagian besar konten dapat memiliki tajuk kedaluwarsa yang ditentukan, di mana konten sementara seperti teks dapat memiliki masa kedaluwarsa yang lebih pendek, sedangkan gambar, video, dokumen, dan skrip dapat memiliki masa kedaluwarsa yang lebih lama karena kemungkinannya kecil untuk berubah. Peringatannya ada pada beberapa skrip eksternal (seperti skrip Google), karena kami tidak 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 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 - agen desain web

Peningkatan CDN

Jaringan pengiriman konten (CDN) dapat menambahkan dorongan ekstra, meskipun itu tidak sepenuhnya diperlukan jika Anda telah melakukan konfigurasi kualitas yang baik untuk mengaktifkan skor A untuk PageSpeed. YSlow melampirkan nilai ke CDN, jadi jika Anda tidak menjalankan CDN, skor YSlow Anda akan berkurang. Ada beberapa CDN berbeda di luar sana, dan sebisa mungkin, BELI untuk 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 dengan GTmetrix dan Google Chrome sekarang, dan rasakan apa yang dapat ditingkatkan. Jika skornya buruk dan meresahkan, jangan khawatir, karena ada teknik yang terbukti di server Anda untuk memperbaiki keadaan. Ini tidak akan mudah berjalan 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 berbicara dengan perancang dan agensi web potensial, uji situs web mereka sendiri terhadap GTmetrix dan Google Chrome. Kemudian temukan orang yang tepat untuk membantu Anda maju.

Dr Seamus Phan adalah CTO dan Kepala Konten di McGallen & Bolden. Dia ahli dalam teknologi, strategi, branding, pemasaran, pelatihan kepemimpinan, dan manajemen krisis. Artikel ini mungkin muncul bersamaan di miliknya blog. Hubungkan LinkedIn. © 1984-2020 Seamus Phan dkk. Seluruh hak cipta.