So sánh Gutenberg và các Page Builder trong WordPress

Với WordPress, bạn hoàn toàn có thể xây dựng một website mà không cần quá am hiểu về code, thậm chí là không cần dùng đến bất kì một dòng code nào. Bởi có rất nhiều công cụ trong WordPress để giúp bạn làm được việc đó. Trong đó, lựa chọn phổ biến nhất hiện nay đó là các Page Builder và Gutenberg. Tại thời điểm hiện tại thì cả hai loại này đều có những ưu nhược điểm riêng, nên tạm thời rất khó nói đâu là công cụ ưu việt hơn hết.

Tuy nhiên, để bạn có cái nhìn tổng quan và đánh giá tương quan giữa hai loại một cách rõ ràng hơn, thì hôm nay mình sẽ thực hiện một bài so sánh Gutenberg và các Page Builder theo một số tiêu chí phổ biến như là:

  • Các tính năng nổi bật;
  • Khả năng dễ sử dụng;
  • Sự tương thích trên nhiều thiết bị;
  • Hiệu suất trên website thực tế.

Riêng phần so sánh hiệu suất, mình lựa chọn so sánh trực tiếp Gutenberg với một Page Builder đang rất được quan tâm gần đây đó là Oxygen. Và việc kiểm tra hiệu suất này được thực hiện khách quan theo một số tiêu chuẩn nhất định mà mình sẽ nói chi tiết hơn trong phần Phương pháp test nhé. Mặc dù vậy, dù sao thì mình cũng không phải chuyên gia trong việc kiểm tra tốc độ website nên có thể cũng không tránh khỏi sai sót. Nên nếu có thể thì bạn hãy bình luận để đóng góp ý kiến để giúp bài kiểm tra này của mình được hoàn thiện tốt hơn nhé.

Ngoài ra, trước khi bắt đầu bài so sánh, mình nêu rõ quan điểm là mình không hoàn toàn ủng hộ Gutenberg hay bất kỳ Page Builder nào trong bài viết này. Ở đây, mình chỉ nêu ra những đánh giá của mình sau khi sử dụng thực tế cả hai công cụ này trên các dự án khác nhau thôi nhé.

Và bây giờ, hãy bắt đầu thôi nào.

Giới thiệu nhanh về Gutenberg

Như chúng ta đều biết, vào ngày 6 tháng 12 năm 2018, phiên bản WordPress 5.0 được trình làng kèm theo một sự thay đổi lớn, đó là trình soạn thảo mới mang tên Gutenberg.

Phiên bản WordPress 5.0 có thay đổi lớn là Gutenberg.

Gutenberg ban đầu được ra mắt là trình soạn thảo được xây dựng hoàn toàn dựa trên các khối (block). Bạn có thể di chuyển các khối bằng cách kéo – thả, chia cột để thay đổi layout, nhóm các block lại, … Mỗi block cũng sẽ có những settings riêng để bạn tùy biến theo ý mình. Gutenberg cũng được tích hợp sẵn nhiều block và block pattern được thiết kế sẵn, vậy nên người dùng chỉ cần thay đổi nội dung là có thể sử dụng được ngay.

Có thể thấy, Gutenberg giúp bạn tạo ra nội dung một cách trực quan hơn nhiều so với trình soạn thảo TinyMCE trước đây.

Theo thời gian, Gutenberg được phát triển và nâng cấp dần. Không chỉ dừng lại ở soạn thảo nội dung, Gutenberg nay đã cung cấp rất nhiều loại block nâng cao hơn như button, table, embed, … hay các element sử dụng trên toàn website như site logo, navigation, … với sự ra mắt của tính năng Full Site Editing (FSE) như mình đã giới thiệu ở bài trước. Nhờ vậy, Gutenberg nay đã trở thành một công cụ giúp bạn có thể xây dựng toàn bộ một website, tất nhiên là cũng không cần dùng đến code.

Bây giờ, hãy cùng xem Gutenberg và các Page Builder khác nhau như thế nào nhé.

So sánh các tính năng nổi bật giữa Gutenberg và các Page Builder

Đầu tiên, mình có một bảng tóm lược những khác biệt chính về mặt tính năng giữa Gutenberg và các Page Builder khác như dưới đây:

GutenbergPage Builder
Các yếu tố để xây dựng nội dungSử dụng các khối (blocks) để xây dựng nội dung.
Cung cấp một số block cơ bản như text, hình ảnh, table, button, embed,…
Tùy từng page builder sẽ sử dụng các thuật ngữ khác nhau như element hay module.
Cung cấp các lựa chọn phong phú và đa dạng hơn như maps, image carousel, accordion tab, …
Phiên bản premium của các Page Builder thường có thêm rất nhiều element thú vị như form, slide, pricing list, portfolio, testimonial, counter, …
Khả năng tùy biếnCho phép customize cơ bản với từng block hoặc cả văn bản.Có khả năng chỉnh sửa nhiều yếu tố từ padding, margin cho tới hiệu ứng chuyển động (animation) và nhiều style khác.
Khả năng xây dựng layoutXây dựng layout dạng cột ở mức cơ bản, bạn không thể kéo để thay đổi kích thước các cột.Xây dựng được những layout phức tạp. Bạn có thể giữ và kéo để thay đổi kích thước và tỉ lệ giữa các cột.
Khả năng chỉnh sửa toàn trangChỉnh sửa toàn trang (Full Site Editing) đang trong giai đoạn thử nghiệm.Phiên bản premium cung cấp tính năng chỉnh sửa toàn trang như header, footer, sidebar, …
WYSIWYGKhông có. Giao diện trong trình soạn thảo có thể sẽ khác so với giao diện ngoài frontend.Có. Những thay đổi của bạn sẽ được nhìn thấy trực tiếp và sẽ hiển thị chính xác ở ngoài frontend.

Qua bảng trên, chúng ta thấy điểm mạnh của các Page Builder là có thể tạo ra những layout phức tạp và cho người dùng quyền tùy biến mạnh mẽ.

Trong khi các Page Builder đã vượt ra ngoài khuôn khổ của việc chỉnh sửa post hay page và đã có thể giúp người dùng chỉnh sửa giao diện toàn website, thì Gutenberg mới chỉ đang thử nghiệm các tính năng chỉnh sửa toàn trang (Full Site Editing). Tuy nhiên, Gutenberg cũng đang trên đà phát triển rất nhanh nên biết đâu đấy một ngày không xa nữa thôi là nó sẽ bắt kịp, thậm chí là vượt xa các Page Builder.

So sánh tính dễ sử dụng giữa Gutenberg và các Page Builder

Gutenberg

Giao diện của Gutenberg tương đối thoáng và đơn giản nên cũng khá dễ sử dụng.

Các thao tác cũng rất dễ dàng. Ví dụ như để thêm một block mới, bạn chỉ cần click vào các dấu (+) như trong hình.

Click vào các dấu (+) để thêm một block mới.

Khu vực Settings bên tay phải để bạn tùy chỉnh cho từng block với nhiều loại thiết lập khác nhau cho từng loại block. Khu vực này cũng khá dễ nhìn, dễ tương tác và chủ yếu là các thiết lập cơ bản.

Các loại block cũng thường có kèm theo Tooltip để hướng dẫn người dùng. Thậm chí ngoài phần giải nghĩa block đó là gì còn có ví dụ minh họa trực quan đi kèm.

Các block có Tooltip với các hướng dẫn chi tiết.

Page Builder

Tất nhiên là mỗi Page Builder sẽ có những giao diện khác nhau, nhưng hầu như cách thức cũng tựa tựa như nhau. Nên mình sẽ lấy ví dụ một Page Builder điển hình là Oxygen. Bạn sẽ có một khu vực để xem live preview (xem trực tiếp các thay đổi khi chỉnh sửa) để biết chính xác trang của mình sẽ có giao diện như thế nào.

Page Builder Oxygen có danh sách các element phía bên trái.

Oxygen (hay các Page Builder khác cũng tương tự) cũng có một danh sách các element phía bên trái. Để thêm các element này vào trang, bạn chỉ cần click đúp vào chúng. Thao tác cũng khá là đơn giản.

Khi bạn đã thêm element, thì khu vực sidebar bên trái này cũng sẽ tự động chuyển đổi thành khu vực tùy biến cho element đó với rất nhiều loại thiết lập.

Tùy biến cho element của Oxygen builder.

Với hầu hết các Page Builder thì các thiết lập cho các element sẽ khá là nhiều, và nhìn sơ qua thì sẽ thấy phức tạp hơn so với Gutenberg. Nhưng bù lại, chúng lại cho bạn khả năng tùy biến rất cao.

Nếu muốn xem thứ tự hoặc sắp xếp các element trong trang, bạn cần vào phần Structure. Tại đây bạn có thể duplicate, xóa, hoặc di chuyển các element bằng cách kéo thả chứ không làm trực tiếp trên phần preview.

Xem thứ tự hoặc sắp xếp các element trong trang với Oxygen page builder.

Tuy nhiên đây là các thao tác của Oxygen thôi, chứ không phải Page Builder nào cũng vậy nhé. Vẫn có một số Page Builder khác cho phép bạn kéo thả các element trực tiếp trên phần chỉnh sửa giao diện trang. Nhưng nhìn chung thì mình thấy các phần kéo thả này dùng vẫn chưa thực sự mượt mà, thậm chí là đôi khi còn khó để kéo đến đúng nơi mình muốn.

