Core Web Vitals là gì

Core Web Vitals là gì – Checklist 21 yếu tố – SerpSeoAZ

Core Web Vitals là gì? Tầm quan trọng và danh sách kiểm tra để thỏa mãn các chỉ số của Core Web Vitals là gì? Đó là điều mà tôi sẽ đề cập trong bài viết này.

Core Web Vitals đang và đã trở thành một đề tại cực kỳ nóng trong ngành SEO. Từ tháng 10, google đã thông báo trước cho chúng ta rằng giữa tháng 5 sẽ có một bản cập nhật thuật toán lớn liên quan tới Core Web Vitals. Cách tốt nhất để chuẩn bị trang web của bạn cho bản cập nhật trải nghiệm trang Google sắp tới là tìm hiểu về Core Web Vitals.

Sau đây sẽ là checklist Core Web Vitals bao gồm 21 yếu tố cần kiểm tra, những giải thích và cách xử lý cho từng trường hợp xảy ra!

Core Web Vitals là gì?

Core Web Vitals là một khái niệm khá mới mẻ, nó được google phát kiến từ tháng 10. Và họ đã báo trước cho những người làm SEO, các quản trị website rằng giữa tháng 5 sẽ có một đợt update thuật toán liên quan tới trải nghiệm người dùng rất lớn.

Một điều không thường thấy ở google! 

Dù vậy, theo thông báo mới nhất từ google về thuật toán core, họ đã rời ngày update lại 1 tháng, có nghĩa là thời gian update xảy ra vào trung tuần tháng 6 năm 2021.

Google cập nhật core web vitalsvào tháng 6

Core Web Vitals là một tập hợp các yếu tố mà google cho rằng, chúng quan trọng đối với trải nghiệm người dùng trên website. Mà trải nghiệm người dùng chính là User Experience (UX), thứ mà chúng ta hay nhắc tới khi SEO. 

Core Web Vitals được đo lường bởi 3 chỉ số lớn bao gồm Largest Contentful Paint (LCP), First Input Delay (FID) và Cumulative Layout Shift (CLS). Những chỉ số này là gì và kiểm tra chúng như thế nào, lát nữa chúng ta sẽ tìm hiểu chi tiết hơn. 

Tại sao Core Web Vitals lại quan trọng?

Không cần phải thắc mắc, điều quan trọng đầu tiên đó là vào giữa tháng 6, google sẽ update thuật toán liên quan tới Core Web Vitals. Đồng nghĩa với việc, google sẽ đưa chỉ số Core web vitals làm yếu tố xếp hạng chính thức của google

Và quan trọng hơn đó là trải nghiệm người dùng, điều mà chúng ta, google và tất cả mọi người hướng tới. Bạn hãy nhìn vào những chỉ số mà Google PageSpeed Insights hướng dẫn.

Những chỉ số này sẽ giúp bạn tạo hoặc sửa đổi trang web của mình theo những cách cho phép người dùng dễ dàng truy cập thông tin, khuyến khích họ tham gia sâu hơn và có thể, chuyển đổi dành cho bạn.

Chuan-doan-Core-Web-Vitals-tu-google-pagespeed-Insights

Trước tiên, hãy soi vào 200 yếu tố ảnh hưởng tới thứ hạng website do Brian Dean tổng hợp, trải nghiệm người dùng là một trong những yếu tố đó. 

Công cụ (tools) kiểm tra Core Web Vitals

Để đo lường Core Web Vitals bạn chẳng thể nào làm bằng tay, các công cụ tuyệt vời nhất sẽ giúp bạn làm điều đó. Dưới đây là các công cụ bạn sẽ cần để thực hiện kiểm tra Core Web Vitals

Google PageSpeed ​​Insights

PageSpeed ​​Insights (PSI) báo cáo về hiệu suất trong phòng thí nghiệm và hiện trường của một trang trên cả thiết bị di động và máy tính để bàn. Sau khi có Core Web Vitals, PSI cũng đã nâng cấp để sử dụng Lighthouse 6.0 để hỗ trợ đo Core Web Vitals

Do-luong-Core-Web-Vitals-bang-Pagespeed-Insights

Google Search Console (báo cáo Core Web Vitals)

Việc sử dụng Google Search Console cho một báo cáo chính xác nhất những gì bạn đang gặp phải. Dù không quá chi tiết nhưng nó giúp bạn xác định các nhóm của các trang trên website của bạn cần được quan tâm.

Do-luong-Core-Web-Vitals-bang-google-search-console

Công cụ dành cho nhà phát triển của Chrome – Chrome DevTools – LightHouse & Performance

Đây là một công cụ tuyệt vời nhưng hơi khá rắc rối để mở nó. Có một vài cách để mở Chrome DevTools (bạn phải mở website của bạn trước)

  • Nhấn tổ hợp phím Ctrl + Shift + J
  • Click chuột phải sao đó chọn “kiểm tra”
  • Vào tiện ích mở rộng và chọn Developer Tools
