Cộng đồng hỗ trợ Hoàng Nguyễn:

zalo icon

Hoc phi uu dai MSB 270920171350x80


 

3. Tối ưu bố cục của trang

v Theo xu hướng thiết kế web hiện đại, có hai phương pháp xây dựng bố cục cho trang web là các bảng lồng nhau và dựa vào CSS.

v Việc sử dụng bảng để xây dựng bố cục được sử dụng phổ biến vì hình ảnh và văn bản được trình bày trực quan; thời gian thiết kế nhanh hơn và khả năng tương thích tốt các loại trình duyệt.

v Tuy nhiên, việc lạm dụng bảng dẫn đến kết quả là sự gia tăng các đoạn mã trong nội dung trang web (table, tr, td, tbody, ...) và khi có nhu cầu bảo dưỡng trang web thì đúng là một cực hình để đọc những dòng mã dư thừa, rối rắm.

v Vào cuối thập niên 90, W3C đã giới thiệu CSS (Cascading Style Sheets) với khả năng áp dụng những phong cách khác nhau trong tài liệu HTML. Các trình duyệt nhanh chóng hỗ trợ CSS và xu hướng thiết kế bằt đầu chuyển dịch dần sang CSS.

v Sau đây là những lý do chínhcho lời khuyên ngừng sử dụng bảng để chuyển sang CSS cho việc thiết kế bố cục trang:
      • Bảng làm cho kích cỡ website tăng lên không cần thiết, từ đó dẫn đến việc gia tăng bandwidth khi người duyệt web truy cập vào website.
      • Việc thay đổi bố cục trang web tốn nhiều công sức và thời gian hơn nếu dùng bảng thay vì dùng CSS
      • Website sẽ không thể hiện đúng đắn với những người sử dụng smartphone hoặc PDA.

Vậy tại sao CSS tốt hơn?

v         Thiết kế bố cục trang web với CSS sẽ có lợi thế trong việc tối ưu hóa các bộ máy tìm kiếm. Điều này nhận thấy rõ ràng trong việc các bạn có thể đặt nội dung mong muố vào phần đầu tiên của BODY, trước cả những mã lệnh của menu hoặc thanh điều hướng. Với khối DIV, các bạn có thể đáp ứng bất kỳ yêu cầu nào cho mục đích thiết kế.

v         Hãy nhớ rằng khi các bạn đặt một đoạn văn quan trọng ở phần đầu trang (xét theo mã HTML) sẽ gia tăng về sự nổi bật.

v         CSS giúp các bạn giảm dung lượng trang web và kéo theo việc giảm thời gian chờ đợi khi người duyệt web truy cập vào trang. Ngoài ra, CSS còn được các trình duyệt hỗ trợ cache.

v         Thêm một số lợi ích khác khi sử dụng CSS

      ·  Sử dụng thống nhất các định dạng trong tài liệu HTML và dễ dàng hiệu chỉnh khi cần thiết.

      ·  Sử dụng CSS để thay thế các kỹ thuật không thân thiện với các SE.

Làm thế nào để tối ưu hóa cho các trang dùng bảng

       Khi một trang web được tạo ra bằng cách sử dụng bảng, nội dung chính của trang thường nằm ở ô bên phải và ở dưới của bảng. Theo cách thông thường, các spider sẽ xem một trang web từ trái qua phải và từ trên xuống dưới, vậy rõ ràng spider phải duyệt qua rất nhiều dòng mã trước khi đến được nội dung thật sự của trang web. Để tránh điều này, các bạn phải làm thế nào đó để spider đọc được nội dung mong muốn của trang đầu tiên và cách tốt nhất là ...

Và đây là đoạn mã HTML:

<table border="1" cellpadding="5" cellspacing="0" width="450">

     <tr>

                 <td valign="top" bgcolor="#eeeeee" align="left" width="140"></td>

                 <td valign="top" align="left" bgcolor="#efefff" width="450" rowspan="2">

                             Nội dung

                 </td>

     </tr>

     <tr>

                 <td valign="top" align="left" width="140">

                             Danh sách menu

                 </td>

     </tr>

            </table>

bang HTML

                                                                         Kết quả

Chia bảng thành nhiều “lớp” để tải nhanh hơn

Các trình duyệt có xu hướng cung cấp cho người duyệt web thông tin gì đó ngay lập tức trong khi vẫn tải phần còn lại của trang web, do đó, lời khuyên với các bạn là hãy chia thành nhiều bảng nhỏ từ 1 bảng lớn và xếp lớp liên tục với nhau. Việc làm này giúp gia tăng đáng kể việc tải trang và người duyệt web sẽ không cảm bị đứt quãng trong quá trình duyệt trang web.

Làm thế nào để tối ưu hóa cho các trang dùng CSS:

Người duyệt web sẽ thấy trang web của bạn trình bày như thế này

Và rõ ràng nó chưa được tối ưu hóa vì spider muốn đọc được nội dung phải xem qua các dòng mã của danh sách menu.

Nhưng điều bí mật nằm ở các dòng mã với CSS:

<div id="content" style="width:200px">

     <div style="float:right; border:1px solid #ff0000">Nội dung</div>

     <div style="float:right; border:1px solid #cccccc">Danh sách menu</div>

</div>

<div style="clear:both"></div>

Các bạn đã được giới thiệu về về điểm mạnh yếu của việc thiết kế theo dạng bảng hoặc CSS, các bạn cũng biết cách tối ưu hóa trang web dạng bảng hay dạng CSS. Các bạn cũng được nghe lời khuyên nên dùng CSS, tuy nhiên bạn có thể sử dụng bảng nếu cần nhưng nhớ rằng những trang web sẽ ít mã hơn, dung lượng được tối ưu hơn khi sử dụng XHTML và CSS.

v  Chuyển toàn bộ mã nguồn HTML sử dụng cấu trúc bảng lồng nhau sang DIV

Những điểm cần lưu ý:

·         Lạm dụng bảng sẽ dẫn tới việc gia tăng tỷ lệ mã trong nội dung. Làm đơn giản hóa mã trong trang web của bạn để tải trang nhanh hơn khi dùng CSS. Dùng khối DIV để đặt nội dung của bạn vào phần đầu của mã trang web.

·         Sử dụng bảng cẩn thận vì cấu trúc bảng thường gây trở ngại cho các spider duyệt trang web của bạn.

·         Đảm bảo rằng trang web khi thiết kế có thể rút ngắn lộ trình của các spider đến được với nội dung.

·         Hãy thử gia tăng các chỉ số này cho những từ khóa đã chọn trên nội dung trang web của các bạn sao cho tự nhiên nhất đối với người duyệt web.

tangebookseo

ĐỐI TÁC CỦA HOÀNG NGUYỄN

[X]