Theo trải nghiệm trang thông báo gần đây của Google sẽ là một phần trong hệ thống xếp hạng của họ từ giữa tháng 6 năm 2021 và các chỉ số quan trọng của web cốt lõi sẽ là một trong những tín hiệu sâu sắc. Tuy nhiên, kết quả của bản cập nhật sẽ được hiển thị vào cuối tháng 8 năm nay. Đây là một tin tốt vì bạn đang có thêm thời gian để bắt đầu cải thiện điểm số quan trọng trên web cốt lõi của mình. Vì vậy, bạn sẽ làm điều đó như thế nào?

Trước khi bạn tìm hiểu các cách cải thiện các quan điểm web cốt lõi, hãy cho chúng tôi hiểu các quan điểm web cốt lõi là gì.

Core Web Vitals là gì?

Google đã phát triển các tín hiệu trải nghiệm trang để đánh giá trải nghiệm người dùng trên các trang web. Core Web Vitals nằm trong số nhiều tín hiệu hướng dẫn chủ sở hữu trang web tối ưu hóa chất lượng trải nghiệm người dùng để đạt được thành công lâu dài trên web.

Bằng cách định lượng trải nghiệm trang web của bạn, bạn sẽ không chỉ xếp hạng tốt hơn trên các trang tìm kiếm của công cụ tìm kiếm Google mà còn cung cấp cho người dùng sự dễ dàng và hứng thú khi khám phá trang web của bạn.

Các lõi Web Vitals bao gồm ba số liệu đo lường trang web của bạn trên các thông số và sự giúp đỡ của họ, bạn tìm thấy nếu trang cung cấp trải nghiệm người dùng tốt hơn:

• Sơn có nội dung lớn nhất (LCP): Nó đo thời gian cần thiết để trang của bạn tải hoàn toàn. Nói một cách dễ hiểu, đó là thời gian thực hiện từ khi nhấp vào liên kết cho đến khi trang xuất hiện đầy đủ trên màn hình. Để có trải nghiệm người dùng tuyệt vời, mọi phần tử trang bao gồm hình ảnh, video hoặc hoạt ảnh bao gồm cả văn bản phải được tải trong vòng 2,5 giây.
• Độ trễ đầu vào đầu tiên  (FID): Nó xác định thời gian cần thiết trước khi người dùng có thể tương tác với trang. Ở đây tương tác có nghĩa là các hành động mà người dùng có thể thực hiện trên trang như điều hướng đến các trang khác và chọn các tùy chọn. FDI chấp nhận được là 100 mili giây.
• Dịch chuyển bố cục tích lũy (CLS) : Nó đo độ ổn định của các phần tử trang sau khi trang được tải. Nếu các phần tử di chuyển khắp trang trong khi tải, nó sẽ làm phiền người dùng xem nội dung. CLS cao hơn có nghĩa là trang của bạn có độ ổn định hình ảnh kém. CLS chấp nhận được là 0,1.

Các cách để cải thiện điểm quan trọng web cốt lõi của bạn

Trong khi tối ưu hóa trang web của bạn cho các chỉ số Core Web Vitals, hãy nhớ rằng chìa khóa là cải thiện trải nghiệm người dùng. Mặc dù có nhiều cách khác nhau để thực hiện việc này, nhưng đây là một số cách tốt nhất để cải thiện điểm quan trọng web cốt lõi của bạn.

Triển khai Lazy Loading (Cải thiện LCP và FID)

Các trang web chứa nhiều hình ảnh thường lo lắng về việc tải trang web chậm. Các trang web như vậy sẽ được hưởng lợi cao từ việc tải chậm. Khái niệm cơ bản ở đây là chỉ tải hình ảnh hoặc khung nội tuyến nếu người dùng muốn xem chúng. Điều này có nghĩa là các trang sẽ chỉ hiển thị những phần trình bày trực quan nằm trong màn hình đầu tiên và phần còn lại sẽ xuất hiện khi người dùng cuộn trang.

Bằng cách này, người dùng sẽ không phải đợi tất cả các phần tử trong trang tải trước khi sử dụng trang web. Bạn có thể cải thiện cả LCP và FID chỉ với một bước di chuyển.

Việc tải chậm được khuyến nghị nếu trang web của bạn có nhiều hình ảnh và đặc biệt là khi việc nén kích thước hình ảnh không cải thiện được điểm LCP của trang web.

Có nhiều cách khác nhau để triển khai tải chậm – ví dụ: liên kết muộn, sử dụng Lazy <T> Class, kích hoạt nó trong khung thực thể và tải nhanh. Chọn bất kỳ cái nào phù hợp với mã trang web của bạn.

Loại bỏ thực thi JavaScript không cần thiết (Cải thiện điểm FID)

Bạn nên xem xét giảm thiểu và tối ưu hóa việc thực thi JS của mình nếu điểm FID của bạn thấp. Khi mã trang web của bạn yêu cầu trình duyệt sử dụng không gian bộ nhớ mới, nó cản trở việc thực thi JavaScript và làm chậm quá trình tải trang. Một cách để khắc phục sự cố là giải phóng dung lượng bộ nhớ, bạn có thể thực hiện chủ yếu theo hai cách:

Xóa JavaScript bên thứ ba không cần thiết hoặc các thành phần không sử dụng của thư viện .js. Quản lý các thành phần được bao gồm trong gói thư viện của bạn và xóa bất kỳ đoạn mã nào không còn được sử dụng.

Các thẻ Trì hoãn hoặc Không đồng bộ và xem xét các đoạn mã JavaScript là cần thiết và những đoạn mã có thể được hoãn lại sau này trong quá trình tải. Lợi ích của các tập lệnh có ‘defer’ là chúng không bao giờ chặn trang. Trên thực tế, hãy yêu cầu trình duyệt không đợi tập lệnh. Do đó, trình duyệt sẽ tiếp tục xử lý HTML, để xây dựng DOM.

Tập lệnh không đồng bộ hoạt động giống như ‘trì hoãn’ nhưng có những khác biệt nhỏ. Chúng tải ở chế độ nền và chạy khi sẵn sàng mà không chặn các tập lệnh khác hoặc bị chặn bởi các tập lệnh khác.

Ngoài ra còn có những cách khác để tối ưu hóa JavaScript của bạn để làm cho trang web của bạn tải nhanh hơn và cung cấp cho khách truy cập trải nghiệm tốt hơn.

Sử dụng CDN (Cải thiện Điểm LCP)

CDN (Mạng phân phối nội dung) là một cách tuyệt vời để xử lý các vấn đề về độ trễ làm gián đoạn các giao dịch trực tuyến đường dài và gây ra tải chậm. Nó đặc biệt hữu ích để tăng điểm LCP nếu trang web của bạn có khán giả toàn cầu.

CDN có một mạng lưới máy chủ proxy và trung tâm dữ liệu được phân phối theo địa lý để lưu trữ dữ liệu trang web của bạn và giúp tải nhanh hơn trên các hệ thống của người dùng cuối. Chọn nhà cung cấp dịch vụ CDN có máy chủ đặt ở các vị trí tối đa để việc phân phối nội dung đến người dùng cuối trở nên nhanh hơn và liền mạch. Stackpath , NitroPack , KeyCDN , Cloudflare , v.v., là một số CDNS tốt nhất mà bạn có thể có cho trang web của mình.

Ngoài ra, hãy đảm bảo rằng CDN của bạn cung cấp các nội dung tĩnh của bạn để làm cho trang tải nhanh hơn. Lưu vào bộ nhớ cache các nội dung đã đạt được ở phía máy khách trong trình duyệt của bạn để cải thiện tải lần thứ hai. Hơn nữa, bạn cũng có thể lưu vào bộ đệm các trang động của mình trong CDN. Bạn chỉ cần đặt giá trị TTL chính xác bằng cách quan sát hành vi ứng dụng của mình.

Đặt Kích thước của các thuộc tính (Cải thiện Điểm CLS)

Một trang web có thể có một số thuộc tính giúp cải thiện sự xuất hiện của nó và gây ấn tượng với khách truy cập, nhưng chúng cũng là lý do khiến điểm CLS kém. Dưới đây là những gì bạn có thể làm:

• Chọn phông chữ một cách khôn ngoan: Các loại phông chữ khác nhau trên một trang sẽ gây ra sự thay đổi bố cục tích lũy. Điều này lại làm tổn hại đến điểm CLS của bạn. Hãy tuân thủ các loại và kích thước phông chữ tối thiểu có thể. Chọn tối đa hai phông chữ, một loại in đậm cho tiêu đề và một phông chữ dễ đọc cho phần còn lại của nội dung. Bạn càng chọn nhiều loại phông chữ, chúng sẽ mất nhiều thời gian để tải hơn.
• Đặt kích thước phương tiện: Bao gồm các thuộc tính kích thước trong thẻ HTML cho hình ảnh và video. Sau đó, trình duyệt của người dùng sẽ biết chính xác dung lượng mà tệp sẽ dự trữ trong khi tải trang.

Ví dụ: nếu hình ảnh gốc là 640 × 960, bạn có thể thay đổi kích thước của nó với chiều cao 500 pixel và chiều rộng 400 pixel bằng cách sử dụng mã bên dưới:

• Dành không gian cho quảng cáo:   Nếu trang web của bạn hiển thị quảng cáo biểu ngữ qua JavaScript của bên thứ ba thông qua các mạng như Google AdSense, hãy đặt trước một khối mặc định tải trước. Đối với điều này, hãy tạo kiểu cho phần tử trước khi thư viện thẻ quảng cáo bắt đầu tải.

Nếu bạn muốn đặt quảng cáo trong luồng nội dung, hãy đặt trước kích thước vùng. Sau đó, quảng cáo sẽ không gây ra thay đổi bố cục khi tải ngoài màn hình.

Tối ưu hóa trang web của bạn cho điện thoại di động

Theo thống kê, có hơn 6 tỷ người dùng điện thoại thông minh trên toàn thế giới hiện nay và con số đó dự kiến ​​sẽ tăng lên hàng năm. Vì vậy, rõ ràng là tại sao bạn nên tối ưu hóa trang web của mình cho điện thoại di động.

Nếu bạn vẫn đang sử dụng một trang web dành cho máy tính để bàn, thì bạn nên nhanh chóng thực hiện chuyển đổi sang trang web đầu tiên dành cho thiết bị di động. Có những công cụ như trình tạo trang web dành cho thiết bị di động Zyro có thể giúp bạn tạo trang web dành cho thiết bị di động hoạt động hoàn hảo trên mọi thiết bị.

Trang web dành cho thiết bị di động của bạn sẽ tải nhanh hơn. Thiết kế trang web nặng hơn gây ra mã phồng lên dẫn đến tải trang chậm và điểm Core Web Vitals kém.

Tiếp theo, làm việc trên mã giảm thiểu, giảm chuyển hướng và sử dụng nén gzip. Kiểm tra lại trang web của bạn để xem liệu các giải pháp này có cải thiện tốc độ trang web trên thiết bị di động của bạn hay không.

Thực hiện kết xuất SSR cho các thành phần trang của bạn (Cải thiện điểm LCP và FID)

Thực hiện Hiển thị phía máy chủ hoặc SSR là cần thiết để tối đa hóa hiệu suất tải trong thời đại mà mọi người dùng đều sử dụng điện thoại thông minh. Bằng cách cung cấp HTML có khả năng hiển thị, bạn sẽ có cách nhanh nhất để hiển thị nội dung nào đó trên màn hình.

Lý do là trình duyệt có thể vẽ ngay lập tức, trước khi tải, phân tích cú pháp hoặc thực thi bất kỳ JavaScript nào của bạn. Vì vậy, SSR có hiệu quả cao trên các trang web di động thường mất nhiều thời gian tải hơn so với các trang web dành cho máy tính để bàn, thường là do sự cố mạng.

SSR chủ yếu được đề xuất cho các thành phần trang của bạn xuất hiện trong màn hình đầu tiên. Đối với các thành phần xuất hiện dưới màn hình đầu tiên, hãy hiển thị chúng từ phía máy khách. Sau đó, bạn sẽ tăng tốc quá trình tải mà không cản trở trải nghiệm người dùng. SSR được thực hiện bằng các thư viện khác nhau như React, Vue và Angular.

Thực hiện SSR cũng là một ý tưởng hay vì Google thúc đẩy và khuyến khích nó để đạt được các giá trị SEO tốt hơn.

Tối ưu hóa các yêu cầu và phản hồi API (Cải thiện điểm LCP và FID)

Các phản hồi và yêu cầu API được tạo từ phía máy khách. Thường thì những phản hồi này không bắt buộc và được đóng gói với dữ liệu có thể cần hoặc có thể không. Những phản hồi như vậy ảnh hưởng trực tiếp đến việc tải trang và điểm số quan trọng của web cốt lõi. Việc đơn giản hóa các phản hồi này có thể dẫn đến sự gia tăng đáng kể về hiệu quả của trang web.

Mặc dù có một loạt các giải pháp của bên thứ ba, nhưng nhiều phương pháp là dựa trên mã. Ví dụ: phân trang, lọc và phạm vi là tất cả các giải pháp dựa trên mã mà bạn có thể sử dụng để khắc phục sự cố.

Tóm lược

Google đã sẵn sàng triển khai các bản cập nhật trải nghiệm trang để cung cấp trải nghiệm người dùng tốt hơn nữa. Bạn phải bắt đầu kết hợp Core Web Vitals vào chiến lược SEO của mình càng sớm càng tốt để tránh bị tụt hạng trên công cụ tìm kiếm của Google do trải nghiệm người dùng kém.

Bằng cách sử dụng các giải pháp trên, không khó để đạt được điểm số yêu cầu. Tuy nhiên, đừng quên so sánh kết quả trang web của bạn trước và sau khi sửa lỗi. Bạn bắt đầu càng sớm, bạn càng sớm đạt được lợi thế so với các trang web khác.