Pemantauan Kinerja & Kesehatan Situs Web: Kiat & Praktik Terbaik

Diterbitkan: 2022-11-01

Menyiapkan dan menjalankan situs web atau proyek e-niaga sangat bagus – namun, pekerjaan Anda masih jauh dari selesai setelah situs Anda aktif dan berjalan.

Tanpa pemantauan kesehatan dan kinerja yang tepat, situs web Anda akan mengalami konsekuensinya – yang bisa jauh lebih besar dari sekadar kecepatan pemuatan yang lambat.

Mari kita mengalihkan perhatian kita ke skenario hipotetis dan ideal di mana semua situs web di dunia berfungsi sebagaimana mestinya. Tahukah Anda bahwa, selain meroketnya kepuasan pengguna, kami juga berkontribusi pada lingkungan yang lebih baik?

Situs web yang berkinerja buruk tidak hanya berdampak pada siapa pun yang membuat atau menggunakannya, tetapi juga meninggalkan jejak karbon yang lebih besar.

Menurut Kalkulator Karbon Situs Web, situs web memiliki jejak karbon, dan rata-rata laman situs web memancarkan 0,5 gram karbon dioksida per tampilan. Itu hanya mediannya.

Saat melihat rata-rata, yang juga mempertimbangkan situs web berpolusi tinggi, angka itu naik menjadi 0,9 gram.

Selain masalah dalam skala global, situs web yang tidak sehat dan berkinerja buruk akan menghabiskan waktu, uang, dan pendapatan Anda. Kesehatan situs web mirip dengan milik kita: mudah diabaikan dan sulit ditingkatkan.

Anda perlu mengetahui komponen utama yang membentuk kesehatan situs web untuk melakukan praktik pemantauan yang tepat guna membantu menghemat waktu pemrosesan.

Dengan munculnya pembuat situs web yang cepat dan mudah, membuat situs web menjadi dapat diakses oleh semua orang. Yang perlu Anda lakukan hanyalah mendaftar, memilih domain, memilih template Anda, dan voila! Anda memiliki situs web dalam hitungan detik.

Namun, banyak pemilik situs web mengabaikan fakta bahwa pembuatan situs web hanyalah langkah pertama. Pemeliharaan kinerja yang tepat dan pemantauan kesehatan juga penting.

Dan pada catatan itu, mari kita lihat beberapa indikator kesehatan dan kinerja situs web yang penting: apa itu, bagaimana memantaunya, dan bagaimana melakukan peningkatan.

Aspek yang Harus Dipantau Untuk Skor Kesehatan Situs Web yang Tinggi

Data Web Inti

Skor Kesehatan Situs Web yang Tinggi melalui Core Web Vitals Gambar dari penulis, Oktober 2022

Wawasan Google PageSpeed

Metrik pertama yang harus Anda pertimbangkan saat melakukan pengujian kinerja adalah Data Web Inti Anda. Indikator kinerja ini menunjukkan kecepatan, stabilitas, dan daya tanggap, membantu Anda memahami kualitas pengalaman pengguna situs web Anda.

Beberapa alat melacak Data Web Inti Anda, tetapi banyak pemilik situs web tertarik pada alat sederhana: Google PageSpeed ​​Insights.

Setelah memasukkan URL Anda ke dalam alat, Anda akan disajikan dengan laporan yang menunjukkan apakah Anda lulus tes Core Web Vitals dan aspek lain yang perlu Anda perhatikan. Berikut adalah tiga metrik utama yang akan Anda lihat:

Cat Contentful Terbesar (LCP)

Bertujuan untuk skor 2,5 detik atau kurang .

Jika skor Anda lebih dari 2,5 detik, ini dapat menunjukkan hal berikut: server Anda lambat, waktu pemuatan sumber daya tidak normal, Anda memiliki JavaScript dan CSS yang memblokir perenderan, atau ada perenderan lambat di sisi klien.

Penundaan Input Pertama (FID)

Bertujuan untuk skor 100 milidetik atau kurang .

Jika skor Anda melebihi waktu tersebut, Anda mungkin perlu mengurangi dampak kode pihak ketiga, mengurangi waktu eksekusi JavaScript, meminimalkan kerja utas utama, menjaga ukuran transfer tetap kecil, dan jumlah permintaan rendah.

Pergeseran Tata Letak Kumulatif (CLS)

Bertujuan untuk skor 0,1 atau kurang .

Jika skor Anda melebihi ini, Anda dapat menghindari perubahan tata letak acak dengan menyertakan atribut ukuran pada konten visual dan video Anda (atau memesan ruang dengan kotak rasio aspek CSS). Hindari tumpang tindih konten Anda, dan berhati-hatilah saat menganimasikan transisi Anda.

Pemblokir Kecepatan Halaman

Beberapa faktor dapat memengaruhi kecepatan memuat situs web Anda. Namun, jika Anda memiliki anggaran waktu dan ingin fokus pada penyebab utama terlebih dahulu, perhatikan faktor-faktor berikut:

  • Kode JavaScript dan CSS yang tidak digunakan.
  • Render pemblokiran JavaScript dan Kode CSS.
  • Kode JavaScript dan CSS yang tidak diminifikasi.
  • Ukuran file gambar besar (lebih lanjut tentang itu di bawah).
  • Terlalu banyak rantai pengalihan.

Untuk meningkatkan pemuatan file JavaScript dan CSS, pertimbangkan untuk memuatnya terlebih dahulu.

Opsi lain adalah mengaktifkan petunjuk awal, yang memberi tahu browser dalam respons server HTTP sumber daya mana yang harus mulai diunduh dengan memanfaatkan "waktu berpikir server", sehingga mempercepat pemuatan halaman.

Untuk menguji situs web Anda:

  1. Arahkan ke https://pagespeed.web.dev/
  2. Masukkan URL halaman yang ingin Anda pindai.

Saya akan merekomendasikan memilih beranda Anda terlebih dahulu.

Alat praktis lainnya adalah WebPageTest.org, yang juga menunjukkan Data Web Inti Anda dan metrik lainnya yang dapat membantu Anda meningkatkan kinerja dan kesehatan situs web Anda secara drastis. Juga, gratis!

Cukup tempelkan URL halaman ke dalam kotak pencarian yang ditampilkan di situs, dan itu akan melakukan pengujian penuh dari lokasi default.

Anda juga dapat mendaftar sebagai pengguna dan memilih dari daftar lokasi untuk menguji situs web Anda dari berbagai negara, perangkat, dan browser.

WebPageTest akan menunjukkan dengan tepat di mana situs web Anda berada dalam hal kinerja, dan apa yang dapat memperlambatnya melalui Ringkasan Kinerja yang terdiri dari empat bagian utama: Peluang dan Eksperimen, Metrik yang Diamati, Pengukuran Pengguna Nyata, dan Proses Perorangan.

metrik yang diamati Gambar dari penulis, Oktober 2022

Di UCRAFT, kami menggunakan kombinasi alat seperti Wawasan PageSpeed, Alat Pengembang Chrome, WebPageTest, dan beberapa lainnya, untuk mendapatkan pemahaman yang jelas tentang apa yang perlu kami kerjakan terkait kinerja situs web kami – terutama karena industri SaaS sudah sangat kompetitif.

Elemen Desain

elemen desain Tangkapan layar dari penulis, Oktober 2022

Ketika kami memikirkan kinerja situs web dan pemantauan kesehatan, kami biasanya menyerahkannya kepada tim teknologi untuk ditangani.

Tetapi bagaimana jika saya memberi tahu Anda bagaimana Anda mendesain situs web Anda, dan elemen yang Anda pilih dapat membuat atau menghancurkan kinerja Anda?

Itu benar – saatnya untuk melibatkan tim desain.

Optimasi Gambar

Gambar memang bagus, tetapi dapat memperlambat situs web Anda jika ukurannya tidak tepat. Pastikan untuk mengubah ukuran gambar Anda, dan hindari mengunggah file raksasa jika tidak akan ditampilkan secara keseluruhan.

Demikian juga, kompres gambar Anda dan coba berbagai jenis file seperti WebP, JPEG 2000, dan JPEG XR daripada memilih file JPEG atau PNG yang lebih berat.

Pertimbangkan untuk menerapkan pemuatan lambat bawaan untuk memastikan bahwa gambar dimuat saat pengguna melihatnya, alih-alih memuat semuanya sekaligus.

Hampir semua browser, termasuk Chrome, Safari, dan Firefox, mendukung atribut loading="lazy" di <img> atau <iframe>, yang memberi tahu browser untuk memuatnya saat pengguna menggulir lebih dekat ke browser.

Pastikan untuk tidak malas memuat gambar paro atas, karena akan menurunkan skor LCP halaman Anda, dan Google merekomendasikan penggunaan atribut fetchpriority=”high” pada gambar paro atas untuk meningkatkan LCP.

Jika Anda menggunakan atribut itu, tidak perlu memuat gambar terlebih dahulu. Anda harus melakukan pramuat atau menyetel atribut "fetchpriority" pada gambar di paro atas.

Selain itu, manfaatkan responsivitas atribut "srcset" untuk memuat gambar berukuran tepat berdasarkan ukuran layar, dan hindari memuat gambar besar yang berlebihan di layar kecil. Ini akan sangat membantu untuk meningkatkan skor LCP.

font

Font khusus yang mewah sering kali sulit dibaca oleh pengguna yang tidak memiliki visi 20/20, tetapi font tersebut juga dapat sangat memperlambat situs web Anda.

Ganti font yang dihosting secara eksternal untuk font yang lebih aman untuk web, dan coba font Google – selama dihosting melalui CDN Google.

Selain itu, pertimbangkan untuk memasukkan font variabel ke dalam estetika umum situs web Anda, karena spesifikasi font ini dapat mengurangi ukuran file font secara signifikan.

Pastikan untuk memuat font Anda terlebih dahulu.

Animasi/Fitur Tambahan

Tak perlu dikatakan lagi: Jangan berlebihan dengan animasi, video, efek khusus, penggeser, atau elemen mewah lainnya.

Sangat menyenangkan untuk menyertakan beberapa elemen interaktif di sana-sini, tetapi menjenuhkan situs web Anda dengan terlalu banyak "hal" yang bergerak dapat membuat pengguna dan server Anda frustrasi.

Jangan gunakan animasi non-komposisi, karena menyebabkan pengecatan ulang halaman, yang meningkatkan kerja utas utama – dan halaman web mungkin tampak tidak stabil secara visual saat dimuat.

Solusi PWA Untuk Pengoptimalan Seluler

Mengapa tidak menggunakan seluruh rute ramah seluler dan mengubah situs seluler Anda menjadi Aplikasi Web Progresif (PWA)?

Karena PWA dibuat dengan pekerja layanan, mereka memuat konten yang di-cache dengan kecepatan yang lebih cepat. Tidak hanya itu, PWA menyerupai aplikasi seluler asli, yang sangat bagus untuk kinerja dan UX.

Metrik Kinerja Teknis Tambahan

Waktu aktif

Uptime menunjukkan seberapa baik situs web Anda berfungsi.

Jika situs web Anda sering mogok atau tidak aktif, itu akan membahayakan pengalaman pengguna Anda, peringkat Google, dan, oleh karena itu, pendapatan Anda.

Jika memungkinkan, targetkan untuk memiliki waktu aktif 99,999% dan uji situs web Anda dari lokasi yang berbeda.

Alat untuk pemantauan waktu aktif:

  • Kue Status.
  • Pingdom.
  • Waktu Aktif yang Lebih Baik.
  • Robot Waktu Aktif.

Kinerja Basis Data

Jika Anda telah memeriksa dasar-dasarnya dan situs web Anda masih lambat merespons, mungkin karena kinerja basis data yang buruk.

Anda dapat memeriksanya dengan memantau waktu respons untuk kueri Anda dan menunjukkan kueri database yang paling banyak menghabiskan waktu.

Setelah Anda selesai melakukannya, dapatkan pengoptimalan! Anda dapat menggunakan alat seperti Blackfire.io untuk membantu Anda mengidentifikasi kemacetan dengan mudah dan menemukan solusi berdasarkan data yang akurat.

Perangkat Keras Server Web

Situs web Anda mungkin tertinggal jika ruang disk Anda penuh dengan file log, gambar, video, dan entri basis data. Pastikan untuk memantau beban unit pemrosesan pusat (CPU) Anda secara teratur, terutama setelah Anda menerapkan pembaruan atau perubahan desain.

Alat seperti New Relic dapat membantu Anda meningkatkan seluruh tumpukan melalui pemantauan dan debugging yang efisien.

Visibilitas Pencarian

Banyak metrik yang dibahas di atas sudah memiliki dampak signifikan pada visibilitas penelusuran.

Jadi ketika Anda menjalankan halaman situs web Anda melalui Google PageSpeed ​​Insights dan mengoptimalkannya, Anda juga melakukan hal-hal penting untuk SEO Anda.

Anda juga dapat memilih alat perayapan situs web seperti Semrush atau Sitechecker.pro, Screaming Frog, DeepCrawl, atau alat lain yang paling sesuai dengan kebutuhan Anda.

Perayap situs web membantu menemukan semua jenis masalah, seperti:

  • Tautan rusak.
  • Gambar rusak.
  • Pantau metrik vital web inti.
  • Redirect rantai.
  • Kesalahan data terstruktur.
  • Halaman yang tidak diindeks.
  • Judul dan deskripsi meta tidak ada.
  • Konten campuran.

