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

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

Tin ngắn hàng ngày dành cho bạn
  • Từ lâu rồi suy nghĩ làm thế nào để tăng sự hiện diện thương hiệu, cũng như người dùng cho blog. Nghĩ đi nghĩ lại thì chỉ có cách chia sẻ lên mạng xã hội hoặc trông chờ họ tìm kiếm, cho đến khi...

    In cái áo này được cái tắc đường khỏi phải lăn tăn, càng đông càng vui vì hàng trăm con mắt nhìn thấy cơ mà 🤓

    (Có tác dụng thật nha 🤭)

    » Xem thêm
  • Một vòng của sự phát triển nhiều dự án khá là thú vị. Tóm tắt lại trong 3 bước: Thấy một cái gì đó phức tạp -> Làm cho nó đơn giản đi -> Thêm thắt tính năng cho đến khi nó phức tạp... -> Quay trở lại vòng lặp mới.

    Tại sao lại như vậy? Để mình lấy 2 ví dụ cho các bạn thấy.

    Markdown ra đời với mục tiêu tạo ra một định dạng văn bản thô "dễ viết, dễ đọc, dễ dàng chuyển thành một dạng gì đó như HTML". Vì thời đó chẳng ai đủ kiên nhẫn mà vừa ngồi viết vừa thêm định dạng cho văn bản hiển thị ở trên web như thế nào. Ấy vậy mà giờ đây người ta đang "nhồi nhét" hoặc tạo ra các biến thể dựa trên markdown để bổ sung thêm nhiều định dạng mới đến mức... chẳng nhớ nổi hết cú pháp.

    React cũng là một ví dụ. Từ thời PHP, việc khát khao tạo ra một cái gì đó tách biệt hẳn giao diện người dùng và phần xử lý logic chính của ứng dụng thành 2 phần riêng biệt cho dễ đọc, dễ viết. Kết quả là các thư viện UI/UX phát triển rất mạnh mẽ, mang lại khả năng tương tác với người dùng rất tốt, còn phần logic ứng dụng thì nằm ở một máy chủ riêng biệt. Bộ đôi Front-end, Back-end cũng từ đấy mà thịnh hành, không thể thiếu anh bồi bàn REST API. Ấy vậy mà giờ đây React trông cũng không khác biệt gì so với PHP là mấy, kéo theo là cả Vue, Svelte... lại cùng quy tất cả về một mối.

    Cơ mà không phải vòng lặp là xấu, ngược lại vòng lặp này mang tính tiến hoá nhiều hơn là "cải lùi". Nhiều khi lại tạo ra được cái hay hơi cái cũ thế là người ta lại dựa trên cái hay đó để tiếp tục lặp. Nói cách khác là chắc lọc tinh hoa từng tí một tí một á 😁

    » Xem thêm
  • Song song với các dự án chính thức thì thi thoảng mình vẫn thấy các dự án "bên lề" nhằm tối ưu hoặc cải tiến ngôn ngữ theo khía cạnh nào đó. Ví dụ nature-lang/nature là một dự án hướng tới cải tiến Go, mang lại một số thay đổi nhằm giúp cho việc sử dụng Go trở nên thân thiện hơn.

    Nhìn lại mới thấy hao hao JavaScript 😆

    » Xem thêm

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ụ.

Truy cập vào Lighthouse

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ả.

Điểm Lighthouse 2coffee.dev

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.

Minimize main-thread work 2coffee.dev

Đ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ẽ.

CSS Grid Layout browser support

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.

Cao cấp
Hello

Bí mật ngăn xếp của Blog

Là một lập trình viên, bạn có tò mò về bí mật công nghệ hay những khoản nợ kỹ thuật về trang blog này? Tất cả bí mật sẽ được bật mí ngay bài viết dưới đây. Còn chờ đợi gì nữa, hãy bấm vào ngay!

Là một lập trình viên, bạn có tò mò về bí mật công nghệ hay những khoản nợ kỹ thuật về trang blog này? Tất cả bí mật sẽ được bật mí ngay bài viết dưới đây. Còn chờ đợi gì nữa, hãy bấm vào ngay!

Xem tất cả

Đăng ký nhận thông báo bài viết mới

hoặc
* Bản tin tổng hợp được gửi mỗi 1-2 tuần, huỷ bất cứ lúc nào.

Bình luận (0)

Nội dung bình luận...