Skip to content

Latest commit

 

History

History
714 lines (499 loc) · 53 KB

README.md

File metadata and controls

714 lines (499 loc) · 53 KB
Raw


Front-End Performance Checklist

  Front-End Performance Checklist  

🎮 Front-End Performance Checklist giúp trang web bạn chạy nhanh hơn.

Một quy tắc đơn giản: "Luôn nghĩ về hiệu suất khi thiết kế và viết code"

      PRs Welcome         Discord           Licence MIT  

  Cách sử dụng • Đóng góp • Lộ trình • Tìm sản phẩm

🇨🇳 🇫🇷 🇰🇷 🇵🇹 🇷🇺

Checklists khác:
🗂 Front-End Checklist • 💎 Front-End Design Checklist

Mục lục

  1. HTML
  2. CSS
  3. Fonts
  4. Images
  5. JavaScript
  6. Server (in progress)
  7. JS Frameworks (in progress)

Giới thiệu

Hiệu suất là một chủ đề lớn, nhưng nó không phải lúc nào cũng là chủ đề liên quan "back-end" hoặc "admin": mà nó cũng là trách nhiệm của Front-End. Danh sách kiểm tra hiệu suất Front-End là một danh sách đầy đủ các yếu tố bạn nên kiểm tra hoặc ít nhất là bạn biết về nó, như một Front-End developer và áp dụng cho dự án của bạn (cá nhân và chuyên nghiệp).

Cách sử dụng?

Đối với mỗi quy tắc, bạn sẽ có một đoạn giải thích tại sao và cách bạn có thể sửa nó quy tắc này là quan trọng . Để biết thêm thông tin chi tiết, bạn nên tìm các liên kết trỏ tới 🛠 công cụ, 📖 bài viết hoặc 📹 phương tiện có thể hoàn thành danh sách kiểm tra.

Tất cả các mục trong Danh sách kiểm tra hiệu suất Front-End là yếu tố cần thiết để đạt được điểm số hiệu suất cao nhất nhưng bạn sẽ tìm thấy chỉ dẫn để giúp bạn biết được mức độ ưu tiên các quy tắc khác nhau. Có 3 mức độ ưu tiên:

  • Low có nghĩa là mục này có mức độ ưu tiên thấp.
  • Medium có nghĩa là mục này có độ ưu tiên trung bình. Bạn nên giải quyết vấn đề của mục đó.
  • High có nghĩa là mục này có độ ưu tiên cao. Bạn không thể tránh tuân theo quy tắc đó và giải quyết theo cách được khuyến nghị.

Công cụ đánh giá hiệu suất

Danh sách các công cụ bạn có thể sử dụng để kiểm tra hoặc theo dõi trang web hoặc ứng dụng của bạn:

Tài liệu tham khảo

HTML

html

  • Minified HTML: medium Mã HTML được rút gọn, các chú thích, các khoảng trống và các dòng mới được xóa khỏi các file trên bản product.

    Tại sao:

    Xóa tất cả các khoảng trống, nhận xét và ngắt dòng không cần thiết sẽ giảm kích thước HTML của bạn và tăng tốc thời gian tải trang của trang web của bạn và rõ ràng làm giảm thời gian tải xuống cho người dùng của bạn.

    Cách làm:

    Hầu hết các framework đều có các plugin để giúp tối giản hóa các trang web. Bạn có thể sử dụng một loạt các mô-đun NPM có thể thực hiện công việc cho bạn một cách tự động.

  • Xóa nhận xét không cần thiết: low Đảm bảo rằng các nhận xét được xóa khỏi các trang của bạn.

    Tại sao:

    Comments are not really useful for the user and should be removed from production files. One case where you want to keep comments could be if you need to keep the origin for a library.

    Cách làm:

    ⁃ Phần lớn các nhận xét có thể được xóa bằng cách sử dụng plugin rút gọn HTML.

  • Loại bỏ các thuộc tính không cần thiết: low Các thuộc tính type như type="text/javascript" hoặc type="text/css" không cần thiết nữa và sẽ bị xóa.

    <!-- Before HTML5 -->
<script type="text/javascript">
    // JavaScript code
</script>

<!-- Today -->
<script>
    // JavaScript code
</script>

    Tại sao:

    Các thuộc tính type không cần thiết vì HTML5 ngụ ý text/css và text/javascript là các giá trị mặc định. Code không sử dụng sẽ bị xóa khi không được trang web hoặc ứng dụng của bạn vì sử dụng chúng thì sẽ các trang của bạn nặng thêm. Cách làm: ⁃ Đảm bảo rằng tất cả các thẻ <link> và <script> không có bất kỳ thuộc tính type nào

  • Luôn đặt thẻ CSS trước thẻ JavaScript: high Đảm bảo rằng CSS của bạn luôn được tải trước khi có mã JavaScript.

    <!-- Không nên làm -->
<script src="jquery.js"></script>
<script src="foo.js"></script>
<link rel="stylesheet" href="foo.css"/>

<!-- Nên làm -->
<link rel="stylesheet" href="foo.css"/>
<script src="jquery.js"></script>
<script src="foo.js"></script>

    Tại sao:

    Thẻ CSS của bạn ở trước khi bất kỳ thẻ JavaScript nào giúp cho việc tải xuống song song tốt hơn, giúp tăng tốc thời gian hiển thị của trình duyệt.

    Cách làm:

    ⁃ Đảm bảo rằng các thẻ <link> và <style> ở trong <head> của bạn luôn ở trước thẻ <script>.

  • Giảm số lượng các iframe: high Chỉ sử dụng iframe nếu bạn không có bất kỳ cách nào khác để thay thế. Cố gắng tránh iframe nhiều nhất có thể ⬆ back to top

CSS

css

  • Minification: high Tất cả các tệp CSS được rút gọn, nhận xét, khoảng trắng và các dòng mới được xóa khỏi tệp product

    Tại sao:

    Khi các tệp CSS được rút gọn, nội dung được tải nhanh hơn và ít dữ liệu hơn được gửi đến máy khách. Điều quan trọng là luôn luôn giảm thiểu các tệp CSS trong quá trình làm sản phẩm. Nó có lợi cho người dùng vì nó là dành cho bất kỳ doanh nghiệp nào muốn giảm chi phí băng thông và sử dụng tài nguyên thấp hơn.

    Cách làm:

    ⁃ Sử dụng các công cụ để tự động rút gọn các tệp của bạn trước hoặc trong quá trình build hoặc deploy.

  • Concatenation: medium Các tệp CSS được nối vào một tệp (Not always valid for HTTP/2).

    <!-- Không nên -->
<link rel="stylesheet" href="foo.css"/>
<link rel="stylesheet" href="bar.css"/>

