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?
LCP (LCP) là chỉ số Core Web Vital và đo thời gian để phần tử lớn nhất hiển thị trong chế độ xem. Cho đến khi LCP không tải, bạn sẽ không thấy hầu hết mọi thứ trên trang. Đó là vì phần tử LCP luôn ở trong màn hình đầu tiên – nằm ở đầu trang.
LCP thường là một hình ảnh hoặc một khối văn bản. Tuy nhiên, nó cũng có thể là một video hoặc một hình ảnh động. Phần tử LCP có thể khác nhau giữa thiết bị di động và máy tính để bàn.
Như bạn có thể đoán, phần tử lớn nhất là phần tử có liên quan nhất đến trải nghiệm người dùng và tốc độ tải cảm nhận.
Hãy nghĩ về điều đó: nếu yếu tố lớn nhất của trang không tải nhanh, thì trải nghiệm người dùng của bạn sẽ không tốt. Bạn sẽ nhìn vào một trang gần như trống, chờ trang tải… Bạn thậm chí có thể rời khỏi trang web! Khi duyệt, một vài giây có thể tạo ra sự khác biệt rất lớn.
Đó là lý do tại sao Google đã đưa LCP vào làm một trong những chỉ số Core Web Vitals – chỉ số đo lường trải nghiệm người dùng của bạn tuyệt vời như thế nào.
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.
Các bài viết liên quan:
Điểm LCP Tốt là gì
Điểm tốt có nghĩa là LCP phải nhỏ hơn hoặc bằng 2,5 giây. Nếu vậy, trang sẽ nhận được điểm xanh và vượt qua bài đánh giá.
Nếu LCP từ 2,5 đến 4,0 giây, điểm số “cần được cải thiện” – bạn sẽ nhận được điểm màu cam.
Giả sử LCP là hơn 4 giây. Khi đó điểm số là “kém”, và bạn cần phải sửa nó càng sớm càng tốt.
Bây giờ chúng ta hãy xem cách chúng ta có thể tìm thấy phần tử LCP.
Cách Tìm và Đo lường LCP
Có một số cách để tìm và đo lường phần tử LCP, cả với Dữ liệu Phòng thí nghiệm và Dữ liệu hiện trường. Dưới đây là các công cụ phổ biến nhất mà bạn có thể sử dụng để kiểm tra LCP.
Hãy cùng tìm hiểu một số công cụ dễ dàng và hiệu quả nhất: PageSpeed Insights và Search Console.
Đo lường và tìm LCP với PageSpeed Insights
PageSpeed Insights là cách dễ nhất để đo lường và tìm phần tử LCP.
Sau khi kiểm tra trang URL của mình, bạn sẽ nhận được điểm LCP trong Dữ liệu phòng thí nghiệm và Dữ liệu trường (nếu có). Bạn cũng sẽ nhận được các đề xuất Tốc độ trang để cải thiện hiệu suất của mình.
Chuyển đến khu vực Chẩn đoán và tìm phần “Phần tử LCP”. Bạn sẽ khám phá yếu tố LCP cho trang bạn đang phân tích là gì.
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:
Miễn là tiêu đề chính tải nhanh, trang sẽ mang lại trải nghiệm người dùng tuyệt vời.
Xem thêm Xây dựng backlink từ hình ảnh
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ác bài viết cùng chủ đề khác:
- Tối ưu hóa Core Web Vitals và Page Experience
- Làm thế nào để kiểm tra tốc độ website
- Website là gì? trang web là gì?
- Hướng dẫn cài đặt AMP wordpress
- CSS Transform và Transitions
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ể đó.
1. 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ác động đến hiệu suất: cao ???
Một trong những lý do chính dẫn đến LCP xấu là thời gian phản hồi của máy chủ chậm.
Bạn có thể đo thời gian phản hồi của máy chủ bằng cách xem Thời gian đến Byte đầu tiên (TTFB).
Mỗi khi bạn muốn sử dụng bất kỳ phần nội dung nào, trình duyệt sẽ gửi một yêu cầu đến máy chủ. TTFB đo thời gian trình duyệt nhận byte nội dung đầu tiên từ máy chủ.
Bằng cách cải thiện TTFB, bạn sẽ cải thiện thời gian phản hồi của máy chủ và điểm LCP.
Xin lưu ý rằng TTFB tốt phải dưới 200 mili giây – bạn có thể nhanh chóng kiểm tra số liệu này bằng cách kiểm tra trang web URL của mình trên WebPageTest.
Có hai cách để sửa lỗi thời gian máy chủ:
1. Bật bộ đệm trang
Bằng cách bật bộ nhớ đệm trang, các trang trên trang web của bạn sẽ được lưu trữ dưới dạng tệp HTML trên máy chủ sau khi trang được tải lần đầu tiên. Nhờ đó, nội dung sẽ được hiển thị nhanh hơn. Đó là một cách dễ dàng và hiệu quả để cải thiện TTFB.
Bạn cũng có thể chọn một trong những 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ể dễ dàng chăm sóc bộ nhớ đệm trang mà không cần nỗ lực từ phía bạn.
Một tab chuyên dụng sẽ cho phép bạn bật bộ nhớ đệm trên thiết bị di động và đặt các tùy chọn bạn thích. WP Rocket tự động bật 80% các phương pháp hay nhất về hiệu suất web. Vì vậy, nếu bạn nghi ngờ, bạn vẫn sẽ được đảm bảo!
2. Chọn một Dịch vụ Lưu trữ Máy chủ Nhanh
Một máy chủ lưu trữ nhanh có thể tạo ra sự khác biệt lớn về hiệu suất. Và có lẽ đã đến lúc nâng cấp gói dịch vụ lưu trữ của bạn!
Điều đầu tiên, nhà cung cấp dịch vụ lưu trữ của bạn phải có máy chủ gần với phần lớn người dùng của bạn. Người dùng của bạn càng gần máy chủ, dữ liệu sẽ được gửi nhanh nhất.
Bạn cũng nên chọn loại máy chủ lưu trữ máy chủ phù hợp. Một máy chủ lưu trữ chuyên dụng sẽ đảm bảo hiệu suất nhanh nhất. Hãy xem xét lượng truy cập mà trang web của bạn nhận được và đưa ra quyết định của bạn.
Bằng cách bật bộ nhớ đệm và chọn một dịch vụ lưu trữ nhanh, bạn sẽ thực hiện các đề xuất của PageSpeed Insights sau:
- Giảm thời gian phản hồi của máy chủ (TTFB)
- Cung cấp nội dung tĩnh với chính sách bộ nhớ cache hiệu quả.
2. Sử dụng CDN
Tác động đến hiệu suất: trung bình
CDN giúp bạn giảm khoảng thời gian giữa yêu cầu của người dùng và phản hồi của máy chủ. Khoảng thời gian này là độ trễ. Qua lại giữa yêu cầu trình duyệt và phản hồi của máy chủ là thời gian khứ hồi (RTT).
Nếu người dùng của bạn ở xa vị trí của máy chủ, có thể mất một lúc trước khi tất cả nội dung (ví dụ: hình ảnh, tệp JS và CSS, video) được gửi. Độ trễ và RTT sẽ cao và sẽ ảnh hưởng đến thời gian tải và điểm LCP.
Bạn đã thấy vị trí của máy chủ có thể ảnh hưởng như thế nào đến hiệu suất trang web của bạn.
CDN giải quyết vấn đề nhờ vào mạng lưới máy chủ toàn cầu. Bất kể người dùng của bạn ở đâu. Mỗi khi họ yêu cầu một trang, họ sẽ nhận được nội dung từ máy chủ gần nhất. Đơn giản như vậy.
RocketCDN là cách tốt nhất để cho phép người dùng truy cập trang web của bạn một cách nhanh chóng và dễ dàng.
Nếu bạn muốn biết thêm về lợi ích của CDN và các loại khác nhau, bạn có thể đọc bài viết của chúng tôi.
Chọn CDN sẽ giúp bạn giải quyết các đề xuất Tốc độ trang sau:
- Cung cấp nội dung tĩnh với chính sách bộ nhớ cache hiệu quả
- Bật tính năng nén văn bản.
- Xin lưu ý rằng CDN sẽ chỉ giải quyết các đề xuất như vậy nếu được định cấu hình đúng cách. Các tùy chọn mặc định có thể không đủ để cải thiện hiệu suất như mong đợi.
3. Trì hoãn JavaScript
Tác động đến hiệu suất: cao
Các tài nguyên chặn hiển thị như tệp JavaScript là một trong những nguyên nhân chính gây ra điểm LCP kém.
Trì hoãn các tệp JavaScript sẽ giúp bạn giải quyết vấn đề. Nói cách khác, bạn sẽ thay đổi mức độ ưu tiên của các tệp JS đang được tải.
Nhớ lại? Trình duyệt phân tích cú pháp HTML, xây dựng cây DOM, sau đó hiển thị trang – trừ khi có bất kỳ tài nguyên chặn nào để làm chậm quá trình.
Bằng cách trì hoãn JavaScript, trình duyệt sẽ xử lý và tải các tệp JS chỉ sau khi phân tích cú pháp tài liệu HTML và xây dựng cây DOM. Vì sẽ không có bất kỳ thứ gì để chặn quá trình này, nên việc hiển thị sẽ nhanh hơn nhiều – và chỉ số LCP sẽ được cải thiện.
Bạn có thể thêm thuộc tính trì hoãn vào các tệp JavaScript để trình duyệt có thể phát hiện các tài nguyên để hoãn lại. Trình duyệt sẽ phân tích HTML và xây dựng cây DOM mà không bị gián đoạn.
Dưới đây là một ví dụ về thuộc tính trì hoãn:
<script defer src=”/example-js-script”></script>
Cách dễ nhất để quản lý các tài nguyên JavaScript là tận dụng WP Rocket và tính năng Tải Javascript Deferred của nó.
Bạn có thể chọn tùy chọn này trong tab Tối ưu hóa tệp. Hơn nữa, bạn có thể dễ dàng loại trừ các tệp JS cụ thể bị hoãn lại – trong trường hợp tính năng hoãn lại xung đột với bất kỳ tệp nào.
4. Loại bỏ JavaScript không được sử dụng
Tác động đến hiệu suất: trung bình
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:
1. 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.
2. 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”.
Điểm LCP của bạn sẽ được tăng thêm một lần nữa.
5. 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
Tác động đến hiệu suất: trung bình
Đố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.
6. Giảm thiểu các tệp CSS và JS
Tác động đến hiệu suất: thấp
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ồ.
7. Tối ưu hóa hình ảnh của bạn
Tác động đến hiệu suất: cao
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ồ.
8. Nén tệp văn bản
Tác động đến hiệu suất: cao
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”.
9. Sử dụng Tải trước cho Nội dung Quan trọng (Như Hình ảnh LCP)
Tác động đến hiệu suất: thấp
Tại thời điểm này, bạn biết mức độ quan trọng của nội dung trong màn hình đầu tiên để có điểm hiệu suất tốt. Các tài nguyên quan trọng này có thể là phông chữ, hình ảnh, video, tệp CSS hoặc JavaScript.
Để cải thiện điểm LCP của mình, bạn phải luôn làm cho các nội dung quan trọng tải nhanh nhất có thể.
Vì vậy, bạn có thể tự hỏi làm thế nào để tải trước hình ảnh LCP.
Tùy chọn Tải trước có ích. Nó yêu cầu trình duyệt ưu tiên tải các tài nguyên này. Nói cách khác, Tải trước ngăn trình duyệt phát hiện và tải các tệp quan trọng này (bao gồm cả hình ảnh LCP) cho đến sau này.
Bạn có thể bao gồm rel = ”preload” trong mã:
<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>
Để tải trước hình ảnh LCP, bạn cũng có thể sử dụng một plugin như Perfmatters.
Nếu bạn cần tải trước phông chữ, bạn có thể tận dụng tính năng WP Rocket:
Bạn có thể đọc thêm về các phương pháp hay nhất để tải trước phông chữ web trong bài viết chuyên dụng của chúng tôi.
Bằng cách sử dụng tải trước cho các nội dung quan trọng, bạn sẽ giải quyết được đề xuất Tốc độ trang “Tải trước yêu cầu khóa”.
10. Thiết lập sớm các kết nối của bên thứ ba
Tác động đến hiệu suất: thấp ?
Làm cho kết nối của bên thứ ba nhanh hơn là một cách bổ sung để tối ưu hóa hiệu suất LCP của bạn.
Bạn nên sử dụng tùy chọn Preconnect.
Giả sử rằng có một tệp CSS hoặc JS được yêu cầu từ bên thứ ba, chẳng hạn như Facebook hoặc Google Analytics. Trình duyệt sẽ yêu cầu tài nguyên bên ngoài.
Nếu được bật, tùy chọn Preconnect sẽ cho trình duyệt thiết lập kết nối với miền bên ngoài nhanh nhất có thể. Sau đó, trình duyệt sẽ xử lý yêu cầu song song với quá trình kết xuất đang diễn ra.
Bạn có thể bao gồm rel = ”preconnect” trong mã của mình:
<link rel=”preconnect” href=”https://example.com”>.
Thay vào đó, bạn có thể sử dụng một plugin là Perfmatters.
Vì trình duyệt của bạn có thể không hỗ trợ tùy chọn kết nối trước, nên tốt nhất bạn nên triển khai dns-prefetch như một kỹ thuật dự phòng. Sau đó, bạn sẽ giải quyết các tra cứu DNS nhanh hơn. Nói cách khác, các tệp bên ngoài sẽ tải nhanh hơn, đặc biệt là trên các mạng di động.
Bạn có thể thêm rel = ”dns-prefetch” vào mã của mình – dưới dạng một thẻ riêng biệt từ thuộc tính preconnect:
<head>
…
<link rel=”preconnect” href=”https://example.com”>
<link rel=”dns-prefetch” href=”https://example.com”>
</head>
Tab Tải trước của WP Rocket cho phép bạn tìm nạp trước các yêu cầu DNS. Bạn chỉ phải chỉ định các máy chủ bên ngoài được tìm nạp trước:
Bằng cách thiết lập kết nối của bên thứ ba sớm hơn, bạn sẽ 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ủ. Bạn cũng sẽ giải quyết đề xuất Tốc độ trang “Kết nối trước với nguồn bắt buộc”.
Bắt đầu tối ưu hóa điểm LCP của bạn 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!
