Landing page
Những lỗi khiến landing page tải chậm và cách khắc phục từng lỗi
10 nguyên nhân phổ biến khiến landing page tải chậm — ảnh quá nặng, JavaScript thừa, font chặn render, hosting yếu — kèm cách khắc phục và ngưỡng Core Web Vitals cần đạt.
Tóm tắt nhanh: Landing page chậm đốt tiền quảng cáo theo đúng nghĩa đen: người dùng bấm quảng cáo, chờ, rời đi trước khi trang hiện — bạn vẫn trả phí cho cú bấm đó. Ngưỡng cần nhắm: LCP dưới 2.5 giây trên di động. Dưới đây là 10 nhóm nguyên nhân để bạn đối chiếu với báo cáo, kèm cách kiểm tra trước khi sửa. Thứ tự xử lý phụ thuộc tài nguyên thực sự làm chậm trang của bạn.
Đo trước khi sửa: trang của bạn chậm ở đâu?
Đừng sửa theo cảm giác. Chạy trang qua PageSpeed Insights (miễn phí, của Google), nhìn 3 chỉ số Core Web Vitals:
| Chỉ số | Ý nghĩa | Ngưỡng tốt |
|---|---|---|
| LCP (Largest Contentful Paint) | Phần nội dung chính hiện sau bao lâu | ≤ 2.5s |
| CLS (Cumulative Layout Shift) | Trang có “nhảy” layout khi tải không | ≤ 0.1 |
| INP (Interaction to Next Paint) | Bấm nút có phản hồi ngay không | ≤ 200ms |
Phần dữ liệu người dùng thực (nếu có) và phần Lighthouse mô phỏng là hai nguồn khác nhau. Website ít truy cập có thể chưa có dữ liệu thực; điều đó không đồng nghĩa trang nhanh hoặc chậm. TBT trong kết quả Lighthouse không phải INP của người dùng thực.
Chọn cách sửa theo dấu hiệu trong báo cáo
| Dấu hiệu | Kiểm tra trước | Hướng sửa có thể phù hợp |
|---|---|---|
| LCP là ảnh lớn | URL ảnh, thời điểm bắt đầu tải, kích thước hiển thị | Tạo ảnh responsive; ưu tiên ảnh đầu trang; không lazy-load ảnh LCP |
| LCP là tiêu đề | CSS chặn hiển thị, font, hiệu ứng ẩn chữ | Rút gọn CSS/font; cho hiển thị fallback; không chờ animation để đọc chữ |
| TBT cao | Script và tác vụ dài trên main thread | Bỏ script không dùng, giảm việc khởi tạo cùng lúc |
| CLS cao | Ảnh thiếu kích thước, widget chèn muộn, đổi font | Giữ sẵn không gian, đặt width/height, kiểm tra font fallback |
| TTFB cao | Redirect, cache, thời gian máy chủ phản hồi | Giảm chuỗi chuyển hướng, kiểm tra cache/CDN và backend |
Trong PageSpeed, mở phần phân tích LCP và tài nguyên chặn hiển thị. Chỉ preload ảnh hoặc font được xác nhận cần cho màn hình đầu; preload hàng loạt có thể cạnh tranh băng thông.
10 lỗi phổ biến khiến landing page tải chậm
1. Ảnh quá nặng — thủ phạm số một
Ảnh chụp 4000px, nặng 3–8MB được chèn thẳng vào trang. Khắc phục: resize đúng kích thước hiển thị, nén sang WebP/AVIF, đặt width/height để tránh nhảy layout. So sánh số byte trước/sau để đánh giá mức giảm thực tế.
2. Ảnh hero (đầu trang) bị lazy-load
Lazy-load đúng cho ảnh dưới màn hình đầu, nhưng áp cho ảnh hero thì LCP tệ đi vì trình duyệt trì hoãn thứ cần hiện sớm nhất. Khắc phục: ảnh hero để loading="eager" + fetchpriority="high"; chỉ lazy-load ảnh dưới fold.
3. JavaScript thừa từ theme/builder
Trang dựng bằng page builder thường chở theo hàng trăm KB JS cho tính năng không dùng. Khắc phục: gỡ hiệu ứng và widget không cần; giải pháp triệt để là trang xuất HTML tĩnh với JS tối thiểu — cách Kienora xây landing page mặc định.
4. Quá nhiều script bên thứ ba
Pixel, chat, heatmap, popup… mỗi thứ một script, tải cùng lúc khi mở trang. Khắc phục: kiểm kê và bỏ cái không dùng; cái cần giữ thì tải trễ (defer/sau tương tác); cân nhắc mỗi script mới bằng câu hỏi “nó đáng bao nhiêu ms?“.
5. Font chặn hiển thị chữ
Gọi 4–5 font, mỗi font 3–4 độ đậm từ server ngoài — chữ trắng trang trong lúc chờ. Khắc phục: tối đa 2 font, chỉ tải độ đậm dùng thật, self-host với font-display: swap.
6. Video nền tự phát
Video nền autoplay vài MB là cách nhanh nhất phá điểm mobile. Khắc phục: thay bằng ảnh + hiệu ứng CSS nhẹ; nếu buộc phải có video, dùng poster và chỉ phát khi người dùng bấm.
7. Hosting yếu hoặc đặt sai khu vực
TTFB (thời gian máy chủ phản hồi) cao thì mọi tối ưu phía trên đều bị đội nền. Khắc phục: dùng CDN/hosting có node gần người dùng Việt Nam; trang tĩnh trên CDN có thể giảm thời gian truyền, nhưng vẫn cần kiểm tra cache hit, redirect và thời gian phản hồi ở vị trí người dùng thực.
8. Không có cache
Mỗi lượt truy cập tải lại toàn bộ tài nguyên. Khắc phục: bật cache header cho tài nguyên tĩnh (ảnh, CSS, JS) — người quay lại và người xem trang thứ hai tải gần như tức thời.
9. Chuỗi redirect
Quảng cáo trỏ đến http:// → redirect sang https:// → redirect sang bản có www → tốn vài trăm ms trước khi trang bắt đầu tải. Khắc phục: trỏ quảng cáo thẳng vào URL cuối cùng, đúng giao thức, đúng host.
10. CSS/hiệu ứng nặng không cần thiết
Thư viện animation lớn, parallax dày đặc, đổ bóng phức tạp trên mobile. Khắc phục: hiệu ứng chỉ bằng CSS transform/opacity, tôn trọng prefers-reduced-motion, bỏ thư viện chỉ dùng cho một hiệu ứng.
Thứ tự ưu tiên khi tối ưu
- Lưu báo cáo mobile của URL đang chậm, xác định phần tử LCP và tài nguyên chặn hiển thị.
- Chọn một nhóm lỗi có ảnh hưởng lớn nhất, sửa rồi đo lại cùng URL và điều kiện.
- Kiểm tra hình ảnh, font, form, sự kiện đo lường và giao diện trên điện thoại sau khi sửa.
- Ghi ngày đo, thiết bị mô phỏng, LCP, CLS, TBT và kích thước tài nguyên. Dùng nhiều lần đo để tránh kết luận từ một lần bất thường.
Đọc thêm bộ công cụ kiểm tra website chuẩn SEO. Nếu cần thuê sửa, thống nhất phạm vi và cách nghiệm thu trước khi triển khai.
Nguồn và cách đọc kết quả
- Core Web Vitals — web.dev: LCP, INP và CLS; đánh giá dữ liệu người dùng ở phân vị 75.
- Trải nghiệm trang trong Google Search: trải nghiệm tốt hỗ trợ chất lượng trang, không bảo đảm vị trí đầu.
Câu hỏi thường gặp
Điểm PageSpeed bao nhiêu là đủ? Với trang chạy quảng cáo, nhắm Performance ≥ 90 trên mobile — đó cũng là ngưỡng Kienora dùng làm mục tiêu bàn giao. Nhưng chỉ số người dùng thật (Core Web Vitals trong Search Console) quan trọng hơn điểm lab một lần đo.
Trang tôi điểm cao nhưng người dùng vẫn kêu chậm? Điểm lab đo trong điều kiện chuẩn. Kiểm tra thêm: mạng di động thực tế, thiết bị yếu, và script bên thứ ba chỉ chậm ở một số phiên (chat, popup). Dữ liệu trường (field data) trong PageSpeed Insights phản ánh trải nghiệm thật.
Sửa tốc độ có giúp SEO không? Có — tốc độ là tín hiệu xếp hạng và ảnh hưởng mạnh đến tỷ lệ thoát. Với trang quảng cáo, lợi ích trực tiếp hơn: cùng ngân sách, nhiều người thấy được trang hơn.
Landing page của bạn đang chậm và bạn muốn con số cụ thể thay vì phỏng đoán? Gửi URL cho Kienora Studio — chúng tôi audit tốc độ, chỉ đích danh nguyên nhân và báo phạm vi khắc phục kèm mục tiêu điểm đo được.
- #tốc độ website
- #Core Web Vitals
- #landing page
- #tối ưu