Rate this post

Tự hỏi rằng LCP có nghĩa là gì và nó có thể ảnh hưởng như thế nào đến hiệu suất UX và SEO của bạn? Hãy đọc tiếp! Bạn sẽ khám phá LCP là gì, cách bạn có thể kiểm tra nó và những yếu tố nào ảnh hưởng đến điểm của nó. Bạn cũng sẽ học cách tối ưu hóa hiệu suất WordPress của mình và khắc phục điểm LCP kém từ thiết bị di động và máy tính để bàn (LCP dài hơn 2,5 hoặc 4 giây).

LCP là gì và tại sao nó lại quan trọng?

Largest Contentful Paint (LCP) là một chỉ số quan trọng trong đo lường hiệu suất trang web Core Web Vital, đặc biệt liên quan đến trải nghiệm người dùng. LCP đo lường thời gian mà phần lớn nội dung của trang được tải và hiển thị trên màn hình, từ thời điểm người dùng bắt đầu tải trang. Cụ thể, nó tập trung vào việc tải nội dung lớn nhất và có ý nghĩa nhất trên trang, như một hình ảnh lớn, đoạn video, hoặc khối văn bản lớn, làm thước đo cho thời gian tải hữu ích từ quan điểm của người dùng.

Tầm quan trọng của LCP nằm ở việc nó trực tiếp ảnh hưởng đến trải nghiệm người dùng khi truy cập một trang web. Một LCP nhanh chóng cho thấy rằng nội dung trang web được tải một cách hiệu quả, giúp người dùng nhanh chóng tiếp cận thông tin họ cần mà không phải chờ đợi. Điều này không chỉ cải thiện sự hài lòng của người dùng mà còn có lợi cho thứ hạng tìm kiếm của trang web, vì Google coi tốc độ tải trang và trải nghiệm người dùng là các yếu tố quan trọng trong thuật toán xếp hạng của mình. Do đó, việc tối ưu hóa LCP là một phần thiết yếu của quá trình tối ưu hóa công cụ tìm kiếm (SEO) và cải thiện hiệu suất trang web tổng thể.

Vào tháng 6, LCP sẽ ra mắt như một phần của yếu tố xếp hạng mới, Tín hiệu trải nghiệm trang. Vì lý do này, LCP không chỉ quan trọng để mang lại trải nghiệm người dùng tuyệt vời mà còn cải thiện hiệu suất SEO của bạn.

Hơn nữa, LCP chiếm 25% tổng số điểm PageSpeed ​​Insights. Bằng cách cải thiện hiệu suất của nó, bạn có thể sẽ cải thiện loại tốc độ trang của mình.

Điểm LCP tốt là gì ?

Điểm LCP tốt, hay “Largest Contentful Paint” tốt, là một thuật ngữ trong lĩnh vực tối ưu hóa hiệu suất web, đặc biệt là trong bối cảnh của Core Web Vitals do Google đề xuất. LCP đo lường thời gian mà nội dung lớn nhất trên trang (như một hình ảnh lớn, video, hoặc khối văn bản lớn) được tải và hiển thị cho người dùng, từ điểm bắt đầu tải trang. Điểm LCP tốt được coi là một chỉ số quan trọng về trải nghiệm người dùng trên trang web, vì nó phản ánh mức độ nhanh chóng mà người dùng có thể xem được nội dung chính của trang.

Theo khuyến nghị của Google, một điểm LCP tốt nằm dưới 2.5 giây từ thời điểm bắt đầu tải trang. Điều này có nghĩa là để cung cấp một trải nghiệm người dùng tốt, nội dung lớn nhất của trang web nên được tải và hiển thị không quá 2.5 giây sau khi trang bắt đầu tải. Trang web đạt được điểm LCP trong khoảng thời gian này sẽ được đánh giá cao hơn về mặt hiệu suất và có khả năng cung cấp trải nghiệm người dùng tốt hơn, từ đó có thể cải thiện thứ hạng tìm kiếm và tăng cường sự hài lòng của người dùng.

Cách Tìm và Đo lường LCP

Để tìm và đo lường Largest Contentful Paint (LCP), bạn có thể sử dụng một loạt công cụ và phương pháp được thiết kế để cung cấp cái nhìn chi tiết về hiệu suất tải trang và các yếu tố ảnh hưởng đến trải nghiệm người dùng. Dưới đây là một số cách phổ biến để tìm và đo lường LCP:

  1. Google PageSpeed Insights: Đây là một công cụ miễn phí của Google giúp phân tích hiệu suất của trang web trên cả máy tính và thiết bị di động. Khi bạn nhập URL của trang web, công cụ này sẽ cung cấp một báo cáo chi tiết, bao gồm điểm LCP cùng với các chỉ số Core Web Vitals khác và đề xuất cải thiện.
  2. Lighthouse: Lighthouse là một công cụ mở rộng trong trình duyệt Chrome hoặc công cụ tích hợp trong Chrome DevTools, cung cấp báo cáo về nhiều khía cạnh của trang web, bao gồm hiệu suất, khả năng truy cập, ứng dụng web tiến bộ và SEO. Lighthouse đo lường LCP và cung cấp gợi ý về cách để cải thiện.
  3. Chrome User Experience Report (CrUX): CrUX cung cấp dữ liệu về trải nghiệm thực tế của người dùng trên nhiều trang web, được thu thập từ người dùng Chrome thực sự. Bạn có thể truy cập dữ liệu này thông qua BigQuery hoặc sử dụng công cụ như PageSpeed Insights để xem bản tóm tắt.
  4. Web Vitals Extension: Đây là một tiện ích mở rộng cho Chrome, giúp bạn theo dõi LCP và các chỉ số Core Web Vitals khác trong thời gian thực khi bạn duyệt web. Điều này giúp dễ dàng xác định vấn đề trên các trang cụ thể và thử nghiệm với các giải pháp cải thiện.
  5. Công cụ phát triển trình duyệt: Các trình duyệt hiện đại như Chrome, Firefox và Edge cung cấp công cụ phát triển tích hợp có khả năng theo dõi hiệu suất tải trang và các sự kiện quan trọng như LCP. Trong Chrome, bạn có thể sử dụng tab “Performance” trong Chrome DevTools để ghi lại và phân tích một phiên làm việc, nơi bạn có thể xem LCP và các sự kiện hiệu suất khác.

Khi sử dụng các công cụ này để đo lường LCP, quan trọng là phải thực hiện đánh giá từ nhiều nguồn và trong nhiều điều kiện sử dụng khác nhau để có cái nhìn tổng quan và chính xác nhất về hiệu suất của trang web. Điều này giúp xác định một cách hiệu quả những cải tiến cần thiết để cải thiện LCP và nâng cao trải nghiệm người dùng.

Hãy xem qua một vài ví dụ và làm cho mọi thứ dễ hiểu hơn.

Ví dụ về LCP từ thiết bị di động

Hãy phân tích một trang blog websitehcm từ thiết bị di động.

Chúng tôi kiểm tra hiệu suất của trang trong công cụ và chuyển đến khu vực Chẩn đoán. Phần tử LCP là H1, là tiêu đề bài đăng trên blog:

Ví dụ về LCP Từ Máy tính để bàn

Bây giờ chúng ta hãy xem xét cùng một URL từ máy tính để bàn.

Chúng tôi quay lại Khu vực chẩn đoán và tìm kiếm phần tử LCP. Không có gì ngạc nhiên khi LCP không giống với thiết bị di động. Đối với máy tính để bàn, LCP là một hình ảnh:

Chính xác hơn, đó là hình ảnh của bài đăng.

Vì PageSpeed Insights là một công cụ dựa trên trang, chúng tôi khuyên bạn nên chạy một số thử nghiệm cho các trang khác nhau.

Để phân tích tổng thể, bạn cũng nên tận dụng Search Console.

Đo lường và tìm LCP trên Search Console

Bạn có thể đánh giá hiệu suất trên toàn trang web của mình và phát hiện bất kỳ vấn đề nào với báo cáo Core Web Vitals trong Search Console.

Bạn sẽ có thể truy cập cả hai màn trình diễn từ thiết bị di động và máy tính để bàn:

Sau khi mở báo cáo, bạn sẽ thấy các trang trên trang web của mình hoạt động như thế nào theo từng ngưỡng: tốt, cần cải thiện và kém.

Báo cáo Search Console nhóm từng hiệu suất Core Web Vital theo trạng thái, loại sự cố và URL.

Ví dụ: bạn có thể có một số URL hoạt động không tốt cho LCP. Nếu vậy, trong báo cáo, bạn có thể đọc “Vấn đề về LCP: dài hơn 2,5 giây (thiết bị di động)”.

Bằng cách nhấp vào hàng liên quan đến vấn đề cụ thể đó, bạn sẽ đến một trang cung cấp danh sách các URL cần được sửa. Mặc dù những URL này là một ví dụ, nhưng chúng có thể cung cấp cho bạn một ý tưởng khá chính xác về những gì đang diễn ra.

Sẽ khá dễ dàng để tìm thấy mẫu URL và tiếp tục với việc sửa chữa và xác thực.

Xem thêm Tự học html: image

Yếu tố nào ảnh hưởng đến LCP và gây ra điểm chậm

Đối với các trang web WordPress, ba yếu tố ảnh hưởng đến LCP: thời gian phản hồi của máy chủ chậm, JavaScript và CSS chặn hiển thị và thời gian tải tài nguyên chậm.

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

Trình duyệt đưa ra yêu cầu đến máy chủ, nhưng máy chủ mất quá nhiều thời gian để gửi nội dung được yêu cầu. Vì trình duyệt không nhận được nội dung đủ nhanh, nên cần một lúc để nội dung hiển thị trên màn hình của bạn. Kết quả là, thời gian tải không lớn. Điểm LCP bị ảnh hưởng.

Bạn sẽ khắc phục sự cố bằng cách cải thiện Thời gian đến từng Byte đầu tiên, sử dụng CDN và thiết lập sớm các kết nối của bên thứ ba.

JavaScript và CSS chặn hiển thị

Trình duyệt đưa ra yêu cầu và lấy nội dung từ máy chủ. Lúc này, trình duyệt sẽ kết xuất nội dung và hiển thị nó đúng không? Không quá nhanh.

Để hiển thị bất kỳ nội dung nào, trình duyệt phải phân tích (hoặc phân tích cú pháp) HTML của trang và làm cho nó “có thể đọc được” thành cấu trúc HTML của trang – đó là cây DOM. Sau đó, nội dung sẽ được hiển thị và hiển thị đầy đủ – trừ khi một số tập lệnh và bảng định kiểu chặn phân tích cú pháp HTML. Các tập lệnh và biểu định kiểu này là tài nguyên chặn hiển thị.

Kết quả của khối này là quá trình phân tích cú pháp bị trì hoãn. Một lần nữa, nội dung bạn yêu cầu sẽ mất một chút thời gian trước khi được tải. Hiệu suất LCP lại bị ảnh hưởng.

Bạn sẽ giải quyết những vấn đề này bằng cách trì hoãn và xóa các tệp JS không sử dụng. Đừng lo lắng! Bạn sẽ tìm thấy tất cả thông tin bạn cần trong phần tiếp theo.

Thời gian tải tài nguyên chậm

Các tệp khác cũng có thể gây ra hiệu suất kém và trải nghiệm người dùng không tốt: hình ảnh, video và các phần tử cấp khối như tệp HTML và CSS.

Như bạn đã biết, LCP có liên quan đến các phần tử ở đầu trang. Và vấn đề này xuất hiện chính xác khi các tệp này được hiển thị trong màn hình đầu tiên và mất quá nhiều thời gian để tải. Do đó, thời gian tải và LCP lại bị ảnh hưởng.

Bạn sẽ quản lý thời gian tải tài nguyên bằng cách tối ưu hóa hình ảnh, giảm thiểu và nén các tệp CSS, JS, HTML và tải trước các nội dung quan trọng.

Điểm mấu chốt: tốc độ trình duyệt nhận và hiển thị nội dung được yêu cầu xác định điểm LCP.

Cách giảm lượng LCP lâu hơn 2,5 giây hoặc 4 giây trên thiết bị di động và máy tính để bàn

Dưới đây là mười cách để cải thiện hiệu suất LCP và khắc phục trạng thái Search Console “Vấn đề LCP: lâu hơn 2,5 giây hoặc vấn đề LCP: dài hơn 4 giây”, cả từ thiết bị di động và / hoặc máy tính để bàn.

? Đối với mỗi đề xuất, bạn sẽ tìm thấy một phần thông tin về tác động đến hiệu suất của nó – từ thấp đến cao. Tác động cao nhất là, cơ hội cao nhất mà điểm LCP sẽ cải thiện sau khi thực hiện theo đề xuất cụ thể đó.

Cải thiện thời gian đến Byte đầu tiên và giảm thời gian phản hồi của máy chủ

Tăng cường thời gian phản hồi máy chủ và giảm độ trễ cho Byte đầu tiên có ảnh hưởng đáng kể đến hiệu suất trang web.

Một nguyên nhân chính dẫn đến việc LCP không được tốt là do độ trễ lớn trong thời gian phản hồi của máy chủ.

Thời gian phản hồi máy chủ có thể được kiểm tra thông qua chỉ số Thời gian đến Byte đầu tiên (TTFB).

Mỗi khi trình duyệt yêu cầu tải nội dung, nó sẽ gửi một yêu cầu đến máy chủ và TTFB sẽ đo lường khoảng thời gian cho đến khi trình duyệt nhận được byte đầu tiên của nội dung từ máy chủ.

Cải thiện TTFB không chỉ giúp giảm thời gian phản hồi máy chủ mà còn cải thiện điểm LCP của bạn.

Một TTFB tốt nên dưới 200 mili giây và bạn có thể kiểm tra chỉ số này cho URL trang web của mình qua WebPageTest một cách dễ dàng.

Có hai phương pháp để giải quyết vấn đề liên quan đến độ trễ máy chủ:

Kích hoạt Bộ Nhớ Đệm Trang

Kích hoạt bộ nhớ đệm sẽ lưu trữ trang web dưới dạng tệp HTML trên máy chủ sau khi trang được tải lần đầu, giúp nội dung hiển thị nhanh hơn cho lần truy cập tiếp theo. Đây là phương pháp đơn giản và hiệu quả để cải thiện TTFB.

Nhiều nhà cung cấp dịch vụ lưu trữ WordPress hàng đầu bao gồm tùy chọn bộ nhớ đệm cấp máy chủ.

WP Rocket có thể tự động xử lý việc bộ nhớ đệm mà không yêu cầu sự can thiệp từ bạn.

Một mục chuyên biệt sẽ cho phép bạn kích hoạt bộ nhớ đệm cho thiết bị di động và tùy chỉnh theo sở thích của bạn. WP Rocket tự động kích hoạt 80% các kỹ thuật tốt nhất về hiệu suất web, vì vậy bạn vẫn sẽ đạt được hiệu suất tốt ngay cả khi không chắc chắn.

Chọn Dịch Vụ Lưu Trữ Máy Chủ Tốc Độ Cao

Một dịch vụ lưu trữ máy chủ nhanh chóng có thể tạo ra sự khác biệt lớn về hiệu suất. Có thể đã đến lúc xem xét nâng cấp gói lưu trữ của bạn.

Đầu tiên, dịch vụ lưu trữ của bạn nên có máy chủ đặt gần với đại đa số người dùng của bạn. Khoảng cách càng gần, dữ liệu được truyền nhanh hơn.

Ngoài ra, hãy chọn loại dịch vụ lưu trữ phù hợp. Một máy chủ lưu trữ chuyên dụng sẽ cung cấp hiệu suất nhanh nhất. Cân nhắc lượng truy cập mà trang web của bạn nhận được để đưa ra quyết định phù hợp.

Kích hoạt bộ nhớ đệm và chọn dịch vụ lưu trữ nhanh sẽ giúp bạn thực hiện theo khuyến nghị của PageSpeed Insights:

  • Giảm thời gian phản hồi của máy chủ (TTFB).
  • Phục vụ nội dung tĩnh với chính sách bộ nhớ cache hiệu quả.

Tối ưu hóa việc sử dụng Mạng Phân Phối Nội Dung (CDN)

CDN đóng vai trò quan trọng trong việc giảm thời gian cần thiết để nội dung từ máy chủ đến tay người dùng, cắt giảm độ trễ trong quá trình này. Độ trễ này, còn được biết đến là thời gian khứ hồi (RTT), đo lường khoảng thời gian giữa việc gửi yêu cầu từ trình duyệt và nhận phản hồi từ máy chủ.

Khoảng cách địa lý giữa người dùng và máy chủ có thể làm tăng đáng kể thời gian tải cho nội dung như hình ảnh, tệp JavaScript và CSS, video, gây ảnh hưởng không nhỏ đến thời gian tải trang và điểm LCP.

Vị trí máy chủ có ảnh hưởng rõ rệt đến hiệu suất trang web.

CDN giải quyết vấn đề này bằng mạng lưới máy chủ phân tán khắp toàn cầu. Dù người dùng ở bất kỳ đâu, họ đều nhận được nội dung từ máy chủ gần nhất, tối ưu hóa thời gian tải.

RocketCDN là giải pháp giúp trang web của bạn tải nhanh hơn, mang lại trải nghiệm người dùng mượt mà hơn.

Để hiểu rõ hơn về lợi ích của CDN và các loại CDN khác nhau, bạn có thể tham khảo bài viết chuyên sâu của chúng tôi.

Lựa chọn CDN giúp giải quyết những khuyến nghị sau từ PageSpeed Insights:

  • Tối ưu hóa cung cấp nội dung tĩnh với chính sách bộ nhớ cache hiệu quả.
  • Kích hoạt nén văn bản.

Lưu ý rằng CDN chỉ mang lại hiệu quả cao khi được cấu hình chính xác. Cấu hình mặc định có thể không đủ để đạt hiệu suất mong muốn.

Hoãn Tải JavaScript

JavaScript, đặc biệt là các tệp JavaScript chặn hiển thị, thường là nguyên nhân chính gây ra điểm LCP kém.

Hoãn tải các tệp JavaScript giúp giải quyết vấn đề này bằng cách thay đổi thứ tự ưu tiên tải các tệp JS.

Khi trình duyệt tiến hành phân tích cú pháp HTML và xây dựng cây DOM để hiển thị trang, việc này có thể bị chậm lại do tải các tài nguyên chặn hiển thị.

Hoãn tải JavaScript cho phép trình duyệt xử lý và tải tệp JS sau khi hoàn tất việc phân tích HTML và xây dựng cây DOM, loại bỏ bất kỳ sự chậm trễ nào trong quá trình hiển thị, từ đó cải thiện điểm LCP.

Thêm thuộc tính hoãn vào các tệp JavaScript cho phép trình duyệt nhận biết và hoãn tải những tệp này. Quá trình phân tích HTML và xây dựng cây DOM diễn ra mà không bị gián đoạn.

Ví dụ về cách sử dụng thuộc tính hoãn:

<script defer src="/example-js-script.js"></script>

Cách tốt nhất để quản lý JavaScript là thông qua WP Rocket và tính năng Hoãn Tải JavaScript của nó.

Bạn có thể kích hoạt tính năng này trong mục “Tối ưu hóa tệp”. Ngoài ra, WP Rocket cũng cho phép bạn loại trừ các tệp JS cụ thể khỏi quá trình hoãn tải, giúp tránh xung đột với các tệp quan trọng.

Loại bỏ JavaScript không được sử dụng

Một cách khác để loại bỏ các tài nguyên chặn hiển thị là loại bỏ các tài nguyên JavaScript không được sử dụng. Chúng có thể không được sử dụng vì hai lý do:

  • Chúng không còn được sử dụng trên trang web của bạn. Chúng vẫn ở trong mã nhưng hoàn toàn vô dụng.
  • Chúng không có trong nội dung trong màn hình đầu tiên. Do đó, chúng không quan trọng đối với việc xây dựng cây DOM. Tuy nhiên, những tệp này có lý do để ở đó (ví dụ: mã theo dõi Google Analytics).

Bạn có thể tìm thấy danh sách các tệp JS không sử dụng trong báo cáo Tốc độ trang trong phần “Xóa Javascript không sử dụng”:

Có hai cách để giải quyết vấn đề này trong WordPress:

Chỉ tải các tệp JavaScript khi cần thiết.

Ví dụ: các tệp chỉ nên được tải trên các trang cần tệp cụ thể đó – trong bất kỳ trường hợp nào khác, việc thực thi JS sẽ bị vô hiệu hóa. Bạn có thể chăm sóc khía cạnh này bằng các plugin như Perfmatters và Assets Cleanup.

Trì hoãn các tệp JavaScript.

Các tệp JavaScript sẽ không được tải cho đến khi người dùng tương tác đầu tiên (ví dụ: cuộn, nhấp vào nút). Nếu không có sự tương tác của người dùng, các tệp JS sẽ hoàn toàn không được tải.

Bằng cách trì hoãn JavaScript, Lighthouse sẽ không phát hiện các tệp JS cũng như không được liệt kê trong đề xuất “Xóa tệp Javascript không sử dụng” – mặc dù không phải tất cả các tập lệnh từ danh sách đề xuất Tốc độ trang đều có thể được trì hoãn một cách an toàn.

Ví dụ: mã theo dõi Google Analytics thường được bao gồm trong đề xuất PageSpeed ​​Insights này. Nếu bạn trì hoãn các tệp JS, thì tệp JS của Google Analytics sẽ không được báo cáo nữa.

Lưu ý: Việc trì hoãn các tệp JS không có mục đích giải quyết đề xuất PSI này. Tuy nhiên, nó hoạt động tốt trong việc giải quyết kiểm tra Tốc độ trang này và cải thiện điểm LCP của bạn. Vì vậy, rất tốt cho bạn biết.

Vì vậy, làm thế nào bạn có thể trì hoãn tài nguyên JS? Bạn có các tùy chọn khác nhau.

Nếu bạn đang tìm kiếm một plugin miễn phí để trì hoãn các tệp JavaScript, bạn có thể sử dụng Flying Scripts.

Một cách khác để xử lý an toàn mọi JavaScript không sử dụng là tận dụng WP Rocket! Plugin cho phép bạn trì hoãn việc thực thi JavaScript trong một vài cú nhấp chuột từ tab Tối ưu hóa tệp. Bạn có thể dễ dàng bao gồm danh sách các tập lệnh để trì hoãn và để plugin thực hiện công việc cho bạn:

Như chúng tôi đã đề cập, bằng cách xóa các tệp Javascript không sử dụng, bạn sẽ giải quyết được đề xuất Tốc độ trang cụ thể. Nhìn chung, bạn sẽ hướng tới “Loại bỏ tài nguyên chặn hiển thị” và “Giảm thời gian thực thi javascript”.

Trì hoãn CSS không quan trọng, CSS quan trọng nội tuyến và xóa CSS không sử dụng

Đối với các tệp JS, bạn cũng nên trì hoãn CSS không quan trọng – tất cả các tệp không liên quan để hiển thị trang. Nói cách khác, bạn cũng nên thay đổi mức độ ưu tiên cho các tệp này.

Chúng sẽ tải sau khi trình duyệt hiển thị nội dung phù hợp nhất trên trang.

Trong khi trì hoãn các tệp CSS, bạn cũng nên nội tuyến CSS quan trọng – các tài nguyên trong màn hình đầu tiên cần được tải nhanh nhất có thể. Điều đó có nghĩa là bạn nên xác định CSS quan trọng (hoặc CSS đường dẫn quan trọng) và nội tuyến chúng bên trong cấu trúc HTML.

Nếu bạn muốn triển khai cả hai hành động trên WordPress, thì đây là cách quy trình trông như thế nào:

  • Trước tiên, bạn nên trích xuất và nội dòng CSS Đường dẫn tới hạn (CPCSS) bằng cách sử dụng một công cụ tạo sẵn có. Bạn có thể tìm thấy một cái ở đây.
  • Sau đó, bạn nên tải phần còn lại của các lớp một cách không đồng bộ bằng cách áp dụng mẫu sau.

Bạn có thể đọc thêm về quy trình trong tài nguyên chuyên dụng của Google.

Một mẹo khác là tránh đặt mã CSS lớn không quan trọng trong <head> của mã.

Nếu bạn muốn nhanh chóng xử lý cả CSS quan trọng và không quan trọng, bạn có thể tận dụng tính năng phân phối CSS Tối ưu hóa do WP Rocket cung cấp. Tùy chọn này sẽ trì hoãn CSS không quan trọng và CSS quan trọng nội tuyến – bạn không cần làm bất kỳ điều gì khác.

Trong tab Tối ưu hóa tệp, bạn có thể chọn tùy chọn:

Và còn điều gì đó nữa. Một cách khác để giải quyết CSS là xóa (hoặc giảm) CSS không sử dụng. WP Rocket cũng có thể giúp bạn làm điều đó một cách dễ dàng, nhờ vào tính năng mới của nó. Bạn chỉ cần bật tùy chọn Xóa CSS không sử dụng và plugin sẽ xóa hoặc giảm CSS không sử dụng khỏi HTML của mỗi trang.

Bằng cách triển khai các hành động này, bạn sẽ giải quyết được các đề xuất “Loại bỏ tài nguyên chặn hiển thị” và “Tránh xâu chuỗi các yêu cầu quan trọng” PageSpeed ​​Insights.

Giảm thiểu các tệp CSS và JS

Một cách hiệu quả khác để tối ưu hóa LCP là giảm thiểu các tệp CSS và JS.

Giảm thiểu tối ưu hóa mã của bạn bằng cách làm cho nó nhỏ gọn hơn. Nó có nghĩa là xóa mọi khoảng trắng, ngắt dòng và nhận xét có trong mã. Do đó, việc thu nhỏ sẽ làm giảm kích thước tệp CSS và JS và khiến chúng tải nhanh hơn.

Nghe có vẻ dễ dàng, nhưng thực tế phức tạp hơn. Không phải lúc nào cũng đơn giản để giảm thiểu cả hai loại tệp và đảm bảo đã loại trừ tất cả các tài nguyên phù hợp – đặc biệt nếu bạn không phải là nhà phát triển. Dù bằng cách nào thì cũng tốn thời gian.

Cách dễ nhất và hiệu quả nhất để xử lý việc thu nhỏ là sử dụng một plugin như WP Rocket.

Trong tab tối ưu hóa tệp, bạn sẽ có cơ hội giảm thiểu cả tệp CSS và JavaScript.

Bạn sẽ giải quyết các đề xuất PageSpeed Insights sau:

  • Giảm thiểu CSS
  • Giảm thiểu JS
  • Tránh tải trọng mạng khổng lồ.

Tối ưu hóa hình ảnh

Tối ưu hóa hình ảnh là một cách có liên quan khác để khắc phục điểm LCP kém.

Hình ảnh thường là yếu tố LCP từ thiết bị di động hoặc máy tính để bàn. Bằng cách cải thiện thời gian tải của chúng, bạn sẽ tăng hiệu suất LCP.

Dưới đây là những gì bạn có thể làm để khắc phục mọi vấn đề về hiệu suất đối với hình ảnh.

Nén và thay đổi kích thước hình ảnh của bạn. Bạn nên giảm kích thước tệp mà không làm giảm chất lượng. Kích thước hình ảnh càng nhỏ thì thời gian tải càng nhanh.

Nói rõ hơn: nếu bạn sử dụng một công cụ để tối ưu hóa hình ảnh của mình trên máy tính để bàn, bạn sẽ chỉ tối ưu hóa kích thước ban đầu. Hình ảnh bạn tải lên trên WordPress sẽ không bị thay đổi kích thước. Như bạn có thể biết, trong WordPress, có các kích thước hình ảnh khác nhau. Trừ khi bạn sử dụng một plugin tối ưu hóa hình ảnh thích hợp, bạn sẽ không tối ưu hóa bất kỳ thứ gì cho hiệu suất.

Để tối ưu hóa một số hình ảnh, bạn có thể sử dụng một công cụ như ImageOptim. Mặt khác, nếu bạn muốn tối ưu hóa hàng loạt hình ảnh và hình thu nhỏ của chúng, thì Imagify là giải pháp hoàn hảo. Bạn sẽ giảm trọng lượng hình ảnh của mình mà không làm giảm chất lượng của chúng. Bạn sẽ tiết kiệm được nhiều thời gian!

Chuyển đổi hình ảnh của bạn sang các định dạng mới. Nhìn chung, Google đề xuất định dạng WebP. Và đó là lý do tại sao tất cả các plugin trình tối ưu hóa hình ảnh WordPress hiện bao gồm tùy chọn chuyển đổi hình ảnh sang WebP. Các định dạng khác mà bạn có thể tính đến là JPEG 2000 và JPEG XR. Các định dạng này nhỏ hơn các định dạng JPEG, PNG và GIF và giúp cải thiện hiệu suất.

Sử dụng hình ảnh đáp ứng. Bạn không nên sử dụng cùng một kích thước hình ảnh cho máy tính để bàn và thiết bị di động. Ví dụ: nếu kích thước hình ảnh trên máy tính để bàn lớn, thì kích thước hình ảnh trên thiết bị di động phải ở mức trung bình.

Các trình tạo trang như Elementor cho phép người dùng tải lên các kích thước hình ảnh khác nhau tùy theo thiết bị. Tối ưu hóa hình ảnh trên thiết bị di động là khá cần thiết và điểm số trên thiết bị di động quan trọng nhất. Đừng đánh giá thấp tác động của nó đối với điểm LCP của bạn!

Loại trừ phần tử LCP khỏi tải chậm. Mặc dù lười tải tổng thể giúp cải thiện thời gian tải, nhưng nó có thể làm cho điểm LCP trở nên tồi tệ hơn, đặc biệt khi phần tử LCP là một hình ảnh và được tải chậm. Đó là lý do tại sao loại trừ phần tử LCP khỏi lazy-load và hiển thị nó trực tiếp trong HTML của trang là một cách tuyệt vời để tối ưu hóa điểm LCP.

Sử dụng hình ảnh tĩnh thay vì thanh trượt. Các thanh trượt có thể rất nặng để tải vì mã. Mặt khác, một hình ảnh tĩnh được tạo bởi mã HTML nhẹ hơn và nhanh hơn.

Bằng cách tối ưu hóa hình ảnh của mình, bạn sẽ giải quyết được các kiểm tra của PageSpeed ​​Insights sau:

  • Cung cấp hình ảnh ở các định dạng thế hệ tiếp theo
  • Kích thước hình ảnh phù hợp
  • Mã hóa hình ảnh hiệu quả
  • Tránh tải trọng mạng khổng lồ.

Nén tệp văn bản

Bạn cũng nên nén các tệp văn bản như tài nguyên HTML, CSS hoặc JavaScript.

Nén có nghĩa là “nén” các tệp của bạn ở định dạng nhỏ hơn và nhẹ hơn để chúng tải nhanh hơn. Khi bạn giảm kích thước của chúng, quá trình chuyển giữa trình duyệt và máy chủ sẽ nhanh hơn. Trình duyệt sẽ có thể tải các tài nguyên này nhanh hơn. Thời gian tải và LCP sẽ được cải thiện.

Bạn có thể sử dụng các định dạng nén như GZIP và Brotli. Một mặt, GZIP được hầu hết các máy chủ hỗ trợ. Mặt khác, Brotli hoạt động hiệu quả hơn và hiện chủ yếu được khuyến nghị. Tìm hiểu thêm về GZIP so với Brotli trong bài đăng trên blog của chúng tôi.

Bạn có thể dễ dàng bật tính năng nén GZIP trên WordPress bằng cách sử dụng một plugin. Bạn có thể chọn giữa các tùy chọn khác nhau, từ plugin Bật nén Gzip đơn giản đến WP Rocket, tự động bao gồm nén GZIP. Ngoài ra, một số máy chủ cho phép nén GZIP theo mặc định.

Dù bằng cách nào, bạn sẽ giải quyết đề xuất Tốc độ trang “Bật nén văn bản”.

Sử dụng Tải trước cho Nội dung Quan trọng (Như Hình ảnh LCP)

Áp dụng Kỹ Thuật Tải trước cho Các Tài Nguyên Quan Trọng (Bao Gồm Hình ảnh LCP)

Giờ đây, bạn đã nhận thức được tầm quan trọng của việc nội dung hiển thị ngay lập tức khi trang được mở, đặc biệt là các phần tử như phông chữ, hình ảnh, video, CSS và JavaScript, đối với việc đạt được điểm hiệu suất cao. Để nâng cao điểm LCP, việc ưu tiên tải xuống nhanh chóng cho những nội dung này là cực kỳ quan trọng.

