Tôi đã tăng điểm Lighthouse cho blog bằng cách tăng điểm CLS như thế nào?

Vấn đề

Một trong những vấn đề mà tôi quan tâm hàng đầu khi làm blog chính là khả năng SEO của nó. Thú thật, trước khi bắt tay vào thực hiện, tôi đã tìm hiểu khá nhiều về cách làm sao cho trang web của mình tăng được khả năng hiển thị khi người dùng tìm kiếm trên Google. Thông qua nhiều bài viết, nhiều hướng dẫn về cách SEO thì tôi có biết đến công cụ chấm điểm Lighthouse của Google.

Cho nên, tôi luôn mong muốn làm sao cho điểm Lighthouse càng cao càng tốt. Mặc dù Google không nói rõ điểm Lighthouse có tác dụng như thế nào đối với SEO, nhưng mà họ đã có "bật mí" rằng Google sẽ rất "thích" những trang web nào có điểm cao. Giống như một bước sàng lọc vậy, điểm càng cao thì trang web của bạn càng được chú ý và dễ lên "top".

Trước đây, khi tiến hành đo điểm của blog, tôi đã gặp rất nhiều vấn đề về hiệu suất. Giờ đây thì rất nhiều tiêu chí mà nó đưa ra đã đạt được thì cũng có một vấn đề mà khiến tôi phải đau đầu, cụ thể là điểm CLS và đó cũng là nguyên nhân gián tiếp dẫn đến hiện tượng luồng chính bị chặn (Minimize main-thread work). Phải mất rất nhiều thời gian sau đó tôi mới tìm ra được giải pháp để cải thiện điểm CLS và cả hiện tượng luồng chính mất nhiều thời gian để xử lý.

Lighthouse là gì?

Lighthouse là một công cụ mã nguồn mở để cải thiện chất lượng của các trang web. Bạn có thể chạy nó trên bất kỳ trang web nào. Nó có thể tính toán hiệu suất, khả năng truy cập, đánh giá PWA Application, SEO, v.v...

Những năm trở lại đây, Google quan tâm đến các trang web có nội dung chất lượng và trải nghiệm của người dùng hơn rất nhiều. Họ luôn thay đổi thuật toán tìm kiếm để sao cho nó mang lại lợi ích cho người dùng nhiều nhất có thể. Nếu như trước đây, có nhiều trang web thực hiện SEO bằng cách gắn rất nhiều tag, keyword... chẳng liên quan gì đến bài viết để "bọ" của Google quét thì giờ đây điều đó đã không còn tác dụng. Thậm chí nếu cố tình làm như thế, trang web sẽ bị "ăn gậy" và mất khả năng SEO.

Về cách sử dụng Lighthouse khá là đơn giản, nó được tích hợp sẵn trong trình duyệt Chrome nên bạn có thể sử dụng ngay. Chỉ cần truy cập vào trang web cần đo, mở Dev Tools (F12) rồi bấm vào tab Lighthouse để truy cập vào công cụ.

Ngoài ra, bạn cũng có thể sử dụng Lighthouse thông qua CLI hoặc thậm chí tích hợp CI/CD trong triển khai nữa. Lighthouse cung cấp nhiều cách thức sử dụng cho nhiều mục đích sử dụng khác nhau.

Ví dụ dưới đây là điểm Lighthouse của tôi, ngoài những con số ra thì còn có cả những gợi ý lẫn vấn đề mà công cụ gợi ý ra cho bạn khắc phục. Nếu đảm bảo được hết các tiêu chí, dĩ nhiên trang web của bạn đang có một trải nghiệm rất "tốt", và hơn hết là được Google "ưu ái" trong kết quả tìm kiếm.

Nếu chưa tin, bằng chứng là lượng truy cập (traffic) vào trang web của tôi hầu hết là đến từ Google tìm kiếm mà tôi không hề chạy quảng cáo hay chiến dịch marketing nào cả.