Do luong Core Web Vitals bang DevTools

Nếu bạn muốn kiểm tra cấu trúc, trong bản hiển thị Chrome DevTools, di chuyển đến Lighthouse và chọn Ctrt + Shift + E

Kiem-tra-Lighthouse-tren-DevTools

Trong bảng hiển thị của Chrome DevTools, di chuyển đến LightHouse và chọn Generate Report

Kiem-tra-Performance-tren-DevTools

WebPageTest 

Webpagetest kiểm tra trải nghiệm thực tế của người dùng với các vị trí toàn cầu

Do-luong-Core-Web-Vitals-bang-webpagetest

Tiện ích mở rộng Web Vitals của Chrome

Web Vitals là tiền ích mở rộng Chrome, với hơn 70 ngàn người sử dụng, nó đo lường Core Web Vitals trong thời gian thực trên máy tính để bàn.

Do-luong-Core-Web-Vitals-bang-Tien-ich-mo-rong-Web-Vitals

GTmetrix

GTmetrix trước đây là một công cụ đo tốc độ website hàng đầu thế giới. Với việc cập nhật Core Web Vitals, GTmetrix đã nâng cấp toàn diện và áp dụng Lighthouse 6.0. Đây là một công cụ giúp bạn tối ưu Core Web Vitals hiệu quả

Do-luong-Core-Web-Vitals-bang-GTmetrix

Danh sách 21 yếu tố kiểm tra – Checklist Core Web Vitals 

Danh sách kiểm tra này được sắp xếp theo 3 chỉ số LCP, FID và CLS. Nó chứa tất cả những điều mà bạn cần kiểm tra về Core Web Vitals, về trải nghiệm người dùng trên trang. 

Largest Contentful Paint (LCP) – Checklist LCP

Chỉ số LCP:  báo cáo thời gian hiển thị cho khối văn bản hoặc hình ảnh lớn nhất trong chế độ xem trước khi có bất kỳ tương tác nào từ người dùng. LCD < 2.5 thì trải nghiệm người dùng trên trang sẽ ở mức độ tốt nhất

Tối ưu LCP nhỏ hơn 2.5

1. Kiểm tra thời gian phản hồi ban đầu của máy chủ

Mô tả về thời gian phản hồi của máy chủ

Thời gian phản hồi của máy chủ là thời gian trình duyệt nhận byte đầu tiên để phản hồi lại yêu cầu của trình duyệt. Thời gian phản hồi của máy chủ chậm có thể ảnh hưởng tiêu cực đến tài nguyên giao diện người dùng của bạn vì khách truy cập của bạn có thể chỉ thấy một trang trống trong khi trình duyệt đang chờ phản hồi từ máy chủ.

thời gian phản hồi của máy chủ

Như tôi đã nói, khách truy cập sẽ thấy một màn hình trống trong khi chờ máy chủ của bạn phản hồi. Khi điều này xảy ra, khách truy cập của bạn thất vọng và rời khỏi trang của bạn hoàn toàn.

Bạn có muốn điều này xảy ra không, hãy cùng tôi tìm hiểu cách giải quyết nhé!

Giải pháp giảm thời gian phản hồi của máy chủ

  • Kiểm tra xem thời gian phản hồi máy chủ của website có chậm không?
  • Tối ưu hóa mã ứng dụng của bạn
  • Triển khai bộ nhớ đệm phía máy chủ
  • Nâng cấp phần cứng máy chủ để có thêm tài nguyên CPU hoặc bộ nhớ

Nếu như chừng đó vẫn chưa thỏa mãn, hãy xem 25 cách giảm thời gian phản hồi của máy chủ wordpress của tôi. Phần lớn những cách mà tôi đưa ra áp dụng cho nền tảng WordPress, tất nhiên có vài cách có thể áp dụng cho mọi nền tảng.

2. Bạn có sử dụng CDN (mạng phân phối nội dung) không?

Mô tả về CDN

Mạng phân phối nội dung CDN về cơ bản là một mạng lưới các máy chủ trải rộng khắp thế giới, được phân phối theo địa lý làm việc cùng nhau để cung cấp phân phối nhanh chóng các tài nguyên trang web. Mạng phân phối nội dung giảm độ trễ bằng cách lưu vào bộ nhớ đệm các tài nguyên tĩnh của trang trên các máy chủ khác nhau trên thế giới. 

Sử dụng CDN

Tùy thuộc vào vị trí của khách truy cập, nội dung trang của bạn được phục vụ từ máy chủ / nút CDN gần nhất. Một trang web sử dụng CDN sẽ tải nhanh hơn vì người dùng sẽ không phải đợi các yêu cầu mạng đến các máy chủ đặt ở xa

