Tại sao giao diện blog/ website WordPress càng đơn giản càng tốt?
Thời gian gần đây, tôi thấy khá nhiều blogger xây dựng giao diện blog/ website của họ theo phong các tạp chí, sử dụng những bộ theme bóng bẩy, có bố cục rất phức tạp cùng rất nhiều hiệu ứng JavaScript, CSS. Phải thừa nhận rằng, cái gì đẹp cũng thường dễ thu hút sự chú ý của mọi người và mang lại nhiều lợi thế. Tuy nhiên, điều này chưa hẳn đã đúng với trường hợp giao diện blog/ website cá nhân. Một giao diện quá cầu kỳ, phức tạp, nhiều hiệu ứng có thể khiến blog/ website của bạn mất nhiều hơn là được. Bạn không tin ư? Tôi sẽ chứng minh!
Tham khảo thêm:
- Làm thế nào để chọn plugins tốt nhất cho blog/ website WordPress?
- Làm thế nào để chọn theme phù hợp với blog WordPress của bạn?
Tại sao giao diện blog WordPress càng đơn giản càng tốt?
Quá nhiều hiệu ứng đồng nghĩa với load chậm
Thông thường, để có một giao diện cầu kỳ, nhiều hiệu ứng đẹp mắt, người ta sẽ phải sử dụng rất nhiều tập tin CSS và JavaScript. Điều này sẽ khiến cho blog/ website của bạn có page-size lớn, nặng nề và load chậm. Nhiều người dùng có thể sẽ không đủ kiên nhẫn để đợi load nội dung, đặc biệt là khi truy cập trên các thiết bị di động, họ sẽ click vào nút “Back” và thoát khỏi site của bạn. Và hậu quả là bounce rate của blog/ website tăng lên.
Ngoài ra, Google rất chú trọng đến trải nghiệm người dùng nên họ cũng “không ưa” những site load chậm. Đây là một trong những tiêu chí quan trọng góp phần quyết định thứ hạng tìm kiếm của bạn. Những site có tốc độ loanh nhanh sẽ được ưu tiên trên bảng kết quả tìm kiếm.
Text ratio càng cao càng tốt
Một blog/ website cá nhân có giao diện phức tạp, nhiều hiệu ứng thường sẽ có text ratio rất thấp. Text ratio là tỉ số giữa toàn bộ code dưới dạng html và số lượng ký tự văn bản (text) được hiển thị. Ví dụ, bạn không dùng CSS, JS mà hiển thị toàn bộ những gì mình có dưới dạng văn bản đơn thuần thì text ratio của bạn sẽ là 100%. Text ratio càng cao thì càng có lợi cho SEO. Bởi vì, các công cụ tìm kiếm chỉ có khả năng hiểu được dữ liệu văn bản và chúng thường không quan tâm đến JS hay CSS (nên blog/ website của bạn có đẹp đến thế nào thì chúng cũng chẳng biết đâu).
Các bạn có thể kiểm tra text ratio cho blog/ website của mình bằng cách sử dụng công cụ Code to Text Ratio của SEO Chat.
Tác giả của công cụ này đã nói:
The code to text ratio of a page is used by search engines and spiders to calculate the relevancy of a webpage. A higher code to text ratio allows for a better chance of getting a good page ranking in the SERPs. Not all search engines are using the code to text ratio in their index algorithm, but most of them do. Therefore, having a higher code to text ratio than your competitors gives you a good start for on-site optimization.
Có thể tạm dịch là:
Text ratio của một trang được sử dụng bởi các công cụ tìm kiếm và thu thập dữ liệu để tính toán sự liên quan của một trang web. Text ratio cao mang lại cơ hội cao hơn cho việc có được một thứ hạng tốt trong bảng kết quả tìm kiếm. Không phải tất cả các công cụ tìm kiếm đều sử dụng text ratio trong thuật toán của họ, tuy nhiên hầu hết trong số họ làm như vậy. Vì vậy, việc có text ratio cao hơn so với đối thủ cạnh tranh sẽ mang lại cho bạn một khởi đầu tốt trong tối ưu hóa on-site.
Sự rườm rà mang tới phiền hà
Nhiều người dùng không thích những site có giao diện phức tạp. Chúng khiến họ có cảm giác bị quấy rầy, bị làm phân tâm và khó tập trung vào nội dung mà họ đang tìm kiếm. Thứ người dùng cần là nội dung chứ không phải giao diện. Một giao diện đơn giản, gọn gàng, lấy nội dung bài viết làm trung tâm sẽ mang lại trải nghiệm người dùng tốt hơn, tích cực hơn.
Kết luận
Khác với các tạp chí hay website doanh nghiệp, nếu bạn đang xây dựng blog/ website cá nhân, bạn nên chọn giao diện càng đơn giản càng tốt. Tốt nhất là theo phong cách blog truyền thống. Bố cục của giao diện nên lấy nội dung bài viết làm trung tâm, đừng để khách truy cập cảm thấy khó chịu bởi những hiệu ứng CSS, JS hay quá nhiều quảng cáo. Một giao diện đơn giản sẽ dễ giúp bạn dễ SEO hơn và có được thứ hạng cao hơn trên bảng kết quả tìm kiếm.
Bạn nghĩ gì về điều tôi vừa đề cập ở trên? Hãy chia sẻ với chúng tôi quan điểm của bạn trong khung bình luận bên dưới.
Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)
Bác Hiếu ơi, mÌnh muốn tạo ra nhiều giao diện cho bài viết và có thể tùy chọn chúng ở trong trình soạn thảo lúc viết bài. Ví dụ: web bên mình có nhiều lĩnh vực khác nhau, có bài mình muốn giao diện dạng Blog, có bài muốn giao diện dạng tin tức hoặc giới thiệu sản phẩm,… để phù hợp với nội dung thì phải làm như nào ạ?
Thử tham khảo bài viết này đi bạn.
Chào anh Hiếu, em có một câu hỏi muốn nhờ anh Hiếu giải đáp giúp em . Trước tiên mời anh xem ảnh demo ạ: http://i.imgur.com/i6v49Ie.png . Bây giờ em muốn xóa bỏ thuộc tính position: fixed; trong mục element.style { đó thì phải làm thế nào ạ. Em đã dùng notepad++ để quét nhưng không thể tìm thấy bất cứ thuộc tính position: fixed nào trong file theme. Và cũng không tìm thấy file hay thuộc tính nào là element.style { cả. Vậy bây giờ anh có thể hướng dẫn cho em cách để xóa thuộc tính position: fixed trong phần element.style { đó được không ạ ? . Em có thể tìm thấy phần element.style { đó ở đâu ạ ? Cảm ơn anh !
Cái này nó nhiều khả năng là inline CSS nên nó không có trong file styles.css đâu. :P Bạn có thể ghi đè lên nó bằng cách sử dụng thêm thuộc tính !important. :P
Ghi đè bằng cách nào hả anh? Thuộc tính đó dùng để cố định nav menu, em đã test bằng F12 , chỉ cần loại bỏ thuộc tính đó là được. Nhưng em không thể tìm được vị trí của thuộc tính ấy ở đâu để sửa :(
Anh có thể kiểm tra và chỉ cách giúp em loại bỏ sticky menu không ạ ?
Link đây ạ : http://128.199.111.219/
Vào Customize => Custom CSS => Thêm đoạn code sau đây vào và lưu lại là được:
#navigation{ position: static !important; }Mình đã thêm thử cho bạn và thành công rồi đó. :P
Cảm ơn anh rất nhiều, ngắn gọn mà đơn giản quá. Em cứ đi mò mẫm code :D
Cùng trong theme đó, bây giờ em muốn thu ngắn khoảng cách từ trên menu nav đó và phần body ( như hình này: http://i.imgur.com/OLH846Z.png ) thì phải làm như nào hả anh ? Em check khoảng cách nó đang là 82px, em muốn thu ngắn nó lại khoảng 30px thôi, mà nó lại nằm trong phần element.style { giống thuộc tính bên trên nên em không biết khắc phục thế nào a ạ :( http://128.199.111.219/ . Em nên thêm gì vào Custom CSS bây giờ a ?
Nhìn cái ví dụ mình làm trước đó rồi tự suy diễn đi bạn. Thêm !important vào sau kích thước là được thôi mà. Đừng quan tâm cái element.style làm gì. :P
Đơn giản thì sẽ nhanh nhưng cũng cần biết tối ưu giao diện để độc giả vào lần đầu có “cái nhìn thiện cảm”. Theo mình thì cái này khá quan trọng, nó cũng định hình một phần nhận thức của độc giả về phong cách của blog cũng như tác giả ở đó.
sài theme gốc :D
Mình cũng là một FAN cuồng của các mẫu theme nhẹ, chắc phải e đít một em để chạy đua vẻ đẹp với ba ra đi của bạn Hiếu rồi (Paradise) :v
Mình thích mấy theme kiểu tạp chí vì nó đẹp nên toàn dùng loại theme kiểu này, theme đơn giản quá nhìn hơi chán một chút.
Đẹp mà không ai xem với xấu một chút mà nhiều người xem thì chọn bên nào? Với lại mình bảo thiết kê đơn giản chứ đâu phải thiết kế xấu? :P
Mình bảo nhìn nó hơi chán theo nhìn nhận của mình chứ bảo nó xấu đâu.
Chán cũng phải chịu. :P :P
dạo này a Hiếu chăm cập nhật bài viết cũ ghê. nhiều khi chỉ muốn mình có đủ khả năng tự làm 1 cái theme thôi. dùng của bọn mythemeshop theme schema load nhanh nhất rồi mà cũng có vài 3 phiên bản giao diện. giá như mò mẫm xóa hết được đi để mỗi cái giao diện defaut lại được thì tốt :P
Tranh thủ cập nhật lại bài viết cũ cho nó chuẩn SEO + văn phong đỡ lủng củng, mọi người đọc lại chê thiếu chuyên nghiệp. Hehe. :P
Đúng như bạn nói! Càng rườm rà thì càng nặng, tải trang sẽ chậm :)
Chủ yếu là thấy tốc độ thôi. Mà thời điểm hiện nay: “Tốc độ là điều cốt yếu” :D