Pastikan Anda sudah siap dengan poin-poin berikut:

  • Peta situs XML – Pastikan peta situs Anda diformat dengan benar dan periksa apakah perlu melakukan pembaruan dan mengirimkan kembali peta situs Anda melalui Google Search Console.
  • Robots.txt – Pastikan Anda menggunakan file robots.txt untuk halaman web Anda (HTML, PDF, atau format non-media lainnya yang dapat dibaca oleh mesin telusur) untuk mengelola lalu lintas perayapan dengan lebih baik, terutama jika Anda menduga server Anda kewalahan oleh permintaan dari perayap Google.

Keamanan dan Caching Situs Web

Dapatkan Sertifikat SSL Anda!

Situs web yang sehat adalah situs web yang aman.

Bahkan jika situs web Anda dimuat dalam waktu yang tepat dan mendapat skor 100/100, tidak mungkin pengguna (atau mesin telusur) akan mempercayai situs Anda jika tidak dimulai dengan https://.

Sertifikat SSL pada dasarnya adalah kode di server Anda yang membangun koneksi terenkripsi, menjamin bahwa data pengguna tetap aman.

Memperoleh sertifikat SSL bukanlah proses yang sulit, tetapi bisa memakan waktu lama jika dilakukan secara manual.

Namun, jika Anda menggunakan penyedia hosting yang mapan seperti BlueHost, lebih sering daripada tidak, penyedia Anda akan dapat mengeluarkan SSL gratis untuk domain Anda.

Pertimbangkan Menggunakan CDN

Jaringan pengiriman konten (CDN) adalah server terdistribusi yang bekerja bersama untuk mengirimkan konten internet cepat.

Dengan kata lain, CDN adalah alat yang mempercepat kinerja situs web Anda dengan menjaga kontennya di server dekat dengan pengguna, terlepas dari lokasi geografis. Ini juga dikenal sebagai caching.

Jika Anda memiliki kehadiran global, CDN adalah suatu keharusan! Ini akan meningkatkan kecepatan memuat halaman Anda, mengurangi biaya bandwidth Anda, menyebarkan lalu lintas Anda (mengurangi kemungkinan situs Anda turun), dan meningkatkan keamanan melalui fitur-fitur seperti mitigasi DDoS.

Pemain top di industri ini termasuk Cloudflare, Amazon Cloudfront, dan Google Cloud CDN. Namun, ada banyak pilihan lain, jadi lakukan riset dan pilih CDN terbaik untuk situs web dan kebutuhan bisnis Anda.

Siapkan Firewall Aplikasi Web

Firewall Aplikasi Web (WAF) melindungi aplikasi web dengan menyaring lalu lintas HTTP yang mencurigakan. Hal ini bertujuan untuk mencegah aplikasi dari serangan seperti:

  • Pemalsuan lintas situs.
  • Pembuatan skrip lintas situs (XSS).
  • Penyertaan berkas.
  • injeksi SQL.

Di bawah ini adalah daftar firewall aplikasi web paling populer dan tepercaya:

  • WAF Cloudflare.
  • Firewall GoDaddy.
  • Microsoft Azure.

Atau jika Anda menggunakan WordPress, Anda dapat mempertimbangkan untuk menginstal plugin seperti:

  • Pagar Kata.
  • Sucuri.
  • Keamanan All-In-One (AIOS).

Dakwaan

Itu bungkus! Seperti yang Anda tahu, kinerja dan kesehatan situs web bergantung pada berbagai aspek.

Jika situs web Anda tertinggal, langkah logis pertama adalah memeriksa Data Web Inti Anda dan melihat apa yang dapat Anda tingkatkan. Anda juga dapat melihat metrik teknis lainnya dan meningkatkannya.

SEO juga penting untuk kesehatan situs web Anda, jadi periksa visibilitas pencarian, tautan, dan pemblokir muatan potensial untuk melihat apa yang dapat Anda tingkatkan.

Dan jangan lupa tentang sertifikat SSL dan caching Anda juga.

Desain situs web Anda juga dapat memengaruhi kecepatan dan kinerja pemuatan Anda, terutama jika Anda atau desainer Anda suka menggunakan elemen desain yang berbobot.

Ingatlah untuk mengoptimalkan gambar Anda, menghindari font yang berat, dan menggunakan animasi dalam jumlah sedang.

Lebih banyak sumber daya:

  • Cara Menggunakan Laporan Chrome UX Untuk Meningkatkan Kinerja Situs Anda
  • 6 Tips Untuk Meningkatkan Performa Jaringan Display Google
  • SEO Teknis Tingkat Lanjut: Panduan Lengkap

Gambar Unggulan: JulsIst/Shutterstock