Chỉnh Cumulative Layout Shift CLS qua một ví dụ cụ thể

Submitted by superthin on 19/11/2020 - 12:05:04
Thực hành thay đổi CLS cho trang web

CLS được xem là một trong "ba chân kiềng" của Core Web Vitals, có ảnh hưởng rất lớn đến trải nghiệm người dùng, tốc độ nạp trang web và cả nhân tố SEO. Chính vì thế, gần đây nhiều anh em làm SEO bắt đầu mò cua bắt ốc để xử lý CLS về zero. Trong quá trình này, Thin bỗng nhiên trở thành sư phụ bất đắc dĩ.

Thật mệt mỏi khi phải email trả lời riêng cho từng người ở từng ca cụ thể. Phần lớn câu hỏi hết sức buồn cười, nếu không trở nên "trâu bò" Thin đã phát tức lên được. Lý do chẳng có gì ghê gớm ngoài việc nền tảng kiến thức về WWW, HTML, các giao thức xung quanh HTTP quá nông cạn, học hành kém tắm lại nhảy ra làm kiếm tiền như một cách "mì ăn liền".

Nếu bạn muốn có lý thuyết nền tảng để xử lý tốt thì có thể đọc một bài giảng giải dông dài Sửa lỗi CLS giúp tăng điểm SEO.

Do đó, bài viết này lại là một bài để chỉ ra cho những người rằng "lỗ hổng kiến thức không lo bù đắp" sẽ không thể tiến xa được, kiếm tiền được đó, rồi cũng mất tiền nhanh chóng mà thôi.

Bài thực hành này được tiến hành trực tiếp trên trang web superthinlabs đốt cơm này luôn. Nào, bắt tay vào ngay và luôn cho nóng hen?

Ta vào ngay trang Gú Gồ Pây Sờ Pít In Sai sờ (nhẹ) https://developers.google.com/speed/pagespeed/insights/ để kiểm tra xem siu pơ thin lab sờ (nhẹ) này ra làm sao. Đây là kết quả:

- Trên giao diện mobile, Cumulative Layout Shift bằng 0 nên không có việc gì để làm ở đây.

- Trên giao diện desktop sẽ thấy chưa đạt được con số zero mong đợi:

Điểm CLS của superrthinlabs.com
Điểm CLS cụ thể của superthinlabs đốt cơm

Vậy thì tiến hành làm cho nó xuống con số không ngay và luôn chứ còn chờ đợi gì nữa, phải không nào?

Cách xử lý vấn đề ở đây là phải tìm ra được nhân tố element nào trên trang HTML gây ra chỉ số CLS cao này. Nhiều anh em đọc như con vẹt chứ không hề hiểu biết, nắm bắt được bản chất thực sự mấy chữ kia nghĩa làm sao. Họ dịch ra tiếng Việt nghe rất lủng củng như "dịch chuyển bố cục tích lũy", để rồi không hiểu quái quỉ gì hết trơn.

Thin hiểu cái này rất thô thiển, "hai lúa" như sau: một element (tức là thẻ/ tag HTML có kèm các thuộc tính và giá trị) đã có vài lần thay đổi hình dáng, kích thước khi được trình duyệt đọc và vẽ lại trên màn hình để dựng thành trang web dẫn đến có khả năng gây lúng túng cho người dùng (cụm từ bóng bẩy: trải nghiệm người dùng kém).

Vậy đó, vậy thì ta chỉ cần "xẻ thịt trang HTML ra để xem nhân tố nào rồi sửa chữa nó" là xong. Việc này không có cái gì ghê gớm mà nhiều anh em cứ than phiền với Thin rằng họ đang cảm thấy "mông lung như một trò đùa". Nói thiệt mất lòng nhưng thực sự đây là biểu hiện của việc học hành kém, tiếng Anh dốt, đầu tư chưa thích đáng thời gian, công sức để tìm hiểu rốt ráo vấn đề chứ không có cái gì khó nhằn ở đây hết trơn.

