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
  • Manus đã chính thức mở cửa cho tất cả người dùng rồi đấy mọi người. Cho những ai chưa biết thì đây là một công cụ viết báo cáo (làm mưa làm gió) giống như Deep Research của OpenAI á. Mỗi ngày được miễn phí 300 Credits để nghiên cứu. Mỗi lượt nghiên cứu tiêu tốn tuỳ thuộc vào độ phức tạp của yêu cầu. À với cả họ đang có chương trình tặng miễn phí Credits hay sao á. Như mình thì vào thấy được hẳn 2000.

    Mình dùng thử, so sánh với cùng một lệnh giống như đợt trước dùng bên Deep Research thì nội dung khác biệt nhau hoàn toàn. Manus báo cáo như kiểu viết văn hơn so với OpenAI là các gạch đầu dòng và bảng biểu.

    À lúc đăng ký xong có bắt nhập số điện thoại để xác minh, nếu lỗi thì các bạn đợi qua ngày thử lại xem có được không nhé.

    » Xem thêm
  • Mọi người chắc nghe nhiều về xu hướng tìm kiếm thông tin bằng AI chứ không cần công cụ tìm kiếm như Google nữa rồi đúng không? Không đâu xa ánh xạ vào bản thân thì thấy đúng thật, thi thoảng mới tìm kiếm thôi chứ còn đâu toàn hỏi tụi AI.

    Ngay từ đầu viết blog, thứ mà mình hướng đến là chia sẻ kinh nghiệm chứ không phải là những bài mang nặng tính kỹ thuật, máy móc, hướng dẫn từ đầu... Vì thời điểm đó đã có quá nhiều người làm nội dung này rồi và họ làm rất tốt, tại sao mình phải cố phát minh lại bánh xe? Một điều nữa là tin tưởng độc giả của mình có khả năng tìm hiểu vấn đề. Nếu bạn đọc đủ nhiều các bài viết trên blog thì thấy mình luôn cố gắng chèn thêm các liên kết tham khảo ngoài bài viết, nêu ra vấn đề mở và rất ít khi kết luận chắc chắn một điều gì đó.

    Mình đã cố gắng rèn luyện kỹ năng viết, kỹ năng trình bày và cả cách tương tác với độc giả để mang lại giá trị cho họ. Nhiều lúc ngồi lật lại các con số thống kê thấy lượng đọc bài viết tăng lên lại cảm thấy vui. Nhưng khi nguồn truy cập đến từ Google thì lại thấy buồn, vì điều đó chứng tỏ họ biết đến mình chỉ khi đang cố đi tìm giải pháp, có thể họ chỉ đọc chớp nhoáng, may ra tìm được cách giải quyết và thế là đóng cửa sổ trình duyệt rồi đi như một cơn gió.

    Chừng vài tháng đổ lại đây, một điều khiến mình rất vui đó là lượng người truy cập thẳng vào trang chủ mà không thông qua công cụ tìm kiếm đang tăng dần lên, có nhiều hôm lượng truy cập tự nhiên còn cao hơn cả đến từ Google. Điều đó chứng tỏ độc giả đã có thói quen quay lại trang của mình nhiều hơn và họ tìm thấy được giá trị từ blog mang lại. Vui mừng khôn xiết 🤩

    Bên cạnh đó thì lượng truy cập vào chuyên mục Threads - tức là mục mình đang viết bài này đang cao hơn bao giờ hết. Điều đó chứng tỏ xu hướng đi theo tin nhanh là đúng đắn. Mình có thể ngồi cả ngày để viết tin ngắn cho bạn đọc vì nó rất nhanh mà tiện, không tốn công đi tìm tài liệu để viết, không tốn cả thời gian viết nữa, còn mình thì có rất nhiều thứ để chia sẻ 😅. Nhưng không vì thế mà bỏ bê các bài viết dài, vì dài thì có nhiều thông tin để chia sẻ hơn.

    Vài lời tâm sự thế thôi chứ hơn một tháng nay mình chưa viết bài viết mới nào vì công việc bận quá. Xong lâu dần cứ trì hoãn lại thành lười. À với cả tháng 5 này rất thích hợp để đọc các cuốn sách về cách mạng á. Có hôm đọc đến 2 giờ sáng mới đi ngủ 🥱

    » Xem thêm
  • Mình mới nhìn thấy một trang web khá thú vị nói về các cột mốc đáng nhớ trong lịch sử phát triển Internet toàn cầu: Internet Artifacts

    Chỉ từ 1977 - khi Internet còn nằm trong hộp thí nghiệm thì nhìn xem - giờ đây Internet đã khiến mọi thứ phát triển đến mức nào 🫣

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