Navi+ không giữ chân trang của bạn khi khách mở shop: nội dung trang hiện ra trước, menu vẽ lên sau. Tất nhiên trình duyệt vẫn phải tải thêm mã của Navi+ nên menu sẽ mất một nhịp ngắn mới hiện. Dưới đây là số đo thực tế trên cửa hàng thật và cách bạn tự kiểm tra trên shop của mình.
Navi+ tải thế nào trên trang?
Khi bạn bật app embed, theme gắn thêm một đoạn mã khởi động nhỏ vào đầu trang. Đoạn mã này chạy ở chế độ async, tức là trình duyệt vừa tải nó vừa dựng chữ và ảnh của trang cùng lúc chứ không dừng lại chờ.
Tiếp đó, đoạn mã mới kéo bộ vẽ menu và dữ liệu menu từ hệ thống máy chủ CDN của Navi+ về để hiện lên màn hình. Toàn bộ quá trình này tách biệt, Navi+ không ghi thêm gì vào file theme của bạn.
Với những menu đủ điều kiện, Navi+ còn gắn sẵn một bản chụp HTML của menu ngay trong trang: Tab Bar, Floating Button, Mobile Menu, Icon Menu và Desktop Mega Menu. Nhờ vậy menu hiện ra cùng lúc với trang thay vì phải chờ tải xong đoạn mã, và khi bản thật thay vào thì khách không thấy giật. Cách này chỉ bật khi menu chụp lại được đúng như bản thật, nên không phải cửa hàng nào cũng có.
Dưới đây là số đo ngày 03/11/2026 trên cửa hàng thật đang chạy Navi+, so menu có in sẵn và không in sẵn. Muốn xem Navi+ so với Globo và Qikify, đọc bài Tốc độ, bảo mật, SEO.
| Menu | Mạng | Có in sẵn | Không in sẵn |
|---|---|---|---|
| Desktop Mega Menu: chữ menu hiện ra | Không giới hạn | Khoảng 0,2 giây | Khoảng 2,6 giây |
| Desktop Mega Menu: chữ menu hiện ra | 4G (LTE) | Khoảng 0,3 giây | Khoảng 1,7 giây |
| Desktop Mega Menu: chữ menu hiện ra | 3G | Khoảng 1,5 giây | Khoảng 9 giây |
| Mobile Menu: bấm ☰ là ngăn kéo mở | 3G | Khoảng 0,2 giây | Khoảng 7–8 giây |
Mạng 3G ở đây là mạng chậm giả lập, dùng để thấy rõ chênh lệch. Con số trên shop của bạn còn tuỳ theme, số app và dung lượng ảnh trong menu.
Điểm PageSpeed giảm thì đo sao cho đúng?
Điểm PageSpeed thay đổi liên tục: cùng một trang nhưng bạn bấm đo hai lần liền nhau vẫn ra hai kết quả khác nhau. Trước khi kết luận do app nào, bạn nên kiểm tra theo ba nguyên tắc:
- Đo thử 3 lần liên tiếp rồi lấy kết quả ở giữa, đừng nhìn vào một lần đo duy nhất.
- So sánh đúng trang và đúng loại thiết bị. Bạn không thể lấy điểm trang chủ đem so với trang sản phẩm, hoặc lấy điểm máy tính so với điện thoại.
- Nhớ lại những gì bạn vừa đổi trên shop. Việc cài thêm một app mới, cập nhật theme hay thay ảnh banner lớn thường kéo điểm xuống nhiều hơn một menu.
Muốn đo riêng mức ảnh hưởng của Navi+, bạn làm theo 3 bước sau:
-
Trong trang quản trị Shopify, vào Online Store > Themes, rồi nhân bản theme đang chạy để tạo một bản sao.
-
Mở trình chỉnh sửa theme của bản sao đó, bấm vào mục App embeds ở thanh bên trái và gạt tắt Store Connector.
App embedsFind apps built for themes on the Shopify App Store.STOREHomeShopCollectionsAboutContact -
Đo điểm trang trên cả theme đang chạy và trên bản sao, mỗi bên 3 lần. Chênh lệch điểm giữa hai bên chính là phần của Navi+ cộng với những thứ không chạy trên bản sao.
Bản sao tắt Store Connector không có menu Navi+ nào. Vì vậy phần chênh lệch gồm cả việc không vẽ menu, không chỉ riêng dung lượng của Navi+.
Thứ gì thật sự làm trang và menu nặng?
Phần lớn độ trễ đến từ nội dung bên trong menu hoặc các thành phần khác trên trang:
- Ảnh tải lên mục menu quá lớn: Một tấm banner 2 MB đặt trong Desktop Mega Menu sẽ làm nặng trang mỗi lần menu hiện ra. Bạn nên nén và thu nhỏ kích thước ảnh trước khi tải lên. Xem hướng dẫn tại bài Icon, ảnh và nhãn cho mục menu.
- Nhiều app cùng chạy trên trang: Trình duyệt luôn tải phần của Shopify trước, tiếp đến là theme, rồi mới tới lượt các app mà không có thứ tự cố định. Shop cài càng nhiều app thì menu Navi+ càng dễ hiện muộn hơn mong đợi.
- Menu có quá nhiều mục: Một menu chứa hàng trăm mục menu sẽ mất nhiều thời gian hơn để vẽ hết lên màn hình. Bạn nên chia nhỏ ra nhiều cấp hoặc tách thành nhiều tab.
- Dùng nhiều bộ icon và nhiều font chữ: Bạn chỉ nên dùng thống nhất một bộ icon và một kiểu font cho cả menu.
Navi+ làm gì để menu tải nhanh hơn?
- Đoạn mã khởi động luôn tải bất đồng bộ bằng
asyncnên không chặn trang của bạn. - Trình duyệt tự lưu lại file menu sau lần mở đầu tiên, nên khi khách chuyển sang trang tiếp theo sẽ không phải tải lại.
- Trong cài đặt app embed có thêm mạng phân phối dự phòng BunnyCDN để menu vẫn tải được khi mạng chính gặp sự cố. Mặc định tuỳ chọn này tắt.
- Bạn có thể bật thêm các tuỳ chọn giúp menu hiện sớm và bớt nháy hơn tại bài Cài đặt giúp menu tải nhanh, không nháy.
Google có đọc được menu để làm SEO không?
Các đường link trong menu giúp Google hiểu cấu trúc cửa hàng của bạn. Với Navi+, gói Elite gắn link thật (kèm alt và title) cho mọi mục menu có đường dẫn, để Google đọc được. Gói Starter và Business hiện chưa có tối ưu SEO này. Chi tiết và cách kiểm ở bài Tốc độ, bảo mật, SEO.
Bạn nên đưa đủ các trang quan trọng như danh mục hay bộ sưu tập chính vào menu để công cụ tìm kiếm nhìn ra toàn bộ danh sách trang của cửa hàng. Xem chi tiết từng gói tại Gói dịch vụ và thanh toán.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Cách tải giống Shopify: một đoạn mã async kéo menu từ CDN của Navi+. Cách đo cũng vậy: đo 3 lần và so với bản không có Navi+.
Trên WordPress và website khác, Navi+ cũng chỉ thêm một thẻ script async vào head. Phần giải thích ở trên áp dụng nguyên vẹn. Nếu dùng plugin cache, xoá cache sau khi thêm Navi+ rồi mới đo.