Bạn có thể tự hỏi làm cách nào để ưu tiên tải hình ảnh LCP.

Sử dụng tính năng Tải trước là một giải pháp hiệu quả. Tính năng này chỉ dẫn trình duyệt tập trung tải các tài nguyên quan trọng trước tiên. Tức là, Tải trước đảm bảo rằng trình duyệt không chờ đến phút cuối mới bắt đầu tải các tệp quan trọng này, kể cả hình ảnh LCP.

Dưới đây là cách bạn có thể sử dụng thẻ ‘preload’ trong mã của mình:

<link rel="preload" as="script" href="script.js">
<link rel="preload" as="style" href="style.css">
<link rel="preload" as="image" href="img.png">
<link rel="preload" as="video" href="vid.webm" type="video/webm">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Để ưu tiên tải hình ảnh LCP, bạn cũng có thể sử dụng các plugin như Perfmatters, giúp quá trình này trở nên tự động và dễ dàng hơn.

Khi cần ưu tiên tải phông chữ, WP Rocket cung cấp tính năng hữu ích cho mục đích này.

Bạn có thể tham khảo thêm về cách tải trước phông chữ web một cách hiệu quả nhất trong bài viết chuyên sâu của chúng tôi.

Tải trước các tài nguyên quan trọng không chỉ giúp cải thiện điểm LCP mà còn giải quyết được khuyến nghị “Tải trước các yêu cầu quan trọng” từ PageSpeed Insights, góp phần nâng cao tốc độ tổng thể của trang.

Thiết lập sớm các kết nối của bên thứ ba

Tăng tốc độ kết nối với các dịch vụ bên thứ ba là một phương pháp quan trọng để cải thiện hiệu suất LCP.

Nên áp dụng cơ chế Preconnect.

Ví dụ, khi trang web của bạn cần tải một tệp CSS hoặc JS từ nguồn ngoài như Facebook hoặc Google Analytics, trình duyệt sẽ thực hiện yêu cầu tải tài nguyên đó.

Khi kích hoạt, Preconnect cho phép trình duyệt thiết lập sớm một kết nối với máy chủ của bên thứ ba, giúp tăng tốc quá trình tải tài nguyên bằng cách thực hiện đồng thời với quá trình kết xuất trang.

Thêm dòng lệnh sau vào mã của bạn để kích hoạt Preconnect:

<link rel="preconnect" href="https://example-domain.com">

Ngoài ra, bạn có thể tận dụng plugin như Perfmatters để tự động hóa quá trình này.

Để đề phòng trường hợp trình duyệt không hỗ trợ Preconnect, việc triển khai dns-prefetch là một giải pháp thay thế khả thi, giúp tăng tốc quá trình tra cứu DNS. Điều này có nghĩa là tải tài nguyên từ bên ngoài trở nên nhanh chóng hơn, đặc biệt trên mạng di động.

Thêm thẻ sau để áp dụng dns-prefetch, độc lập với thẻ preconnect:

<head>
    ...
    <link rel="preconnect" href="https://example-domain.com">
    <link rel="dns-prefetch" href="https://example-domain.com">
</head>

Tính năng Tải trước của WP Rocket cung cấp khả năng tìm nạp trước DNS cho các máy chủ bên ngoài, chỉ cần chỉ định tên máy chủ cần tìm nạp trước.

Bằng cách thiết lập trước các kết nối với nguồn bên thứ ba, bạn không chỉ cải thiện Thời gian đến Byte đầu tiên và thời gian phản hồi của máy chủ mà còn giải quyết khuyến nghị của PageSpeed Insights về việc “Kết nối trước với nguồn cần thiết”.

Bắt đầu tối ưu hóa điểm LCP trên WordPress ngay hôm nay

Bây giờ bạn sẽ hiểu tại sao LCP lại cần thiết cho hiệu suất và trải nghiệm người dùng cũng như cách bạn có thể cải thiện điểm số của nó. Bằng cách áp dụng tất cả các kỹ thuật tối ưu hóa này, bạn sẽ nâng cao cấp LCP trên trang web WordPress của mình.

Bạn chưa phải là khách hàng của websitehcm? Hãy tiết kiệm thời gian và để websitehcm thực hiện công việc đó cho bạn. websitehcm là cách dễ nhất để đạt được điểm LCP xuất sắc. Bạn thậm chí không phải chạm vào bất kỳ cài đặt nào! websitehcm sẽ tự động áp dụng 80% các phương pháp hay nhất về hiệu suất web. Bạn sẽ thấy điểm số Core Web Vitals của mình được cải thiện tức thì ngay lập tức.

Hơn nữa, bạn sẽ ngừng quản lý nhiều plugin hiệu suất web. Bạn sẽ chỉ cần websitehcm để tăng điểm LCP của mình – không yêu cầu kiến thức kỹ thuật, chúng tôi hứa!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now