Tổng kết:

Bạn có thể thấy, mỗi công cụ đều có những kiểu giao diện khác nhau, ngay kể cả giữa các Page Builder cũng khác nhau. Vậy nên, việc tương tác trên các giao diện khác nhau là điều tất yếu. Và độ khó hay dễ nó lại phụ thuộc vào thói quen và sở thích của người đó nữa. Nhưng cá nhân mình thấy Gutenberg khá là đơn giản, dễ làm quen và dễ dùng hơn so với giao diện của các Page Builder.

So sánh Responsive ở Gutenberg và các Page Builder

Ngày càng có nhiều người truy cập vào các website từ các thiết bị di động như điện thoại và máy tính bảng. Theo Statista, có đến 4.28 tỉ người truy cập Internet qua thiết bị mobile năm 2020, tức có tới 90% người dùng đều sử dụng mobile để truy cập internet. Vậy nên responsive (tính tương thích về mặt hiển thị trên nhiều loại thiết bị) hiện giờ đã là yêu cầu bắt buộc đối với tất cả các website để đem lại trải nghiệm tốt cho hơn cho người dùng. Ở mặt này, thì có vẻ như các Page Builder lại đang nổi trội hơn so với Gutenberg.

Các Page Builder thường cung cấp cho người dùng khả năng tùy biến và xem trước hiển thị của website trên các thiết bị khác nhau khá tốt. Với Page Builder, bạn có thể cài đặt font size, padding, margin, animation cho từng loại thiết bị khác nhau.

Còn Gutenberg thì hiện tại chưa có tính năng xem trước layout trên mobile và tablet. Chính vì thế mà mình thấy là cũng chưa có gì đảm bảo rằng layout của mình đẹp trên desktop thì liệu có ổn trên các thiết bị khác hay không.

So sánh hiệu suất website dựng bằng Gutenberg và các Page Builder

Phương pháp kiểm tra tốc độ website

Mình sẽ sử dụng 2 website để thực hiện kiểm tra và so sánh. Một web được dựng bằng Gutenberg (mình dùng một block-based theme là TT1 Blocks) và một web được dựng bằng Oxygen (phiên bản mới nhất).

Mình chọn Oxygen là vì page builder này sẽ vô hiệu hóa hoàn toàn theme và bạn phải xây dựng lại các trang từ đầu. Đây chính là lý do mà Oxygen được nhiều người đánh giá là sẽ giúp tốc độ tải trang tăng lên đáng kể. Việc chọn Oxygen sẽ giúp cho bài so sánh này có tính khách quan cao hơn.

Ngoài ra, mình sẽ thực hiện theo các tiêu chuẩn như sau:

  • Sử dụng cùng một share hosting cho 2 website;
  • Cấu trúc và nội dung của 2 website giống nhau;
  • Tắt cache ở cả 2 website;
  • Cả 2 website cùng sử dụng Woocommerce phiên bản mới nhất để xây dựng trang bán hàng;
  • Công cụ để đo lường: Google PageSpeed InsightsGTMetrix. Mình sử dụng chung một Location trong khi test;
  • Các chỉ số để đánh giá bao gồm: Speed score, số Request cần thiết, Total page size (kB), Fully loaded time(s), số file JS, CSS, Font cần tải.

Kiểm tra hiệu suất tổng thể trang web

Khi kiểm tra tổng thể 2 website của mình trên Google PageSpeed Insights, thì mình thu được kết quả như sau:

Page BuilderSpeed scoreRequestTotal page size (kB)Fully loaded time (s)JSCSSFont
Gutenberg93251171.759100
Oxygen87412082.613174
Kết quả kiểm tra website dựng bằng Gutenberg
Kết quả kiểm tra website dựng bằng Gutenberg
Kết quả kiểm tra website dựng bằng Oxygen
Kết quả kiểm tra website dựng bằng Oxygen

Kiểm tra hiệu suất một Landing Page

Tiếp tục với việc kiểm tra một trang landing page riêng với nhiều hình ảnh và layout phức tạp, thì mình thu được kết quả như sau:

Page BuilderRequestTotal page size (kB)Fully loaded time (s)JSCSSFont
Gutenberg292492.29100
Oxygen453392.813174
So sánh hiệu suất một Landing Page xây dựng bằng Gutenberg và bằng Oxygen.

Kiểm tra hiệu suất trên trang Archive của Blog

Mình cũng đã kiểm tra xem 2 website khi thực hiện truy vấn (query) đến server để hiển thị danh sách các bài viết trên blog như thế nào. Và kết quả như sau:

Page BuilderRequestTotal page size (kB)Fully loaded time (s)JSCSSFont
Gutenberg272852.39100
Oxygen44430413174
So sánh hiệu suất trang Archive của Blog trên 2 website.