<!-- Nên -->
<link rel="stylesheet" href="foobar.css"/>

    Tại sao:

    Nếu bạn vẫn đang sử dụng HTTP/1, bạn có thể vẫn cần ghép nối các tệp của mình, nó sẽ không đúng nếu máy chủ của bạn sử dụng HTTP/2 (các thử nghiệm nên được thực hiện)

    Cách làm:

    ⁃ Sử dụng công cụ trực tuyến hoặc bất kỳ plugin nào trước hoặc trong quá trình build hoặc deploy của bạn để ghép nối các tệp của bạn.
    ⁃ Đảm bảo và chắc chắn rằng việc ghép nối không phá vỡ dự án của bạn.

  • Non-blocking: high Tệp CSS cần phải không bị chặn để ngăn DOM mất thời gian tải.

    <link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="global.min.css"></noscript>

    Tại sao:

    Tệp CSS có thể chặn tải trang và trì hoãn hiển thị trang của bạn. Sử dụng preload thực sự có thể giúp tải các tệp CSS trước khi trình duyệt bắt đầu hiển thị nội dung của trang. Cách làm: ⁃ Bạn cần thêm thuộc tính rel với giá trị preload và thêm as =" style " vào phần tử <link>.

  • Độ dài của các class CSS: low Độ dài của các class của bạn có thể có tác động (nhẹ) trên các tệp HTML và CSS của bạn. Tại sao:

    Ngay cả các tác động hiệu suất có thể bị tranh chấp, đưa ra quyết định về việc đặt tên liên quan đến dự án của bạn có thể có tác động đáng kể đến khả năng bảo trì của stylesheets của bạn. Nếu bạn đang sử dụng BEM, trong một số trường hợp, bạn có thể kết thúc với các class có nhiều ký tự hơn mức cần thiết. Việc chọn một tên và không gian tên phù hợp của bạn luôn là điều quan trọng.

    Cách làm:

    Đặt giới hạn về số lượng ký tự có thể thú vị đối với một số người, nhưng đảm bảo rằng bạn đã phá vỡ trang web của bạn trong các component có thể giúp giảm số lượng lớp (và khai báo) và độ dài của các class.

  • CSS không sử dụng: medium Xóa các selector CSS không sử dụng

    Tại sao:

    Việc xóa selector CSS không được sử dụng có thể giảm kích thước tệp của bạn và sau đó tăng tốc việc tải nội dung của bạn.

    Cách làm:

    ⁃ ⚠️ Hãy luôn luôn kiểm tra nếu framework CSS bạn muốn sử dụng không chứa code chuẩn hóa/reset. Thỉnh thoảng bạn không cần mọi thứ đặt ở trong file reset/chuẩn hóa.

  • CSS được nhúng hoặc nội tuyến: high được nhúng hoặc nội tuyếnbên trong <body> (Không hợp lệ cho HTTP/2)

    Tại sao:

    Một trong những lý do đầu tiên bởi vì đó là một cách hay để phân tách nội dung từ thiết kế. Nó cũng giúp bạn có code dễ bảo trì hơn và giữ cho trang web của bạn có thể truy cập được. Nhưng liên quan đến hiệu suất, nó đơn giản chỉ vì nó làm giảm kích thước tập tin của các trang HTML của bạn và thời gian tải. Cách làm: Luôn sử dụng stylesheets bên ngoài hoặc nhúng CSS vào trong thẻ <head>của bạn (và thực hiện theo các quy tắc hiệu suất CSS khác)

  • Phân tích các stylesheet phức tạp: high Phân tích stylesheets của bạn có thể giúp bạn gắn cờ các vấn đề, dư thừa và selector CSS trùng lặp.

    Tại sao:

    Đôi khi bạn có thể có lỗi thừa hoặc lỗi xác thực trong CSS, phân tích các tệp CSS của bạn và xóa những phức tạp này có thể giúp bạn tăng tốc các tệp CSS của mình (vì trình duyệt của bạn sẽ đọc nhanh hơn)

    Cách làm:

    CSS của bạn nên được tổ chức, bằng cách sử dụng một bộ tiền xử lý CSS có thể giúp bạn làm điều đó. Một số công cụ trực tuyến được liệt kê bên dưới cũng có thể giúp bạn phân tích và sửa code của bạn.

⬆ back to top

Fonts

fonts

  • Ngăn chặn Flash hoặc text ẩn: medium Tránh các loại text màu trong suốt đến khi Webfont được tải.

⬆ back to top

Hình Ảnh

images

  • Sử dụng các hình ảnh vector thay cho raster/bitmap: medium Nên sử dụng hình ảnh vector thay vì hình ảnh bitmap (nếu có thể).

    Tại sao:

    Hình ảnh vector (SVG) có xu hướng nhỏ hơn hình ảnh và SVG có độ nhạy và tỷ lệ hoàn hảo. Những hình ảnh này có thể được tạo và chỉnh sửa bởi CSS.

  • Kích thước hình ảnh: medium Đặt thuộc tính width và height trên <img> nếu kích thước hình ảnh được hiển thị cuối cùng được xác định.

    Tại sao:

    Nếu chiều cao và chiều rộng được đặt, không gian cần thiết cho hình ảnh được đặt trước khi trang được tải. Tuy nhiên, không có các thuộc tính này, trình duyệt không biết kích thước của hình ảnh và không thể đặt trước khoảng trống thích hợp cho nó. Hiệu ứng sẽ làm bố cục trang sẽ thay đổi trong khi tải (trong khi tải hình ảnh).

  • Tránh sử dụng hình ảnh Base64: medium Cuối cùng, bạn có thể chuyển đổi những hình ảnh nhỏ thành base64 nhưng nó thực sự không phải là cách tốt nhất.

  • Lazy loading: medium Hình ảnh offscreen được tải lazily (Một dự phòng noscript luôn luôn được cung cấp)

    Tại sao:

    Nó sẽ cải thiện thời gian phản hồi của trang hiện tại và sau đó tránh tải các hình ảnh không cần thiết mà người dùng có thể không cần.

    Cách làm:

    ⁃ Sử dụng Lighthouse để xác định có bao nhiêu hình ảnh cho offscreen.
    ⁃ Sử dụng plugin JavaScript như sau để tải hình ảnh của bạn xuống. Đảm bảo bạn chỉ cần những hình ảnh đó.
    ⁃ Ngoài ra, hãy đảm bảo tải xuống các hình ảnh thay thế được hiển thị khi di chuột qua hoặc các hành động của người dùng khác.

  • Responsive images: medium Đảm bảo rằng hình ảnh phù hợp với kích thước hiển thị của bạn.

    Tại sao:

    Các thiết bị nhỏ không cần hình ảnh lớn so với kích thước của chúng. Bạn nên có nhiều phiên bản của một hình ảnh trên các kích thước khác nhau.

    Cách làm:

    ⁃ Tạo các kích thước hình ảnh khác nhau cho các thiết bị bạn muốn nhắm đến.
    ⁃ Sử dụng srcset và picture để phân phối nhiều biến thể của mỗi hình ảnh.