Giải pháp với CDN

  1. Kiểm tra xem website của bạn đã sử dụng CDN hay chưa
  2. Nếu trang web của bạn chưa có CDN, tôi khuyên bạn nên đăng ký một CDN cho website của mình. 

SerpSeoAZ đang sử dụng mạng CDN miễn phí của Cloudflare, đó cũng là một giải pháp. Ngoài ra, bạn cũng có thể sử dụng CDN của Netlify, Amazon CloudFront.

3. Kiểm tra xem nội dung tĩnh có được lưu vào bộ nhớ đệm không?

Mô tả việc lưu nội dung tĩnh vào bộ nhớ đệm

Việc lưu nội dung tĩnh vào bộ nhớ đệm giúp cải thiện thời gian tải trang khi truy cập lặp lại bằng cách lưu trữ cục bộ các tệp này trong trình duyệt của người dùng. Khi trình duyệt tải một trang, trình duyệt phải tải xuống tất cả các tài nguyên trang của bạn như HTML, CSS, JavaScript và hình ảnh

Khi bộ nhớ đệm được bật, trình duyệt có thể truy xuất các thông tin như CSS, JS, hình ảnh , … từ bộ nhớ cục bộ này. Không phải mất công một lần nữa tuy xuất lại từ bộ nhớ từ máy chủ của trang, quá mất thời gian.

Bộ nhớ cache sẽ lưu trữ bản sao cục bộ của các tài nguyên này trong bộ nhớ cache của nó. Vì vậy, đối với người dùng cũ, trang của bạn sẽ tải nhanh hơn khá nhiều

Giải pháp khi nội dung tĩnh chưa được lưu vào bộ nhớ đệm

  1. Kiểm tra xem trang của bạn có nội dung tĩnh nào đã được lưu vào bộ nhớ đệm hay chưa
  2. Định cấu hình các proxy ngược, chẳng hạn như Varnish hoặc nginx để chúng hoạt động giống như một máy chủ bộ nhớ cache
  3. Bạn có thể sử dụng CDN để giải quyết vấn đề này
  4. Nếu bạn đang sử dụng wordpress, một vài plugin sẽ giúp bạn (Wp Rocket chẳng hạn)

4. Kết nối trước với các nguồn bắt buộc – Hạn chế tác động của bên thứ 3

Mô tả việc kết nối trước với các nguồn bắt buộc

Muốn thực hiện nhiều chức năng như chat, theo dõi traffic, gọi trực tiếp, … chúng ta cần cài các mã từ một bên thứ 3 vào website. Và chính điều này làm cho website trở nên nặng nề và trải nghiệm người dùng cực kém. 

Giảm tác động của bên thứ 3

Các yêu cầu của bên thứ ba có thể làm chậm tải trang vì một số lý do như mạng chậm, tra cứu DNS lâu, chuyển hướng nhiều lần, máy chủ chậm, CDN hoạt động kém, v.v. Chúng mất rất nhiều thời gian để tải và bạn cần phải tối ưu nó ngay. 

Giải pháp hạn chế tác động của bên thứ 3

  1. Kiểm tra xem website của bạn có sử dụng nhiều các yêu cầu của bên thứ 3 không và chúng có ảnh hưởng nhiều tới LCP không
  2. Thêm preconnect hoặc dns-prefetch vào các thẻ liên kết của tài nguyên bên thứ ba tùy thuộc vào việc tài nguyên đó có quan trọng hay không.

Sử dụng preconnect giúp trình duyệt ưu tiên các kết nối quan trọng của bên thứ ba và tăng tốc độ tải trang của bạn

Để đạt được hiệu suất tốt nhất, hãy sử dụng tối đa 2 preconnects cho các miền quan trọng nhất của bên thứ ba.

<link rel = “preconnect” href = “https://example.com” >

Ví dụ: nếu facebook và zalo là 2 trang quan trọng nhất để bạn kết nối thì thay https://chat.zalo.me/https://www.facebook.com/ vào https://example.com

Đối với các tài nguyên bên thứ ba khác, bạn có thể sử dụng dns-prefetch để giảm thời gian tra cứu DNS.

<link rel = “dns-prefetch” href = “https://example.com” >

5. Loại bỏ hành vi chặn hiển thị – Loại bỏ tài nguyên chặn kết xuất

Mô tả tài nguyên chặn hiển thị

Tài nguyên chặn hiển thị là các tập lệnh, biểu định kiểu và nhập HTML chặn hoặc trì hoãn trình duyệt hiển thị nội dung trang lên màn hình. Đó có thể là màu nền, đường viền, văn bản hoặc hình ảnh

Thực tế khi trình duyệt tải trang, nó sẽ phân tích từng dòng mã HTML của trang. Và việc loại bỏ các tài nguyên chặn hiển thị sẽ giúp cho trình duyệt thực thi, phân tích ý chính trước khi chúng chuyển sang phần còn lại. Từ đó dẫn tới tốc độ tải trang sẽ nhanh hơn

Cách loại bỏ tài nguyên chặn hiển thị 

  1. Di chuyển tất cả <script> và <link> các thẻ vào cuối mã HTML của bạn
  2. Thêm thuộc tính không đồng bộ: có nghĩa là bạn đặt thêm các thuộc tính như async hoặc defer đi kèm với các thẻ <script> và <link>

 Đối với <script> thẻ, hãy thêm async hoặc defer vào thẻ:

<script src = “/scripts/funcity.js” async > </script>

<script src = “/scripts/funcity.js” defer > </script>

 Đối với <link rel=”import”> thẻ, hãy thêm async vào thẻ:

<link rel = “import” href = “file.html” async >

Tuy nhiên, không phải website nào cũng có thể chèn 2 thuộc tính này, nếu tệp lệnh của bạn không phù hợp, website của bạn sẽ bị phá vỡ. Ngoài ra async và defer chỉ nên được áp dụng cho các tài nguyên không quan trọng, không cần thiết cho việc hiển thị ra bên ngoài của bạn

Một số cách khác để loại bỏ tài nguyên chặn hiển thị trên stylesheets, bạn có thể tham khảo

  1. Chia CSS theo loại phương tiện như máy tính bảng, thiết bị di động, máy tính để bàn, …
  2. Tối ưu hóa các đường dẫn hiển thị quan trọng (một chuỗi các bước trình duyệt đi qua để chuyển đổi HTML, CSS, và JavaScript vào điểm ảnh trên màn hình)
  3. Kết hợp nhiều tệp CSS thành một tệp (hoặc hai tệp, tùy thuộc vào kích thước CSS của bạn) vì mỗi tệp CSS bổ sung được trang của bạn sử dụng sẽ tăng thời gian tải trang
  4. Thêm CSS và / hoặc mã JavaScript trực tiếp vào tệp HTML chứ không để riêng biệt. Đây gọi là CSS nội tuyến

6. Kiểm tra xem kích thước hình ảnh phù hợp chưa?

Mô tả tác động của kích thước ảnh không phù hợp

Mọi người tải lên website những hình ảnh có độ phân giải đầy đủ hoặc kích thước lớn, điều này dẫn tới kích thước hình ảnh không phù hợp với kích thước hiển thị. Hình ảnh chất lượng cao, độ phân giải cao có thể tạo ra kích thước tệp rất lớn gây cho trình duyệt mất nhiều thời gian để tải xuống. 

Nếu kết nối chậm, hình ảnh hiển thị sẽ lâu gây cảm giác khó chịu cho người đọc và họ sẽ rời đi. Ngoài ra việc trình duyệt cần nhiều công việc hơn để thay đổi kích thước hình, điều này làm tăng thời gian thực thi của trình duyệt, ảnh hưởng trực tiếp tới CLS.

Và cuối cùng, trang rất chậm!

Cách xử lý việc tải ảnh có kích thước không phù hợp

  1. Kiểm tra xem có hình ảnh nào có kích thước không phù hợp không
  2. Xử lý theo một số mẹo sau
  • Thay đổi kích thước hình ảnh theo cách thủ công: hãy chú ý xem kích thước hiển thị tối đa và tối thiểu trên trang web của bạn. Sau đó thay đổi kích thước hình ảnh sao cho phù hợp với kích thước hiển thị trên website
  • Sử dụng thẻ srcset: bạn tạo các kích thước hình ảnh khác nhau và sau đó sử dụng thẻ srcset để xác định thời điểm hình ảnh được phân phát. Thẻ này có thể cung cấp cho trình duyệt các biến thể khác sau và chỉ thị nó sử dụng các biến thể sao cho phù hợp với tình hình.
  • Sử dụng CDN Hình ảnh: CDN hình ảnh là các dịch vụ chuyên về chuyển đổi, tối ưu hóa và phân phối hình ảnh, nó có thể giảm 40-80% kích thước tệp hình ảnh
  • Thay thế hình ảnh raster bằng vector

Các định dạng raster phổ biến trên web là JPEG, PNG và GIF.

Các hình ảnh vector có kích thước tệp nhỏ hơn, có thể được thu nhỏ đến bất kỳ kích thước nào cần thiết mà không làm giảm chất lượng do bản chất thuật toán của chúng. Đây là một giải pháp hiệu quả giúp bạn tải lên hình ảnh phù hợp với kích thước hiển thị

7. Kiểm tra xem website của bạn đã mã hóa hình ảnh hiệu quả chưa

Mô tả về mã hóa hình ảnh

