Kích thước website có ảnh hưởng đến SEO và trải nghiệm người dùng?

Viết bởi: TrungNgoc || Có 1763 từ và 7 phút để nắm hết nội dung!

TNDigi Digital Marketing tại

Nếu từ khóa của bạn hoài cứ ở trang 2 hay tệ hơn mà không thể ngoi lên trang nhất dù đã thử mọi cách thì bạn có thể thử thay đổi kích thước website (UX – UI). Có thể nó sẽ hữu ích cho bạn trong quá trình làm Search Engine Optimization đấy, đặc biệt là nâng cao trải nghiệm người dùng. Và bài viết này TNDigi sẽ cùng bạn làm rõ vấn đề “Kích thước website có ảnh hưởng đến SEO và trải nghiệm người dùng” hay không nhé!

Hiểu về kích thước website là gì?

Mình luôn coi trọng website, nó như nhà của mình vậy. Một website được thiết kế chuẩn SEO và thu hút sẽ như là một cửa hàng được bày trí tuyệt vời. Nhưng vì sao? Bởi mình cũng là khách hàng, muốn mình mua hàng thì đầu tiên mình sẽ phải đọc blog, mua hàng, sử dụng sản phẩm/dịch vụ… Nhưng nếu như bước đầu tiên là đọc blog mà mình không thật sự ấn tượng thì khó để mình triển khai sang bước thứ hai.

Kích thước website là một trong những yếu tố gây ảnh hưởng đến SEO. Đây là tiêu chí cơ bản để Google đánh giá website của bạn cũng như tối ưu trải nghiệm người dùng. Do đó website thiết kế website chuẩn SEO và thu hút là một trong hơn 200 yếu tố để Google quyết định ranktop website của bạn.

Nếu nói đến hình ảnh, ngoại trừ việc nó có đẹp hay không thì bot google sẽ quan tâm đầu tiên đến kích thước và thẻ alt. Kích thước hình ảnh sẽ phụ thuộc vào kích thước website, nên tối ưu kích thước website là điều tất yếu. Đương nhiên là tối ưu trải nghiệm người dùng sẽ cần phải tối ưu nội dung, chất lượng hình ảnh nữa rồi.

Một số kích thước website mà bạn nên lưu ý nếu muốn có một website thật sự tối ưu chuẩn SEO:

• Kích thước chuẩn – fixed layout – là chiều rộng kích thước cố định được thiết lập sẵn
• Kích thước lưu động – Fluid layout – là kích thước tính theo phần trăm chiều rộng website, và nó sẽ co dãn theo kích thước của trình duyệt
• Kích thước co dãn – Elastic layout – là sự kết hợp của kích thước chuẩn và kích thước lưu động

Các đơn vị kích thước website thường được sử dụng:

• Pt, pc, cm, in: Đây là kích thước tuyệt đối, nó sẽ không thay đổi kể cả khi bạn thay đổi thiết bị (máy tính, điện thoại)
• Pixel: là đơn vị đại diện cho 1 điểm ảnh trên màn hình hiển thị. Ví dụ như màn hình có độ phân dải 1920×1080 thì nó sẽ có 2073600 pixel chia đều cho 1920 cột và 1080 hàng
• Em, rem, %: Dạng này nó sẽ chia làm
  • % là đơn vị kích thước lưu động, ví dụ gán width: 50% thì nó sẽ hiển thị với chiều rộng là 50% cho mọi kích thước màn hình
  • em nó gần giống với % nhưng được dùng cho font chữ
  • rem thì được dùng trong thuộc tính font-size của html

Các loại kích thước website hiện nay

Kích thước website chuẩn – Fixed layout

Kích thước cố định của website là kích thước được thiết kế cố định chiều rộng (với các thiết bị có độ phân giải khác nhau), thông thường nó sẽ không thay đổi và có giá trị chủ yếu là 800px, 960px, 1000px, 1200px.

Nhưng ưu tiên hơn cả vẫn là kích thước 960px vì nó sẽ hoàn hảo khi ở màn hình có kích thước 1024px hoặc lớn hơn. Và đây cũng là kích thước tiêu chuẩn hiện nay.

Ưu điểm:

• Dễ dàng thiết kế và triển khai giao diện website
• Hỗ trợ nhiều trên các thiết bị khác nhau, kể cả các máy tính cực kì cũ
• Cho khả năng đọc tốt với các thiết bị có độ phân giải cao
• Các yếu tố của HTML có chiều rộng cố định được triển khai đơn giản hơn và nhanh hơn

Nhược điểm:

• Tạo khoảng trống lớn 2 bên ở các màn hình có độ phân giải → gây mất thẩm mỹ khá nhiều
• Nếu kích thước của Width cao hơn so với độ phân giải sẽ tạo ra thanh cuộn ngang

Kích thước website lưu động – Fluid layout

Kích thước website lưu động là kích thước được tính theo phần trăm. Điều này sẽ giúp website hiện thị trên các thiết bị khác nhau bằng cách chia đều tỉ lệ phù hợp.

Ưu điểm:

• Thân thiện với người dùng, tăng trải nghiệm UX – UI
• Không còn tôn tại thanh cuộn ngang cũng như khoảng trắng quá lớn như trường hợp của Fixed Layout

Nhược điểm:

• Hạn chế hơn trong việc sử dụng hình ảnh, infographic trên website
• Kích thước ảnh đăng website và video phải được tính toán kỹ nếu không sẽ khó khăn trong việc điều chỉnh hiển thị
• Máy nào có độ phân giải lớn cũng sẽ gặp khoảng trắng giữa các chữ. Mất đi sự thân thiện cho người dùng

Các kích thước website khác

Kích thước slide trong trang chủ: có nhiều tỉ lệ vàng cho rằng nó là 1360x540px, nhưng bản thân mình thấy làm sao để nó hiển thị full màn hình FHD là đẹp nhất.

Kích thước hình ảnh trong bài viết, sản phẩm: nên có kích thước từ 600px.

Một vài cách để thay đổi kích thước website, hình ảnh

Đối với kích thước website thì bạn chủ động sửa trong phần tùy biến, nó sẽ có option ở mục độ rộng bài viết, khi đó bạn thay đổi cho phù hợp hơn.

Còn đối với hình ảnh, bạn chủ động sử dụng plugin để tự động tối ưu chiều rộng hình ảnh khi tải lên, như mình thì mình dùng plugin có tên là “EWWW Image Optimizer“.

Nhưng nếu 2 cách trên vẫn không thỏa mãn được yêu cầu của bạn thì bạn hãy nhờ một dev tối ưu theo ý bạn hoặc sửa thẳng vào mục CSS bổ sung có trong phần tùy biến mỗi theme (nếu bạn CSS nó không ăn thì bạn kiểm tra xem đã trỏ đúng hay chưa hoặc thêm thuôc tính “!important” để tránh bị ghi đè nhé!

Hi vọng bài viết đã cung cấp được một vài thông tin mà bạn cần, Nhưng nếu bạn muốn tối ưu nhưng không đủ khả năng hoặc chi phí hạn hẹp thì có thể liên hệ với TNDigi nhé, mình sẽ hỗ trợ với giá bằng tách cafe cho bạn. Hẹn gặp bạn ở bài viết sau.

Xem thêm: Chi phí SEO của một doanh nghiệp là bao nhiêu? Bóc tách chi tiết

Xem thêm: Các Lỗi SAI PHỔ BIẾN khi “Viết Bài Chuẩn SEO” nhiều người gặp phải