⬆ back to top

JavaScript

javascript

  • Giảm thiểu JS: high ất cả các tệp JavaScript được rút gọn, nhận xét, khoảng trắng và dòng mới sẽ bị xóa khỏi tệp product (vẫn hợp lệ nếu sử dụng HTTP/2).

    Tại sao:

    Xóa tất cả khoảng trắng, nhận xét và ngắt dòng không cần thiết sẽ giảm kích thước tệp JavaScript của bạn và tăng tốc thời gian tải trang của trang web của bạn và rõ ràng làm giảm thời gian tải xuống cho người dùng của bạn.

    Cách làm:

    ⁃ Sử dụng các công cụ được đề xuất bên dưới để tự động giảm thiểu các tệp của bạn trước hoặc trong quá trình build hoặc deploy.

  • Không JavaScript bên trong: medium (Chỉ hợp lệ cho trang web) Tránh có nhiều mã JavaScript được nhúng ở giữa phần body của bạn. Tập hợp lại mã JavaScript của bạn bên trong các tệp bên ngoài hoặc ở cuối cùng trong thẻ <head> hoặc ở cuối trang của bạn (trước thẻ </ body>).

    Tại sao:

    Đặt mã nhúng JavaScript trực tiếp vào <body> có thể làm chậm trang của bạn vì nó tải trong khi DOM đang được xây dựng. Cách tốt nhất là sử dụng các tệp bên ngoài với async hoặc defer để tránh chặn DOM. Một cách khác là đặt một số tập lệnh bên trong <head> của bạn. Hầu hết mã phân tích thời gian hoặc tập lệnh nhỏ cần tải trước khi DOM được xử lý chính.

    Cách làm:

    Đảm bảo rằng tất cả các tệp của bạn được tải bằng cách sử dụng async hoặc defer và tìm cách tốt nhất để thêm code vào thẻ <head>.

  • Không chặn JavaScript: high Các tệp JavaScript được tải không đồng bộ bằng cách sử dụng 'asynchoặc được hoãn lại bằng thuộc tínhdefer`

    <!-- Defer Attribute -->
<script defer src="foo.js"></script>

<!-- Async Attribute -->
<script async src="foo.js"></script>

    Tại sao:

    avaScript chặn phân tích cú pháp bình thường của tài liệu HTML, vì vậy khi trình phân tích cú pháp tiếp cận một thẻ <script> (đặc biệt là bên trong <head>), nó dừng lại để tìm nạp và chạy nó. Việc thêm async hoặc defer được khuyến khích cao nếu các tập lệnh của bạn được đặt ở đầu trang nhưng ít có giá trị hơn nếu chỉ trước thẻ </ body> của bạn. Nhưng tốt hơn là luôn sử dụng các thuộc tính này để tránh bất kỳ vấn đề về hiệu suất nào.

    Cách làm:

    ⁃ Thêm async (nếu script này không dựa vào các script khác) hoặc defer (nếu script này dựa vào một script không đồng bộ) như một thuộc tính cho thẻ script của bạn.
    ⁃ Nếu bạn có những đoạn script nhỏ, có thể sử dụng script dạng inline được đặt ở trên các script bất đồng bộ.

  • Tối ưu và cập nhật thư viện JS: medium Tất cả các thư viện JavaScript được sử dụng trong dự án của bạn là cần thiết (chọn JavaScript của Vanilla cho các chức năng đơn giản), được cập nhật lên phiên bản mới nhất của chúng và không áp đảo JavaScript của bạn với các phương thức không cần thiết

    Tại sao:

    ầu hết thời gian, các phiên bản mới đều được tối ưu hơn và sửa các lỗi bảo mật. Bạn nên sử dụng hầu hết phần code đã được tối ưu cho tốc độ tăng lên vào project của bạn và đảm bảo bạn sẽ không làm website hay ứng dụng bị chậm đi bởi các plugin quá hạn.

    Cách làm:

    Nếu dự án của bạn sử dụng các gói NPM, npm-check là một thư viện khá thú vị để nâng cấp / cập nhật thư viện của bạn. Greenkeeper có thể tự động tìm kiếm các phụ thuộc của bạn và đề xuất thời gian cập nhật mọi phiên bản mới

⬆ back to top

Server

server-side

  • Trang web của bạn sử dụng HTTPS: high

    Tại sao:

    HTTPS không chỉ dành cho các trang web thương mại điện tử mà còn cho tất cả các trang web đang trao đổi dữ liệu. Dữ liệu được chia sẻ bởi người dùng hoặc dữ liệu được chia sẻ với một thực thể bên ngoài. Các trình duyệt hiện đại giới hạn chức năng cho các trang web không an toàn. . Ví dụ như: vị trí địa lý, đẩy các thông báo và các service worker không hoạt động nếu sản phẩm của bạn không sử dụng HTTPS. Và ngày nay đã rất dễ dành để cài đặt một project với xác thực SSL so với trước kia (và nó còn miễn phí, cảm ơn Let's Encrypt).

  • Giảm thiểu các request HTTP: high Luôn đảm bảo rằng mọi tệp được yêu cầu đều cần thiết cho trang web hoặc ứng dụng của bạn.
  • Sử dụng CDN để phân phối nội dung của bạn: medium Sử dụng CDN để phân phối nội dung của bạn nhanh hơn trên toàn thế giới.
  • Phân phối tệp từ cùng một giao thức: high Tránh để trang web của bạn phân phát tệp đến từ nguồn bằng cách sử dụng HTTP trên trang web của bạn đang sử dụng HTTPS chẳng hạn. Nếu trang web của bạn đang sử dụng HTTPS, các tệp bên ngoài phải đến từ cùng một giao thức.
  • Serve reachable files: high Tránh yêu cầu các tệp không thể truy cập (404).
  • Đặt tiêu đề bộ nhớ cache HTTP đúng cách: high Đặt tiêu đề HTTP để tránh số lượng vòng lặp cao giữa trình duyệt và máy chủ của bạn.
  • ** Bật nén GZIP / Brotli:** high Sử dụng phương pháp nén như Gzip hoặc Brotli để giảm kích thước tệp JavaScript của bạn. Với tệp kích thước nhỏ hơn, người dùng sẽ có thể tải xuống nội dung nhanh hơn, dẫn đến hiệu suất được cải thiện.

⬆ back to top

Performances và JS Frameworks

Angular

React

Vue

Performances and CMS

WordPress

Các bài viết

Plugins đươc đề xuất

Bản dịch

Front-End Performance Checklist cũng muốn có các bản dịch bằng các ngôn ngữ khác! Đừng ngần ngại gửi đóng góp của bạn!

Đóng góp

Mở một issue hoặc một pull request để đề xuất thay đổi hoặc bổ sung.

Hỗ trợ

Nếu bạn có bất kỳ câu hỏi hoặc gợi ý nào, đừng ngại kết nối với tôi qua Discord hoặc Twitter:

Tác giả

Được xây dựng bởi ❤️ David Dias at @influitive 🇨🇦

Cộng tác viên

Dự án này tồn tại nhờ tất cả những người đóng góp. [Contribute].

Người ủng hộ

Cảm ơn tất cả những người ủng hộ chúng tôi! 🙏 [Become a backer]

Nhà tài trợ

Hỗ trợ dự án này bằng cách trở thành nhà tài trợ. Logo của bạn sẽ hiển thị ở đây với một liên kết đến trang web của bạn. [Become a sponsor]

License

MIT

All icons are provided by Icons8

⬆ back to top