Mã hóa hình ảnh làm giảm kích thước trang của bạn và góp phần tải trang nhanh hơn. Chính xác hơn thì chúng ta có thể gọi đó là nén hình ảnh. Hình ảnh không được nén sẽ lãng phí băng thôngtăng thời gian tải trang vì trình duyệt phải dành nhiều thời gian hơn để tải chúng xuống

Mã hóa hình ảnh có thể giảm kích thước tệp hình ảnh và tăng tốc độ tải xuống hình ảnh để cuối cùng tải trang nhanh hơn. Có hai thuật toán nén ảnh đó là nén ảnh không mất chất lượng và nén ảnh và giảm luôn chất lượng ảnh.

Hình ảnh càng lớn thì nén ảnh càng khó (mất chất lượng)

Giải pháp mã hóa hình ảnh hiệu quả

  1. Kiểm tra xem có hình ảnh nào trên website của bạn chưa được mã hóa không
  2. Giảm kích thước bằng các công cụ sửa đổi hình ảnh như paint, paint 3D, …
  3. Nén ảnh bằng các công cụ miễn phí trên web
  4. Sử dụng CDN Hình ảnh để cung cấp hình ảnh được nén tối ưu, thay đổi kích thước theo khung nhìn của khách truy cập và được phân phát từ vị trí địa lý gần nhất với khách truy cập của bạn

8. Kết hợp hình ảnh bằng cách sử dụng CSS sprites

Mô tả về việc kết hợp hình ảnh bằng cách sử dụng CSS sprites

Các hình ảnh nhỏ như biểu tượng, biểu trưng và các yếu tố đồ họa khác có thể được kết hợp thành một hình ảnh duy nhất. Kết hợp hình ảnh này bằng cách sử dụng CSS sprites làm giảm số lượng yêu cầu được thực hiện, trình duyệt sẽ dành ít thời gian để tải ảnh hơn.

Hướng dẫn kết hợp hình ảnh bằng cách sử dụng CSS sprites

  1. Kiểm tra xem bạn có hình ảnh nào cần phải kết hợp không
  2. Kết hợp các hình ảnh nhỏ bằng công cụ tạo sprite CSS ví dụ cssspritetool.com
  3. Thêm mã CSS và HTML vào trang web của bạn

9. Cung cấp hình ảnh ở các định dạng thế hệ tiếp theo

Mô tả định dạng hình ảnh thế hệ tiếp theo