Kiểm tra hiệu suất trên trang Archive của Shop

Ở đây, mình đang dùng WooCommerce để tạo trang Shop cho cả 2 website.

So sánh nội dung trên trang Archive của 2 website tạo bởi Gutenberg và Oxygen.

Kết quả khi kiểm tra hiệu suất của hai trang Shop này như sau:

Page BuilderRequestTotal page size (kB)Fully loaded time (s)JSCSSFont
Gutenberg382382.09100
Oxygen573625.513176

Kiểm tra hiệu suất trang Sản phẩm

Phần cuối cùng trong bài test này, mình sẽ kiểm tra hiệu suất của một trang sản phẩm được tạo bởi WooCommerce. Trang này thường sẽ có layout phức tạp hơn và cần nhiều mã CSS, JS để có những tính năng cần thiết khi người dùng mua hàng.

So sánh trang sản phẩm trên 2 website tạo bởi Gutenberg và Oxygen.

Kết quả kiểm tra hai trang này như sau:

Page BuilderRequestTotal page size (kB)Fully loaded time (s)JSCSSFont
Gutenberg372151.914120
Oxygen513094.113186

Tổng kết

Qua các bảng kết quả về kiểm tra hiệu suất website mà mình tổng hợp ở trên, bạn có thể thấy rằng trong tất cả các trường hợp mà mình đưa ra để kiểm tra và so sánh thì website xây dựng bằng Gutenberg đều có kết quả tốt hơn website dựng bằng Oxygen. Gutenberg load số lượng file JS, CSS, và Font tối thiểu, đồng thời cũng sử dụng ít tài nguyên hơn và giúp website được tải nhanh hơn đáng kể so với Oxygen.

Như vậy, xét về mặt hiệu suất thì Gutenberg đã thể hiện được sự vượt trội hơn hẳn so với Oxygen trong bài kiểm tra này.

Còn nhìn một cách tổng quan thì với sự ra đời của Full Site Editing (FSE), Gutenberg cũng đã trở nên mạnh mẽ hơn và giúp bạn có thêm nhiều tính năng để dựng website một cách dễ dàng hơn. Cùng với đó, Gutenberg vẫn giữ được sự đơn giản và dễ tiếp cận cho mọi người dùng, đồng thời tối ưu được hiệu suất cho website khá tốt. Đây là một điểm cộng rất đáng ghi nhận cho Gutenberg.

Nếu bạn muốn giữ cho mọi thứ đơn giản và không muốn sự tham gia quá nhiều của các plugin từ bên thứ 3, cũng như tối ưu hiệu suất và tốc độ của website thì lựa chọn tối ưu có lẽ nên là Gutenberg. Bên mình cũng đã dùng Gutenberg hoàn toàn để dựng titanweb.vn. Website này có tốc độ load khá là nhanh và việc sử dụng Gutenberg cũng không quá khó khăn. Nên mình cũng thấy khá ổn.

TitanWeb được xây dựng bằng Gutenberg.

Tuy nhiên, như vậy mình thấy vẫn chưa đủ. Tại thời điểm này, Gutenberg vẫn còn thiếu sót khá nhiều để có thể đáp ứng được hết những nhu cầu nâng cao của những người làm web. Mà điều này thì các Page Builder hiện tại đang làm khá tốt. Nên nếu muốn xây dựng một website với giao diện phức tạp và tùy biến nhiều hơn, thì chúng ta vẫn nên cân nhắc dùng một Page Builder nào đó đang có trên thị trường, it nhất là tại thời điểm này.

Chúng ta vẫn cần chờ đợi thêm để Gutenberg nâng cao thêm các tính năng FSE. Biết đâu đấy ở phiên bản chính thức của FSE, Gutenberg sẽ hoàn toàn vượt trội về mọi mặt thì sao?

Lời kết

Sau những thông tin mình đã đưa ra ở trên đây, liệu bạn đã có câu trả lời rằng đâu là công cụ bạn nên dùng để xây dựng website cho mình chưa? Gutenberg hay là một Page Builder nào đó khác?

Bạn hãy cân nhắc kỹ tùy theo nhu cầu cho từng website của bạn nhé và lưu ý là các thông tin mình viết ở đây chỉ đúng tại thời điểm viết bài thôi. Khi các Page Builder hay Gutenberg cập nhật lên các phiên bản mới hơn với các tính năng mới, thì có thể lợi thế của các bên sẽ thay đổi khác đi so với những gì mình đã liệt kê ở đây nhé.

Rất cảm ơn bạn đã dành thời gian theo dõi toàn bộ bài viết của mình. Nếu bạn có góp ý gì, hãy để lại comment cho mình nhé!

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *