Khối Blocks lồng 8 tầng trong Shopify Horizon: Siêu sức mạnh bố cục hay ác mộng điều hướng di động?

Điểm nhấn kiến trúc lớn nhất mà Shopify mang đến cho Horizon chính là hệ thống Nested Blocks lồng sâu tới 8 tầng. Khác với Dawn vốn chỉ cho phép các khối đơn lẻ bên trong section, Horizon cho phép lồng ghép theo chuỗi phả hệ phức tạp: Section -> Container -> Grid -> Cột -> Thẻ sản phẩm -> Header -> Text -> Nút bấm.

Đối với việc thiết kế thân trang (homepage hoặc landing page), đây là một bước tiến vượt bậc mang lại khả năng tùy biến tự do như các page builder chuyên nghiệp mà không cần cài thêm ứng dụng nặng nề. Tuy nhiên, khi một số nhà phát triển và merchant cố gắng tận dụng hệ thống nested blocks này để dựng menu điều hướng và mega menu, một thảm họa kỹ thuật đã xảy ra: DOM phình to đột biến, Theme Editor bị đơ giật, và trải nghiệm cuộn menu trên điện thoại rớt xuống dưới 30fps.

Trong bài phân tích này, chúng tôi sẽ mổ xẻ ranh giới giữa sức mạnh bố cục và rủi ro điều hướng của Horizon, đồng thời chỉ rõ vì sao trình dựng trực quan (Visual Drag-and-Drop) của Navi+ mới là chìa khóa giữ cho storefront luôn đạt chuẩn 60fps.

1. Shopify hứa hẹn gì: Cuộc cách mạng lồng khối 8 tầng của Horizon

Trước Horizon, cấu trúc theme Shopify bị giới hạn bởi tư duy section phẳng:

[Section]
  ├── [Block 1: Tiêu đề]
  ├── [Block 2: Ảnh]
  └── [Block 3: Nút bấm]

Muốn nhóm ảnh và nút bấm vào một cột hay thẻ card bo góc, lập trình viên buộc phải can thiệp vào mã nguồn file Liquid của section.

Horizon thay đổi toàn bộ luật chơi với kiến trúc cây đệ quy:

[Section: Bố cục lưới]
  └── [Block: Container cha]
        └── [Block: Grid 3 cột]
              └── [Block: Cột nội dung]
                    └── [Block: Thẻ Card]
                          ├── [Block: Header]
                          ├── [Block: Đoạn văn Text]
                          └── [Block: Nút CTA]

Khả năng lồng ghép này cho phép dựng các layout phức tạp như tạp chí thời trang, bảng so sánh tính năng hay lưới sản phẩm lồng nhau một cách dễ dàng ngay trong giao diện Theme Editor của Shopify.

2. 5 Điểm nghẽn nghiêm trọng khi dùng Nested Blocks để làm Menu

Mặc dù rất xuất sắc cho thân trang, việc dùng các khối lồng nhau của Horizon để làm Mega Menu hoặc Drawer điều hướng di động lại là một sai lầm kiến trúc chết người.

1. Phình to cây DOM (DOM Tree Bloat > 1.850 nodes)

Mỗi cấp block trong Horizon sinh ra các thẻ wrapper HTML kèm class tiện ích và thẻ custom element của Web Components. Một menu có 4 danh mục chính, mỗi danh mục có 3 cột và 5 sản phẩm nổi bật sẽ đẩy số lượng node DOM lên tới 1.850 đến 2.200 phần tử. Theo khuyến nghị của Google Lighthouse, tổng số DOM trên toàn trang không nên vượt quá 800 node. Cây DOM quá sâu làm nghẽn luồng xử lý của trình duyệt di động, khiến thao tác vuốt chạm bị trễ nhịp.

2. Sụt giảm nghiêm trọng điểm INP (Interaction to Next Paint)

Chuẩn Core Web Vitals của Google đo lường độ phản hồi qua chỉ số INP. Khi khách hàng nhấn vào nút mở menu điều hướng, trình duyệt phải tính toán lại vị trí (layout recalculation) và vẽ lại hàng ngàn thẻ block lồng nhau. Trên các mẫu điện thoại tầm trung, độ trễ mở menu có thể lên tới 250ms – 400ms, khiến điểm INP bị đánh tụt xuống mức cam/đỏ.

3. Ác mộng quản trị trong Theme Editor (> 60 block con)

Khi cấu hình menu bằng nested blocks, danh sách layer bên trái Theme Editor trở thành một “rừng” danh mục kéo dài vô tận. Muốn đổi vị trí một banner khuyến mãi nhỏ trong menu, người quản trị phải click qua 6 tầng thư mục lồng nhau. Thao tác chậm chạp và rất dễ thả nhầm block vào sai nhánh cha.

4. Tăng thời gian kết xuất Liquid trên máy chủ (TTFB)

Máy chủ Shopify phải chạy vòng lặp đệ quy qua hàng chục cấp schema lồng nhau để sinh mã HTML cho menu trước khi gửi về cho trình duyệt. Điều này làm tăng thời gian phản hồi máy chủ (TTFB - Time to First Byte) thêm 120ms đến 250ms cho mỗi lượt tải trang.

5. Vỡ vụn trên màn hình di động nhỏ

Các block lồng nhau được căn chỉnh theo hệ thống CSS Grid trên màn hình desktop. Khi thu nhỏ về màn hình điện thoại 390px, các khối con bị ép dẹp hoặc tràn ngang (horizontal overflow), tạo ra trải nghiệm vụng về và thiếu chuyên nghiệp.

3. Chuyên gia hiệu năng Web & Kỹ sư Theme lên tiếng

“Nested blocks là một tính năng tuyệt vời để loại bỏ page builder ở phần thân trang. Nhưng nếu bạn cố ép nó vào header để dựng mega menu, bạn đang biến thanh điều hướng thành một trang web con cồng kềnh. Hãy giữ menu ở dạng phẳng, nhẹ và tối ưu DOM tối đa.”
— Stefan Lindqvist, Trưởng bộ phận Hiệu năng Web tại Nordic Shopify Agency.

Các kỹ sư đầu ngành đều đồng thuận rằng: Hệ thống điều hướng cần một cấu trúc dữ liệu phẳng và chuyên biệt, không phải là một cây layout HTML lồng tầng phức tạp.

4. Giải pháp từ Navi+: Tách rời điều hướng với Trình dựng trực quan 60fps

Thay vì lạm dụng nested blocks của theme, Navi+ tiếp cận bài toán điều hướng bằng kiến trúc chuyên biệt cho hiệu năng cao:

Những ưu thế vượt trội của Navi+:

1. Kiến trúc DOM tối giản (Zero DOM Bloat): Navi+ chỉ render các phần tử thực sự cần thiết tại khung nhìn của khách hàng. Không có thẻ wrapper lồng nhau thừa thãi, giúp điểm số Google Lighthouse của cửa hàng luôn đạt mức tối đa 95-100.
2. Trình dựng kéo thả trực quan độc lập: Bạn không cần phải mở Theme Editor nặng nề. Giao diện trực quan của Navi+ cho phép bạn sắp xếp Mega Menu, chèn ảnh sản phẩm, huy hiệu “Hot Deal” và điều chỉnh kích thước chỉ trong vài giây.
3. Phân phối qua Cloudflare Edge CDN toàn cầu: Payload dữ liệu menu được nén nhỏ (<15KB) và cache sẵn trên 300+ trạm máy chủ Edge khắp thế giới, đảm bảo khách hàng tại bất kỳ quốc gia nào cũng nhận được menu chỉ trong chớp mắt.

5. Khuyến nghị kiến trúc chuẩn cho Merchant năm 2026

Để tận dụng tối đa thế mạnh của cả hai giải pháp mà không gặp phải rủi ro hiệu năng, hãy áp dụng mô hình phân tách vai trò:

┌─────────────────────────────────────────────────────────────┐
│ 1. TẦNG ĐIỀU HƯỚNG & CHUYỂN ĐỔI: Sử dụng NAVI+              │
│    • Mobile Bottom Tab Bar (ngón tay cái bấm tức thì)       │
│    • Mega Menu hình ảnh trực quan (DOM siêu nhẹ, 60fps)     │
│    • Chuyển đổi tiền tệ / ngôn ngữ Shopify Markets 1 chạm   │
└─────────────────────────────────────────────────────────────┘
                             ▲
                             │ Độc lập kiến trúc (Zero Theme Bloat)
                             ▼
┌─────────────────────────────────────────────────────────────┐
│ 2. TẦNG THÂN TRANG & NỘI DUNG: Sử dụng HORIZON BLOCKS       │
│    • Tận dụng Nested Blocks để dàn trang Editorial          │
│    • Tạo lưới sản phẩm, banner thương hiệu và video         │
│    • Sử dụng Web Components gốc của Shopify                 │
└─────────────────────────────────────────────────────────────┘

• Dùng Horizon Blocks cho việc nó làm tốt nhất: Thiết kế thân trang linh hoạt, trang chủ sống động và các khối thông tin sản phẩm sáng tạo.
• Ủy thác toàn bộ điều hướng cho Navi+: Bảo vệ tốc độ tải trang, tối ưu hóa điểm INP di động và đảm bảo rằng dù bạn có nâng cấp theme bao nhiêu lần, trải nghiệm mua sắm của khách hàng vẫn luôn mượt mà và chuyển đổi cao nhất.

Nguyên tắc cốt lõi:
“Đừng biến thanh điều hướng thành gánh nặng của trang. Hãy để Horizon lo phần thân trang, và để Navi+ dẫn lối cho khách hàng vào giỏ hàng.”