Tối Ưu và Đưa Landing Page AI Vào Vận Hành Thực Tế Cho Yes Office (100/100 PageSpeed)

Tóm Tắt Dự Án (Executive Summary)

• Khách hàng: Yes Office — Đơn vị cho thuê văn phòng ảo và không gian làm việc chia sẻ cao cấp tại tòa nhà Vietcomreal, 68 Nguyễn Huệ, Phường Bến Nghé, Quận 1.
• Hiện trạng ban đầu: Đội marketing dùng AI tạo nhanh một tệp HTML tĩnh để chạy quảng cáo. Giao diện nhìn ổn nhưng form là form chết chưa kết nối CRM, đội marketing chưa biết cách đưa file lên máy chủ chạy tên miền thật, và khi mở trên mạng 4G điện thoại mất gần 4 giây mới hiện chữ do dính thư viện nặng 3.5MB.
• Giải pháp của izDigi:
  1. Bảo tồn 100% nội dung và bảng giá của khách hàng, không chỉnh sửa câu chữ.
  2. Viết lại logic form, kết nối vào CRM/n8n qua cổng proxy nội bộ /api/submit và tích hợp tính năng tự động chặn bot rác điền form.
  3. Gỡ bỏ toàn bộ thư viện nặng, đóng gói CSS tĩnh siêu nhẹ dưới 26KB, dùng font hệ thống có sẵn trên máy và chỉnh lại độ tương phản màu sắc đạt chuẩn WCAG.
  4. Cài đặt trực tiếp lên máy chủ web Nginx, cấu hình bộ nhớ đệm 30 ngày và chứng chỉ bảo mật SSL hoàn chỉnh.
• Kết quả đạt được: Tốc độ tải trang trên 4G giảm từ 3.7s xuống dưới 0.9s, đạt 100/100 điểm tuyệt đối trên Google PageSpeed Insights cho cả bản Mobile và Desktop. Form tiếp nhận khách hàng vận hành trơn tru, sẵn sàng chạy chiến dịch quảng cáo.

1. Tình Huống Ban Đầu & Những Khó Khăn Của Khách Hàng

Đội ngũ marketing của Yes Office đã dùng AI để tạo nhanh một tệp HTML cho chiến dịch chạy quảng cáo. Về mặt nhìn nhận ban đầu, giao diện khá đầy đủ hình ảnh và thông điệp bán hàng.

Tuy nhiên, khi chuẩn bị chạy thật, đội marketing gặp 3 vấn đề lớn:

1. Form đăng ký là form “chết”: Khách điền thông tin bấm nút gửi không có phản hồi gì, chưa kết nối với hệ thống quản lý khách hàng (CRM/n8n).
2. Chưa biết cách đưa lên máy chủ: Đội marketing chỉ có tệp mã nguồn thô trên máy tính, chưa có kinh nghiệm cấu hình máy chủ web, cài đặt tên miền hay chứng chỉ bảo mật HTTPS.
3. Tải chậm khi mở bằng điện thoại:
   • Tệp HTML do AI sinh ra tự động nạp thư viện Tailwind CDN nặng 3.5MB và nạp font từ máy chủ Google.
   • Mở thử trên mạng 4G điện thoại phải mất gần 4 giây màn hình mới hiện chữ.
   • Màu chữ và nút bấm màu cam nhạt bị chói, khó đọc khi nhìn ngoài trời.
   • Bảng giá trượt ngang bị giật khựng trên điện thoại.

2. Yêu Cầu Đặt Ra

• Không đổi nội dung: Giữ nguyên 100% câu chữ, thông điệp và bảng giá mà đội marketing đã chốt.
• Xử lý trọn gói từ mã nguồn đến vận hành: Làm cho form hoạt động, tối ưu tốc độ và đưa thẳng lên máy chủ để chạy chiến dịch quảng cáo ngay trong ngày.

3. Những Việc izDigi Đã Xử Lý

Hoàn thiện luồng gửi Form và chống Spam

• Viết lại logic gửi form ở cả đầu trang và cuối trang, gom chung về một cổng xử lý /api/submit trên máy chủ rồi mới đẩy về CRM. Cách này giúp che giấu đường dẫn nội bộ và tránh lỗi kết nối giữa các tên miền.
• Tích hợp tính năng tự động chặn bot rác điền form.
• Tự động lưu lại nguồn quảng cáo (Google Ads, Facebook Ads) khi khách gửi form để bộ phận marketing đo lường hiệu quả từng kênh.

Tối ưu tốc độ tải trang

• Gỡ bỏ thư viện 3.5MB của AI, chuyển sang file CSS tĩnh rút gọn chỉ còn 26KB và nhúng thẳng vào trang web.
• Dùng bộ font có sẵn trên điện thoại (iPhone dùng font San Francisco, Android dùng font Roboto). Trang web hiện chữ ngay khi vừa bấm vào link, không phải chờ tải font ngoài.
• Chỉnh lại tông màu cam và màu xanh đậm hơn một chút để người xem nhìn rõ ràng hơn dưới ánh sáng mạnh (đạt chuẩn tương phản quốc tế WCAG).
• Chuyển toàn bộ ảnh sang định dạng WebP nhẹ hơn 50% và sửa lại hiệu ứng lướt bảng giá trên điện thoại cho mượt, không bị giật khung hình.

Đưa lên máy chủ và cấu hình vận hành

• Cài đặt trang web lên máy chủ Nginx, bật nén dữ liệu và cấu hình lưu bộ nhớ đệm 30 ngày cho hình ảnh.
• Cài đặt tên miền và chứng chỉ bảo mật SSL hoàn chỉnh.

4. Kết Quả Thực Tế Sau Khi Đưa Lên Máy Chủ

Sau khi hoàn tất cài đặt trên máy chủ, trang web được kiểm tra trực tiếp qua công cụ Google PageSpeed Insights:

• Tốc độ mở trên 4G điện thoại: Giảm từ 3.7 giây xuống còn 0.4 – 0.9 giây (bấm vào là hiện ngay).
• Điểm số kỹ thuật của Google: Đạt 100/100 điểm tuyệt đối ở cả bản di động và máy tính.
• Vận hành: Form tiếp nhận lead hoạt động ổn định, dữ liệu đổ về CRM đầy đủ nguồn chiến dịch.

Ảnh kiểm tra thực tế trên Google PageSpeed

Bản Điện thoại di động (Mạng 4G):

Bản Máy tính:

5. Bảng So Sánh Trước Và Sau Khi Xử Lý

6. Đúc Kết

AI là công cụ hỗ trợ tạo ý tưởng và phác thảo giao diện rất nhanh cho đội ngũ marketing. Tuy nhiên, để một trang web có thể chạy mượt mà, thu thập được khách hàng và hoạt động an toàn trên môi trường thực tế, doanh nghiệp vẫn cần sự hỗ trợ kỹ thuật để hoàn thiện phần hạ tầng bên dưới.

Nếu bạn đang có sẵn file giao diện nhưng gặp khó khăn khi đưa vào chạy thực tế hoặc muốn tối ưu tốc độ tải trang đạt chuẩn tối đa, hãy liên hệ với Vũ Trần Chí (izDigi) để được hỗ trợ kiểm tra và xử lý.