Tìm nhân tố đó như thế nào? Chỉ cần mở trang superthinlabs đốt cơm lên bằng trình duyệt Gú Gồ Cờ Rôm, khi trang nạp xong, ta bấm F12 để bật công cụ DevTools của trình duyệt lên. Trông như hình dưới:

Bật Google Chrome DevTools lên với F12

Chỉnh lần lượt 1,2,3 như ở hình trên. Mục đích: ta làm cho trang web nạp chậm lại, giống như phim quay chậm để xem thằng trộm nào vào dắt xe, thì ở đây ta tìm xem "thằng nào" gây ra CLS cao. Bấm F5 để tải lại trang nhằm tìm ra được nhân tố. Đợi chừng 30 giây đến 1 phút sẽ có kết quả:

Tìm được nhân tố

Câu hỏi đặt ra là không chỉnh như trên thì sao? Thì CLS nó nháy một phát nhanh quá, ta không nhìn thấy nó chứ sao. Giống như nếu không quay chậm lại làm sao bạn thấy được mấy pha hấp dẫn trong thể thao như đá bóng, đánh võ, trên tivi... Hiểu rồi chứ bạn?

Theo hình minh họa bên trên (1) chọn mục Experience rồi nhìn theo dãy chính giữa để tìm chỗ nào có chữ CLS, đó chính là mục (2), khi ta rê chuột lên mục 2, sẽ xuất hiện mục (3), chỉ cho ta chính xác nhân tố nào trên trang gây ra biến động CLS.

Ở đây, ta thấy nhân tố element làm nên menu trên trang chính là ĐỐI TƯỢNG CẦN CHỈNH CHỌC. Ta để ý nhìn ở phần góc trái dưới chỗ có chữ Warning thì sẽ thấy cụ thể nó diễn giải cái menu đã shift (dịch chuyển vị trí) như thế nào:

SuperthinLabs.com CSS Selector

Ui trời ơi, sướng quá sướng khi DevTools chỉ rõ ràng CSS Selector của cái menu kia luôn. Giờ ta chỉ việc mở tìm file CSS có đề cập đến nó chỉnh lại thông số là xong.

Ở đoạn này Thin không thể mô tả cặn kẽ từ việc lấy mã nguồn superthinlabs đốt cơm từ Repository về bằng công cụ Git, rồi gõ lệnh tìm file CSS có element kia để sửa bằng trình soạn thảo vim ra làm sao. Sau khi sửa xong, đẩy code lên lại hosting ra làm sao. Những thứ đó sẽ làm bài trở nên quá dài. Nếu bạn sử dụng WordPress thì việc sửa trực tiếp file CSS hoặc Additional CSS rất đơn giản, Thin cũng không nêu vào đây.

Nào, giờ bạn xem thử CLS có gần bằng 0 chưa, kiểm tra luôn nè, click QUẢ NÀY để xem. Vì trang web này có quảng cáo nên chắc chắn không thể bằng 0, xử lý cho bằng 0 lại vi phạm chính sách, rắc rối chỗ đó chứ về kỹ thuật mình không bó tay.

Trong thực tế xử lý những trang web phức tạp với bố cục rối rắm, hình ảnh nhiều, có cả nhiều đoạn mã JavaScript thì khi tìm được element, ta phải truy lùng xem ngoài các rule trong CSS tác dụng đến nó, còn có đoạn mã JavaScript nào thay đổi nó hay không để mà chỉnh sửa.

Việc xử lý mấy cái JavaScript thay đổi CSS sẽ phức tạp hơn ví dụ minh họa này, nhưng cũng không đến nỗi quá khó để mà bó tay, trừ khi những thứ chèn vào trang là quảng cáo của bên thứ ba, ta không thể kiểm soát code của họ. Những lúc như vậy, Thin sẽ phải đọc mã của họ để rồi viết lại mã chỉnh sửa, vô hiệu hóa những thứ gây shift bố cục trang. Làm việc đó mất thời gian chứ không gọi là khó bởi vì nắm vững CSS, JavaScript và HTML là làm ngon lành, Thin chưa từng bó tay ca nào.

Bạn gặp ca nào quá khó, bó tay toàn tập thì comment bên dưới để Thin giúp cứu bồ.

Hy vọng bài viết này "thông não" được phần nào một số anh em cứ nghe đến CLS là sợ đến mức... té đái./.

Chú ý: chữ element phải là yếu tố/ thành tố mới đúng, vì nhân tố là chỉ người. Nhưng vì Thin vốn là dân học văn, nên thường nhân cách hóa đồ vật, sự vật, hiện tượng, thành ra ở đây element gần như factor. Mong các bạn thông cảm.

Lập trình viên máy tính có biết đùa không?

Submitted by superthin on 09/02/2019 - 14:25:10
Mai vàng xuân Kỷ Hợi

Không biết xuất phát từ đâu người Việt Nam chúng ta thường hay quan niệm dân kỹ thuật nói chung, dân công nghệ thông tin nói riêng rất khô khan, kém lãng mạn. Ở khía cạnh cực đoan hơn, một số người còn cho rằng dân kỹ thuật là một dạng gần như ngu ngơ về mặt xã hội, những kẻ... đáng chán.

Thử nghiệm SEO "thanh niên ngáo đá" ngày thứ mười ba

Submitted by superthin on 19/09/2017 - 20:50:17
Mô tả chùm liên kết website

Sau khi upload clip lên YouTube được hai ngày, hôm nay thử tìm kiếm xem sự thể thế nào. Kết quả cũng chưa thấy xuất hiện bởi vì clip không có tiêu đề thanh niên ngáo đá. Trong clip không có hình thanh niên ngáo đá, sao có thể đặt tiêu đề là ngáo đá được, cái đó là lừa người xem, lợi bất cập hại.

Làm sao để tìm được thầy cô giáo tiếng Anh có tâm và có tầm?

Submitted by superthin on 26/04/2020 - 13:14:00
Minh triết như chim cú mèo cover

Để việc học đạt được kết quả, việc bái sư phụ là việc quan trọng hàng đầu. Một khi chọn sai "lò võ" thì võ sinh có khi chỉ học được võ mà thiếu đạo đức, hoặc không đạt gì cả. Tại sao tâm lại đặt trên khả năng thì nó vượt quá phạm vi bài này, ở đây chỉ chia sẻ mẹo tìm được thầy cô dạy tiếng Anh tốt để theo học.

Marketing online cho chính trang web của bạn

Submitted by superthin on 02/01/2020 - 14:35:35
Marketing online làm những gì

Thật kinh hoàng khi bạn nhận ra một khi bạn có một blog, loay hoay với nó một lát, bạn trở thành một blogger. Trở thành blogger toàn thời gian hay không lại là một câu chuyện khác chưa bàn ở đây. Ta chỉ dừng lại ở mức blogger không chuyên có ý thức nâng mức độ học hỏi, nâng cao tay nghề về viết lách, về cách trang trí blog, rồi dùng blog đó để làm chuyện gì khác,... chắc chắn sẽ xảy ra như bất cứ những trò chơi, thú vui khác trong cuộc sống. Bài viết này chia sẻ phần nào con đường đi đến việc làm marketing cho website này.

Young Independent Professionals (yipees) một lực lượng mới đang xuất hiện

Submitted by superthin on 24/08/2019 - 08:08:47
Biểu tượng văn hóa Yipees

Những năm gần đây, ở Việt Nam xuất hiện một lực lượng lao động mới, lực lượng mà có tài năng, đủ chuyên nghiệp để đảm nhận bất cứ vị trí công việc nào cho một công ty nhưng lại không thuộc về một công ty nào, những người như vậy được gọi là yipees. Ngay khi đọc cái này, sẽ có thắc mắc rằng yipees có gì khác với freelancer?

Tự học xóa mù công nghệ

Submitted by superthin on 07/05/2020 - 08:56:17
Tự học công nghệ

