Tối ưu hóa bố cục của trong trang web

Tối ưu hóa bố cục của trong trang web? Trong xu hướng thiết kế web hiện đại, có 2 cách để thiết kế bố cục (layout) phổ biến là các bảng (table) lồng nhau và dựa vào chuẩn CSS. Cách thiết kế layout theo dạng table đã quá phổ biến với các nhà thiết kế website vì tính trực quan, thời gian thiết kế cũng được rút ngắn và khả năng tương thích trình duyệt cao.
Nội dung trích xuất từ tài liệu:
Tối ưu hóa bố cục của trong trang web Tối ưu hóa bố cục của trong trang webTối ưu hóa bố cục của trong trang web? Trong xuhướng thiết kế web hiện đại, có 2 cách để thiết kế bốcục (layout) phổ biến là các bảng (table) lồng nhau vàdựa vào chuẩn CSS.Cách thiết kế layout theo dạng table đã quá phổ biếnvới các nhà thiết kế website vì tính trực quan, thời gianthiết kế cũng được rút ngắn và khả năng tương thíchtrình duyệt cao. Nhưng việc lạm dụng thiết kế layouttheo table cũng dẫn đến một số rắc rối cho cácdesigner. Vào cuối thập niên 90, W3C giới thiệu CSS(Cascading Style Sheets) cho phép tùy biến những kiểuthể hiện khác nhau cho tài liệu HTML. Các trình duyệtnhanh chóng hỗ trợ CSS, các designer bắt đầu áp dụngchuẩn này cho các bản thiết kế của họ.Sau đây là những lý do chính của việc các designer từ bỏviệc sử dụng table và chuyển sang dùng CSS:- Table làm gia tăng kích thước của site dẫn đến việc tiêu tốnbăng thông không cần thiết .- Tiêu tốn thời gian hiệu chỉnh nhiều hơn so với việc dùngCSS nếu website có thay đổi.- Những người khiếm thị hoặc những người truy cập websitebằng DTDĐ hay PDA sẽ không được hiển thị đúng đắn.Cuối cùng, tiêu chuẩn web W3C hiện tại là sử dụng CSS vàtin tốt lành là hiện nay tất cả các trình duyệt đều hỗ trợ chuẩnnày.Tại sao CSS tốt hơn?Thiết kế layout với CSS có một số thuận lợi đối với việc tốiưu hóa công cụ tìm kiếm (SEO) điển hình là việc có thể đặtnội dung trước các mã lệnh khác bằng thẻ DIV (luôn nhớ rằngviệc bố trí những nội dung quan trọng bao gồm từ khóa lênphần đầu của trang web luôn làm gia tăng sự nổi bật của từkhóa).CSS giúp giảm bớt kích thước của trang web và khách thamquan (visitor) không cần phải tải về những dữ liệu mang tínhchất trình bày khi xem mỗi trang vì chúng đã được lưu trongbộ nhớ tạm (cache) của trình duyệt.Những thuận lợi khi dùng CSS- Đồng bộ định dạng và dùng chung cho tất cả các trang.- Vẫn có thể dùng CSS ngoài mục đích SEO.- Website sẽ được tổ chức chặt chẽ và dễ bảo trì.Tóm lại, dùng thẻ DIV nói riêng hay CSS nói chung thaythế cho các table lồng nhau sẽ làm giảm đáng kể kíchthước trang, tổ chức website được chặt chẽ hơn, dễbảo trì hơn và gia tăng tính khả dụng. Một điểm khôngthuận lợi khi sử dụng CSS là chúng ta phải học về nó,tuy nhiên, điều này không quá khó cho các webmaster.Cả hai phương pháp, table lồng nhau và CSS đều được quantâm khi nói về SEO. Nhưng chúng ta đã biết, các robot sẽquét qua toàn bộ mã trong các trang web mà chúng viếngthăm, tuy nhiên, nếu số lượng mã quá lớn, các robot có thểkhông tiếp cận trọn vẹn, từ đó, việc bố trí nội dung sao chocác robot có thể tiếp cận là một điều khá quan trọng và điềunày chắc chắn việc dùng CSS sẽ làm tốt hơn. Bây giờ chúngta sẽ xem qua vài bước thực tế về việc sử dụng thẻ DIV so vớitable để nâng cao sức hấp dẫn cho các công cụ tìm kiếm (SE).Tối ưu hóa trang web dựa trên tableKhi một trang web được tạo ra khi dùng table, thông thôngphần nội dung chính sẽ nằm ở ô dưới cùng bên phải của table.Các robot quét 1 trang web theo chiều từ trái sang phải và từtrên xuống dưới sẽ đi qua rất nhiều đoạn mã trước khi tiếp cậnđược nội dung này. Để tránh điều này, chúng ta phải bố trí nộidung vào những ô đầu tiên nằm ở phần trên của table và cáchtốt nhất là đưa nội dung lên trên mã HTML bằng cách dịchchuyển phần menu từ trái sang phải (menu thường được bố tríbên trái). Để các robot có thể đọc nội dung đầu tiên mà vẫngiữ được menu bên trái là tạo ra một ô (cell) rỗng nằm trênmenu như hình bên dưới.Như hình minh họa bên trên, chúng ta dùng 1 cell rỗng vớithuộc tính rowspan, các robots khi quét trang này sẽ duyệt quacell rỗng ở dòng 1, sau đó chúng sẽ tiếp cận đến nội dungmong muốn của chúng ta trong khi menu vẫn được bố trí theosự phổ biến bên tay trái bất chấp menu có thể là hình ảnh. This image has been resized. Click this bar to view the full image. The original image is sized 616x342px.Lời khuyên: Sử dụng table phân lớp (layer) sẽ tải trangnhanh hơn. Các trình duyệt hiển thị table tuần tự, cung cấpcho visitor những thông tin đầu tiên trong khi vẫn tiếp tục tảitrang. Vì thế tôi khuyên bạn nên chia ra thành nhiều tableriêng biệt để có thể tải nhanh chóng từng table.Tối ưu hóa trang web dựa trên CSSW ebsite dùng CSS sẽ dễ dàng kiểm soát các mã HTMLvà không mất nhiều thời gian để bố trí vị trí nội dungphù hợp khi các robot tham quan.Như hình minh họa bên trên, trực quan chúng ta nhậnthấy rằng nội dung không phải là phần đầu tiên cácrobot quét nhưng vì được bố trí trong thẻ DIV nên nó làvị trí tốt nhất. Luôn nhớ nguyên tắc hàng đầu từ khóanằm gần vị trí đầu trang hoặc đầu câu luôn thuận lợitrong việc gia tăng kết quả xếp hạng.Đến đây, nếu bạn vẫn thích dùng table, tôi không cảnbạn. Nhưng các website sẽ ít mã hơn, kích cỡ nhỏ hơnvà tốc độ tải nhanh hơn nếu dùng XHTML và CSS. Vànhững điều này luôn phù hợp cho visitor lẫn các SE.Những điểm quan trọng của bài viết này:- ...