- PageSpeed Insights
Bài viết được dịch bởi AI.
뚠뚠멍의 생각들
Đo lường hiệu năng trang web - PerformanceObserver
- Ngôn ngữ viết: Tiếng Hàn Quốc
- Quốc gia tiêu chuẩn: Tất cả các quốc gia
Bài viết được tóm tắt bởi durumis AI
- Việc sử dụng các công cụ đo lường hiệu năng trang web (PageSpeed Insights, Lighthouse) để cải thiện hiệu năng trang web sẽ giúp tăng khả năng hiển thị trên công cụ tìm kiếm, và các chỉ số Web Core Vitals đóng vai trò quan trọng.
- Để cải thiện các chỉ số như CLS, LCP, FCP, FID, chúng ta có thể áp dụng các kỹ thuật như UI Skeleton, tối ưu hóa hình ảnh, loại bỏ các yếu tố chặn hiển thị, tối ưu hóa font web, xử lý JavaScript bất đồng bộ, v.v.
- Bài viết sẽ giới thiệu các phương pháp cải thiện từng chỉ số cùng với các kỹ thuật khác nhau để nâng cao hiệu năng trang web (nén gzip, Web Worker, v.v.). Trong tương lai, chúng tôi sẽ đào sâu hơn vào các nội dung liên quan.
Thông qua trang web do Google cung cấp
bạn có thể dễ dàng đo lường hiệu suất của trang web.
https://pagespeed.web.dev/
để nhập URL và đo lường, hoặc bạn có thể cài đặt Lighthouse dưới dạng tiện ích mở rộng của Chrome để đo lường.
Cải thiện chỉ số mang lại lợi ích gì?
Có thể giúp trang web hiển thị tốt hơn trên công cụ tìm kiếm. SEO thường sử dụng rendering phía server,
nếu các chỉ số hiệu năng trên thấp thì hiệu quả sẽ giảm mạnh.
Cách cải thiện?
Trang web web.dev đã giải thích chi tiết cách cải thiện từng chỉ số.
Đặc biệt, 3 chỉ số đóng góp phần lớn vào điểm số. (Web Core Vitals)
Tôi muốn ghi lại những điều đã thử để cải thiện chỉ số.
Làm cách nào để đo lường cục bộ?
export default () => { if (process.client && 'PerformanceObserver' in window) { let cumulativeLayoutShiftScore = 0; let largestContentfulPaint = 0; let firstInputDelay = 0; let firstContentfulPaint = 0;
// CLS const clsObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); entries.forEach((entry) => { if (!entry.hadRecentInput) { cumulativeLayoutShiftScore += entry.value; } }); }); // LCP const lcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const lastEntry = entries[entries.length - 1]; largestContentfulPaint = lastEntry.startTime; }); // FID const fidObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const firstEntry = entries[0]; firstInputDelay = firstEntry.processingStart - firstEntry.startTime; }); // FCP const fcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const firstEntry = entries[0]; firstContentfulPaint = firstEntry.startTime; }); clsObserver.observe({ type: 'layout-shift', buffered: true }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); fidObserver.observe({ type: 'first-input', buffered: true }); fcpObserver.observe({ type: 'paint', buffered: true }); window.addEventListener('onload', () => { console.log('Final CLS Score:', cumulativeLayoutShiftScore); console.log('LCP:', largestContentfulPaint); console.log('FID:', firstInputDelay); console.log('FCP:', firstContentfulPaint); }); } };
Chèn đoạn mã trên. Đối với Nuxt, hãy đặt nó vào plugins và kiểm tra nhật ký console.
Cumulative Layout Shift (CLS)
Đo lường mức độ thay đổi bố cục khi trang web được hiển thị.
Ví dụ, giả sử có một trang web hiển thị hình ảnh có kích thước 400x400 sau khi nhận được URL hình ảnh từ phản hồi API,
vị trí của một số bố cục sẽ bị đẩy lùi 400px khi hình ảnh được hiển thị.
Đây là một chuyển động không mong muốn của người dùng, không chỉ ảnh hưởng xấu đến trải nghiệm người dùng mà còn ảnh hưởng gián tiếp đến trình duyệt khi hiển thị màn hình.
ảnh hưởng gián tiếp đến việc hiển thị màn hình của trình duyệt.
Có 2 cách đơn giản để cải thiện.
1. Áp dụng bộ khung UI
- Hầu hết các trang web đều vẽ khung xương phù hợp với kích thước hình ảnh hoặc thành phần. Hãy xem xét điều này khi phát triển màn hình. Đối với Vue, sử dụng v-if và v-else để vẽ khung xương cho từng yếu tố.
2. Đặt trước chiều cao
- Nếu bộ khung xương có quá nhiều kiểu, việc bảo trì sẽ trở nên phức tạp và có thể phản tác dụng. Chỉ cần đặt min-height cho các phần tử sắp được hiển thị cũng có thể mang lại hiệu quả.
- Trong trường hợp kích thước hình ảnh khác nhau trên các thiết bị, chẳng hạn như web phản hồi, việc đặt chiều cao cố định là khó khăn. Trong trường hợp này, bạn có thể sử dụng thiết bị nhỏ nhất làm tiêu chuẩn hoặc sử dụng vh hoặc vw.
3. Khai báo rõ ràng thuộc tính width và height cho thẻ hình ảnh
- Bạn có thể thêm thuộc tính width và height vào thẻ hình ảnh như sau:
<img src="image.jpg" width="400" height="400">
Ngay cả khi kích thước thực tế của hình ảnh không phải là 400x400, điều này sẽ cho trình duyệt biết kích thước dự kiến của hình ảnh.
4. Sử dụng font-display: swap để ngăn chặn sự thay đổi bố cục do font web gây ra
- Hiển thị font thay thế để ngăn chặn sự dịch chuyển bố cục.
Largest Contentful Paint(LCP)
Thời gian hiển thị của phần tử chiếm nhiều diện tích nhất trên màn hình. Thông thường, đó sẽ là hình ảnh, và một cách trực quan là tăng tốc độ tải.
1. Giảm kích thước hình ảnh.
- Kiểm tra xem kích thước hình ảnh có lớn hơn kích thước hiển thị hay không.
- Tối ưu hóa việc hiển thị hình ảnh bằng các phần mở rộng như webp. Webp có kích thước nhỏ hơn JPEG khoảng 30% khi sử dụng nén có mất mát và nhỏ hơn PNG khoảng 20% khi sử dụng nén không mất mát.
- Bạn cũng có thể xem xét tải lười (lazy loading) dựa trên vị trí cuộn.
2. Sử dụng bộ nhớ đệm hoặc CDN.
3. Loại bỏ các yếu tố chặn hiển thị.
- Hầu hết các chỉ số đo lường đều bị ảnh hưởng, vì vậy hãy chắc chắn loại bỏ chúng. Khi hiển thị màn hình, trình duyệt tải các script trong thẻ head trước, sau đó mới hiển thị, vì vậy hãy kiểm tra xem các script trong thẻ head (thường là script bên ngoài) có cần được hiển thị trước hay không. Bạn có thể dễ dàng quản lý chúng bằng cách sử dụng các thẻ async và defer.
* Tôi sẽ viết một bài viết khác về các thuộc tính script trong thẻ head.
4. Thu nhỏ kích thước bundle.
- Ngoài tốc độ hiển thị hình ảnh, nếu tốc độ truyền từ server chậm, bạn cần cải thiện điều này.
Nếu bạn sử dụng proxy server như nginx, bạn có thể sử dụng nén gzip.
* Tôi sẽ viết một bài viết khác về cấu hình nginx.
First Contentful Paint(FCP)
Thời điểm nội dung đầu tiên trên trang web được hiển thị.
1. Tương tự, loại bỏ các yếu tố chặn hiển thị.
2. Thu nhỏ kích thước HTML.
- Việc lồng nhau quá nhiều thẻ div có thể tạo ra một cây rất phức tạp và làm tăng kích thước tệp.
3. Font web bên ngoài có thể là nguyên nhân. Hãy sử dụng tích cực font-display: swap; để hiển thị font mặc định trước.
First Input Delay(FID)
Thời gian trình duyệt xử lý đầu vào đầu tiên của người dùng trên trang web (như nhấp chuột, cuộn…). Đôi khi, bạn có thể thấy nút không phản hồi khi nhấp vào, nhưng thực ra nó không bị treo mà đang chờ phản hồi từ API.
1. Sử dụng tốt tính năng bất đồng bộ để ngăn luồng chính của JavaScript bị ràng buộc bởi các tác vụ nặng.
2. Sử dụng Web Worker để thực hiện các tác vụ khác ngoài luồng chính.
* Tôi sẽ viết một bài viết khác về Web Worker.
Do giới hạn số lượng từ nên tôi xin phép kết thúc tại đây.