Công nghệ làm thay đổi cuộc sống theo hướng tiện nghi, ai cũng biết, tớ cũng biết điều đó. Tớ rất kém về khoản công nghệ, nhưng nhiều người quen biết tớ không hề biết điều đó. Xem ra tớ cũng là một thằng giấu dốt khá giỏi, nhỉ - hihi, mèo khen mèo dài đuôi về độ dốt rồi.

Trải qua một số bài kiểm tra trực tuyến về công nghệ, điểm của tớ rất thấp, thấp đến mức tớ nhìn quanh xem có ai bắt gặp không, chưa yên tâm, tớ còn tắt ngang máy tính. Nếu bạn không tin, tớ cho ngay một ví dụ:

Lừa đảo qua sàn thương mại điện tử uy tín

Submitted by superthin on 16/01/2020 - 11:27:38
Lừa đảo qua sàn thương mại điện tử

Có những sàn thương mại điện tử lớn ở Việt Nam được rất nhiều người biết đến và mua, trong đó Tiki được xem là uy tín nhất. Các sàn khác như: Shopee, Lazada, Sendo, Voso cũng được người tiêu dùng ưa thích, mua sắm khá đông đảo. Những sàn này đã có những biện pháp phòng ngừa lừa đảo cho người mua, người bán, nhưng có những thứ kỹ thuật vẫn chưa thể giải quyết được nếu người dùng không cảnh giác.

Quy trình mua hàng trên một sàn thương mại điện tử

1 - Vào sàn thương mại điện tử tạo một tài khoản người dùng (user hoặc customer account)

Digital literacy - kỹ năng cần thiết trong thời đại 4.0 bốn chấm không

Submitted by superthin on 25/12/2017 - 13:04:55
Digital literacy là gì

Hàng ngày bạn sử dụng điện thoại di động smartphone, máy tính bảng, laptop, máy tính để bàn,... hoặc các thiết bị có nối mạng khác như camera, thiết bị định vị,... có dính dáng, kết nối đến Internet? Nói cách khác, có sử dụng thiết bị điện tử được trang bị kỹ thuật số (để phân biệt với thiết bị điện tử cũ trước đây) thì bạn đã dính dáng đến cái gọi là digital (thuộc về kỹ thuật số).

Chị em Việt nên thôi đánh ghen vì trò đó đang kéo lùi sự tiến bộ của chính các bạn

Submitted by superthin on 20/07/2017 - 12:02:36
Tranh Đông Hồ - đánh ghen

Thưa các bạn, cái ngày hôm nay đã là ngày thuộc về thập kỷ thứ hai của thiên niên kỷ thứ ba kể từ khi áp dụng cách tính lịch (hay được gọi là lịch Gregorian) được dùng phổ biến nhất thế giới hiện nay. Còn theo quan niệm của người Việt, chúng ta đã ở vào năm thứ 2079 + 2017 = 4096.

6 website có nhiều ảnh miễn phí cho dân làm web

Submitted by superthin on 08/04/2020 - 15:58:43
6 dịch vụ web cover

Trên Internet tìm một hình ảnh là không khó tuy nhiên những ảnh bạn tìm có khả năng chất lượng không tốt, ảnh tốt thì lại vướng về bản quyền tác giả. Do đó, trong quá trình thiết kế web bạn hoặc bỏ tiền ra mua hoặc phải kiếm được ảnh ở những kho ảnh miễn phí, yên tâm về bản quyền. Xin giới thiệu 6 website cung cấp ảnh như vậy.

Lại gặp tai nạn với Drupal 8.5.0

Submitted by superthin on 19/03/2018 - 08:23:28
PHP làm tui điên

Gần đây Thin nhận được email từ hệ thống thông báo rằng đã có phiên bản Drupal 8.5.0 mới được phát hành. Mặc dù việc lên một phiên bản mới (khi mà phiên bản cũ có những sự nhúng tay chỉnh chọc vào để làm cái gì đó cho phù hợp với tình hình hoặc đáp ứng nhu cầu riêng cá nhân) là việc rất nản lòng. Nhưng với Thin, chẳng dại gì để bọn hacker tập sự biến website của mình thành nơi để thực hành, khoe mẽ.