Định dạng hình ảnh thế hệ tiếp theo cung cấp các đặc tính nén và chất lượng vượt trội so với các định dạng cũ hơn như JPEG hoặc PNG. Vậy các định dạng hình ảnh thế hệ tiếp theo là gì:

  • WebP 
  • JPEG 2000 
  • JPEG XR ( 

Đặc biệt, tất cả các định dạng này đều cung cấp hỗ trợ nén không mất dữ liệu, nén mất dữ liệu và hình ảnh động.

Cách chuyển sang định dạng hình ảnh thế hệ tiếp theo

Nếu bạn muốn chuyển hình ảnh sang WebP thì có thể thực hiện theo 3 cách sau:

  1. Chuyển đổi thủ công hình ảnh của bạn sang định dạng WebP bằng công cụ chuyển đổi WebP trực tuyến webp-converter hoặc Sử dụng bộ chuyển đổi WebP hàng loạt bằng tiện ích chrome Bulk Images to WebP Converter
  2. Sử dụng Photoshop 
  3. Sử dụng JavaScript Node.js để chuyển đổi hình ảnh JPEG và PNG sang WebP

Từ các yếu tố thứ 6, 7, 8, 9 các bạn sẽ được cung cấp đầy đủ các hướng dẫn cần thiết để tối ưu hóa hình ảnh thông qua một bài viết khá chi tiết của tôi “20 cách tối ưu hóa hình ảnh chuẩn SEO“. Đó là một tài liệu hữu ích mà các bạn nên đọc

10. Sử dụng các định dạng video cho nội dung hoạt hình

Mô tả cách sử dụng định dạng video

Có phải bạn thường thấy các video cực ngắn hoặc hiểu ảnh động phải không? 

Đó là Gif, rất tiện nhưng cũng khá nặng. Thay vì sử dụng các ảnh GIF lớn, hãy cân nhắc việc cung cấp nội dung động qua các tệp video MPEG4 hoặc WebM.

Các tệp video có thể được tải xuống nhanh hơn nhiều bằng trình duyệt, tăng tốc độ tải trang của bạn và cải thiện trải nghiệm trang của khách truy cập

Giải pháp chuyển sang định dạng video

  1. Kiểm tra xem website của bạn có đang sử dụng Gif và dẫn tới web trở nên nặng, LCP cao ngất ngưỡng hay không
  2. Sử dụng công cụ chuyển đổi trực tuyến như ezgif.com để chuyển đổi GIF của mình thành MPEG4
  3. Sử dụng công cụ dòng lệnh đa nền tảng như FFmpeg để chuyển đổi GIF của mình thành MPEG4 hoặc WebM

First Input Delay (FID) – Độ trễ nhập liệu đầu tiên

FID đo lường mức độ tương tác của một trang web, trải nghiệm người dùng tốt nếu các trang của nó có điểm FID bằng hoặc dưới 100 mili giây. 

FID bằng hoặc dưới 100 ms

11. Giảm thời gian thực thi JavaScript

Mô tả giảm thời gian thực thi JavaScript

Giảm thời gian thực thi JavaScript đề cập đến việc giảm lượng thời gian dành cho việc phân tích cú pháp , biên dịchthực thi các tệp JavaScript. Theo mặc định, JavaScript thực thi trên chuỗi chính và khi điều này xảy ra, trình duyệt không thể thực thi các tác vụ khác.

Càng ít mã JavaScript trên trang web, trình duyệt cần ít thời gian hơn để thực thi JS và nó có thể phản hồi nhanh hơn với bất kỳ tương tác nào của người dùng. Bằng cách giảm lượng JavaScript không sử dụng, bạn có thể cải thiện cả chỉ số LCP và FID

Nếu không giảm thời gian thực thi JavaScript

  • Thời gian tải xuống lâu hơn
  • Không phản hồi với đầu vào của người dùng
  • Trì hoãn đáng kể số liệu Thời gian tương tác
  • Tiêu thụ bộ nhớ cao hơn

Giải pháp giảm thời gian thực thi JavaScript

  1. Kiểm tra xem trang web của bạn có cần giảm thời gian thực thi Javascript không
  2. Chia gói JavaScript của bạn thành các tệp nhỏ hơn chỉ để mã quan trọng (tức là mã cần thiết cho nội dung trong màn hình đầu tiên và tương tác với người dùng) được thực thi trong quá trình tải trang đầu tiên
  3. Tìm và loại bỏ mã chết trên trang web của bạn để giảm thời gian thực thi JavaScript và giữ cho chuỗi chính ít bị chiếm dụng hơn
  4. Áp dụng tải tức thì với mẫu PRPL
  5. Thu nhỏ và nén mã JavaScript: làm giảm kích thước tệp của chúng bằng cách xóa nhận xét, mã thừa và khoảng trắng. Trình duyệt không cần các phần tử này để tải trang của bạn và tải trọng JavaScript thấp hơn sẽ giảm thời gian phân tích cú pháp tổng thể của chúng.

12. Giảm thiểu công việc của chuỗi chính

Mô tả chuỗi chính

Chuỗi chính là nơi trình duyệt xử lý hầu hết các tác vụ liên quan đến tải trang của bạn. Tốc độ tải trang của bạn phụ thuộc vào lượng công việc mà chuỗi chính cần thực hiện.

  • Xử lý bố cục
  • Phân tích cú pháp CSS và HTML
  • Xây dựng mô hình đối tượng tài liệu (DOM)
  • Thực thi tất cả JavaScript (theo mặc định)

Giảm thiểu công việc của chuỗi chính giúp giải phóng trình duyệt của bạn để xử lý các tác vụ khác cần thiết cho việc tải trang của bạn.

Giải pháp giảm thiểu công việc của chuỗi chính

  1. Tối ưu hóa JavaScript của bên thứ ba (xem số 14)
  2. Ghi nợ bộ xử lý đầu vào của bạn
  3. Sử dụng công cụ web
  4. Giảm thời gian thực thi JavaScript (đọc lại số 11)
  5. Giảm thời gian phân tích cú pháp CSS

13. Xóa JavaScript không sử dụng

Mô tả việc xóa JavaScript không sử dụng

JavaScript không quan trọngJavaScript chết là 2 loại bạn cần phải loại bỏ. Mỗi khi tải một trang, trình duyệt phải tải xuống, phân tích cú pháp và thực thi các tệp JavaScript trước khi nó có thể hiển thị bất kỳ thứ gì trên trang.

Loại bỏ JavaScript không sử dụng có thể làm giảm hành vi chặn hiển thị để tăng tốc độ tải trang của bạn và cải thiện trải nghiệm người dùng trên trang

Giải pháp loại bỏ JavaScript không sử dụng

  1. Kiểm tra xem trang web của bạn có tệp JavaScript nào đang chặn hiển thị không?
  2. Phân tách mã tìm thấy thành tệp javascript quan trọng và không quan trọng
  3. Loại bỏ mã JavaScript không được sử dụng cho việc hiển thị (mã JavaScript chết) bằng quy trình tree shaking

14. Giảm tác động của mã bên thứ ba

Mô tả tác động của bên thứ 3

Như tôi đã từng đề cập ở số … , mã của bên thứ ba là một mối họa không tưởng. Ngoài việc tăng lên LCP, mã của bên thứ 3 còn tác động tiêu cực tới PID. Các tài nguyên này thường gây ra hiệu suất web kém, vì chúng có thể chứa các tập lệnh chặn luồng chính của bạn và ngăn không cho các tác vụ khác được thực hiện

Cụ thể, tác hại của mã bên thứ ba sẽ làm cho

  • Người dùng của bạn có thể thấy một trang trống trong một thời gian dài.
  • Người dùng của bạn không thể tương tác với trình duyệt cho đến khi các tập lệnh thực thi xong.
  • Làm tăng số lượng yêu cầu mà trình duyệt của bạn phải xử lý.

Giải pháp loại bỏ các phiền toái từ mã bên thứ 3

  1. Kiểm tra xem các mã trang thứ 3 đang tồn tại trên website của bạn
  2. Tìm và lọc ra các mã bên thứ 3 thực sự cần thiết. Không quan trọng bạn hãy loại bỏ chúng ngay khi có thể
  3. Trì hoãn việc phân tích cú pháp hoặc tải JavaScript của bên thứ ba để giảm kích thước tải xuống ban đầu, cho phép các tài nguyên khác được tải xuống song song
  4. Sử dụng preconnect và dns-prefetch như đã đề cập ở phần LCP
  5.  Lazy-loading (tải chậm) các tài nguyên của bên thứ 3
  6. Tự lưu trữ các tập lệnh của bên thứ ba để giảm thời gian tra cứu DNS và thời gian lặp lại

Cumulative Layout Shift (CLS)

Sự thay đổi bố cục tích lũy (CLS) đo độ ổn định trực quan của một trang web. CLS đo lường sự thay đổi bất ngờ của các phần tử web trong khi trang đang được hiển thị. CLS < 1 sẽ được xem là cung cấp trải nghiệm người dùng tốt. CLS càng cao thì càng dẫn đến trải nghiệm người dùng tiêu cực.

CLS nhỏ hơn 0.1 sẽ được xem là cung cấp trải nghiệm người dùng tốt

15. Kiểm tra xem các phần từ hình ảnh, video có được chỉ định kích thước hay không?

Mô tả hình ảnh và video không có kích thước được chỉ định

Hình ảnh và video không có kích thước được chỉ định (đặc biệt là trong phần trong màn hình đầu tiên) có thể gây ra thay đổi bố cục

Giải pháp

Xem bài viết trên Css-tricks về hộp tỉ lệ khung hình để hiểu rõ và biết cách giải quyết

16. Kiểm tra xem có không gian tĩnh dành riêng cho vùng quảng cáo hay không. 

Mô tả về quảng cáo

Quảng cáo là một trong nhưng nguyên nhân chính dẫn tới lỗi bố cục trên trang web. Khi kiểm tra Core Web Vitals, bạn sẽ thấy kích thước DOM khá lớn và nguyên nhân là chúng ta chèn vùng chứa quảng cáo vào.

Cách tốt nhất để tránh những kiểu thay đổi bố cục này là dành không gian tĩnh cho vùng quảng cáo. 

Giải pháp sự ảnh hưởng của quảng cáo

  1. Kiểm tra xem có lỗi nào đó liên quan tới Core Web Vitals liên quan tới quảng cáo không?
  2. Đặt trước kích thước vùng quảng cáo (tốt nhất là lớn nhất) trước khi tải thư viện quảng cáo.
  3. Di chuyển quảng cáo xuống dưới cùng hoặc ra khỏi khung nhìn.
  4. Sử dụng trình giữ chỗ khi không có quảng cáo nào có sẵn để hiển thị

17. Kiểm tra xem đủ dung lượng dành cho nhúng vào khung nội tuyến hay không

Mô tả

Nếu bạn những các mã như nhúng iframe, đoạn mã HTML nội tuyến hoặc HTML dự phòng với thẻ JS thì sẽ dễ dẫn tới thay đổi bố cục website. Mà nguyên nhân chủ yếu là không đủ dung lượng dành cho chúng

Giải pháp

  • Tính toán trước không gian cần thiết để nhúng với dự phòng hoặc trình giữ chỗ.
  • Xác định kích thước của bản nhúng bằng cách kiểm tra nó với DevTools.
  • Tạo kiểu một trình giữ chỗ có tính đến các kích thước của phần nhúng được kiểm tra.

18. Tránh chèn nội dung mới lên trên nội dung hiện có

Mô tả ảnh hưởng của việc chèn nội dung mới lên nội dung hiện có

Nếu bạn chèn các nội dung mới như biểu ngữ và biểu mẫu lên trên các nội dung đã có như đăng ký bản tin, hộp nội dung liên quan hoặc thông báo cookie thì sẽ dẫn đến thay đổi bố cục tích lũy. Hãy thử và tránh chèn nội dung động bên trên nội dung hiện có trừ khi đáp lại sự tương tác của người dùng

Giải pháp

Bạn hãy làm tương tự như phần quảng cáo: 

  • Đặt trước kích thước của biểu ngữ hoặc biểu mẫu
  • Sử dụng một trình giữ chỗ khi không có biểu ngữ để hiển thị

19. Kiểm tra xem font chữ dự phòng có được hoán đổi bằng phông chữ mới hay không

Mô tả

FOUT là flash của văn bản chưa được định dạng mà bạn nhận được khi sử dụng @ font-face trong Firefox và Opera, nó có thể xảy ra trong quá trình tải xuống và hiển thị phông chữ có thể gây ra thay đổi bố cục. Và nó xuất hiện xuất hiện khi phông chữ dự phòng trên một trang web được hoán đổi bằng một phông chữ mới trong khi tải

 Giải pháp

20. Ngăn chặn Flash của văn bản ẩn (FOIT)

Mô tả

Flash of Invisible Text (FOIT) là một vấn đề phổ biến khác có thể gây ra sự thay đổi bố cục trên một trang web. Khi trình duyệt thấy có một font chữ áp dụng cho một văn bản, nó sẽ đợi cho tới khi font chữ được tải xuống.

Sau khi tải xuống hoàn tất, phông chữ tùy chỉnh sẽ được áp dụng ngay lập tức, và trong quá trình đó, văn bản sẽ bị ẩn.

Giải pháp:

Bạn có thể tải trước webfonts cần thiết ngay lập tức trong quá trình tải trang bằng cách thêm thẻ liên kết sau vào tiêu đề HTML của bạn:

<link rel = “preload” href = “/ webfontname” as = “font” type = “font / format” crossorigin >

  • “/ webfontname” là tên của webfont mà bạn đang tải.
  • format:  đề cập đến định dạng webfont
  • Sử dụng thuộc tính font-display
  • Nếu bạn đang sử dụng Google webfonts trên trang của mình, bạn có thể thêm font-displaychức năng bằng cách thêm &display=swaptham số vào cuối URL webfont trong CSS của bạn.

21. Tránh các hoạt ảnh không được tổng hợp

Mô tả

Hoạt ảnh không kết hợp là một kết xuất buộc trình duyệt quay lại bước trước đó (JavaScript / CSS, Style, Paint và Layout), điều này làm tăng mức độ cần thiết của các phép tính và do đó kéo dài thời gian kết xuất.

Việc tránh các hoạt ảnh không được tổng hợp có thể tăng tốc độ tải trang của bạn và ngăn chặn tình trạng dồn trang, tức là trang của bạn bị đơ hoặc có vẻ không ổn định về mặt hình ảnh khi tải.

Giải pháp

Tránh các hoạt ảnh không được tổng hợp

Suy nghĩ cuối cùng về Core Web Vitals

Core Web Vitals là một yếu tố rất đặc biệt, nó được google thông báo trước rằng giữa tháng 5 sẽ update thuật toán cốt lõi liên quan và đưa vào làm một yếu tố xếp hạng trực tiếp. Một điều không thường thấy mỗi khi google update thuật toán cốt lõi, thường họ sẽ không báo trước, dù sao họ cũng cho chúng ta thời gian để chuẩn bị.

Với 21 yếu tố cần kiểm tra ở trên, bạn có thể thấy rằng gần như 100% sẽ liên quan tới code. Nếu như bạn đang sử dụng wordpress, mọi thứ sẽ tốt khi bạn sử dụng các plugin, nếu như web code tay, mọi thứ sẽ rất phức tạp. Như SerpSeoAZ của tôi, mọi thứ xây dựng lên bằng wordpress, vì vậy khá đơn giản.

Ở Việt nam, phần lớn các doanh nghiệp thuê các đơn vị ngoài Code Web và khi tối ưu Core Web Vitals sẽ phải mất một mớ tiền cho code. Với tôi, tôi đã gặp cả 4 đến 5 trang web có Core Web Vitals rất tệ và đều cần liên hệ với đối tác code để xử lý, rất phiền phức.

Dù sao để đối phó với các cập nhật của google liên quan tới Core Web Vitals vào trung tuần tháng 6 tới, bạn nên sửa đổi sớm.

Cập nhật thuật toán Core Web Vitals vào giữa tháng 6 năm 2021 không phải là một sự trừng phạt. Nhưng rất có thể, trong cùng một ngách, bên nào làm tốt thì bên đó sẽ hưởng lợi trên bảng xếp hạng công cụ tìm kiếm của google (SERP).

Leave a Comment

Email của bạn sẽ không được hiển thị công khai.