Hiệu suất web- từ 27 đến 99

May 01 2023

Mang lại trải nghiệm người dùng tuyệt vời là yếu tố chính để cải thiện lưu lượng khách hàng đến trang web và doanh nghiệp của bạn. Blog này chứa danh sách những việc tôi đã làm để cải thiện chất lượng và hiệu suất của trang web NextJS của mình.

Mang lại trải nghiệm người dùng tuyệt vời là yếu tố chính để cải thiện lưu lượng khách hàng đến trang web và doanh nghiệp của bạn.

Blog này chứa danh sách những việc tôi đã làm để cải thiện chất lượng và hiệu suất của trang web NextJS của mình.

Hiệu suất web- từ 27 đến 99

Tôi đã sử dụng PageSpeed Insights để kiểm tra trang web của mình. Nó phân tích trang web theo bốn loại: Hiệu suất, Khả năng truy cập, Thực tiễn Tốt nhất và SEO.

Hiệu suất:

Hiệu suất được tính toán dựa trên năm ma trận:
1. Nét vẽ nội dung đầu tiên (FCP)— Thời gian cho văn bản hoặc hình ảnh đầu tiên được vẽ.
2. Hình ảnh có nội dung lớn nhất (LCP) — Thời gian mà văn bản hoặc hình ảnh lớn nhất được vẽ.
3. Tổng thời gian chặn (TBT) — Tổng của tất cả các khoảng thời gian giữa FCP và Thời gian để tương tác, khi độ dài tác vụ vượt quá 50 mili giây, được biểu thị bằng mili giây.
4. Dịch chuyển bố cục tích lũy (CLS) — Dịch chuyển bố cục tích lũy đo chuyển động của các phần tử hiển thị trong chế độ xem.
5. Chỉ số tốc độ (SI)— Nó cho biết nội dung của một trang được hiển thị nhanh như thế nào

Ngưỡng điển hình cho các ma trận này:
Nguồn:https://developers.google.com/speed/docs/insights/v5/about#categories

Ngưỡng hiệu suất

Các bước tôi đã thực hiện để cải thiện hiệu suất:

Thẻ meta chế độ xem —
Thẻ meta chế độ xem kiểm soát chiều rộng và tỷ lệ của chế độ xem để trang web có kích thước chính xác trên tất cả các thiết bị. Nếu không có thẻ meta chế độ xem, thiết bị di động sẽ hiển thị các trang ở độ rộng màn hình máy tính để bàn thông thường và sau đó thu nhỏ các trang lại.
Tôi đã thêm thẻ viewport vào phần đầu của tài liệu:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Thẻ hình ảnh NextJS - hiển thị srcset với hình ảnh có độ rộng khác nhau

Trên màn hình đầu tiên cũng được sử dụng trong thiết kế trang web (cùng với “phía trên cuộn”) để chỉ phần của trang web có thể nhìn thấy mà không cần cuộn.
- nguồn: Wikipedia

Theo mặc định, Hình ảnh NextJS được tải chậm. Nếu hình ảnh nằm trong màn hình đầu tiên, quá trình tải chậm có thể gây ra hai hiệu ứng:
a) Thêm độ trễ cho Hình ảnh có nội dung lớn nhất (LCP)
b) Gây ra Dịch chuyển bố cục tích lũy khi tải hình ảnh.
Để giảm thiểu điều này, tôi đã thêm thuộc tính ưu tiên vào Hình ảnh. Nó giúp NextJS ưu tiên tải hình ảnh đó.

4. Giảm kích thước hình ảnh —
Bất cứ khi nào có thể, hãy sử dụng hình ảnh có kích thước nhỏ. Chúng tôi có thể sử dụng WebP hoặc SVG thay vì PNG và JEPG.

5) Tải chậm tài nguyên của bên thứ ba —
Các nội dung nhúng của bên thứ ba, chẳng hạn như video YouTube, không cần thiết ngay sau khi tải trang, có thể được tải chậm. Phương pháp điển hình để tương tác với nhúng là:
a) Thêm phần tử tĩnh (mặt tiền) trông giống như nhúng thực tế vào trang khi tải.
b) Khi người dùng di chuột qua mặt tiền, nó sẽ tải tài nguyên của bên thứ ba
c) Khi người dùng nhấp vào mặt tiền, nó sẽ thay thế bằng phần nhúng thực tế.
Để biết thêm chi tiết về điều này, bạn có thể tham khảo tài liệu tại đây .
Tôi đã sử dụng gói npm lite-youtube-embed .

<Script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@justinribeiro/[email protected]/lite-youtube.js"
 />

...

<lite-youtube videoid={videoid} />

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

import { Roboto } from 'next/font/google';
import '../styles/globals.scss';

const roboto = Roboto({ subsets: ['latin'], weight: ['400', '500', '600'] });

export default function App({ Component, pageProps }) {
  return (
    <main className={roboto.className}>
      <Component {...pageProps} />
    </main>
  );
}

Nội dung trang web phải có thể truy cập được đối với tất cả các loại người dùng (ngay cả người dùng khuyết tật). Chúng ta có thể kiểm tra tên khả năng truy cập của bất kỳ phần tử nào bằng cách sử dụng các công cụ dành cho nhà phát triển: (nhấp chuột phải → Kiểm tra → Khả năng truy cập)

Ngăn trợ năng trong các công cụ dành cho nhà phát triển

Một số điểm tôi đã kiểm tra và các công cụ tôi đã sử dụng như sau:

Độ tương phản màu —
Màu nền và màu nền trước phải có đủ độ tương phản để có thể đọc được rõ ràng. Tôi đã sử dụng tiện ích chrome 'Bộ kiểm tra độ tương phản màu' cho việc này.

Trình kiểm tra độ tương phản màu

3. [lang] —
Thẻ Html phải được xác định thuộc tính ngôn ngữ. Nếu nó bị thiếu, trình đọc màn hình sẽ cho rằng trang này ở ngôn ngữ mặc định của người dùng.

<Html lang="en">
  <Head />
  <body>
    <Main />
    <NextScript />
  </body>
</Html>

Bản đồ tiêu đề

5. ID và nhãn —
Mỗi phần tử phải có một ID duy nhất. Nó giúp xác định các yếu tố trên trang. Tất cả các phần tử biểu mẫu phải có nhãn.

Thực hành tốt nhất:

Điểm 'Các phương pháp hay nhất' đã cao nên tôi không phải thay đổi bất kỳ điều gì cụ thể, nhưng, một số yếu tố cần xem xét là:

Trang web phải được bảo vệ bằng HTTPS.
Hình ảnh phải được hiển thị với tỷ lệ khung hình chính xác.
Định dạng mã hóa ký tự nên được đưa vào. trong <Head> của tài liệu (càng cao càng tốt)
<meta charset="UTF-8">
Lỗi không nên đăng nhập vào bảng điều khiển.
Nên tránh viết hoa trừ khi đó là viết tắt. Để hiển thị văn bản ở dạng chữ hoa, hãy sử dụng biến đổi văn bản CSS.

Tối ưu hóa công cụ tìm kiếm là một trong những yếu tố quan trọng nhất để cải thiện chuyển đổi lưu lượng truy cập. Một số điều để nâng cao xếp hạng SEO là: