Posted inMonitoring

Tự động hóa giám sát Core Web Vitals với Lighthouse Exporter và Grafana: Bài học từ 6 tháng Production

Monitoring tutorial - IT technology blog
Monitoring tutorial - IT technology blog

Tại sao chỉ giám sát Server là chưa đủ?

Sau hơn nửa năm vận hành hệ thống monitoring cho một dự án E-commerce, mình đúc kết được một bài học xương máu. Dashboard Prometheus báo CPU/RAM server cực thấp, các service vẫn “xanh mướt”, nhưng khách hàng vẫn than phiền vì trang chủ mất tận 8 giây mới hiển thị xong. Vấn đề nằm ở chỗ chúng ta thường quá tập trung vào hạ tầng Backend mà quên mất trải nghiệm thực tế của người dùng trên trình duyệt.

Google dùng bộ chỉ số Core Web Vitals để chấm điểm website. Nếu bạn làm SEO, bạn sẽ hiểu các chỉ số này quyết định việc trang web nằm ở trang 1 hay trang 10 của kết quả tìm kiếm. Tuy nhiên, việc mở Chrome DevTools check thủ công mỗi ngày là điều bất khả thi. Đó là lý do mình đưa Lighthouse Exporter vào quy trình giám sát. Công cụ này giúp chuyển hóa các báo cáo khô khan của Lighthouse thành dữ liệu thời gian thực trên Grafana.

Lighthouse Exporter hoạt động như thế nào?

Lighthouse Exporter thường chạy dưới dạng một Docker container. Khi hoạt động, nó khởi chạy một trình duyệt Chrome không giao diện (headless Chrome) để truy cập URL bạn cấu hình. Sau khi quét xong, nó chuyển đổi kết quả thành định dạng metrics mà Prometheus có thể hiểu được.

Dưới đây là các chỉ số “vàng” mình thường xuyên theo dõi:

  • Largest Contentful Paint (LCP): Đo lường tốc độ tải phần tử lớn nhất (thường là banner hoặc ảnh sản phẩm).
  • Cumulative Layout Shift (CLS): Kiểm tra xem giao diện có bị nhảy lung tung khi đang load ảnh hay không.
  • Total Blocking Time (TBT): Thời gian trình duyệt bị “đơ” do xử lý JavaScript quá nặng.
  • Performance Score: Điểm tổng quát để báo cáo nhanh cho sếp hoặc khách hàng.

Điểm cộng lớn nhất là Exporter chạy trên server cố định. Điều này loại bỏ các yếu tố gây nhiễu như tốc độ mạng Wi-Fi của dev hay cấu hình máy tính cá nhân, giúp dữ liệu đo lường luôn nhất quán.

Thực hành: Triển khai hệ thống giám sát Core Web Vitals

Trước khi bắt đầu, hãy đảm bảo bạn đã có sẵn cụm Prometheus và Grafana. Nếu chưa, hãy dành 5 phút xem lại các bài hướng dẫn cài đặt cơ bản trên blog của mình.

Bước 1: Chạy Lighthouse Exporter với Docker

Sử dụng Docker là cách nhanh nhất để deploy. Một lưu ý nhỏ: Headless Chrome cực kỳ ngốn tài nguyên. Bạn nên giới hạn RAM cho container này để tránh ảnh hưởng đến các service khác.

docker run -d \
  --name lighthouse-exporter \
  -p 9242:9242 \
  --memory="1g" \
  -e "LIGHTHOUSE_SCRAPE_INTERVAL=300" \
  -e "LIGHTHOUSE_TARGET_URLS=https://itfromzero.com,https://google.com" \
  --restart always \
  femtopixel/google-lighthouse-exporter

Trong lệnh trên, mình cấu hình quét 2 trang web mỗi 5 phút. Bạn có thể thêm nhiều URL khác nhau, ngăn cách bởi dấu phẩy.

Bước 2: Cấu hình Prometheus thu thập dữ liệu

Bây giờ, hãy khai báo cho Prometheus biết nơi lấy metrics. Bạn mở file prometheus.yml và thêm đoạn cấu hình sau:

scrape_configs:
  - job_name: 'lighthouse-monitor'
    scrape_interval: 15m # Quét quá dày sẽ làm treo server
    static_configs:
      - targets: ['localhost:9242']

Kinh nghiệm thực tế cho thấy bạn không nên đặt scrape_interval quá ngắn. Mỗi lần chạy Lighthouse mất khoảng 30-60 giây cho mỗi URL. Nếu bạn có 10 URL mà quét liên tục mỗi phút, CPU server sẽ luôn trong tình trạng quá tải.

Bước 3: Trực quan hóa trên Grafana Dashboard

Khi Prometheus đã nhận dữ liệu, việc còn lại là vẽ biểu đồ. Bạn có thể dùng Dashboard ID 12154 trên Grafana Labs để import nhanh. Một vài câu query PromQL hữu ích cho bạn:

  • Theo dõi điểm Performance: lighthouse_performance_score{url="https://itfromzero.com"}
  • Theo dõi LCP (giây): lighthouse_lcp_seconds{url="https://itfromzero.com"}

Bài học thực tế: Xử lý Alert Fatigue và Tài nguyên

Sai lầm lớn nhất của mình lúc mới setup là đặt cảnh báo ngay khi điểm Performance tụt xuống dưới 80. Kết quả là điện thoại báo tin nhắn liên tục mỗi khi mạng quốc tế chập chờn hoặc server có chút lag nhẹ. Đây gọi là Alert fatigue — tình trạng mệt mỏi vì nhận quá nhiều cảnh báo ảo.

Để khắc phục, mình đã đổi sang dùng hàm avg_over_time trong 30 phút. Nếu trung bình điểm trong nửa tiếng vẫn thấp, lúc đó mới thực sự có vấn đề về code hoặc hạ tầng. Cách này giúp loại bỏ gần 90% cảnh báo rác.

Về phần cứng, hãy nhớ Headless Chrome rất “đói” RAM. Một instance có thể ngốn từ 500MB đến 1GB RAM tùy độ nặng của trang web. Đã có lần mình làm sập cả web app vì để Exporter chạy chung trên một VPS nhỏ (2GB RAM) với ứng dụng chính.

Lời kết

Giám sát Core Web Vitals không chỉ là những con số kỹ thuật khô khan. Nó giúp bạn hiểu khách hàng đang thực sự trải nghiệm điều gì. Khi kết hợp với Grafana, bạn sẽ thấy rõ xu hướng: Liệu bản update code hôm qua có làm web chậm đi không? Hay ảnh mới upload có làm giao diện bị nhảy không?

Việc phát hiện biểu đồ đi xuống trước khi khách hàng kịp phàn nàn mang lại cảm giác an tâm cực kỳ lớn cho anh em DevOps. Nếu bạn đang quản lý các trang web cần tối ưu SEO, hãy bắt tay vào triển khai mô hình này ngay hôm nay.

Share:
Tags: