The largest contentful paint (LCP) là một trong đại diện cho một trong các chỉ số quan trọng khi đánh giá website. Nó tập trung vào việc đo tốc độ hiển thị các thành phần lớn nhất trong website như hình ảnh hoặc đoạn văn bản. Trong bài viết hôm nay mình sẽ hướng dẫn bạn cách để cải thiện chỉ số LCP trong trang web nhé.
Largest Contentful Paint (LCP) Là Gì?
LCP là một trong ba chỉ số Các chỉ số quan trọng để đánh giá website và chỉ số này thể hiện tốc độ tải nội dung chính của trang web. Nếu phần tử LCP chưa được tải thì bạn sẽ không thấy được các phần tử khác trên trang web. Do đó đây là lý do Google đưa LCP vào làm một trong các chỉ số Core Web Vitals(chỉ số đo lường mức độ tuyệt vời của trải nghiệm người dùng của bạn).
Các yếu tố được xem là Largest Contentful Paint có thể là:
- Hình ảnh
- Video
- Các phần tử có background hình ảnh
- Các đoạn văn bản
LCP bao nhiêu là tốt?
Thông thường đối với website được đánh giá LCP tốt là khi có thời gian tải trang phải từ 2.5s trở xuống.
Nếu như trên 2.5s và dưới 4.0s ở mức cảnh báo, bạn phải cần thực hiện các hành động để cải thiện điểm LCP.
Nếu trên 4.0s thì ở mức báo động, bạn cần phải thực hiện các hành động ngay lập tức.
Cách để xem chỉ số LCP
Hiện nay thì thật sự có rất nhiều công cụ giúp bạn có thể xem chỉ số LCP trong website. Một trong những công cụ được sử dụng phổ biến nhất là Google's PageSpeed Insights. Đây là một công cụ miễn phí giúp người dùng phân tích các yếu tố ảnh hưởng đến hiệu suất website đồng thời cũng đưa ra các biện pháp giúp bạn có thể xử lý các thành phần này.
Các Cách Cải Thiện LCP
Tối ưu hóa hình ảnh trong website
Thông thường hình ảnh là một trong những phần tử chiếm dụng lượng lớn nhất khi người dùng tải trang web. Do đó bạn có sử dụng một số phương án để có thể cải thiện hình ảnh của mình bằng cách:
- Thực hiện việc nén hình ảnh.
- Thay thể các file GIF bằng video.
- Sử dụng các định dạng hình ảnh mới WebP và JPEG2000.
Đôi khi chúng ta muốn các hình ảnh có chất lượng cao để nâng cao trải nghiệm người dùng tuy nhiên việc này sẽ ảnh hưởng đến tới tốc độ tải trang. Do đó chúng ta nên sử dụng định dạng hình ảnh phù hợp với nhu cầu của mình như:
- JPG: Hỗ trợ các trình duyệt phổ biến, tệp nhỏ, tải nhanh tuy nhiên nó không hỗ trợ hình nền trong suốt.
- PNG: Hình ảnh sắc nét hơn, hỗ trợ hình nền trong suốt nhưng sẽ có kích thước lớn hơn.
- SVG: Là hình ảnh lý tưởng cho logo, biểu tượng hay các hình ảnh minh họa.
Ngoài ra bạn cũng có thể sử dụng CDN để giúp phân phối và quản lý hình ảnh một cách tốt hơn. Nó sẽ xem xét vị trí của người dùng để gửi hình ảnh nhanh chóng qua CDN với nhiều data center trải khắp thế giới. Ngoài ra nó còn một số tính năng mà mình thấy khá hay là tự động chuyển đổi định dạng hình ảnh hiện có sang webp, điều chỉnh kích thước hình ảnh dễ dàng, tạo hiệu ứng làm mờ, watermark cho hình ảnh...
Không sử dụng lazy-load cho phần tử LCP Thông thường chúng ta sẽ sử dụng lazy load để giúp tăng tốc độ tải trang nhưng điều này sẽ làm điểm LCP của chúng ta không tốt. Do đó mình khuyên bạn nên loại bỏ tính năng lazy-load cho phần tử LCP và hiển thị nó trực tiếp thông qua mã HTML.
Minify Tệp CSS và Javascript
Thông thường các đoạn mã của chúng ta viết hay xem thì thường có chứa khoảng trắng để giúp lập trình viên để dễ dàng đọc mã. Tuy nhiên điều nay cũng sẽ khiến tệp có kích thước lớn hơn. Do đó minify sẽ giúp tệp kích thước nhỏ hơn bằng cách xóa các khoảng trắng, ngắt dòng hay các nhận xét có trong code.
Nén Văn Bản
Compressing là một phương pháp giúp bạn tối ưu hóa các tài nguyên văn bản như HTML, CSS và Javascript. Khi chúng ta giảm kích thước của chúng thì quá trình chuyển tài nguyên giữa máy chủ và trình duyệt sẽ diễn ra nhanh hơn. Từ đó sẽ giúp điểm LCP được cải thiện tốt hơn.
Hiện nay có hai định dạng nén được sử dụng phổ biến là GZIP và Brotli.
Sử dụng CDN
Ví dụ nếu bạn có một website đặt hosting ở nước ngoài thì người dùng ở Việt Nam khi muốn kết nối website của bạn sẽ mất một khoảng thời gian khá lâu do đường truyền dữ liệu tới máy chủ ở khá xa so với khách hàng.
Còn khi website của bạn sử dụng CDN thì các trạm máy chủ(data center) được đặt khắp nơi trên thế giới. Do đó nó sẽ căn cứ vào vị trí hiện tại của người dùng để thiết lập và lấy dữ liệu từ máy chủ gần nhất để gửi dữ liệu đến khách hàng từ đó tốc độ tải trang của bạn sẽ được giảm đáng kể.
Xóa bỏ những đoạn mã CSS và Javascript không cần thiết
Trong các tệp CSS và JS thì sẽ có những đoạn mã không bao giờ được sử dụng tới nhưng nó sẽ vẫn được đọc trong quá trình xử lý thông tin. Điều này sẽ làm lãng phí tài nguyên và ảnh hưởng tới hiệu suất của website. Do đó mình xin giới thiệu bạn công cụ Chrome DevTools Coverage tab, nó giúp xác định được các đoạn mã nào không được sử dụng để bạn có thể dễ dàng quyết định là có nên giữ lại hay không.
Lựa chọn máy chủ tốt hơn
Thời gian tải trang sẽ liên quan chặt chẽ đến thời gian phản hồi của máy chủ mà website bạn đang sử dụng. Do đó việc suy nghĩ lựa chọn một máy chủ mới hay là nâng cấp lên gói cao cấp hơn sẽ giúp trang web cải thiện LCP cho trang web của bạn.
Thực hiện Caching
Chức năng bộ nhớ đệm giúp bạn lưu trữ nội dung tĩnh của trang web trong bộ lưu trữ tạm thời. Điều này sẽ cải thiện thời gian tải trang bằng cách giảm lượng dữ liệu được truyền qua trong quá trình hiển thị website. Hiện nay thì có hai phương pháp caching là browser caching và server-side caching.
Browser caching là phương thức sử dụng bộ nhớ đệm của trình duyệt và người dùng có thể lưu trữ trong bộ nhớ cục bộ. Do đó khi truy cập lại trang web thì họ sẽ không cần phải tải lại dữ liệu của trang web.
Server-side caching là phương pháp lưu trữ dữ liệu trên máy chủ. Với phương thức này thì họ sẽ không cần phải tại lại nội dung từ trang từ cơ sở dữ liệu khi truy cập website.
Defer JavaScript
Render-blocking resources(Các tài nguyên chặn hiển thị) là một trong những nguyên nhân chính gây ra điểm LCP kém cho website của bạn. Thông thường trình duyệt phân tích cú pháp HTML rồi sau đó xây dựng cây DOM và hiển thị trang. Tuy nhiên sẽ có một số trường hợp quá trình này sẽ bị tạm ngưng do có một đoạn mã nào cần thực thi trước.
Do đó để xử lý tình huống trên thì chúng ta sẽ sử dụng tính năng defer để đảm bảo trình duyệt sẽ không bị gián đoạn khi phân tích HTML và xây dựng DOM tree.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp cho bạn cung cấp các thông tin hữu ích về việc cải thiện LCP cho trang web. Nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