Tạm gác lại vấn đề điểm số, Tôi từng bị đánh giá điểm CLS và điểm "Minimize main-thread work" khá là thấp. Nếu chưa biết CLS là gì, bạn đọc có thể đọc lại bài viết Tôi vừa phải đưa một service markdown ra khỏi API của mình. Sau khi xem xét kỹ hơn, tôi phát hiện ra mục "Minimize main-thread work" (đại ý là trang web chiếm thời gian xử lý luồng chính quá nhiều, có thể gây ra giật lag hoặc không phản hồi người dùng) còn bị mất khá nhiều thời gian. Lúc đó, thời gian của mục Style & Layout luôn chạm ngưỡng ~ 2000ms.

Đi sâu vào tìm hiểu xem chuyện gì đang xảy ra, thì có vẻ như nguyên nhân nằm ở đoạn css chia bố cục trang web (css grid). Tôi sử dụng css grid của Bootstrap để làm responsive. Về cơ bản, nguyên tắc hoạt động của nó là chia tỉ lệ theo %. Cho dễ hình dung thì là một cái gì đó trông giống như thế này:

  .col-sm-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.3333333333%;
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

Khi sử dụng %, trình duyệt đang phải thực hiện khá nhiều thao tác tính toán để hiển thị. Điều đó khiến cho Style & Layout luôn mất nhiều thời gian.

Sau khi xác định được vấn đề, tôi cần một giải pháp để cải thiện CLS, đồng thời phải giảm thời gian tính toán cho hiển thị.

Sử dụng CSS Grid Layout để tăng điểm CLS và giảm tải luồng chính (Minimize main-thread work)

CSS Grid Layout là một giải pháp vượt trội trong việc chia trang thành các vùng chính hoặc xác định mối quan hệ về kích thước, vị trí và lớp, giữa các phần được tạo từ các thẻ HTML.

CSS Grid Layout khá là mới, nhưng đã được hầu hết trình duyệt mới nhất hỗ trợ. Nó cho khả năng chia bố cục trang web hết sức nhanh chóng và mạnh mẽ.

Sau khi tham khảo từ một vài nguồn về cách sử dụng cũng như cách chuyển sang sử dụng CSS Grid Layout thay cho CSS Grid của Bootstrap, tôi đã tạo ra được một file CSS bố cục cho riêng mình. Một phần của nó trông giống như:

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 24px;
}

.col-sm-12 {
  grid-column: span 12;
}

.col-sm-11 {
  grid-column: span 11;
}

.col-sm-10 {
  grid-column: span 10;
}

.col-sm-9 {
  grid-column: span 9;
}

.col-sm-8 {
  grid-column: span 8;
}

.col-sm-7 {
  grid-column: span 7;
}

.col-sm-6 {
  grid-column: span 6;
}

.col-sm-5 {
  grid-column: span 5;
}

.col-sm-4 {
  grid-column: span 4;
}

.col-sm-3 {
  grid-column: span 3;
}

.col-sm-2 {
  grid-column: span 2;
}

.col-sm-1 {
  grid-column: span 1;
}

Sau đó, tôi có thể dụng cú pháp chia bố cục gần giống như là cú pháp của Bootstrap:

<div class="row">
  <div class="col-sm-6">
    ....
  </div>

  <div class="col-sm-6">
    ....
  </div>
</div>

Sau khi sửa lại toàn bộ trang web theo bố cục mới của CSS Grid Layout, điểm Lighthouse của tôi giờ đây đã gần như tuyệt đối. Điểm CLS luôn nằm ở mức 0.001 và thời gian của Style & Layout đã giảm đi 1/3.

Tổng kết

Lighthouse là một công cụ mã nguồn mở của Google để "chấm điểm" cho trang web của bạn theo nhiều tiêu chí. Mặc dù điểm số chỉ mang tính tham khảo, còn chất lượng thực sự nằm ở nội dung nhưng nếu đạt được cả hai chẳng phải sẽ tốt hơn sao. Hơn nữa, nếu đạt điểm cao thì công cụ tìm kiếm của Google sẽ ưu tiên hiển thị trang web của bạn trong kết quả.

Sau khi mất nhiều thời gian để tìm hiểu về điểm số CLS và thời gian Style & Layout khá chậm thì tôi đã phát hiện ra phương pháp bố cục lại trang web theo CSS Grid Layout. Từ đó cải thiện được rất nhiều điểm số của mình.